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

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.7.0",
+  "schemaVersion": "1.10.0",
   "styles": {
     "atomic": [
       "position]___[value:absolute]___[cond:_before",
@@ -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",
@@ -251,32 +263,15 @@
       "transitionTimingFunction]___[value:ease-in-out",
       "justifyItems]___[value:center",
       "gridTemplateRows]___[value:1fr]___[cond:_open",
-      "overflow]___[value:visible]___[cond:_closed<___>_print",
-      "maxHeight]___[value:500vh]___[cond:_closed<___>_print",
+      "gridTemplateRows]___[value:1fr]___[cond:_print",
+      "overflow]___[value:visible]___[cond:_print",
+      "maxHeight]___[value:500vh]___[cond:_print",
       "minHeight]___[value:surface.3xsmall]___[cond:& > div",
       "overflow]___[value:hidden]___[cond:& > div",
+      "overflow]___[value:visible]___[cond:& > div<___>_print",
       "marginBlockStart]___[value:0]___[cond:& :first-child",
-      "content]___[value:\"\"]___[cond:_after",
-      "textAlign]___[value:center]___[cond:_after",
-      "position]___[value:absolute]___[cond:_after",
-      "inset]___[value:0]___[cond:_after",
-      "transitionProperty]___[value:opacity]___[cond:_after",
-      "transitionDuration]___[value:slow]___[cond:_after",
-      "transitionTimingFunction]___[value:ease-in-out]___[cond:_after",
-      "gradientFrom]___[value:surface.default/20]___[cond:_after",
-      "gradientTo]___[value:surface.default/95]___[cond:_after",
-      "backgroundGradient]___[value:to-b]___[cond:_after",
-      "opacity]___[value:1]___[cond:_after",
-      "zIndex]___[value:base]___[cond:_after",
-      "pointerEvents]___[value:none]___[cond:_after",
-      "overflow]___[value:visible]___[cond:_print",
-      "display]___[value:none]___[cond:_print<___>_after",
       "paddingBlockEnd]___[value:xsmall]___[cond:_open",
-      "opacity]___[value:0]___[cond:_open<___>_after",
       "bottom]___[value:-medium",
-      "transitionTimingFunction]___[value:ease-in-out]___[cond:& svg",
-      "transitionDuration]___[value:fast]___[cond:& svg",
-      "transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
       "textUnderlineOffset]___[value:2px",
       "paddingBlock]___[value:small",
       "paddingInlineEnd]___[value:medium",
@@ -333,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",
@@ -349,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

@@ -101,9 +101,6 @@
         font-size: calc(var(--font-sizes-3xlarge) * 1.11);
         line-height: calc(var(--line-heights-3xlarge) * 1.11);
 }
-}
-
-    @media screen and (max-width: 29.7475rem) {
       .textStyle_title\.medium {
         font-size: var(--font-sizes-medium);
         line-height: var(--line-heights-small);
@@ -125,9 +122,6 @@
         font-size: calc(var(--font-sizes-xsmall) * 1.11);
         line-height: calc(var(--line-heights-xsmall) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_label\.large {
         font-size: var(--font-sizes-small);
         line-height: var(--line-heights-small);
@@ -137,9 +131,6 @@
         font-size: calc(var(--font-sizes-small) * 1.11);
         line-height: calc(var(--line-heights-small) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_heading\.large {
         font-size: var(--font-sizes-3xlarge);
         line-height: var(--line-heights-3xlarge);
@@ -149,9 +140,6 @@
         font-size: calc(var(--font-sizes-3xlarge) * 1.11);
         line-height: calc(var(--line-heights-3xlarge) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_title\.medium {
         font-size: var(--font-sizes-medium);
         line-height: var(--line-heights-medium);
@@ -161,9 +149,6 @@
         font-size: calc(var(--font-sizes-medium) * 1.11);
         line-height: calc(var(--line-heights-medium) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_label\.medium {
         font-size: var(--font-sizes-xsmall);
         line-height: var(--line-heights-xsmall);
@@ -173,9 +158,6 @@
         font-size: calc(var(--font-sizes-xsmall) * 1.11);
         line-height: calc(var(--line-heights-xsmall) * 1.11);
 }
-}
-
-    @media print {
       .\[\&_a\]\:textStyle_label\.xsmall a {
         font-size: var(--font-sizes-xxsmall);
         line-height: var(--line-heights-xxsmall);
@@ -200,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;
 }
@@ -324,6 +314,10 @@
     padding-inline: var(--spacing-xsmall);
 }
 
+  .bdr_0 {
+    border-radius: 0;
+}
+
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -473,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 {
@@ -490,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;
 }
@@ -680,10 +694,6 @@
     color: var(--colors-text-link);
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .c_icon\.strong {
     color: var(--colors-icon-strong);
 }
@@ -740,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);
 }
@@ -828,11 +854,7 @@
     width: var(--sizes-surface-3xsmall);
 }
 
-  .h_unset {
-    height: unset;
-}
-
-  .after\:inset_0::after,.before\:inset_0::before {
+  .before\:inset_0::before {
     inset: 0;
 }
 
@@ -1000,75 +1022,10 @@
     margin-block-start: 0;
 }
 
-  .after\:content_\"\"::after {
-    content: "";
-}
-
-  .after\:ta_center::after {
-    text-align: center;
-}
-
-  .after\:pos_absolute::after {
-    position: absolute;
-}
-
-  .after\:trs-prop_opacity::after {
-    --transition-prop: opacity;
-    transition-property: opacity;
-}
-
-  .after\:trs-dur_slow::after {
-    --transition-duration: var(--durations-slow);
-    transition-duration: var(--durations-slow);
-}
-
-  .after\:trs-tmf_ease-in-out::after {
-    --transition-easing: ease-in-out;
-    transition-timing-function: ease-in-out;
-}
-
-  .after\:grad-from_surface\.default\/20::after {
-    --mix---gradient-from: color-mix(in srgb, var(--colors-surface-default) 20%, transparent);
-    --gradient-from: var(--mix---gradient-from, var(--colors-surface-default));
-}
-
-  .after\:grad-to_surface\.default\/95::after {
-    --mix---gradient-to: color-mix(in srgb, var(--colors-surface-default) 95%, transparent);
-    --gradient-to: var(--mix---gradient-to, var(--colors-surface-default));
-}
-
-  .after\:bg-grad_to-b::after {
-    --gradient-stops: var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
-    --gradient-position: to bottom;
-    background-image: linear-gradient(var(--gradient-stops));
-}
-
-  .after\:op_1::after {
-    opacity: 1;
-}
-
-  .after\:z_base::after {
-    z-index: var(--z-index-base);
-}
-
-  .after\:pointer-events_none::after {
-    pointer-events: none;
-}
-
   .open\:pbe_xsmall:is([open], [data-open], [data-state="open"], :popover-open) {
     padding-block-end: var(--spacing-xsmall);
 }
 
-  .\[\&_svg\]\:trs-tmf_ease-in-out svg {
-    --transition-easing: ease-in-out;
-    transition-timing-function: ease-in-out;
-}
-
-  .\[\&_svg\]\:trs-dur_fast svg {
-    --transition-duration: var(--durations-fast);
-    transition-duration: var(--durations-fast);
-}
-
   .before\:z_0::before {
     z-index: 0;
 }
@@ -1144,11 +1101,7 @@
     height: 100%;
 }
 
-  .focusWithin\:text-decoration_none:focus-within {
-    text-decoration: none;
-}
-
-  .focusVisible\:text-decoration_none:is(:focus-visible, [data-focus-visible]) {
+  .focusWithin\:text-decoration_none:focus-within,.focusVisible\:text-decoration_none:is(:focus-visible, [data-focus-visible]) {
     text-decoration: none;
 }
 
@@ -1198,14 +1151,6 @@
     transform: rotate(-45deg);
 }
 
-  .open\:after\:op_0:is([open], [data-open], [data-state="open"], :popover-open)::after {
-    opacity: 0;
-}
-
-  .open\:\[\&_svg\]\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"], :popover-open) svg {
-    transform: rotate(180deg);
-}
-
   .first\:\[\&_p\]\:fw_bold:first-child p {
     font-weight: var(--font-weights-bold);
 }
@@ -1340,9 +1285,6 @@
     .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:px_medium[data-has-image='true'] {
       padding-inline: var(--spacing-medium);
 }
-}
-
-  @media screen and (min-width: 37.5625rem) {
     .hover\:tablet\:before\:vis_visible:is(:hover, [data-hover])::before {
       visibility: visible;
 }
@@ -1538,27 +1480,15 @@
     .mobileWideDown\:max-h_large {
       max-height: var(--sizes-large);
 }
-}
-
-  @media screen and (max-width: 29.7475rem) {
     .mobileWideDown\:open\:d_inline:is([open], [data-open], [data-state="open"], :popover-open) {
       display: inline;
 }
-}
-
-  @media screen and (max-width: 29.7475rem) {
     .mobileWideDown\:open\:white-space_pre-wrap:is([open], [data-open], [data-state="open"], :popover-open) {
       white-space: pre-wrap;
 }
-}
-
-  @media screen and (max-width: 29.7475rem) {
     .mobileWideDown\:disabled\:d_none:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
       display: none;
 }
-}
-
-  @media screen and (max-width: 29.7475rem) {
     .mobileWideDown\:open\:max-h_none:is([open], [data-open], [data-state="open"], :popover-open) {
       max-height: none;
 }
@@ -1586,23 +1516,14 @@
     .print\:d_none {
       display: none;
 }
+    .print\:grid-tr_1fr {
+      grid-template-rows: 1fr;
 }
-
-  @media print {
-    .closed\:print\:ov_visible:is([closed], [data-closed], [data-state="closed"]) {
-      overflow: visible;
-}
-}
-
-  @media print {
-    .print\:after\:d_none::after {
-      display: none;
-}
-}
-
-  @media print {
-    .closed\:print\:max-h_500vh:is([closed], [data-closed], [data-state="closed"]) {
+    .print\:max-h_500vh {
       max-height: 500vh;
+}
+    .\[\&_\>_div\]\:print\:ov_visible > div {
+      overflow: visible;
 }
 }
 }

package/es/Article/ArticleByline.mjs

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { ArrowDownShortLine } from "@ndla/icons";
 import { SafeLink } from "@ndla/safelink";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { toIntlLanguage } from "@ndla/util";
 import { useAccordionContext } from "@ark-ui/react";
 //#region src/Article/ArticleByline.tsx
 /**
@@ -50,7 +51,7 @@ const accordionItemValue = "rulesForUse";
 const ArticleByline = ({ lang, authors = [], suppliers = [], footnotes, licenseBox, published, displayByline = true, bylineType = "article", bylineSuffix, learningpathCopiedFrom }) => {
 	const { t, i18n } = useTranslation();
 	const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
-	const listFormatter = new Intl.ListFormat(lang ?? i18n.language, {
+	const listFormatter = new Intl.ListFormat(toIntlLanguage(lang ?? i18n.language), {
 		style: "long",
 		type: "conjunction"
 	});

package/es/Article/ArticleByline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleByline.mjs","names":[],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useAccordionContext } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { FootNote } from \"../types\";\nimport { ArticleFootNotes } from \"./ArticleFootNotes\";\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.\n    marginBlockStart: \"medium\",\n    paddingBlockStart: \"xsmall\",\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"body.medium\",\n    '& [data-contributors=\"false\"]': {\n      marginInlineStart: \"auto\",\n    },\n  },\n  variants: {\n    learningpath: {\n      true: {},\n      false: {\n        tabletWide: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n});\n\ntype AuthorProps = {\n  name: string;\n};\n\ntype SupplierProps = {\n  name: string;\n};\n\ntype Props = {\n  lang?: string;\n  authors?: AuthorProps[];\n  suppliers?: SupplierProps[];\n  published?: string;\n  licenseBox?: ReactNode;\n  footnotes?: FootNote[];\n  displayByline?: boolean;\n  bylineType?: \"article\" | \"learningPath\" | \"external\";\n  bylineSuffix?: ReactNode;\n  learningpathCopiedFrom?: string;\n};\n\nfunction formatList(list: SupplierProps[], listFormatter: Intl.ListFormat) {\n  return listFormatter.format(list.map((l) => l.name));\n}\n\nconst StyledAccordionRoot = styled(AccordionRoot, {\n  base: {\n    paddingBlockStart: \"xxlarge\",\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\nconst refRegexp = /note\\d/;\nconst footnotesAccordionId = \"footnotes\";\nconst accordionItemValue = \"rulesForUse\";\n\nexport const ArticleByline = ({\n  lang,\n  authors = [],\n  suppliers = [],\n  footnotes,\n  licenseBox,\n  published,\n  displayByline = true,\n  bylineType = \"article\",\n  bylineSuffix,\n  learningpathCopiedFrom,\n}: Props) => {\n  const { t, i18n } = useTranslation();\n\n  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;\n  const listFormatter = new Intl.ListFormat(lang ?? i18n.language, { style: \"long\", type: \"conjunction\" });\n\n  return (\n    <Wrapper>\n      {!!displayByline && (\n        <TextWrapper learningpath={bylineType === \"learningPath\"}>\n          {!!showPrimaryContributors && (\n            <span>\n              {authors.length > 0 &&\n                `${t(\"article.authorsLabel\", { context: bylineType })} ${formatList(authors, listFormatter)}. `}\n              {suppliers.length > 0 &&\n                `${t(\"article.supplierLabel\", { count: suppliers.length })} ${formatList(suppliers, listFormatter)}.`}\n            </span>\n          )}\n          {learningpathCopiedFrom ? (\n            <SafeLink to={learningpathCopiedFrom}>{t(`learningPath.copiedFrom`)}</SafeLink>\n          ) : null}\n          {published ? (\n            <div data-contributors={showPrimaryContributors}>\n              {t(`${bylineType}.lastUpdated`)} {published}\n            </div>\n          ) : null}\n          {bylineSuffix}\n        </TextWrapper>\n      )}\n      {(!!licenseBox || !!footnotes?.length) && (\n        <StyledAccordionRoot multiple>\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && <ArticleBylineFootnotes footnotes={footnotes} />}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\ninterface ArticleBylineFootnotesProps {\n  footnotes: FootNote[];\n}\n\nexport const ArticleBylineFootnotes = ({ footnotes }: ArticleBylineFootnotesProps) => {\n  const { t } = useTranslation();\n  const { value, setValue } = useAccordionContext();\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !value.includes(footnotesAccordionId)) {\n        ref.current?.scrollIntoView({ behavior: \"smooth\" });\n        setValue([...value, footnotesAccordionId]);\n        setTimeout(() => {\n          const el = document.getElementById(`${hash}`);\n          el?.click();\n          el?.focus();\n        }, 300);\n      }\n    },\n    [value, setValue],\n  );\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\n\n  return (\n    <ArticleBylineAccordionItem ref={ref} value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n      <ArticleFootNotes footNotes={footnotes} />\n    </ArticleBylineAccordionItem>\n  );\n};\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ArticleByline.mjs","names":[],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useAccordionContext } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { toIntlLanguage } from \"@ndla/util\";\nimport { type ReactNode, forwardRef, useCallback, useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport type { FootNote } from \"../types\";\nimport { ArticleFootNotes } from \"./ArticleFootNotes\";\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.\n    marginBlockStart: \"medium\",\n    paddingBlockStart: \"xsmall\",\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"body.medium\",\n    '& [data-contributors=\"false\"]': {\n      marginInlineStart: \"auto\",\n    },\n  },\n  variants: {\n    learningpath: {\n      true: {},\n      false: {\n        tabletWide: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n});\n\ntype AuthorProps = {\n  name: string;\n};\n\ntype SupplierProps = {\n  name: string;\n};\n\ntype Props = {\n  lang?: string;\n  authors?: AuthorProps[];\n  suppliers?: SupplierProps[];\n  published?: string;\n  licenseBox?: ReactNode;\n  footnotes?: FootNote[];\n  displayByline?: boolean;\n  bylineType?: \"article\" | \"learningPath\" | \"external\";\n  bylineSuffix?: ReactNode;\n  learningpathCopiedFrom?: string;\n};\n\nfunction formatList(list: SupplierProps[], listFormatter: Intl.ListFormat) {\n  return listFormatter.format(list.map((l) => l.name));\n}\n\nconst StyledAccordionRoot = styled(AccordionRoot, {\n  base: {\n    paddingBlockStart: \"xxlarge\",\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\nconst refRegexp = /note\\d/;\nconst footnotesAccordionId = \"footnotes\";\nconst accordionItemValue = \"rulesForUse\";\n\nexport const ArticleByline = ({\n  lang,\n  authors = [],\n  suppliers = [],\n  footnotes,\n  licenseBox,\n  published,\n  displayByline = true,\n  bylineType = \"article\",\n  bylineSuffix,\n  learningpathCopiedFrom,\n}: Props) => {\n  const { t, i18n } = useTranslation();\n\n  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;\n  const listFormatter = new Intl.ListFormat(toIntlLanguage(lang ?? i18n.language), {\n    style: \"long\",\n    type: \"conjunction\",\n  });\n\n  return (\n    <Wrapper>\n      {!!displayByline && (\n        <TextWrapper learningpath={bylineType === \"learningPath\"}>\n          {!!showPrimaryContributors && (\n            <span>\n              {authors.length > 0 &&\n                `${t(\"article.authorsLabel\", { context: bylineType })} ${formatList(authors, listFormatter)}. `}\n              {suppliers.length > 0 &&\n                `${t(\"article.supplierLabel\", { count: suppliers.length })} ${formatList(suppliers, listFormatter)}.`}\n            </span>\n          )}\n          {learningpathCopiedFrom ? (\n            <SafeLink to={learningpathCopiedFrom}>{t(`learningPath.copiedFrom`)}</SafeLink>\n          ) : null}\n          {published ? (\n            <div data-contributors={showPrimaryContributors}>\n              {t(`${bylineType}.lastUpdated`)} {published}\n            </div>\n          ) : null}\n          {bylineSuffix}\n        </TextWrapper>\n      )}\n      {(!!licenseBox || !!footnotes?.length) && (\n        <StyledAccordionRoot multiple>\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && <ArticleBylineFootnotes footnotes={footnotes} />}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\ninterface ArticleBylineFootnotesProps {\n  footnotes: FootNote[];\n}\n\nexport const ArticleBylineFootnotes = ({ footnotes }: ArticleBylineFootnotesProps) => {\n  const { t } = useTranslation();\n  const { value, setValue } = useAccordionContext();\n  const ref = useRef<HTMLDivElement>(null);\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !value.includes(footnotesAccordionId)) {\n        ref.current?.scrollIntoView({ behavior: \"smooth\" });\n        setValue([...value, footnotesAccordionId]);\n        setTimeout(() => {\n          const el = document.getElementById(`${hash}`);\n          el?.click();\n          el?.focus();\n        }, 300);\n      }\n    },\n    [value, setValue],\n  );\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\n\n  return (\n    <ArticleBylineAccordionItem ref={ref} value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n      <ArticleFootNotes footNotes={footnotes} />\n    </ArticleBylineAccordionItem>\n  );\n};\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}

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"}