@ndla/ui 56.0.181-alpha.0 → 56.0.182-alpha.0

package/es/model/index.mjs

@@ -2,7 +2,6 @@ import { contentTypeMapping, contentTypes, resourceEmbedTypeMapping } from "./Co
 import { SubjectCategories_exports } from "./SubjectCategories.mjs";
 import { SubjectTypes_exports } from "./SubjectTypes.mjs";
 import { WordClass_exports } from "./WordClass.mjs";
-
 //#region src/model/index.ts
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -19,7 +18,7 @@ const constants = {
 	resourceEmbedTypeMapping,
 	wordClass: WordClass_exports
 };
-
 //#endregion
 export { constants };
+
 //# sourceMappingURL=index.mjs.map

package/es/model/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/model/index.ts"],"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 { contentTypes, contentTypeMapping, resourceEmbedTypeMapping } from \"./ContentType\";\nimport * as subjectCategories from \"./SubjectCategories\";\nimport * as subjectTypes from \"./SubjectTypes\";\nimport * as wordClass from \"./WordClass\";\n\nexport const constants = {\n  contentTypes,\n  subjectCategories,\n  subjectTypes,\n  contentTypeMapping,\n  resourceEmbedTypeMapping,\n  wordClass,\n};\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,YAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/model/index.ts"],"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 { contentTypes, contentTypeMapping, resourceEmbedTypeMapping } from \"./ContentType\";\nimport * as subjectCategories from \"./SubjectCategories\";\nimport * as subjectTypes from \"./SubjectTypes\";\nimport * as wordClass from \"./WordClass\";\n\nexport const constants = {\n  contentTypes,\n  subjectCategories,\n  subjectTypes,\n  contentTypeMapping,\n  resourceEmbedTypeMapping,\n  wordClass,\n};\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,YAAY;CACvB;CACA,mBAAA;CACA,cAAA;CACA;CACA;CACA,WAAA;CACD"}

package/es/utils/licenseAttributes.mjs

@@ -1,5 +1,4 @@
 import { getLicenseByAbbreviation, isCreativeCommonsLicense } from "@ndla/licenses";
-
 //#region src/utils/licenseAttributes.ts
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -15,7 +14,7 @@ const licenseAttributes = (license, lang, url) => {
 		about: url ?? void 0
 	} : {};
 };
-
 //#endregion
 export { licenseAttributes };
+
 //# sourceMappingURL=licenseAttributes.mjs.map

package/es/utils/licenseAttributes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"licenseAttributes.mjs","names":[],"sources":["../../src/utils/licenseAttributes.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { getLicenseByAbbreviation, isCreativeCommonsLicense } from \"@ndla/licenses\";\n\nexport const licenseAttributes = (license: string | undefined, lang: string | undefined, url: string | undefined) => {\n  const licenseAbbr = getLicenseByAbbreviation(license ? license : \"\", lang);\n\n  const licenseProps = isCreativeCommonsLicense(licenseAbbr.rights)\n    ? {\n        \"xmlns:cc\": \"https://creativecommons.org/ns#\",\n        \"xmlns:dct\": \"http://purl.org/dc/terms/\",\n        about: url ?? undefined,\n      }\n    : {};\n\n  return licenseProps;\n};\n"],"mappings":";;;;;;;;;;AAUA,MAAa,qBAAqB,SAA6B,MAA0B,QAA4B;AAWnH,QARqB,yBAFD,yBAAyB,UAAU,UAAU,IAAI,KAAK,CAEhB,OAAO,GAC7D;EACE,YAAY;EACZ,aAAa;EACb,OAAO,OAAO;EACf,GACD,EAAE"}
+{"version":3,"file":"licenseAttributes.mjs","names":[],"sources":["../../src/utils/licenseAttributes.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { getLicenseByAbbreviation, isCreativeCommonsLicense } from \"@ndla/licenses\";\n\nexport const licenseAttributes = (license: string | undefined, lang: string | undefined, url: string | undefined) => {\n  const licenseAbbr = getLicenseByAbbreviation(license ? license : \"\", lang);\n\n  const licenseProps = isCreativeCommonsLicense(licenseAbbr.rights)\n    ? {\n        \"xmlns:cc\": \"https://creativecommons.org/ns#\",\n        \"xmlns:dct\": \"http://purl.org/dc/terms/\",\n        about: url ?? undefined,\n      }\n    : {};\n\n  return licenseProps;\n};\n"],"mappings":";;;;;;;;;AAUA,MAAa,qBAAqB,SAA6B,MAA0B,QAA4B;AAWnH,QARqB,yBAFD,yBAAyB,UAAU,UAAU,IAAI,KAAK,CAEhB,OAAO,GAC7D;EACE,YAAY;EACZ,aAAa;EACb,OAAO,OAAO,KAAA;EACf,GACD,EAAE"}

package/es/utils/relativeUrl.mjs

@@ -31,7 +31,7 @@ const getPossiblyRelativeUrl = (url, path) => {
 	}
 	return url;
 };
-
 //#endregion
 export { getPossiblyRelativeUrl };
+
 //# sourceMappingURL=relativeUrl.mjs.map

package/lib/AnchorHeading/AnchorHeading.js

@@ -1,9 +1,8 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/AnchorHeading/AnchorHeading.tsx
 /**
 * Copyright (c) 2021-present, NDLA.
@@ -39,7 +38,7 @@ const AnchorHeading = ({ children, copyText, lang }) => {
 		})
 	});
 };
-
 //#endregion
 exports.AnchorHeading = AnchorHeading;
+
 //# sourceMappingURL=AnchorHeading.js.map

package/lib/AnchorHeading/AnchorHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorHeading.js","names":["SafeLink"],"sources":["../../src/AnchorHeading/AnchorHeading.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 { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useMemo } from \"react\";\n\nconst StyledAnchor = styled(SafeLink, {\n  base: {\n    _before: {\n      position: \"absolute\",\n      marginInlineStart: \"-0.75em\",\n      content: '\"#\"',\n      visibility: \"hidden\",\n    },\n    _hover: {\n      textDecoration: \"underline\",\n      tablet: {\n        _before: {\n          visibility: \"visible\",\n        },\n      },\n    },\n  },\n});\n\ninterface Props {\n  // What to render within the h2\n  children: ReactNode;\n  copyText: string;\n  lang?: string;\n}\n\nfunction slugifyUnicode(input: string) {\n  return (\n    input\n      .trim()\n      .toLowerCase()\n      // Normalize to reduce weird Unicode equivalences\n      .normalize(\"NFKC\")\n      // Keep any Unicode letters/numbers; replace everything else with \"-\"\n      .replace(/[^\\p{Letter}\\p{Number}]+/gu, \"_\")\n      // Trim leading/trailing \"-\"\n      .replace(/^-+|-+$/g, \"\")\n  );\n}\n\nexport const AnchorHeading = ({ children, copyText, lang }: Props) => {\n  const slug = useMemo(() => slugifyUnicode(copyText.replace(/ /g, \"_\")), [copyText]);\n\n  return (\n    <h2 id={slug} lang={lang} tabIndex={-1}>\n      <StyledAnchor to={`#${encodeURIComponent(slug)}`}>{children}</StyledAnchor>\n    </h2>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,mDAAsBA,yBAAU,EACpC,MAAM;CACJ,SAAS;EACP,UAAU;EACV,mBAAmB;EACnB,SAAS;EACT,YAAY;EACb;CACD,QAAQ;EACN,gBAAgB;EAChB,QAAQ,EACN,SAAS,EACP,YAAY,WACb,EACF;EACF;CACF,EACF,CAAC;AASF,SAAS,eAAe,OAAe;AACrC,QACE,MACG,MAAM,CACN,aAAa,CAEb,UAAU,OAAO,CAEjB,QAAQ,8BAA8B,IAAI,CAE1C,QAAQ,YAAY,GAAG;;AAI9B,MAAa,iBAAiB,EAAE,UAAU,UAAU,WAAkB;CACpE,MAAM,gCAAqB,eAAe,SAAS,QAAQ,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;AAEnF,QACE,2CAAC;EAAG,IAAI;EAAY;EAAM,UAAU;YAClC,2CAAC;GAAa,IAAI,IAAI,mBAAmB,KAAK;GAAK;IAAwB;GACxE"}
+{"version":3,"file":"AnchorHeading.js","names":["SafeLink"],"sources":["../../src/AnchorHeading/AnchorHeading.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 { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useMemo } from \"react\";\n\nconst StyledAnchor = styled(SafeLink, {\n  base: {\n    _before: {\n      position: \"absolute\",\n      marginInlineStart: \"-0.75em\",\n      content: '\"#\"',\n      visibility: \"hidden\",\n    },\n    _hover: {\n      textDecoration: \"underline\",\n      tablet: {\n        _before: {\n          visibility: \"visible\",\n        },\n      },\n    },\n  },\n});\n\ninterface Props {\n  // What to render within the h2\n  children: ReactNode;\n  copyText: string;\n  lang?: string;\n}\n\nfunction slugifyUnicode(input: string) {\n  return (\n    input\n      .trim()\n      .toLowerCase()\n      // Normalize to reduce weird Unicode equivalences\n      .normalize(\"NFKC\")\n      // Keep any Unicode letters/numbers; replace everything else with \"-\"\n      .replace(/[^\\p{Letter}\\p{Number}]+/gu, \"_\")\n      // Trim leading/trailing \"-\"\n      .replace(/^-+|-+$/g, \"\")\n  );\n}\n\nexport const AnchorHeading = ({ children, copyText, lang }: Props) => {\n  const slug = useMemo(() => slugifyUnicode(copyText.replace(/ /g, \"_\")), [copyText]);\n\n  return (\n    <h2 id={slug} lang={lang} tabIndex={-1}>\n      <StyledAnchor to={`#${encodeURIComponent(slug)}`}>{children}</StyledAnchor>\n    </h2>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,eAAAA,UAAU,EACpC,MAAM;CACJ,SAAS;EACP,UAAU;EACV,mBAAmB;EACnB,SAAS;EACT,YAAY;EACb;CACD,QAAQ;EACN,gBAAgB;EAChB,QAAQ,EACN,SAAS,EACP,YAAY,WACb,EACF;EACF;CACF,EACF,CAAC;AASF,SAAS,eAAe,OAAe;AACrC,QACE,MACG,MAAM,CACN,aAAa,CAEb,UAAU,OAAO,CAEjB,QAAQ,8BAA8B,IAAI,CAE1C,QAAQ,YAAY,GAAG;;AAI9B,MAAa,iBAAiB,EAAE,UAAU,UAAU,WAAkB;CACpE,MAAM,QAAA,GAAA,MAAA,eAAqB,eAAe,SAAS,QAAQ,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;AAEnF,QACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;EAAI,IAAI;EAAY;EAAM,UAAU;YAClC,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,IAAI,IAAI,mBAAmB,KAAK;GAAK;GAAwB,CAAA;EACxE,CAAA"}

package/lib/Article/Article.js

@@ -1,12 +1,11 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_BadgesContainer = require('./BadgesContainer.js');
+require("../_virtual/_rolldown/runtime.js");
+const require_BadgesContainer = require("./BadgesContainer.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
-
 //#region src/Article/Article.tsx
 /**
 * Copyright (c) 2016-present, NDLA.
@@ -99,7 +98,6 @@ const ArticleTitle = ({ badges, heartButton, title, lang, id, introduction, comp
 		children
 	] });
 };
-
 //#endregion
 exports.ArticleContent = ArticleContent;
 exports.ArticleFooter = ArticleFooter;
@@ -107,4 +105,5 @@ exports.ArticleHGroup = ArticleHGroup;
 exports.ArticleHeader = ArticleHeader;
 exports.ArticleTitle = ArticleTitle;
 exports.ArticleWrapper = ArticleWrapper;
+
 //# sourceMappingURL=Article.js.map

package/lib/Article/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text"],"sources":["../../src/Article/Article.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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAM,2DAA8BA,kBAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,wCACV,EAAE,WAAW,GAAG,SAAS,QACxB,2CAAC;CAAqB,2CAAc,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,2DACJA,kBAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,wCAA0F,OAAO,QAC5G,2CAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,oDACXA,kBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,oDACXA,kBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,oDACXA,kBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,kDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,oDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;AACvB,QACE,4CAAC;EACC,4CAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,4CAAC,0BACE,CAAC,CAAC,UAAU,2CAACC,qDAAiB,SAAyB,EACvD,eACW,EAEhB,2CAACC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,2CAACC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,2CAAC,mBAAK,eAAmB;IACpB;EAET,4CAAC,4BACE,iBACA,cACa;EACf;KACa"}
+{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text"],"sources":["../../src/Article/Article.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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n"],"mappings":"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"}

package/lib/Article/ArticleByline.js

@@ -1,5 +1,5 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_ArticleFootNotes = require('./ArticleFootNotes.js');
+require("../_virtual/_rolldown/runtime.js");
+const require_ArticleFootNotes = require("./ArticleFootNotes.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -8,7 +8,6 @@ let _ndla_icons = require("@ndla/icons");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ark_ui_react = require("@ark-ui/react");
-
 //#region src/Article/ArticleByline.tsx
 /**
 * Copyright (c) 2020-present, NDLA.
@@ -127,8 +126,8 @@ const ArticleBylineAccordionItem = (0, react.forwardRef)(({ value, accordionTitl
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.AccordionItemContent, { children })]
 	});
 });
-
 //#endregion
 exports.ArticleByline = ArticleByline;
 exports.ArticleBylineAccordionItem = ArticleBylineAccordionItem;
+
 //# sourceMappingURL=ArticleByline.js.map

package/lib/Article/ArticleByline.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleByline.js","names":["AccordionRoot","SafeLink","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"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.js","names":["AccordionRoot","SafeLink","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"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":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,WAAA,GAAA,wBAAA,QAAiB,OAAO,EAC5B,MAAM;CAEJ,kBAAkB;CAClB,mBAAmB;CACnB,WAAW;CACX,aAAa;CACd,EACF,CAAC;AAEF,MAAM,eAAA,GAAA,wBAAA,QAAqB,OAAO;CAChC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACP,gBAAgB;EAChB,cAAc;EACd,WAAW;EACX,mCAAiC,EAC/B,mBAAmB,QACpB;EACF;CACD,UAAU,EACR,cAAc;EACZ,MAAM,EAAE;EACR,OAAO,EACL,YAAY,EACV,eAAe,OAChB,EACF;EACF,EACF;CACF,CAAC;AAuBF,SAAS,WAAW,MAAuB,eAAgC;AACzE,QAAO,cAAc,OAAO,KAAK,KAAK,MAAM,EAAE,KAAK,CAAC;;AAGtD,MAAM,uBAAA,GAAA,wBAAA,QAA6BA,iBAAAA,eAAe,EAChD,MAAM;CACJ,mBAAmB;CACnB,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAEF,MAAM,YAAY;AAClB,MAAM,uBAAuB;AAC7B,MAAM,qBAAqB;AAE3B,MAAa,iBAAiB,EAC5B,MACA,UAAU,EAAE,EACZ,YAAY,EAAE,EACd,WACA,YACA,WACA,gBAAgB,MAChB,aAAa,WACb,cACA,6BACW;CACX,MAAM,EAAE,GAAG,UAAA,GAAA,cAAA,iBAAyB;CAEpC,MAAM,0BAA0B,UAAU,SAAS,KAAK,QAAQ,SAAS;CACzE,MAAM,gBAAgB,IAAI,KAAK,WAAW,QAAQ,KAAK,UAAU;EAAE,OAAO;EAAQ,MAAM;EAAe,CAAC;AAExG,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACG,CAAC,CAAC,iBACD,iBAAA,GAAA,kBAAA,MAAC,aAAD;EAAa,cAAc,eAAe;YAA1C;GACG,CAAC,CAAC,2BACD,iBAAA,GAAA,kBAAA,MAAC,QAAD,EAAA,UAAA,CACG,QAAQ,SAAS,KAChB,GAAG,EAAE,wBAAwB,EAAE,SAAS,YAAY,CAAC,CAAC,GAAG,WAAW,SAAS,cAAc,CAAC,KAC7F,UAAU,SAAS,KAClB,GAAG,EAAE,yBAAyB,EAAE,OAAO,UAAU,QAAQ,CAAC,CAAC,GAAG,WAAW,WAAW,cAAc,CAAC,GAChG,EAAA,CAAA;GAER,yBACC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD;IAAU,IAAI;cAAyB,EAAE,0BAA0B;IAAY,CAAA,GAC7E;GACH,YACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,qBAAmB;cAAxB;KACG,EAAE,GAAG,WAAW,cAAc;KAAC;KAAE;KAC9B;QACJ;GACH;GACW;MAEd,CAAC,CAAC,cAAc,CAAC,CAAC,WAAW,WAC7B,iBAAA,GAAA,kBAAA,MAAC,qBAAD;EAAqB,UAAA;YAArB,CACG,CAAC,CAAC,cACD,iBAAA,GAAA,kBAAA,KAAC,4BAAD;GAA4B,OAAO;GAAoB,gBAAgB,EAAE,qBAAqB;aAC3F;GAC0B,CAAA,EAE9B,CAAC,CAAC,WAAW,UAAU,iBAAA,GAAA,kBAAA,KAAC,wBAAD,EAAmC,WAAa,CAAA,CACpD;IAEhB,EAAA,CAAA;;AAYd,MAAa,0BAA0B,EAAE,gBAA6C;CACpF,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,EAAE,OAAO,cAAA,GAAA,cAAA,sBAAkC;CACjD,MAAM,OAAA,GAAA,MAAA,QAA6B,KAAK;CAExC,MAAM,gBAAA,GAAA,MAAA,cACH,MAAuB;EACtB,MAAM,OAAO,EAAE,OAAO,MAAM,IAAI,CAAC;AACjC,MAAI,MAAM,MAAM,UAAU,IAAI,CAAC,MAAM,SAAS,qBAAqB,EAAE;AACnE,OAAI,SAAS,eAAe,EAAE,UAAU,UAAU,CAAC;AACnD,YAAS,CAAC,GAAG,OAAO,qBAAqB,CAAC;AAC1C,oBAAiB;IACf,MAAM,KAAK,SAAS,eAAe,GAAG,OAAO;AAC7C,QAAI,OAAO;AACX,QAAI,OAAO;MACV,IAAI;;IAGX,CAAC,OAAO,SAAS,CAClB;AAED,EAAA,GAAA,MAAA,iBAAgB;AACd,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa,OAAO,oBAAoB,cAAc,aAAa;IAClE,CAAC,aAAa,CAAC;AAElB,QACE,iBAAA,GAAA,kBAAA,KAAC,4BAAD;EAAiC;EAAK,OAAO;EAAsB,gBAAgB,EAAE,oBAAoB;YACvG,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD,EAAkB,WAAW,WAAa,CAAA;EACf,CAAA;;AAIjC,MAAa,8BAAA,GAAA,MAAA,aACV,EAAE,OAAO,gBAAgB,UAAU,GAAG,SAAS,QAAQ;AACtD,QACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,eAAD;EAAsB;EAAY;EAAK,GAAI;YAA3C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,SAAD;GAAS,SAAA;GAAQ,YAAA;GAAW,WAAU;GAAe,YAAW;aAC9D,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,sBAAD,EAAA,UAAA,CACG,gBACD,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,wBAAD;IAAwB,SAAA;cACtB,iBAAA,GAAA,kBAAA,KAACC,YAAAA,oBAAD,EAAsB,CAAA;IACC,CAAA,CACJ,EAAA,CAAA,EACpB,CAAA;GACG,CAAA,EACV,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,sBAAD,EAAuB,UAAgC,CAAA,CACzC;;EAGrB"}

package/lib/Article/ArticleFootNotes.js

@@ -1,8 +1,7 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+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");
-
 //#region src/Article/ArticleFootNotes.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -43,7 +42,7 @@ const FootnoteList = (0, _ndla_styled_system_jsx.styled)("ol", { base: {
 	listStyle: "none"
 } });
 const ArticleFootNotes = ({ footNotes }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FootnoteList, { children: footNotes.map((footNote) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FootNote, { footNote }, footNote.ref)) });
-
 //#endregion
 exports.ArticleFootNotes = ArticleFootNotes;
+
 //# sourceMappingURL=ArticleFootNotes.js.map

package/lib/Article/ArticleFootNotes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleFootNotes.js","names":["Text"],"sources":["../../src/Article/ArticleFootNotes.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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootNote as FootNoteType } from \"../types\";\n\nconst citeDetailString = (description: string | undefined) => (description ? `${description}. ` : \"\");\n\ntype FootNoteProps = {\n  footNote: FootNoteType;\n};\n\nconst StyledCite = styled(\"cite\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nconst FootNote = ({ footNote }: FootNoteProps) => (\n  <li>\n    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle=\"body.medium\" tabIndex={-1}>\n      <StyledCite>\n        <a href={`#ref${footNote.ref}`} target=\"_self\">\n          {footNote.ref}\n        </a>\n        {`«${footNote.title}». ${footNote.authors.join(\" \")}. ${citeDetailString(footNote.edition)}${citeDetailString(\n          footNote.publisher,\n        )}${footNote.year}. `}\n        {footNote.url ? (\n          <a href={footNote.url}>\n            {footNote.url}\n            {\".\"}\n          </a>\n        ) : null}\n      </StyledCite>\n    </Text>\n  </li>\n);\n\ntype ArticleFootNotesProps = {\n  footNotes: Array<FootNoteType>;\n};\n\nconst FootnoteList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    listStyle: \"none\",\n  },\n});\n\nexport const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (\n  <FootnoteList>\n    {footNotes.map((footNote) => (\n      <FootNote key={footNote.ref} footNote={footNote} />\n    ))}\n  </FootnoteList>\n);\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,oBAAoB,gBAAqC,cAAc,GAAG,YAAY,MAAM;AAMlG,MAAM,iDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,YAAY,EAAE,eAClB,2CAAC,kBACC,2CAACA;CAAK,IAAI,OAAO,SAAS;CAAO;CAAQ;CAAW,WAAU;CAAc,UAAU;WACpF,4CAAC;EACC,2CAAC;GAAE,MAAM,OAAO,SAAS;GAAO,QAAO;aACpC,SAAS;IACR;EACH,IAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,KAAK,IAAI,CAAC,IAAI,iBAAiB,SAAS,QAAQ,GAAG,iBAC3F,SAAS,UACV,GAAG,SAAS,KAAK;EACjB,SAAS,MACR,4CAAC;GAAE,MAAM,SAAS;cACf,SAAS,KACT;IACC,GACF;KACO;EACR,GACJ;AAOP,MAAM,mDAAsB,MAAM,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,gBACjC,2CAAC,0BACE,UAAU,KAAK,aACd,2CAAC,YAAsC,YAAxB,SAAS,IAA2B,CACnD,GACW"}
+{"version":3,"file":"ArticleFootNotes.js","names":["Text"],"sources":["../../src/Article/ArticleFootNotes.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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootNote as FootNoteType } from \"../types\";\n\nconst citeDetailString = (description: string | undefined) => (description ? `${description}. ` : \"\");\n\ntype FootNoteProps = {\n  footNote: FootNoteType;\n};\n\nconst StyledCite = styled(\"cite\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nconst FootNote = ({ footNote }: FootNoteProps) => (\n  <li>\n    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle=\"body.medium\" tabIndex={-1}>\n      <StyledCite>\n        <a href={`#ref${footNote.ref}`} target=\"_self\">\n          {footNote.ref}\n        </a>\n        {`«${footNote.title}». ${footNote.authors.join(\" \")}. ${citeDetailString(footNote.edition)}${citeDetailString(\n          footNote.publisher,\n        )}${footNote.year}. `}\n        {footNote.url ? (\n          <a href={footNote.url}>\n            {footNote.url}\n            {\".\"}\n          </a>\n        ) : null}\n      </StyledCite>\n    </Text>\n  </li>\n);\n\ntype ArticleFootNotesProps = {\n  footNotes: Array<FootNoteType>;\n};\n\nconst FootnoteList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    listStyle: \"none\",\n  },\n});\n\nexport const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (\n  <FootnoteList>\n    {footNotes.map((footNote) => (\n      <FootNote key={footNote.ref} footNote={footNote} />\n    ))}\n  </FootnoteList>\n);\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,oBAAoB,gBAAqC,cAAc,GAAG,YAAY,MAAM;AAMlG,MAAM,cAAA,GAAA,wBAAA,QAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,YAAY,EAAE,eAClB,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD;CAAM,IAAI,OAAO,SAAS;CAAO,SAAA;CAAQ,YAAA;CAAW,WAAU;CAAc,UAAU;WACpF,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,MAAM,OAAO,SAAS;GAAO,QAAO;aACpC,SAAS;GACR,CAAA;EACH,IAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,KAAK,IAAI,CAAC,IAAI,iBAAiB,SAAS,QAAQ,GAAG,iBAC3F,SAAS,UACV,GAAG,SAAS,KAAK;EACjB,SAAS,MACR,iBAAA,GAAA,kBAAA,MAAC,KAAD;GAAG,MAAM,SAAS;aAAlB,CACG,SAAS,KACT,IACC;OACF;EACO,EAAA,CAAA;CACR,CAAA,EACJ,CAAA;AAOP,MAAM,gBAAA,GAAA,wBAAA,QAAsB,MAAM,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,gBACjC,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,UACG,UAAU,KAAK,aACd,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAuC,UAAY,EAApC,SAAS,IAA2B,CACnD,EACW,CAAA"}

package/lib/Article/BadgesContainer.js

@@ -1,6 +1,4 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-
+require("../_virtual/_rolldown/runtime.js");
 //#region src/Article/BadgesContainer.tsx
 /**
 * Copyright (c) 2025-present, NDLA.
@@ -9,14 +7,14 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const BadgesContainer = (0, _ndla_styled_system_jsx.styled)("div", { base: {
+const BadgesContainer = (0, require("@ndla/styled-system/jsx").styled)("div", { base: {
 	display: "flex",
 	flexDirection: "row",
 	alignItems: "flex-start",
 	flexWrap: "wrap",
 	gap: "xxsmall"
 } });
-
 //#endregion
 exports.BadgesContainer = BadgesContainer;
+
 //# sourceMappingURL=BadgesContainer.js.map

package/lib/Article/BadgesContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgesContainer.js","names":[],"sources":["../../src/Article/BadgesContainer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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\";\n\nexport const BadgesContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"flex-start\",\n    flexWrap: \"wrap\",\n    gap: \"xxsmall\",\n  },\n});\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,sDAAyB,OAAO,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,UAAU;CACV,KAAK;CACN,EACF,CAAC"}
+{"version":3,"file":"BadgesContainer.js","names":[],"sources":["../../src/Article/BadgesContainer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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\";\n\nexport const BadgesContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"flex-start\",\n    flexWrap: \"wrap\",\n    gap: \"xxsmall\",\n  },\n});\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAA,sCAAA,QAAyB,OAAO,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,UAAU;CACV,KAAK;CACN,EACF,CAAC"}

package/lib/AudioPlayer/AudioPlayer.js

@@ -1,13 +1,12 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_Controls = require('./Controls.js');
-const require_SpeechControl = require('./SpeechControl.js');
+require("../_virtual/_rolldown/runtime.js");
+const require_Controls = require("./Controls.js");
+const require_SpeechControl = require("./SpeechControl.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let react_i18next = require("react-i18next");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/AudioPlayer/AudioPlayer.tsx
 /**
 * Copyright (c) 2017-present, NDLA.
@@ -158,7 +157,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 		})
 	] });
 };
-
 //#endregion
 exports.AudioPlayer = AudioPlayer;
+
 //# sourceMappingURL=AudioPlayer.js.map

package/lib/AudioPlayer/AudioPlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioPlayer.js","names":["Button","SpeechControl","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { 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.js","names":["Button","SpeechControl","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { 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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"}

package/lib/AudioPlayer/Controls.js

@@ -1,4 +1,4 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
@@ -6,7 +6,6 @@ let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ark_ui_react = require("@ark-ui/react");
-
 //#region src/AudioPlayer/Controls.tsx
 /**
 * Copyright (c) 2021-present, NDLA.
@@ -255,7 +254,7 @@ const Controls = ({ src, title }) => {
 		})
 	] })] });
 };
-
 //#endregion
 exports.Controls = Controls;
+
 //# sourceMappingURL=Controls.js.map

package/lib/AudioPlayer/Controls.js.map

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

package/lib/AudioPlayer/SpeechControl.js

@@ -1,10 +1,9 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_primitives = require("@ndla/primitives");
 let react = require("react");
 let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/AudioPlayer/SpeechControl.tsx
 /**
 * Copyright (c) 2021-present, NDLA.
@@ -39,7 +38,7 @@ const SpeechControl = ({ src, title, type = "audio" }) => {
 		})]
 	});
 };
-
 //#endregion
 exports.SpeechControl = SpeechControl;
+
 //# sourceMappingURL=SpeechControl.js.map

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      {/* eslint-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,yCAAsB;CAC9B,MAAM,6BAAoC,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,QACE,4CAAC;EAAI,mBAAgB;aAEnB,2CAAC;GAAM,KAAK;GAAe;GAAY;GAAO,SAAQ;IAAa,EACnE,2CAACA;GAAW,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,2CAACC,6BAAe;IACL;GACT"}
+{"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"}

package/lib/Breadcrumb/Breadcrumb.js

@@ -1,10 +1,9 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
-const require_BreadcrumbItem = require('./BreadcrumbItem.js');
+require("../_virtual/_rolldown/runtime.js");
+const require_BreadcrumbItem = require("./BreadcrumbItem.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let react = require("react");
+require("react");
 let react_i18next = require("react-i18next");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/Breadcrumb/Breadcrumb.tsx
 /**
 * Copyright (c) 2016-present, NDLA.
@@ -40,7 +39,7 @@ const Breadcrumb = ({ items, renderItem, renderSeparator }) => {
 		}, typeof item.to === "string" ? item.to : item.to.pathname)) })
 	});
 };
-
 //#endregion
 exports.Breadcrumb = Breadcrumb;
+
 //# sourceMappingURL=Breadcrumb.js.map

package/lib/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst StyledList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    listStyle: \"none\",\n    gap: \"xxsmall\",\n    mobileDown: {\n      alignItems: \"flex-start\",\n      justifyContent: \"center\",\n      flexDirection: \"column\",\n    },\n  },\n});\n\nexport const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {\n  const { t } = useTranslation();\n\n  return (\n    <nav aria-label={t(\"breadcrumb.breadcrumb\")}>\n      <StyledList>\n        {items.map((item, index) => (\n          <BreadcrumbItem\n            renderItem={renderItem}\n            renderSeparator={renderSeparator}\n            key={typeof item.to === \"string\" ? item.to : item.to.pathname}\n            totalCount={items.length}\n            item={{ ...item, index }}\n          />\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,iDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,yCAAsB;AAE9B,QACE,2CAAC;EAAI,cAAY,EAAE,wBAAwB;YACzC,2CAAC,wBACE,MAAM,KAAK,MAAM,UAChB,2CAACA;GACa;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;KAFnB,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,GACS;GACT"}
+{"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst StyledList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n    listStyle: \"none\",\n    gap: \"xxsmall\",\n    mobileDown: {\n      alignItems: \"flex-start\",\n      justifyContent: \"center\",\n      flexDirection: \"column\",\n    },\n  },\n});\n\nexport const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {\n  const { t } = useTranslation();\n\n  return (\n    <nav aria-label={t(\"breadcrumb.breadcrumb\")}>\n      <StyledList>\n        {items.map((item, index) => (\n          <BreadcrumbItem\n            renderItem={renderItem}\n            renderSeparator={renderSeparator}\n            key={typeof item.to === \"string\" ? item.to : item.to.pathname}\n            totalCount={items.length}\n            item={{ ...item, index }}\n          />\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,cAAA,GAAA,wBAAA,QAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAE9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY,EAAE,wBAAwB;YACzC,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,gBAAD;GACc;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;GACxB,EAHK,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,EACS,CAAA;EACT,CAAA"}

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -1,8 +1,7 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.js');
+require("../_virtual/_rolldown/runtime.js");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
-let react = require("react");
+require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/Breadcrumb/BreadcrumbItem.tsx
 /**
 * Copyright (c) 2016-present, NDLA.
@@ -26,7 +25,7 @@ const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }) => {
 		children: [renderItem(item, totalCount), renderSeparator(item, totalCount)]
 	});
 };
-
 //#endregion
 exports.BreadcrumbItem = BreadcrumbItem;
+
 //# sourceMappingURL=BreadcrumbItem.js.map