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

package/dist/panda.buildinfo.json

@@ -81,6 +81,20 @@
       "direction]___[value:rtl]___[cond:& p:has(span[dir=\"rtl\"])",
       "alignSelf]___[value:flex-start",
       "marginInlineStart]___[value:3xsmall",
+      "borderRadius]___[value:0",
+      "width]___[value:4xsmall",
+      "height]___[value:4xsmall",
+      "background]___[value:unset",
+      "height]___[value:unset",
+      "paddingBlockEnd]___[value:0",
+      "boxShadow]___[value:xsmall",
+      "background]___[value:surface.brand.1.subtle",
+      "minWidth]___[value:4xlarge",
+      "flexShrink]___[value:0",
+      "textAlign]___[value:center",
+      "marginInlineStart]___[value:auto",
+      "textOverflow]___[value:ellipsis",
+      "whiteSpace]___[value:nowrap",
       "borderBottomRadius]___[value:xsmall",
       "justifyContent]___[value:center",
       "paddingInline]___[value:medium",
@@ -97,8 +111,6 @@
       "gridArea]___[value:track",
       "paddingInline]___[value:xsmall]___[cond:mobileDown",
       "minWidth]___[value:xxlarge",
-      "flexShrink]___[value:0",
-      "textAlign]___[value:center",
       "gridArea]___[value:volume",
       "paddingBlock]___[value:auto",
       "paddingInline]___[value:auto",
@@ -106,9 +118,9 @@
       "maxHeight]___[value:xxlarge",
       "flex]___[value:1]___[cond:& span",
       "gridArea]___[value:speed",
+      "paddingInline]___[value:small",
       "height]___[value:surface.3xsmall",
       "minWidth]___[value:small",
-      "paddingInline]___[value:small",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
       "flexDirection]___[value:column]___[cond:mobileDown",
@@ -316,7 +328,6 @@
       "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
       "display]___[value:none]___[cond:mobileWide",
       "color]___[value:text.link",
-      "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
       "display]___[value:none]___[cond:mobileWideDown<___>_disabled",
       "textDecoration]___[value:underline]___[cond:& h3",
@@ -332,7 +343,6 @@
       "outline]___[value:0px",
       "boxShadow]___[value:none",
       "aspectRatio]___[value:16/9",
-      "height]___[value:unset",
       "gridTemplateColumns]___[value:repeat(2, 1fr)",
       "gridTemplateColumns]___[value:1fr]___[cond:tabletDown",
       "marginBlockStart]___[value:xsmall",

package/dist/styles.css

@@ -182,6 +182,14 @@
     padding: var(--spacing-xsmall);
 }
 
+  .bg_unset {
+    background: unset;
+}
+
+  .bg_surface\.brand\.1\.subtle {
+    background: var(--colors-surface-brand-1-subtle);
+}
+
   .grid-area_play {
     grid-area: play;
 }
@@ -306,6 +314,10 @@
     padding-inline: var(--spacing-xsmall);
 }
 
+  .bdr_0 {
+    border-radius: 0;
+}
+
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -455,13 +467,12 @@
     margin-inline-start: var(--spacing-3xsmall);
 }
 
-  .bdr-b_xsmall {
-    border-bottom-left-radius: var(--radii-xsmall);
-    border-bottom-right-radius: var(--radii-xsmall);
+  .pbe_0 {
+    padding-block-end: 0;
 }
 
-  .jc_center {
-    justify-content: center;
+  .bx-sh_xsmall {
+    box-shadow: var(--shadows-xsmall);
 }
 
   .flex-sh_0 {
@@ -472,6 +483,27 @@
     text-align: center;
 }
 
+  .ms_auto {
+    margin-inline-start: auto;
+}
+
+  .tov_ellipsis {
+    text-overflow: ellipsis;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .bdr-b_xsmall {
+    border-bottom-left-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
   .c_inherit {
     color: inherit;
 }
@@ -662,10 +694,6 @@
     color: var(--colors-text-link);
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .c_icon\.strong {
     color: var(--colors-icon-strong);
 }
@@ -722,6 +750,22 @@
     max-width: var(--sizes-surface-xlarge);
 }
 
+  .w_4xsmall {
+    width: var(--sizes-4xsmall);
+}
+
+  .h_4xsmall {
+    height: var(--sizes-4xsmall);
+}
+
+  .h_unset {
+    height: unset;
+}
+
+  .min-w_4xlarge {
+    min-width: var(--sizes-4xlarge);
+}
+
   .min-w_xxlarge {
     min-width: var(--sizes-xxlarge);
 }
@@ -810,10 +854,6 @@
     width: var(--sizes-surface-3xsmall);
 }
 
-  .h_unset {
-    height: unset;
-}
-
   .before\:inset_0::before {
     inset: 0;
 }

package/es/AudioPlayer/AudioElement.mjs

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/AudioPlayer/AudioElement.tsx
+const AudioElement = (props) => {
+	return /* @__PURE__ */ jsx("audio", {
+		preload: "metadata",
+		...props
+	});
+};
+//#endregion
+export { AudioElement };
+
+//# sourceMappingURL=AudioElement.mjs.map

package/es/AudioPlayer/AudioElement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioElement.mjs","names":[],"sources":["../../src/AudioPlayer/AudioElement.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 { ComponentProps } from \"react\";\n\ninterface Props extends ComponentProps<\"audio\"> {\n  src: string;\n  title: string;\n}\n\nexport const AudioElement = (props: Props) => {\n  // TODO: We should tie this up to the textual description somehow\n  // oxlint-disable-next-line jsx-a11y/media-has-caption\n  return <audio preload=\"metadata\" {...props} />;\n};\n"],"mappings":";;AAeA,MAAa,gBAAgB,UAAiB;AAG5C,QAAO,oBAAC,SAAD;EAAO,SAAQ;EAAW,GAAI;EAAS,CAAA"}

package/es/AudioPlayer/AudioPlayer.mjs

@@ -1,3 +1,4 @@
+import { CompactAudioPlayer } from "./CompactAudioPlayer.mjs";
 import { Controls } from "./Controls.mjs";
 import { SpeechControl } from "./SpeechControl.mjs";
 import { Button, Heading, Text } from "@ndla/primitives";
@@ -92,13 +93,17 @@ const TextVersionText = styled("div", { base: {
 const TextVersionButton = styled(Button, { base: { alignSelf: "flex-start" } });
 const ShowMoreButton = styled(Button, { base: { marginInlineStart: "3xsmall" } });
 const DESCRIPTION_MAX_LENGTH = 200;
-const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }) => {
+const AudioPlayer = ({ src, title, subtitle, variant = "standard", description, img, textVersion }) => {
 	const { t } = useTranslation();
 	const [showTextVersion, setShowTextVersion] = useState(false);
 	const [showFullDescription, setShowFullDescription] = useState(false);
 	const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
 	const textDescriptionId = useId();
-	if (speech) return /* @__PURE__ */ jsx(SpeechControl, {
+	if (variant === "minimal") return /* @__PURE__ */ jsx(SpeechControl, {
+		src,
+		title
+	});
+	if (variant === "compact") return /* @__PURE__ */ jsx(CompactAudioPlayer, {
 		src,
 		title
 	});

package/es/AudioPlayer/AudioPlayer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.mjs","names":[],"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 { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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\nexport const 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"],"mappings":"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"}
+{"version":3,"file":"AudioPlayer.mjs","names":[],"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 { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CompactAudioPlayer } from \"./CompactAudioPlayer\";\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\nexport type AudioPlayerVariant = \"standard\" | \"minimal\" | \"compact\";\n\ninterface Props {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  variant?: AudioPlayerVariant;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n}\n\nexport const AudioPlayer = ({ src, title, subtitle, variant = \"standard\", 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 (variant === \"minimal\") {\n    return <SpeechControl src={src} title={title} />;\n  }\n\n  if (variant === \"compact\") {\n    return <CompactAudioPlayer 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"],"mappings":"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"}

package/es/AudioPlayer/AudioProgress.mjs

@@ -0,0 +1,54 @@
+import { formatTime } from "./audioUtils.mjs";
+import { SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/AudioPlayer/AudioProgress.tsx
+const StyledSliderThumb = styled(SliderThumb, { variants: { variant: {
+	standard: {},
+	simple: {
+		borderRadius: "0",
+		width: "4xsmall",
+		height: "4xsmall"
+	}
+} } });
+const StyledSliderTrack = styled(SliderTrack, { variants: { variant: {
+	standard: {},
+	simple: { background: "unset" }
+} } });
+const StyledSliderControl = styled(SliderControl, { variants: { variant: {
+	standard: {},
+	simple: { height: "unset" }
+} } });
+const AudioProgress = ({ currentTime, duration, onValueChange, variant }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(SliderRoot, {
+		value: [currentTime],
+		defaultValue: [0],
+		step: 1,
+		max: duration,
+		onValueChange,
+		getAriaValueText: (value) => t("audio.valueText", {
+			start: formatTime(Math.round(value.value)),
+			end: formatTime(Math.round(duration))
+		}),
+		children: [/* @__PURE__ */ jsx(SliderLabel, {
+			srOnly: true,
+			children: t("audio.progressBar")
+		}), /* @__PURE__ */ jsxs(StyledSliderControl, {
+			variant,
+			children: [/* @__PURE__ */ jsx(StyledSliderTrack, {
+				variant,
+				children: /* @__PURE__ */ jsx(SliderRange, {})
+			}), /* @__PURE__ */ jsx(StyledSliderThumb, {
+				index: 0,
+				variant,
+				children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
+			})]
+		})]
+	});
+};
+//#endregion
+export { AudioProgress };
+
+//# sourceMappingURL=AudioProgress.mjs.map

package/es/AudioPlayer/AudioProgress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioProgress.mjs","names":[],"sources":["../../src/AudioPlayer/AudioProgress.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  SliderRoot,\n  SliderLabel,\n  SliderControl,\n  SliderTrack,\n  SliderRange,\n  SliderThumb,\n  SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n  currentTime: number;\n  duration: number;\n  onValueChange: (details: SliderValueChangeDetails) => void;\n  variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        borderRadius: \"0\",\n        width: \"4xsmall\",\n        height: \"4xsmall\",\n      },\n    },\n  },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        background: \"unset\",\n      },\n    },\n  },\n});\n\nconst StyledSliderControl = styled(SliderControl, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        height: \"unset\",\n      },\n    },\n  },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <SliderRoot\n      value={[currentTime]}\n      defaultValue={[0]}\n      step={1}\n      max={duration}\n      onValueChange={onValueChange}\n      getAriaValueText={(value) =>\n        t(\"audio.valueText\", {\n          start: formatTime(Math.round(value.value)),\n          end: formatTime(Math.round(duration)),\n        })\n      }\n    >\n      <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n      <StyledSliderControl variant={variant}>\n        <StyledSliderTrack variant={variant}>\n          <SliderRange />\n        </StyledSliderTrack>\n        <StyledSliderThumb index={0} variant={variant}>\n          <SliderHiddenInput />\n        </StyledSliderThumb>\n      </StyledSliderControl>\n    </SliderRoot>\n  );\n};\n"],"mappings":";;;;;;AA6BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,cAAc;EACd,OAAO;EACP,QAAQ;EACT;CACF,EACF,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ,EACN,YAAY,SACb;CACF,EACF,EACF,CAAC;AAEF,MAAM,sBAAsB,OAAO,eAAe,EAChD,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ,EACN,QAAQ,SACT;CACF,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,YAAD;EACE,OAAO,CAAC,YAAY;EACpB,cAAc,CAAC,EAAE;EACjB,MAAM;EACN,KAAK;EACU;EACf,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAO,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;GAC1C,KAAK,WAAW,KAAK,MAAM,SAAS,CAAC;GACtC,CAAC;YAVN,CAaE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,oBAAoB;GAAe,CAAA,EAC1D,qBAAC,qBAAD;GAA8B;aAA9B,CACE,oBAAC,mBAAD;IAA4B;cAC1B,oBAAC,aAAD,EAAe,CAAA;IACG,CAAA,EACpB,oBAAC,mBAAD;IAAmB,OAAO;IAAY;cACpC,oBAAC,mBAAD,EAAqB,CAAA;IACH,CAAA,CACA;KACX"}

package/es/AudioPlayer/CompactAudioPlayer.mjs

@@ -0,0 +1,111 @@
+import { AudioElement } from "./AudioElement.mjs";
+import { formatTime } from "./audioUtils.mjs";
+import { AudioProgress } from "./AudioProgress.mjs";
+import { PlayButton } from "./PlayButton.mjs";
+import { useAudioControls } from "./useAudioControls.mjs";
+import { VolumeSlider } from "./VolumeSlider.mjs";
+import { IconButton, PopoverContent, PopoverRoot, PopoverTitle, PopoverTrigger, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { VolumeUpFill } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/AudioPlayer/CompactAudioPlayer.tsx
+/**
+* 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 AudioContainer = styled("div", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	flexDirection: "column",
+	padding: "xsmall",
+	paddingBlockEnd: "0",
+	borderRadius: "xsmall",
+	boxShadow: "xsmall",
+	background: "surface.brand.1.subtle"
+} });
+const ControlsContainer = styled("div", { base: {
+	display: "flex",
+	gap: "xsmall",
+	alignItems: "center"
+} });
+const StyledText = styled(Text, { base: {
+	minWidth: "4xlarge",
+	flexShrink: "0",
+	textAlign: "center"
+} });
+const StyledIconButton = styled(IconButton, { base: { marginInlineStart: "auto" } });
+const EllipsedText = styled(Text, { base: {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+} });
+const CompactAudioPlayer = ({ src, title }) => {
+	const { t } = useTranslation();
+	const { audioRef, playing, togglePlay, currentTime, duration, handleSliderChange, volumeValue, handleVolumeSliderChange, onEnded, onHandleTime } = useAudioControls();
+	return /* @__PURE__ */ jsxs(AudioContainer, { children: [
+		/* @__PURE__ */ jsx(AudioElement, {
+			ref: audioRef,
+			src,
+			title,
+			onEnded,
+			onLoadedMetadata: onHandleTime,
+			onTimeUpdate: onHandleTime
+		}),
+		/* @__PURE__ */ jsxs(ControlsContainer, { children: [
+			/* @__PURE__ */ jsx(PlayButton, {
+				playing,
+				onClick: togglePlay
+			}),
+			/* @__PURE__ */ jsxs(StyledText, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					textStyle: "label.medium",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) })
+				}),
+				"/ ",
+				/* @__PURE__ */ jsx(Text, {
+					textStyle: "label.medium",
+					color: "text.subtle",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+				})
+			] }),
+			/* @__PURE__ */ jsx(EllipsedText, {
+				textStyle: "title.medium",
+				children: title
+			}),
+			/* @__PURE__ */ jsxs(PopoverRoot, {
+				positioning: { placement: "top" },
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(StyledIconButton, {
+						variant: "tertiary",
+						children: /* @__PURE__ */ jsx(VolumeUpFill, {})
+					})
+				}), /* @__PURE__ */ jsxs(PopoverContent, { children: [/* @__PURE__ */ jsx(PopoverTitle, {
+					srOnly: true,
+					children: t("audio.controls.adjustVolume")
+				}), /* @__PURE__ */ jsx(VolumeSlider, {
+					value: volumeValue,
+					onValueChange: handleVolumeSliderChange
+				})] })]
+			})
+		] }),
+		/* @__PURE__ */ jsx(AudioProgress, {
+			currentTime,
+			duration,
+			onValueChange: handleSliderChange,
+			variant: "simple"
+		})
+	] });
+};
+//#endregion
+export { CompactAudioPlayer };
+
+//# sourceMappingURL=CompactAudioPlayer.mjs.map

package/es/AudioPlayer/CompactAudioPlayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompactAudioPlayer.mjs","names":[],"sources":["../../src/AudioPlayer/CompactAudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { PopoverRoot, PopoverTrigger, IconButton, PopoverContent, Text, PopoverTitle } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\n\nconst AudioContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    flexDirection: \"column\",\n    padding: \"xsmall\",\n    paddingBlockEnd: \"0\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"xsmall\",\n    background: \"surface.brand.1.subtle\",\n  },\n});\n\nconst ControlsContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n  },\n});\n\ninterface Props {\n  src: string;\n  title: string;\n}\n\nconst StyledText = styled(Text, {\n  base: {\n    minWidth: \"4xlarge\",\n    flexShrink: \"0\",\n    textAlign: \"center\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    marginInlineStart: \"auto\",\n  },\n});\n\nconst EllipsedText = styled(Text, {\n  base: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n});\n\nexport const CompactAudioPlayer = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    playing,\n    togglePlay,\n    currentTime,\n    duration,\n    handleSliderChange,\n    volumeValue,\n    handleVolumeSliderChange,\n    onEnded,\n    onHandleTime,\n  } = useAudioControls();\n  return (\n    <AudioContainer>\n      <AudioElement\n        ref={audioRef}\n        src={src}\n        title={title}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\n      <ControlsContainer>\n        <PlayButton playing={playing} onClick={togglePlay} />\n        <StyledText>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span>{formatTime(currentTime)}</span>\n          </Text>\n          {\"/ \"}\n          <Text textStyle=\"label.medium\" color=\"text.subtle\" asChild consumeCss>\n            <span>{formatTime(duration)}</span>\n          </Text>\n        </StyledText>\n        <EllipsedText textStyle=\"title.medium\">{title}</EllipsedText>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <StyledIconButton variant=\"tertiary\">\n              <VolumeUpFill />\n            </StyledIconButton>\n          </PopoverTrigger>\n          <PopoverContent>\n            <PopoverTitle srOnly>{t(\"audio.controls.adjustVolume\")}</PopoverTitle>\n            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </PopoverContent>\n        </PopoverRoot>\n      </ControlsContainer>\n      <AudioProgress\n        currentTime={currentTime}\n        duration={duration}\n        onValueChange={handleSliderChange}\n        variant=\"simple\"\n      />\n    </AudioContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,eAAe;CACf,SAAS;CACT,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAOF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,mBAAmB,QACpB,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,YAAY;CACb,EACF,CAAC;AAEF,MAAa,sBAAsB,EAAE,KAAK,YAAmB;CAC3D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EACJ,UACA,SACA,YACA,aACA,UACA,oBACA,aACA,0BACA,SACA,iBACE,kBAAkB;AACtB,QACE,qBAAC,gBAAD,EAAA,UAAA;EACE,oBAAC,cAAD;GACE,KAAK;GACA;GACE;GACE;GACT,kBAAkB;GAClB,cAAc;GACd,CAAA;EACF,qBAAC,mBAAD,EAAA,UAAA;GACE,oBAAC,YAAD;IAAqB;IAAS,SAAS;IAAc,CAAA;GACrD,qBAAC,YAAD,EAAA,UAAA;IACE,oBAAC,MAAD;KAAM,WAAU;KAAe,SAAA;KAAQ,YAAA;eACrC,oBAAC,QAAD,EAAA,UAAO,WAAW,YAAY,EAAQ,CAAA;KACjC,CAAA;IACN;IACD,oBAAC,MAAD;KAAM,WAAU;KAAe,OAAM;KAAc,SAAA;KAAQ,YAAA;eACzD,oBAAC,QAAD,EAAA,UAAO,WAAW,SAAS,EAAQ,CAAA;KAC9B,CAAA;IACI,EAAA,CAAA;GACb,oBAAC,cAAD;IAAc,WAAU;cAAgB;IAAqB,CAAA;GAC7D,qBAAC,aAAD;IAAa,aAAa,EAAE,WAAW,OAAO;cAA9C,CACE,oBAAC,gBAAD;KAAgB,SAAA;eACd,oBAAC,kBAAD;MAAkB,SAAQ;gBACxB,oBAAC,cAAD,EAAgB,CAAA;MACC,CAAA;KACJ,CAAA,EACjB,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,cAAD;KAAc,QAAA;eAAQ,EAAE,8BAA8B;KAAgB,CAAA,EACtE,oBAAC,cAAD;KAAc,OAAO;KAAa,eAAe;KAA4B,CAAA,CAC9D,EAAA,CAAA,CACL;;GACI,EAAA,CAAA;EACpB,oBAAC,eAAD;GACe;GACH;GACV,eAAe;GACf,SAAQ;GACR,CAAA;EACa,EAAA,CAAA"}

package/es/AudioPlayer/Controls.mjs

@@ -1,8 +1,13 @@
-import { Button, FieldRoot, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
+import { AudioElement } from "./AudioElement.mjs";
+import { formatTime } from "./audioUtils.mjs";
+import { AudioProgress } from "./AudioProgress.mjs";
+import { PlayButton } from "./PlayButton.mjs";
+import { useAudioControls } from "./useAudioControls.mjs";
+import { VolumeSlider } from "./VolumeSlider.mjs";
+import { Button, FieldRoot, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { CheckLine, Forward15Line, PauseLine, PlayFill, Replay15Line, VolumeUpFill } from "@ndla/icons";
+import { CheckLine, Forward15Line, Replay15Line, VolumeUpFill } from "@ndla/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createListCollection } from "@ark-ui/react";
 //#region src/AudioPlayer/Controls.tsx
@@ -36,7 +41,7 @@ const ControlsWrapper = styled("div", { base: {
 	},
 	mobileWideDown: { columnGap: "3xsmall" }
 } });
-const PlayButton = styled(IconButton, { base: { gridArea: "play" } });
+const StyledPlayButton = styled(PlayButton, { base: { gridArea: "play" } });
 const Forward15SecButton = styled(IconButton, { base: { gridArea: "forwards" } });
 const Back15SecButton = styled(IconButton, { base: { gridArea: "backwards" } });
 const ProgressWrapper = styled("div", { base: {
@@ -64,16 +69,7 @@ const SpeedButton = styled(Button, { base: {
 	"& span": { flex: "1" }
 } });
 const StyledSelectRoot = styled(SelectRoot, { base: { gridArea: "speed" } });
-const StyledSliderControl = styled(SliderControl, { base: {
-	height: "surface.3xsmall",
-	minWidth: "small"
-} });
 const StyledPopoverContent = styled(PopoverContent, { base: { paddingInline: "small" } });
-const formatTime = (seconds) => {
-	const minutes = Math.floor(seconds / 60);
-	const currentSeconds = seconds % 60;
-	return `${minutes}:${currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}`;
-};
 const speedValues = createListCollection({ items: [
 	"0.5",
 	"0.75",
@@ -85,68 +81,14 @@ const speedValues = createListCollection({ items: [
 ] });
 const Controls = ({ src, title }) => {
 	const { t } = useTranslation();
-	const [speedValue, setSpeedValue] = useState(1);
-	const [volumeValue, setVolumeValue] = useState(100);
-	const [currentTime, setCurrentTime] = useState(0);
-	const [duration, setDuration] = useState(0);
-	const [playing, setPlaying] = useState(false);
-	const audioRef = useRef(null);
-	useEffect(() => {
-		if (audioRef.current) {
-			const audioElement = audioRef.current;
-			const handleTimeUpdate = () => {
-				const { currentTime, duration } = audioElement;
-				setCurrentTime(Math.round(currentTime));
-				setDuration(Math.round(duration));
-			};
-			const handleLoadedMetaData = () => {
-				const { currentTime, duration } = audioElement;
-				setCurrentTime(Math.round(currentTime));
-				setDuration(Math.round(duration));
-			};
-			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 onPlaybackRateChange = (rate) => {
-		setSpeedValue(rate);
-		if (audioRef.current) audioRef.current.playbackRate = rate;
-	};
-	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__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("audio", {
-		ref: audioRef,
+	const { audioRef, onEnded, onHandleTime, onSeekSeconds, playing, togglePlay, handleSliderChange, handleVolumeSliderChange, currentTime, duration, speedValue, onPlaybackRateChange, volumeValue } = useAudioControls();
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(AudioElement, {
 		src,
 		title,
-		preload: "metadata"
+		ref: audioRef,
+		onEnded,
+		onLoadedMetadata: onHandleTime,
+		onTimeUpdate: onHandleTime
 	}), /* @__PURE__ */ jsxs(ControlsWrapper, { children: [
 		/* @__PURE__ */ jsx(Back15SecButton, {
 			variant: "tertiary",
@@ -155,11 +97,9 @@ const Controls = ({ src, title }) => {
 			onClick: () => onSeekSeconds(-15),
 			children: /* @__PURE__ */ jsx(Replay15Line, {})
 		}),
-		/* @__PURE__ */ jsx(PlayButton, {
-			"aria-label": t(playing ? t("audio.pause") : t("audio.play")),
-			variant: "primary",
-			onClick: togglePlay,
-			children: playing ? /* @__PURE__ */ jsx(PauseLine, {}) : /* @__PURE__ */ jsx(PlayFill, {})
+		/* @__PURE__ */ jsx(StyledPlayButton, {
+			playing,
+			onClick: togglePlay
 		}),
 		/* @__PURE__ */ jsx(Forward15SecButton, {
 			variant: "tertiary",
@@ -175,23 +115,10 @@ const Controls = ({ src, title }) => {
 				consumeCss: true,
 				children: /* @__PURE__ */ jsx("div", { children: formatTime(currentTime) })
 			}),
-			/* @__PURE__ */ jsxs(SliderRoot, {
-				value: [currentTime],
-				defaultValue: [0],
-				step: 1,
-				max: duration,
-				onValueChange: handleSliderChange,
-				getAriaValueText: (value) => t("audio.valueText", {
-					start: formatTime(Math.round(value.value)),
-					end: formatTime(Math.round(duration))
-				}),
-				children: [/* @__PURE__ */ jsx(SliderLabel, {
-					srOnly: true,
-					children: t("audio.progressBar")
-				}), /* @__PURE__ */ jsxs(SliderControl, { children: [/* @__PURE__ */ jsx(SliderTrack, { children: /* @__PURE__ */ jsx(SliderRange, {}) }), /* @__PURE__ */ jsx(SliderThumb, {
-					index: 0,
-					children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
-				})] })]
+			/* @__PURE__ */ jsx(AudioProgress, {
+				currentTime,
+				duration,
+				onValueChange: handleSliderChange
 			}),
 			/* @__PURE__ */ jsx(StyledText, {
 				textStyle: "label.medium",
@@ -234,21 +161,9 @@ const Controls = ({ src, title }) => {
 					"aria-label": t("audio.controls.adjustVolume"),
 					children: /* @__PURE__ */ jsx(VolumeUpFill, {})
 				})
-			}), /* @__PURE__ */ jsx(StyledPopoverContent, { children: /* @__PURE__ */ jsxs(SliderRoot, {
-				orientation: "vertical",
-				value: [volumeValue],
-				min: 0,
-				max: 100,
-				defaultValue: [100],
-				step: 1,
-				onValueChange: handleVolumeSliderChange,
-				children: [/* @__PURE__ */ jsx(SliderLabel, {
-					srOnly: true,
-					children: t("audio.controls.adjustVolume")
-				}), /* @__PURE__ */ jsxs(StyledSliderControl, { children: [/* @__PURE__ */ jsx(SliderTrack, { children: /* @__PURE__ */ jsx(SliderRange, {}) }), /* @__PURE__ */ jsx(SliderThumb, {
-					index: 0,
-					children: /* @__PURE__ */ jsx(SliderHiddenInput, {})
-				})] })]
+			}), /* @__PURE__ */ jsx(StyledPopoverContent, { children: /* @__PURE__ */ jsx(VolumeSlider, {
+				value: volumeValue,
+				onValueChange: handleVolumeSliderChange
 			}) })]
 		})
 	] })] });