@ndla/ui 56.0.166-alpha.0 → 56.0.168-alpha.0

package/lib/Article/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text","ArticleByline"],"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 { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\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 { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\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\ninterface Props {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  article: ArticleType;\n  licenseBox?: ReactNode;\n  children?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n  badges,\n  article,\n  licenseBox,\n  children,\n  competenceGoals,\n  id,\n  heartButton,\n  lang,\n  disclaimer,\n}: Props) => {\n  const { title, introduction, published, content, footNotes, copyright } = article;\n\n  const authors =\n    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n  return (\n    <ArticleWrapper>\n      <ArticleTitle\n        id={id}\n        badges={badges}\n        heartButton={heartButton}\n        title={title}\n        introduction={introduction}\n        competenceGoals={competenceGoals}\n        lang={lang}\n        disclaimer={disclaimer}\n      />\n      <ArticleContent>{content}</ArticleContent>\n      <ArticleFooter>\n        <ArticleByline\n          lang={lang}\n          footnotes={footNotes}\n          authors={authors}\n          suppliers={copyright?.rightsholders}\n          published={published}\n          licenseBox={licenseBox}\n        />\n        {children}\n      </ArticleFooter>\n    </ArticleWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,4DAA8BA,mBAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,wCACV,EAAE,WAAW,GAAG,SAAS,QACxB,2CAAC;CAAqB,4CAAc,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,4DACJA,mBAAI,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,qDACXA,mBAAI,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,qDACXA,mBAAI,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,qDACXA,mBAAI,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,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qDAAuB,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;;AAgBpB,MAAa,WAAW,EACtB,QACA,SACA,YACA,UACA,iBACA,IACA,aACA,MACA,iBACW;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,cAAc;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,QACE,4CAAC;EACC,2CAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,2CAAC,4BAAgB,UAAyB;EAC1C,4CAAC,4BACC,2CAACC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}
+{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text","ArticleByline"],"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 { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\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 { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\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\ninterface Props {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  article: ArticleType;\n  licenseBox?: ReactNode;\n  children?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n  badges,\n  article,\n  licenseBox,\n  children,\n  competenceGoals,\n  id,\n  heartButton,\n  lang,\n  disclaimer,\n}: Props) => {\n  const { title, introduction, published, content, footNotes, copyright } = article;\n\n  const authors =\n    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n  return (\n    <ArticleWrapper>\n      <ArticleTitle\n        id={id}\n        badges={badges}\n        heartButton={heartButton}\n        title={title}\n        introduction={introduction}\n        competenceGoals={competenceGoals}\n        lang={lang}\n        disclaimer={disclaimer}\n      />\n      <ArticleContent>{content}</ArticleContent>\n      <ArticleFooter>\n        <ArticleByline\n          lang={lang}\n          footnotes={footNotes}\n          authors={authors}\n          suppliers={copyright?.rightsholders}\n          published={published}\n          licenseBox={licenseBox}\n        />\n        {children}\n      </ArticleFooter>\n    </ArticleWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,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;;AAgBpB,MAAa,WAAW,EACtB,QACA,SACA,YACA,UACA,iBACA,IACA,aACA,MACA,iBACW;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,cAAc;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,QACE,4CAAC;EACC,2CAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,2CAAC,4BAAgB,UAAyB;EAC1C,4CAAC,4BACC,2CAACC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}

package/lib/Article/ArticleByline.js

@@ -1,11 +1,11 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_ArticleFootNotes = require('./ArticleFootNotes.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
-let __ndla_icons = require("@ndla/icons");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_icons = require("@ndla/icons");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_router = require("react-router");
 
@@ -17,13 +17,13 @@ let react_router = require("react-router");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const Wrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const Wrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	marginBlockStart: "medium",
 	paddingBlockStart: "xsmall",
 	borderTop: "1px solid",
 	borderColor: "stroke.subtle"
 } });
-const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
+const TextWrapper = (0, _ndla_styled_system_jsx.styled)("div", {
 	base: {
 		display: "flex",
 		flexDirection: "column",
@@ -42,7 +42,7 @@ const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
 function formatList(list, listFormatter) {
 	return listFormatter.format(list.map((l) => l.name));
 }
-const StyledAccordionRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.AccordionRoot, { base: {
+const StyledAccordionRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.AccordionRoot, { base: {
 	paddingBlockStart: "xxlarge",
 	_print: { display: "none" }
 } });
@@ -78,7 +78,7 @@ const ArticleByline = ({ lang, authors = [], suppliers = [], footnotes, licenseB
 		learningpath: bylineType === "learningPath",
 		children: [
 			!!showPrimaryContributors && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [authors.length > 0 && `${t("article.authorsLabel", { context: bylineType })} ${formatList(authors, listFormatter)}. `, suppliers.length > 0 && `${t("article.supplierLabel", { count: suppliers.length })} ${formatList(suppliers, listFormatter)}.`] }),
-			learningpathCopiedFrom ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+			learningpathCopiedFrom ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_safelink.SafeLink, {
 				to: learningpathCopiedFrom,
 				children: t(`learningPath.copiedFrom`)
 			}) : null,
@@ -108,20 +108,20 @@ const ArticleByline = ({ lang, authors = [], suppliers = [], footnotes, licenseB
 	})] });
 };
 const ArticleBylineAccordionItem = (0, react.forwardRef)(({ value, accordionTitle, children, ...props }, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.AccordionItem, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.AccordionItem, {
 		value,
 		ref,
 		...props,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Heading, {
 			asChild: true,
 			consumeCss: true,
 			textStyle: "label.medium",
 			fontWeight: "bold",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.AccordionItemTrigger, { children: [accordionTitle, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionItemIndicator, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.AccordionItemTrigger, { children: [accordionTitle, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.AccordionItemIndicator, {
 				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowDownShortLine, {})
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.ArrowDownShortLine, {})
 			})] }) })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionItemContent, { children })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.AccordionItemContent, { children })]
 	});
 });
 

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 { type ReactNode, forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useLocation } from \"react-router\";\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 { ArticleFootNotes } from \"./ArticleFootNotes\";\nimport type { FootNote } from \"../types\";\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\";\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  const { pathname } = useLocation();\n  const [openAccordions, setOpenAccordions] = useState<string[]>([]);\n  const accordionItemValue = \"rulesForUse\";\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {\n        setOpenAccordions([...openAccordions, footnotesAccordionId]);\n        const el = document.getElementById(`#${hash}`);\n        el?.click();\n        el?.focus();\n      }\n    },\n    [openAccordions],\n  );\n\n  useEffect(() => {\n    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));\n  }, [pathname]);\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\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\n          multiple\n          value={openAccordions}\n          onValueChange={(details) => setOpenAccordions(details.value)}\n        >\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && (\n            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n              <ArticleFootNotes footNotes={footnotes} />\n            </ArticleBylineAccordionItem>\n          )}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\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 { type ReactNode, forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useLocation } from \"react-router\";\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 { ArticleFootNotes } from \"./ArticleFootNotes\";\nimport type { FootNote } from \"../types\";\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\";\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  const { pathname } = useLocation();\n  const [openAccordions, setOpenAccordions] = useState<string[]>([]);\n  const accordionItemValue = \"rulesForUse\";\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {\n        setOpenAccordions([...openAccordions, footnotesAccordionId]);\n        const el = document.getElementById(`#${hash}`);\n        el?.click();\n        el?.focus();\n      }\n    },\n    [openAccordions],\n  );\n\n  useEffect(() => {\n    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));\n  }, [pathname]);\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\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\n          multiple\n          value={openAccordions}\n          onValueChange={(details) => setOpenAccordions(details.value)}\n        >\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && (\n            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n              <ArticleFootNotes footNotes={footnotes} />\n            </ArticleBylineAccordionItem>\n          )}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}

package/lib/Article/ArticleFootNotes.js

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+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
@@ -12,12 +12,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 */
 const citeDetailString = (description) => description ? `${description}. ` : "";
-const StyledCite = (0, __ndla_styled_system_jsx.styled)("cite", { base: {
+const StyledCite = (0, _ndla_styled_system_jsx.styled)("cite", { base: {
 	display: "flex",
 	alignItems: "center",
 	gap: "xsmall"
 } });
-const FootNote = ({ footNote }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+const FootNote = ({ footNote }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Text, {
 	id: `note${footNote.ref}`,
 	asChild: true,
 	consumeCss: true,
@@ -35,7 +35,7 @@ const FootNote = ({ footNote }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("l
 		}) : null
 	] })
 }) });
-const FootnoteList = (0, __ndla_styled_system_jsx.styled)("ol", { base: {
+const FootnoteList = (0, _ndla_styled_system_jsx.styled)("ol", { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "medium",

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\">\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,kDAAoB,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;WAC5D,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,oDAAsB,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\">\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;WAC5D,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"}

package/lib/Article/BadgesContainer.js

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 
 //#region src/Article/BadgesContainer.tsx
 /**
@@ -9,7 +9,7 @@ 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, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	flexDirection: "row",
 	alignItems: "flex-start",

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,uDAAyB,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,sDAAyB,OAAO,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,UAAU;CACV,KAAK;CACN,EACF,CAAC"}

package/lib/AudioPlayer/AudioPlayer.js

@@ -2,10 +2,10 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 const require_Controls = require('./Controls.js');
 const require_SpeechControl = require('./SpeechControl.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
-let __ndla_safelink = require("@ndla/safelink");
+let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/AudioPlayer/AudioPlayer.tsx
@@ -16,7 +16,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const AudioPlayerWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const AudioPlayerWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	border: "1px solid",
 	borderColor: "stroke.default",
 	borderRadius: "xsmall",
@@ -24,11 +24,11 @@ const AudioPlayerWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	marginBlockEnd: "4xsmall",
 	overflow: "hidden"
 } });
-const InfoWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const InfoWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	tabletWideDown: { display: "block" }
 } });
-const ImageWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ImageWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	alignItems: "center",
 	flex: "1 0 auto",
@@ -51,7 +51,7 @@ const ImageWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 		height: "auto"
 	}
 } });
-const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const TextWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	alignItems: "flex-start",
 	flexDirection: "column",
@@ -63,7 +63,7 @@ const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 		paddingInline: "medium"
 	} }
 } });
-const TitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const TitleWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "xsmall",
@@ -74,7 +74,7 @@ const TitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 		justifyContent: "space-between"
 	}
 } });
-const TextVersionWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const TextVersionWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "xsmall",
@@ -84,15 +84,15 @@ const TextVersionWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	paddingInline: "xsmall",
 	tablet: { paddingInline: "medium" }
 } });
-const TextVersionText = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const TextVersionText = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	maxWidth: "surface.xlarge",
 	"& span > *": { whiteSpace: "pre-wrap" },
 	"& p:not(:first-child):not(:last-child)": { marginBlock: "small" },
 	"& p[data-align=\"center\"]": { textAlign: "center" },
 	"& p:has(span[dir=\"rtl\"])": { direction: "rtl" }
 } });
-const TextVersionButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { alignSelf: "flex-start" } });
-const ShowMoreButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginInlineStart: "3xsmall" } });
+const TextVersionButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { alignSelf: "flex-start" } });
+const ShowMoreButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: { marginInlineStart: "3xsmall" } });
 const DESCRIPTION_MAX_LENGTH = 200;
 const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }) => {
 	const { t } = (0, react_i18next.useTranslation)();
@@ -122,16 +122,16 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextWrapper, {
 			"data-has-image": !!img,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [subtitle?.url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TitleWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [subtitle?.url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_safelink.SafeLink, {
 					to: subtitle.url,
 					children: subtitle.title
-				}) : subtitle?.title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+				}) : subtitle?.title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Heading, {
 					asChild: true,
 					consumeCss: true,
 					textStyle: "title.large",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title })
 				})] }), !!textVersion && !img && textVersionButton] }),
-				!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.Text, {
+				!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.Text, {
 					textStyle: "body.medium",
 					children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShowMoreButton, {
 						variant: "link",
@@ -149,7 +149,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 		!!textVersion && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextVersionWrapper, {
 			id: textDescriptionId,
 			hidden: !showTextVersion,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.Heading, {
 				asChild: true,
 				textStyle: "title.medium",
 				consumeCss: true,

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 { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Controls } from \"./Controls\";\nimport { SpeechControl } from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"4xsmall\",\n    overflow: \"hidden\",\n  },\n});\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    tabletWideDown: {\n      display: \"block\",\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: \"1 0 auto\",\n    width: \"surface.4xsmall\",\n    height: \"surface.4xsmall\",\n    overflow: \"hidden\",\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    desktop: {\n      width: \"260px\",\n      height: \"260px\",\n    },\n    tabletWideDown: {\n      maxHeight: \"surface.small\",\n      maxWidth: \"100%\",\n      width: \"100%\",\n      height: \"auto\",\n    },\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    padding: \"xsmall\",\n    width: \"100%\",\n    \"&[data-has-image='true']\": {\n      tablet: {\n        paddingBlock: \"xsmall\",\n        paddingInline: \"medium\",\n      },\n    },\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    fontFamily: \"sans\",\n    tabletWide: {\n      width: \"100%\",\n      flexDirection: \"row\",\n      justifyContent: \"space-between\",\n    },\n  },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    paddingBlock: \"medium\",\n    paddingInline: \"xsmall\",\n    tablet: {\n      paddingInline: \"medium\",\n    },\n  },\n});\n\nconst TextVersionText = styled(\"div\", {\n  base: {\n    maxWidth: \"surface.xlarge\",\n    \"& span > *\": {\n      whiteSpace: \"pre-wrap\",\n    },\n    \"& p:not(:first-child):not(:last-child)\": {\n      marginBlock: \"small\",\n    },\n    '& p[data-align=\"center\"]': {\n      textAlign: \"center\",\n    },\n    '& p:has(span[dir=\"rtl\"])': {\n      direction: \"rtl\",\n    },\n  },\n});\n\nconst TextVersionButton = styled(Button, {\n  base: {\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ShowMoreButton = styled(Button, {\n  base: {\n    marginInlineStart: \"3xsmall\",\n  },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\ntype Props = {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  speech?: boolean;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n};\n\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 { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Controls } from \"./Controls\";\nimport { SpeechControl } from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"4xsmall\",\n    overflow: \"hidden\",\n  },\n});\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    tabletWideDown: {\n      display: \"block\",\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: \"1 0 auto\",\n    width: \"surface.4xsmall\",\n    height: \"surface.4xsmall\",\n    overflow: \"hidden\",\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    desktop: {\n      width: \"260px\",\n      height: \"260px\",\n    },\n    tabletWideDown: {\n      maxHeight: \"surface.small\",\n      maxWidth: \"100%\",\n      width: \"100%\",\n      height: \"auto\",\n    },\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    padding: \"xsmall\",\n    width: \"100%\",\n    \"&[data-has-image='true']\": {\n      tablet: {\n        paddingBlock: \"xsmall\",\n        paddingInline: \"medium\",\n      },\n    },\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    fontFamily: \"sans\",\n    tabletWide: {\n      width: \"100%\",\n      flexDirection: \"row\",\n      justifyContent: \"space-between\",\n    },\n  },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    paddingBlock: \"medium\",\n    paddingInline: \"xsmall\",\n    tablet: {\n      paddingInline: \"medium\",\n    },\n  },\n});\n\nconst TextVersionText = styled(\"div\", {\n  base: {\n    maxWidth: \"surface.xlarge\",\n    \"& span > *\": {\n      whiteSpace: \"pre-wrap\",\n    },\n    \"& p:not(:first-child):not(:last-child)\": {\n      marginBlock: \"small\",\n    },\n    '& p[data-align=\"center\"]': {\n      textAlign: \"center\",\n    },\n    '& p:has(span[dir=\"rtl\"])': {\n      direction: \"rtl\",\n    },\n  },\n});\n\nconst TextVersionButton = styled(Button, {\n  base: {\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ShowMoreButton = styled(Button, {\n  base: {\n    marginInlineStart: \"3xsmall\",\n  },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\ntype Props = {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  speech?: boolean;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n};\n\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,11 +1,11 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
 let react = require("react");
-let __ndla_primitives = require("@ndla/primitives");
-let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
+let _ndla_primitives = require("@ndla/primitives");
+let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
-let __ndla_icons = require("@ndla/icons");
+let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react = require("@ark-ui/react");
 
 //#region src/AudioPlayer/Controls.tsx
 /**
@@ -15,7 +15,7 @@ let __ark_ui_react = require("@ark-ui/react");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const ControlsWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const ControlsWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	borderBlockStart: "1px solid",
 	borderColor: "stroke.default",
 	borderBottomRadius: "xsmall",
@@ -38,10 +38,10 @@ const ControlsWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	},
 	mobileWideDown: { columnGap: "3xsmall" }
 } });
-const PlayButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "play" } });
-const Forward15SecButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "forwards" } });
-const Back15SecButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "backwards" } });
-const ProgressWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+const PlayButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.IconButton, { base: { gridArea: "play" } });
+const Forward15SecButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.IconButton, { base: { gridArea: "forwards" } });
+const Back15SecButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.IconButton, { base: { gridArea: "backwards" } });
+const ProgressWrapper = (0, _ndla_styled_system_jsx.styled)("div", { base: {
 	flex: "1",
 	display: "flex",
 	alignItems: "center",
@@ -50,13 +50,13 @@ const ProgressWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	paddingBlock: "xsmall",
 	mobileDown: { paddingInline: "xsmall" }
 } });
-const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: {
+const StyledText = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Text, { base: {
 	minWidth: "xxlarge",
 	flexShrink: "0",
 	textAlign: "center"
 } });
-const VolumeButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { gridArea: "volume" } });
-const SpeedButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: {
+const VolumeButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.IconButton, { base: { gridArea: "volume" } });
+const SpeedButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button, { base: {
 	paddingBlock: "auto",
 	paddingInline: "auto",
 	maxWidth: "xxlarge",
@@ -65,18 +65,18 @@ const SpeedButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Butto
 	minHeight: "xxlarge",
 	"& span": { flex: "1" }
 } });
-const StyledSelectRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.SelectRoot, { base: { gridArea: "speed" } });
-const StyledSliderControl = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.SliderControl, { base: {
+const StyledSelectRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SelectRoot, { base: { gridArea: "speed" } });
+const StyledSliderControl = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SliderControl, { base: {
 	height: "surface.3xsmall",
 	minWidth: "small"
 } });
-const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: { paddingInline: "small" } });
+const StyledPopoverContent = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PopoverContent, { base: { paddingInline: "small" } });
 const formatTime = (seconds) => {
 	const minutes = Math.floor(seconds / 60);
 	const currentSeconds = seconds % 60;
 	return `${minutes}:${currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}`;
 };
-const speedValues = (0, __ark_ui_react.createListCollection)({ items: [
+const speedValues = (0, _ark_ui_react.createListCollection)({ items: [
 	"0.5",
 	"0.75",
 	"1",
@@ -155,20 +155,20 @@ const Controls = ({ src, title }) => {
 			title: t("audio.controls.rewind15sec"),
 			"aria-label": t("audio.controls.rewind15sec"),
 			onClick: () => onSeekSeconds(-15),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.Replay15Line, {})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.Replay15Line, {})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayButton, {
 			"aria-label": t(playing ? t("audio.pause") : t("audio.play")),
 			variant: "primary",
 			onClick: togglePlay,
-			children: playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.PauseLine, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.PlayFill, {})
+			children: playing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.PauseLine, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.PlayFill, {})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Forward15SecButton, {
 			variant: "tertiary",
 			title: t("audio.controls.forward15sec"),
 			"aria-label": t("audio.controls.forward15sec"),
 			onClick: () => onSeekSeconds(15),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.Forward15Line, {})
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.Forward15Line, {})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ProgressWrapper, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
@@ -177,7 +177,7 @@ const Controls = ({ src, title }) => {
 				consumeCss: true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: formatTime(currentTime) })
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SliderRoot, {
 				value: [currentTime],
 				defaultValue: [0],
 				step: 1,
@@ -187,12 +187,12 @@ const Controls = ({ src, title }) => {
 					start: formatTime(Math.round(value.value)),
 					end: formatTime(Math.round(duration))
 				}),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderLabel, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderLabel, {
 					srOnly: true,
 					children: t("audio.progressBar")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderTrack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderRange, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderThumb, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderTrack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderRange, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderThumb, {
 					index: 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderHiddenInput, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderHiddenInput, {})
 				})] })]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
@@ -202,17 +202,17 @@ const Controls = ({ src, title }) => {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: ["-", formatTime(Math.round(duration - currentTime))] })
 			})
 		] }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.FieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSelectRoot, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.FieldRoot, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSelectRoot, {
 			collection: speedValues,
 			value: [speedValue.toString()],
 			onValueChange: (details) => onPlaybackRateChange(parseFloat(details.value[0])),
 			positioning: { placement: "top" },
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectLabel, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SelectLabel, {
 					srOnly: true,
 					children: t("audio.controls.selectSpeed")
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectTrigger, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SelectControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SelectTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeedButton, {
 						variant: "tertiary",
@@ -221,22 +221,22 @@ const Controls = ({ src, title }) => {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `${speedValue}x` })
 					})
 				}) }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectContent, { children: speedValues.items.map((speed) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SelectItem, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SelectContent, { children: speedValues.items.map((speed) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SelectItem, {
 					item: speed,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SelectItemText, { children: [speed, "x"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SelectItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CheckLine, {}) })]
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SelectItemText, { children: [speed, "x"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SelectItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.CheckLine, {}) })]
 				}, speed)) })
 			]
 		}) }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, {
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.PopoverRoot, {
 			positioning: { placement: "top" },
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.PopoverTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VolumeButton, {
 					variant: "tertiary",
 					"aria-label": t("audio.controls.adjustVolume"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.VolumeUpFill, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_icons.VolumeUpFill, {})
 				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.SliderRoot, {
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ndla_primitives.SliderRoot, {
 				orientation: "vertical",
 				value: [volumeValue],
 				min: 0,
@@ -244,12 +244,12 @@ const Controls = ({ src, title }) => {
 				defaultValue: [100],
 				step: 1,
 				onValueChange: handleVolumeSliderChange,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderLabel, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderLabel, {
 					srOnly: true,
 					children: t("audio.controls.adjustVolume")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderTrack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderRange, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderThumb, {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSliderControl, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderTrack, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderRange, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderThumb, {
 					index: 0,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.SliderHiddenInput, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_primitives.SliderHiddenInput, {})
 				})] })]
 			}) })]
 		})