@ndla/ui 56.0.148-alpha.0 → 56.0.150-alpha.0

package/dist/panda.buildinfo.json

@@ -36,6 +36,8 @@
       "flexDirection]___[value:row]___[cond:tabletWide",
       "gap]___[value:xsmall",
       "listStyle]___[value:none",
+      "flexDirection]___[value:row",
+      "gap]___[value:xxsmall",
       "border]___[value:1px solid",
       "borderColor]___[value:stroke.default",
       "borderRadius]___[value:xsmall",
@@ -85,7 +87,6 @@
       "gridArea]___[value:forwards",
       "gridArea]___[value:backwards",
       "flex]___[value:1",
-      "gap]___[value:xxsmall",
       "gridArea]___[value:track",
       "paddingInline]___[value:xsmall]___[cond:mobileDown",
       "minWidth]___[value:xxlarge",

package/dist/styles.css

@@ -220,6 +220,10 @@
     list-style: none;
 }
 
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
   .bd-c_stroke\.default {
     border-color: var(--colors-stroke-default);
 }
@@ -256,10 +260,6 @@
     flex: 1 1 0%;
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .py_auto {
     padding-block: auto;
 }
@@ -372,6 +372,10 @@
     padding-block-start: var(--spacing-xsmall);
 }
 
+  .flex-d_row {
+    flex-direction: row;
+}
+
   .bx-sh_full {
     box-shadow: var(--shadows-full);
 }

package/es/Article/Article.mjs

@@ -1,4 +1,4 @@
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge.mjs";
+import { BadgesContainer } from "./BadgesContainer.mjs";
 import { ArticleByline } from "./ArticleByline.mjs";
 import { forwardRef } from "react";
 import { Heading, Text } from "@ndla/primitives";
@@ -72,12 +72,9 @@ const StyledWrapper = styled("div", { base: {
 	flexWrap: "wrap",
 	alignItems: "center"
 } });
-const ArticleTitle = ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, disclaimer }) => {
+const ArticleTitle = ({ badges, heartButton, title, lang, id, introduction, competenceGoals, disclaimer }) => {
 	return /* @__PURE__ */ jsxs(ArticleHeader, { children: [
-		/* @__PURE__ */ jsxs(ArticleHGroup, { children: [(!!contentType || !!heartButton) && /* @__PURE__ */ jsxs(InfoWrapper, { children: [!!contentType && /* @__PURE__ */ jsx(ContentTypeBadge, {
-			contentType,
-			children: contentTypeLabel
-		}), heartButton] }), /* @__PURE__ */ jsx(Heading, {
+		/* @__PURE__ */ jsxs(ArticleHGroup, { children: [(!!badges || !!heartButton) && /* @__PURE__ */ jsxs(InfoWrapper, { children: [/* @__PURE__ */ jsx(BadgesContainer, { children: badges }), heartButton] }), /* @__PURE__ */ jsx(Heading, {
 			textStyle: "heading.medium",
 			id,
 			lang,
@@ -94,19 +91,18 @@ const ArticleTitle = ({ contentType, heartButton, title, lang, id, introduction,
 		/* @__PURE__ */ jsxs(StyledWrapper, { children: [competenceGoals, disclaimer] })
 	] });
 };
-const Article = ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, disclaimer }) => {
+const Article = ({ badges, article, licenseBox, children, competenceGoals, id, heartButton, lang, disclaimer }) => {
 	const { title, introduction, published, content, footNotes, copyright } = article;
 	const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
 	return /* @__PURE__ */ jsxs(ArticleWrapper, { children: [
 		/* @__PURE__ */ jsx(ArticleTitle, {
 			id,
-			contentType,
+			badges,
 			heartButton,
 			title,
 			introduction,
 			competenceGoals,
 			lang,
-			contentTypeLabel,
 			disclaimer
 		}),
 		/* @__PURE__ */ jsx(ArticleContent, { children: content }),

package/es/Article/Article.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Article.mjs","names":[],"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 { ContentTypeBadge, type ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\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  heartButton?: ReactNode;\n  contentType?: ContentType;\n  contentTypeLabel?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  contentType,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  contentTypeLabel,\n  competenceGoals,\n  disclaimer,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!contentType || !!heartButton) && (\n          <InfoWrapper>\n            {!!contentType && <ContentTypeBadge contentType={contentType}>{contentTypeLabel}</ContentTypeBadge>}\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    </ArticleHeader>\n  );\n};\n\ninterface Props {\n  heartButton?: ReactNode;\n  article: ArticleType;\n  licenseBox?: ReactNode;\n  contentType?: ContentType;\n  contentTypeLabel?: ReactNode;\n  children?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n  article,\n  contentType,\n  licenseBox,\n  children,\n  competenceGoals,\n  contentTypeLabel,\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        contentType={contentType}\n        heartButton={heartButton}\n        title={title}\n        introduction={introduction}\n        competenceGoals={competenceGoals}\n        lang={lang}\n        contentTypeLabel={contentTypeLabel}\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,uBAAuB,OAAO,IAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,iBAAiB,YAC3B,EAAE,UAAW,GAAG,SAAS,QACxB,oBAAC;CAAqB,WAAW,GAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,OAC3B,IAAI,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,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,gBAAgB,OAC3B,IAAI,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,gBAAgB,OAC3B,IAAI,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,gBAAgB,OAC3B,IAAI,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,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,aACA,aACA,OACA,MACA,IACA,cACA,kBACA,iBACA,iBACuB;AACvB,QACE,qBAAC;EACC,qBAAC,6BACG,CAAC,CAAC,eAAe,CAAC,CAAC,gBACnB,qBAAC,0BACE,CAAC,CAAC,eAAe,oBAAC;GAA8B;aAAc;IAAoC,EAClG,eACW,EAEhB,oBAAC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,oBAAC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,oBAAC,mBAAK,eAAmB;IACpB;EAET,qBAAC,4BACE,iBACA,cACa;KACF;;AAiBpB,MAAa,WAAW,EACtB,SACA,aACA,YACA,UACA,iBACA,kBACA,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,qBAAC;EACC,oBAAC;GACK;GACS;GACA;GACN;GACO;GACG;GACX;GACY;GACN;IACZ;EACF,oBAAC,4BAAgB,UAAyB;EAC1C,qBAAC,4BACC,oBAAC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}
+{"version":3,"file":"Article.mjs","names":[],"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}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            <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    </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,uBAAuB,OAAO,IAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,iBAAiB,YAC3B,EAAE,UAAW,GAAG,SAAS,QACxB,oBAAC;CAAqB,WAAW,GAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,OAC3B,IAAI,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,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,gBAAgB,OAC3B,IAAI,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,gBAAgB,OAC3B,IAAI,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,gBAAgB,OAC3B,IAAI,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,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAaF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,iBACuB;AACvB,QACE,qBAAC;EACC,qBAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,qBAAC,0BACC,oBAAC,6BAAiB,SAAyB,EAC1C,eACW,EAEhB,oBAAC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,oBAAC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,oBAAC,mBAAK,eAAmB;IACpB;EAET,qBAAC,4BACE,iBACA,cACa;KACF;;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,qBAAC;EACC,oBAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,oBAAC,4BAAgB,UAAyB;EAC1C,qBAAC,4BACC,oBAAC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}

package/es/Article/BadgesContainer.mjs

@@ -0,0 +1,14 @@
+import { styled } from "@ndla/styled-system/jsx";
+
+//#region src/Article/BadgesContainer.tsx
+const BadgesContainer = styled("div", { base: {
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "flex-start",
+	flexWrap: "wrap",
+	gap: "xxsmall"
+} });
+
+//#endregion
+export { BadgesContainer };
+//# sourceMappingURL=BadgesContainer.mjs.map

package/es/Article/BadgesContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgesContainer.mjs","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,kBAAkB,OAAO,OAAO,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,UAAU;CACV,KAAK;CACN,EACF,CAAC"}

package/es/AudioPlayer/AudioPlayer.mjs

@@ -1,5 +1,5 @@
-import Controls_default from "./Controls.mjs";
-import SpeechControl_default from "./SpeechControl.mjs";
+import { Controls } from "./Controls.mjs";
+import { SpeechControl } from "./SpeechControl.mjs";
 import { useId, useMemo, useState } from "react";
 import { Button, Heading, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -92,7 +92,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 	const [showFullDescription, setShowFullDescription] = useState(false);
 	const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
 	const textDescriptionId = useId();
-	if (speech) return /* @__PURE__ */ jsx(SpeechControl_default, {
+	if (speech) return /* @__PURE__ */ jsx(SpeechControl, {
 		src,
 		title
 	});
@@ -134,7 +134,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 				!!textVersion && !!img && textVersionButton
 			]
 		})] }),
-		/* @__PURE__ */ jsx(Controls_default, {
+		/* @__PURE__ */ jsx(Controls, {
 			src,
 			title
 		}),
@@ -150,8 +150,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
 		})
 	] });
 };
-var AudioPlayer_default = AudioPlayer;
 
 //#endregion
-export { AudioPlayer_default as default };
+export { AudioPlayer };
 //# sourceMappingURL=AudioPlayer.mjs.map

package/es/AudioPlayer/AudioPlayer.mjs.map

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

@@ -66,8 +66,7 @@ const StyledPopoverContent = styled(PopoverContent, { base: { paddingInline: "sm
 const formatTime = (seconds) => {
 	const minutes = Math.floor(seconds / 60);
 	const currentSeconds = seconds % 60;
-	const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
-	return `${minutes}:${formattedSeconds}`;
+	return `${minutes}:${currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds}`;
 };
 const speedValues = createListCollection({ items: [
 	"0.5",
@@ -247,8 +246,7 @@ const Controls = ({ src, title }) => {
 		})
 	] })] });
 };
-var Controls_default = Controls;
 
 //#endregion
-export { Controls_default as default };
+export { Controls };
 //# sourceMappingURL=Controls.mjs.map

package/es/AudioPlayer/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","names":["currentTime"],"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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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\";\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\nconst 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 [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\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        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\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 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={[audioRef.current?.currentTime || 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration || 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\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(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(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\nexport default Controls;\n"],"mappings":";;;;;;;;;AAsCA,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,kBAAkB;CAClB,aAAa;CACb,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACL,cAAc;CACd,eAAe;CACf,gBAAgB;EACd,SAAS;EACT,cAAc;EACd,eAAe;EACf,qBAAqB;EACrB,mBAAmB;;;;EAIpB;CACD,gBAAgB,EACd,WAAW,WACZ;CACF,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,YAAY,EACpC,MAAM,EACJ,UAAU,QACX,EACF,CAAC;AAEF,MAAM,qBAAqB,OAAO,YAAY,EAC5C,MAAM,EACJ,UAAU,YACX,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,YAAY,EACzC,MAAM,EACJ,UAAU,aACX,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,KAAK;CACL,UAAU;CACV,cAAc;CACd,YAAY,EACV,eAAe,UAChB;CACF,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,YAAY,EACtC,MAAM,EACJ,UAAU,UACX,EACF,CAAC;AAEF,MAAM,cAAc,OAAO,QAAQ,EACjC,MAAM;CACJ,cAAc;CACd,eAAe;CACf,UAAU;CACV,WAAW;CACX,UAAU;CACV,WAAW;CACX,UAAU,EACR,MAAM,KACP;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,YAAoB,EAClD,MAAM,EACJ,UAAU,SACX,EACF,CAAC;AAEF,MAAM,sBAAsB,OAAO,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;CACX,EACF,CAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,eAAe,SAChB,EACF,CAAC;AAEF,MAAM,cAAc,YAAoB;CACtC,MAAM,UAAU,KAAK,MAAM,UAAU,GAAG;CACxC,MAAM,iBAAiB,UAAU;CAEjC,MAAM,mBAAmB,iBAAiB,KAAK,IAAI,mBAAmB;AACtE,QAAO,GAAG,QAAQ,GAAG;;AAGvB,MAAM,cAAc,qBAAqB,EAAE,OAAO;CAAC;CAAO;CAAQ;CAAK;CAAQ;CAAO;CAAQ;CAAI,EAAE,CAAC;AAOrG,MAAM,YAAY,EAAE,KAAK,YAAmB;CAC1C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,aAAa,kBAAkB,SAAS,IAAI;CACnD,MAAM,CAAC,aAAa,kBAAkB,SAAS,EAAE;CACjD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CACrD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,WAAW,OAAyB,KAAK;AAE/C,iBAAgB;AACd,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,CAAC,WAAW,CAAC;AAEhB,iBAAgB;AACd,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;GAC9B,MAAM,yBAAyB;IAC7B,MAAM,EAAE,4BAAa,aAAa;AAClC,mBAAe,KAAK,MAAMA,cAAY,CAAC;AACvC,qBAAiB,KAAK,MAAM,WAAWA,cAAY,CAAC;;GAGtD,MAAM,6BAA6B;IACjC,MAAM,EAAE,4BAAa,aAAa;AAClC,mBAAe,KAAK,MAAMA,cAAY,CAAC;AACvC,qBAAiB,KAAK,MAAM,WAAWA,cAAY,CAAC;;GAGtD,MAAM,wBAAwB;AAC5B,eAAW,MAAM;;AAGnB,gBAAa,iBAAiB,cAAc,iBAAiB;AAC7D,gBAAa,iBAAiB,kBAAkB,qBAAqB;AACrE,gBAAa,iBAAiB,SAAS,gBAAgB;AACvD,gBAAa;AACX,iBAAa,oBAAoB,cAAc,iBAAiB;AAChE,iBAAa,oBAAoB,kBAAkB,qBAAqB;AACxE,iBAAa,oBAAoB,SAAS,gBAAgB;;;IAG7D,EAAE,CAAC;CAEN,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,CAAC,QACH,cAAa,MAAM;OAEnB,cAAa,OAAO;AAEtB,cAAW,CAAC,QAAQ;;;CAIxB,MAAM,iBAAiB,YAAoB;AACzC,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;;CAIpC,MAAM,sBAAsB,YAAsC;EAChE,MAAM,WAAW,QAAQ,MAAM;AAC/B,MAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,SAAS,CAC1D,UAAS,QAAQ,cAAc,QAAQ,MAAM;;CAIjD,MAAM,4BAA4B,YAAsC;AACtE,MAAI,SAAS,SAAS;AACpB,YAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;AAC7C,kBAAe,QAAQ,MAAM,GAAG;;;AAIpC,QACE,qBAAC,oBAGC,oBAAC;EAAM,KAAK;EAAe;EAAY;EAAO,SAAQ;GAAa,EACnE,qBAAC;EACC,oBAAC;GACC,SAAQ;GACR,OAAO,EAAE,6BAA6B;GACtC,cAAY,EAAE,6BAA6B;GAC3C,eAAe,cAAc,IAAI;aAEjC,oBAAC,iBAAe;IACA;EAClB,oBAAC;GAAW,cAAY,EAAE,UAAU,EAAE,cAAc,GAAG,EAAE,aAAa,CAAC;GAAE,SAAQ;GAAU,SAAS;aACjG,UAAU,oBAAC,cAAY,GAAG,oBAAC,aAAW;IAC5B;EACb,oBAAC;GACC,SAAQ;GACR,OAAO,EAAE,8BAA8B;GACvC,cAAY,EAAE,8BAA8B;GAC5C,eAAe,cAAc,GAAG;aAEhC,oBAAC,kBAAgB;IACE;EACrB,qBAAC;GACC,oBAAC;IAAW,WAAU;IAAe;IAAQ;cAC3C,oBAAC,mBAAK,WAAW,YAAY,GAAO;KACzB;GACb,qBAAC;IACC,OAAO,CAAC,SAAS,SAAS,eAAe,EAAE;IAC3C,cAAc,CAAC,EAAE;IACjB,MAAM;IACN,KAAK,KAAK,MAAM,SAAS,SAAS,YAAY,EAAE;IAChD,eAAe;IACf,mBAAmB,UACjB,EAAE,mBAAmB;KACnB,OAAO,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;KAC1C,KAAK,WAAW,KAAK,MAAM,SAAS,SAAS,YAAY,EAAE,CAAC;KAC7D,CAAC;eAGJ,oBAAC;KAAY;eAAQ,EAAE,oBAAoB;MAAe,EAC1D,qBAAC,4BACC,oBAAC,yBACC,oBAAC,gBAAc,GACH,EACd,oBAAC;KAAY,OAAO;eAClB,oBAAC,sBAAoB;MACT,IACA;KACL;GACb,oBAAC;IAAW,WAAU;IAAe;IAAQ;cAC3C,qBAAC,oBAAI,KAAE,WAAW,cAAc,IAAO;KAC5B;MACG;EAClB,oBAAC,uBACC,qBAAC;GACC,YAAY;GACZ,OAAO,CAAC,WAAW,UAAU,CAAC;GAC9B,gBAAgB,YAAY,cAAc,WAAW,QAAQ,MAAM,GAAG,CAAC;GACvE,aAAa,EAAE,WAAW,OAAO;;IAEjC,oBAAC;KAAY;eAAQ,EAAE,6BAA6B;MAAe;IACnE,oBAAC,2BACC,oBAAC;KAAc;eACb,oBAAC;MACC,SAAQ;MACR,OAAO,EAAE,6BAA6B;MACtC,cAAY,EAAE,6BAA6B;gBAE3C,oBAAC,oBAAM,GAAG,WAAW,KAAU;OACnB;MACA,GACF;IAChB,oBAAC,2BACE,YAAY,MAAM,KAAK,UACtB,qBAAC;KAAuB,MAAM;gBAC5B,qBAAC,6BAAgB,OAAM,OAAkB,EACzC,oBAAC,iCACC,oBAAC,cAAY,GACO;OAJP,MAKJ,CACb,GACY;;IACC,GACT;EACZ,qBAAC;GAAY,aAAa,EAAE,WAAW,OAAO;cAC5C,oBAAC;IAAe;cACd,oBAAC;KAAa,SAAQ;KAAW,cAAY,EAAE,8BAA8B;eAC3E,oBAAC,iBAAe;MACH;KACA,EACjB,oBAAC,kCACC,qBAAC;IACC,aAAY;IACZ,OAAO,CAAC,YAAY;IACpB,KAAK;IACL,KAAK;IACL,cAAc,CAAC,IAAI;IACnB,MAAM;IACN,eAAe;eAEf,oBAAC;KAAY;eAAQ,EAAE,8BAA8B;MAAe,EACpE,qBAAC,kCACC,oBAAC,yBACC,oBAAC,gBAAc,GACH,EACd,oBAAC;KAAY,OAAO;eAClB,oBAAC,sBAAoB;MACT,IACM;KACX,GACQ;IACX;KACE,IACd;;AAIV,uBAAe"}
+{"version":3,"file":"Controls.mjs","names":["currentTime"],"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 { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\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\";\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 [remainingTime, setRemainingTime] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  useEffect(() => {\n    if (audioRef.current) {\n      audioRef.current.playbackRate = speedValue;\n    }\n  }, [speedValue]);\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        setRemainingTime(Math.round(duration - currentTime));\n      };\n\n      const handleLoadedMetaData = () => {\n        const { currentTime, duration } = audioElement;\n        setCurrentTime(Math.round(currentTime));\n        setRemainingTime(Math.round(duration - currentTime));\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 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={[audioRef.current?.currentTime || 0]}\n            defaultValue={[0]}\n            step={1}\n            max={Math.round(audioRef.current?.duration || 0)}\n            onValueChange={handleSliderChange}\n            getAriaValueText={(value) =>\n              t(\"audio.valueText\", {\n                start: formatTime(Math.round(value.value)),\n                end: formatTime(Math.round(audioRef.current?.duration ?? 0)),\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(remainingTime)}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => setSpeedValue(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/es/AudioPlayer/SpeechControl.mjs

@@ -31,8 +31,7 @@ const SpeechControl = ({ src, title, type = "audio" }) => {
 		})]
 	});
 };
-var SpeechControl_default = SpeechControl;
 
 //#endregion
-export { SpeechControl_default as default };
+export { SpeechControl };
 //# sourceMappingURL=SpeechControl.mjs.map

package/es/AudioPlayer/SpeechControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechControl.mjs","names":[],"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 { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\n\ntype Props = {\n  src: string;\n  title: string;\n  type?: \"gloss\" | \"audio\";\n};\n\nconst 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\nexport default SpeechControl;\n"],"mappings":";;;;;;;AAmBA,MAAM,iBAAiB,EAAE,KAAK,OAAO,OAAO,cAAqB;CAC/D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,QACE,qBAAC;EAAI,mBAAgB;aAEnB,oBAAC;GAAM,KAAK;GAAe;GAAY;GAAO,SAAQ;IAAa,EACnE,oBAAC;GAAW,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,oBAAC,iBAAe;IACL;GACT;;AAIV,4BAAe"}
+{"version":3,"file":"SpeechControl.mjs","names":[],"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 { useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\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,MAAM,gBAAgB;CAC9B,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,mBAAmB;AACvB,MAAI,SAAS,SAAS;GACpB,MAAM,eAAe,SAAS;AAC9B,OAAI,aAAa,OACf,cAAa,MAAM;OAEnB,cAAa,OAAO;;;AAI1B,QACE,qBAAC;EAAI,mBAAgB;aAEnB,oBAAC;GAAM,KAAK;GAAe;GAAY;GAAO,SAAQ;IAAa,EACnE,oBAAC;GAAW,SAAQ;GAAW,cAAY,EAAE,GAAG,KAAK,OAAO;GAAE,OAAO,EAAE,GAAG,KAAK,OAAO;GAAE,SAAS;aAC/F,oBAAC,iBAAe;IACL;GACT"}

package/es/Breadcrumb/Breadcrumb.mjs

@@ -1,4 +1,4 @@
-import BreadcrumbItem_default from "./BreadcrumbItem.mjs";
+import { BreadcrumbItem } from "./BreadcrumbItem.mjs";
 import "react";
 import { styled } from "@ndla/styled-system/jsx";
 import { useTranslation } from "react-i18next";
@@ -21,7 +21,7 @@ const Breadcrumb = ({ items, renderItem, renderSeparator }) => {
 	const { t } = useTranslation();
 	return /* @__PURE__ */ jsx("nav", {
 		"aria-label": t("breadcrumb.breadcrumb"),
-		children: /* @__PURE__ */ jsx(StyledList, { children: items.map((item, index) => /* @__PURE__ */ jsx(BreadcrumbItem_default, {
+		children: /* @__PURE__ */ jsx(StyledList, { children: items.map((item, index) => /* @__PURE__ */ jsx(BreadcrumbItem, {
 			renderItem,
 			renderSeparator,
 			totalCount: items.length,
@@ -32,8 +32,7 @@ const Breadcrumb = ({ items, renderItem, renderSeparator }) => {
 		}, typeof item.to === "string" ? item.to : item.to.pathname)) })
 	});
 };
-var Breadcrumb_default = Breadcrumb;
 
 //#endregion
-export { Breadcrumb_default as default };
+export { Breadcrumb };
 //# sourceMappingURL=Breadcrumb.mjs.map

package/es/Breadcrumb/Breadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","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 { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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\nconst 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\nexport default Breadcrumb;\n"],"mappings":";;;;;;;AAmBA,MAAM,aAAa,OAAO,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,MAAM,cAAc,EAAE,OAAO,YAAY,sBAA6B;CACpE,MAAM,EAAE,MAAM,gBAAgB;AAE9B,QACE,oBAAC;EAAI,cAAY,EAAE,wBAAwB;YACzC,oBAAC,wBACE,MAAM,KAAK,MAAM,UAChB,oBAACA;GACa;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;KAFnB,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,GACS;GACT;;AAIV,yBAAe"}
+{"version":3,"file":"Breadcrumb.mjs","names":[],"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 { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\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,aAAa,OAAO,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,MAAM,gBAAgB;AAE9B,QACE,oBAAC;EAAI,cAAY,EAAE,wBAAwB;YACzC,oBAAC,wBACE,MAAM,KAAK,MAAM,UAChB,oBAAC;GACa;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;KAFnB,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,GACS;GACT"}

package/es/Breadcrumb/BreadcrumbItem.mjs

@@ -18,8 +18,7 @@ const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }) => {
 		children: [renderItem(item, totalCount), renderSeparator(item, totalCount)]
 	});
 };
-var BreadcrumbItem_default = BreadcrumbItem;
 
 //#endregion
-export { BreadcrumbItem_default as default };
+export { BreadcrumbItem };
 //# sourceMappingURL=BreadcrumbItem.mjs.map

package/es/Breadcrumb/BreadcrumbItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.mjs","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport interface SimpleBreadcrumbItem {\n  to: string | Partial<Location>;\n  name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n  index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n  item: IndexedBreadcrumbItem;\n  totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    color: \"inherit\",\n    gap: \"3xsmall\",\n    alignItems: \"flex-end\",\n    tabletDown: {\n      display: \"block\",\n    },\n    \"& a\": {\n      _visited: {\n        color: \"inherit\",\n      },\n    },\n  },\n});\n\ninterface Props {\n  item: IndexedBreadcrumbItem;\n  autoCollapse?: boolean;\n  totalCount: number;\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {\n  const isLast = item.index === totalCount - 1;\n  return (\n    <StyledListItem aria-current={isLast ? \"page\" : undefined}>\n      {renderItem(item, totalCount)}\n      {renderSeparator(item, totalCount)}\n    </StyledListItem>\n  );\n};\n\nexport default BreadcrumbItem;\n"],"mappings":";;;;;AAyBA,MAAM,iBAAiB,OAAO,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,SACV;CACD,OAAO,EACL,UAAU,EACR,OAAO,WACR,EACF;CACF,EACF,CAAC;AAUF,MAAM,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;CACnF,MAAM,SAAS,KAAK,UAAU,aAAa;AAC3C,QACE,qBAAC;EAAe,gBAAc,SAAS,SAAS;aAC7C,WAAW,MAAM,WAAW,EAC5B,gBAAgB,MAAM,WAAW;GACnB;;AAIrB,6BAAe"}
+{"version":3,"file":"BreadcrumbItem.mjs","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport interface SimpleBreadcrumbItem {\n  to: string | Partial<Location>;\n  name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n  index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n  item: IndexedBreadcrumbItem;\n  totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n  base: {\n    display: \"flex\",\n    color: \"inherit\",\n    gap: \"3xsmall\",\n    alignItems: \"flex-end\",\n    tabletDown: {\n      display: \"block\",\n    },\n    \"& a\": {\n      _visited: {\n        color: \"inherit\",\n      },\n    },\n  },\n});\n\ninterface Props {\n  item: IndexedBreadcrumbItem;\n  autoCollapse?: boolean;\n  totalCount: number;\n  renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n  renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nexport const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {\n  const isLast = item.index === totalCount - 1;\n  return (\n    <StyledListItem aria-current={isLast ? \"page\" : undefined}>\n      {renderItem(item, totalCount)}\n      {renderSeparator(item, totalCount)}\n    </StyledListItem>\n  );\n};\n"],"mappings":";;;;;AAyBA,MAAM,iBAAiB,OAAO,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,SACV;CACD,OAAO,EACL,UAAU,EACR,OAAO,WACR,EACF;CACF,EACF,CAAC;AAUF,MAAa,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;CAC1F,MAAM,SAAS,KAAK,UAAU,aAAa;AAC3C,QACE,qBAAC;EAAe,gBAAc,SAAS,SAAS;aAC7C,WAAW,MAAM,WAAW,EAC5B,gBAAgB,MAAM,WAAW;GACnB"}

package/es/Breadcrumb/HomeBreadcrumb.mjs

@@ -1,4 +1,4 @@
-import Breadcrumb_default from "./Breadcrumb.mjs";
+import { Breadcrumb } from "./Breadcrumb.mjs";
 import { styled } from "@ndla/styled-system/jsx";
 import { ArrowRightShortLine, HomeLine } from "@ndla/icons";
 import { SafeLink } from "@ndla/safelink";
@@ -31,14 +31,13 @@ const HomeBreadcrumb = ({ items }) => {
 		if (item.index === 0) return /* @__PURE__ */ jsx(StyledArrowRight, { "aria-hidden": true });
 		return /* @__PURE__ */ jsx(ArrowRightShortLine, { "aria-hidden": true });
 	};
-	return /* @__PURE__ */ jsx(Breadcrumb_default, {
+	return /* @__PURE__ */ jsx(Breadcrumb, {
 		items,
 		renderItem,
 		renderSeparator
 	});
 };
-var HomeBreadcrumb_default = HomeBreadcrumb;
 
 //#endregion
-export { HomeBreadcrumb_default as default };
+export { HomeBreadcrumb };
 //# sourceMappingURL=HomeBreadcrumb.mjs.map

package/es/Breadcrumb/HomeBreadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HomeBreadcrumb.mjs","names":["Breadcrumb"],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-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 { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport Breadcrumb from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusVisible: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n  base: {\n    tabletDown: {\n      display: \"none\",\n    },\n  },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n  },\n});\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n}\n\nconst HomeBreadcrumb = ({ items }: Props) => {\n  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return <span>{item.name}</span>;\n    }\n    if (item.index === 0 && typeof item.name === \"string\") {\n      return (\n        <IconSafeLink aria-label={item.name} to={item.to}>\n          <HomeLine title={item.name} />\n        </IconSafeLink>\n      );\n    }\n    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n  };\n\n  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return null;\n    }\n    if (item.index === 0) {\n      return <StyledArrowRight aria-hidden />;\n    }\n    return <ArrowRightShortLine aria-hidden />;\n  };\n\n  return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n\nexport default HomeBreadcrumb;\n"],"mappings":";;;;;;;AAcA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAM,kBAAkB,EAAE,YAAmB;CAC3C,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,oBAAC,oBAAM,KAAK,OAAY;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,oBAAC;GAAa,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,oBAAC,YAAS,OAAO,KAAK,OAAQ;IACjB;AAGnB,SAAO,oBAAC;GAAe,IAAI,KAAK;aAAK,KAAK;IAAsB;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,oBAAC,oBAAiB,sBAAc;AAEzC,SAAO,oBAAC,uBAAoB,sBAAc;;AAG5C,QAAO,oBAACA;EAAkB;EAAmB;EAA6B;GAAmB;;AAG/F,6BAAe"}
+{"version":3,"file":"HomeBreadcrumb.mjs","names":[],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-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 { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Breadcrumb } from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusVisible: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n  base: {\n    tabletDown: {\n      display: \"none\",\n    },\n  },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n  base: {\n    color: \"inherit\",\n  },\n});\n\ninterface Props {\n  items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n  const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return <span>{item.name}</span>;\n    }\n    if (item.index === 0 && typeof item.name === \"string\") {\n      return (\n        <IconSafeLink aria-label={item.name} to={item.to}>\n          <HomeLine title={item.name} />\n        </IconSafeLink>\n      );\n    }\n    return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n  };\n\n  const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n    if (item.index === totalCount - 1) {\n      return null;\n    }\n    if (item.index === 0) {\n      return <StyledArrowRight aria-hidden />;\n    }\n    return <ArrowRightShortLine aria-hidden />;\n  };\n\n  return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;AAcA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,oBAAC,oBAAM,KAAK,OAAY;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,oBAAC;GAAa,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,oBAAC,YAAS,OAAO,KAAK,OAAQ;IACjB;AAGnB,SAAO,oBAAC;GAAe,IAAI,KAAK;aAAK,KAAK;IAAsB;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,oBAAC,oBAAiB,sBAAc;AAEzC,SAAO,oBAAC,uBAAoB,sBAAc;;AAG5C,QAAO,oBAAC;EAAkB;EAAmB;EAA6B;GAAmB"}

package/es/CampaignBlock/CampaignBlock.mjs

@@ -124,8 +124,7 @@ const CampaignBlock = ({ title, image, imageSide = "left", description, headingL
 		]
 	}) });
 };
-var CampaignBlock_default = CampaignBlock;
 
 //#endregion
-export { CampaignBlock_default as default };
+export { CampaignBlock };
 //# sourceMappingURL=CampaignBlock.mjs.map

package/es/CampaignBlock/CampaignBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CampaignBlock.mjs","names":[],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n  src: string;\n  alt: string;\n}\n\ninterface Props {\n  title: string;\n  description: string;\n  headingLevel?: HeadingLevel;\n  url: {\n    url?: string;\n    text?: string;\n  };\n  image?: Image;\n  imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n  className?: string;\n  path?: string;\n  background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    height: \"100%\",\n    containerType: \"inline-size\",\n  },\n});\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    backgroundColor: \"background.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    imageSide: {\n      left: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"minmax(230px, 455px) auto\",\n          },\n        },\n      },\n      right: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"auto minmax(230px, 455px)\",\n          },\n        },\n      },\n    },\n    background: {\n      neutral: {},\n      brand1: {\n        backgroundColor: \"surface.brand.1\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3\",\n      },\n    },\n  },\n  defaultVariants: {\n    imageSide: \"left\",\n    background: \"neutral\",\n  },\n});\n\nconst StyledImg = styled(\"img\", {\n  base: {\n    objectFit: \"cover\",\n    width: \"100%\",\n    height: \"215px\",\n    \"@/tablet\": {\n      height: \"340px\",\n    },\n    \"@supports not (container-type: inline-size)\": {\n      tablet: {\n        height: \"265px\",\n      },\n      tabletWide: {\n        height: \"340px\",\n      },\n    },\n    backgroundColor: \"background.default\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    alignItems: \"flex-start\",\n    justifyContent: \"center\",\n    paddingBlock: \"medium\",\n    paddingInline: \"medium\",\n    position: \"relative\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    tablet: {\n      display: \"block\",\n      overflow: \"hidden\",\n      position: \"relative\",\n      lineClamp: 4,\n      boxOrient: \"vertical\",\n    },\n  },\n});\n\ninterface LinkButtonProps {\n  url?: string;\n  path?: string;\n  children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n  base: {\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n  },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n  if (url)\n    return (\n      <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n        {children}\n      </StyledSafeLinkButton>\n    );\n  return children;\n};\n\nconst CampaignBlock = ({\n  title,\n  image,\n  imageSide = \"left\",\n  description,\n  headingLevel: InternalHeading = \"h2\",\n  url,\n  path,\n  className,\n  background,\n}: Props) => {\n  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n  return (\n    <Wrapper>\n      <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n        {imageSide === \"left\" && imageComponent}\n        <ContentWrapper>\n          <Text asChild consumeCss textStyle=\"heading.small\">\n            <InternalHeading>{parse(title)}</InternalHeading>\n          </Text>\n          <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n          {!!url?.url && (\n            <LinkButton url={url.url} path={path}>\n              {parse(url.text ?? \"\")}\n              <ArrowRightLine />\n            </LinkButton>\n          )}\n        </ContentWrapper>\n        {imageSide !== \"left\" && imageComponent}\n      </Container>\n    </Wrapper>\n  );\n};\n\nexport default CampaignBlock;\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,UAAU,OAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;CAChB,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACF;EACD,YAAY;GACV,SAAS,EAAE;GACX,QAAQ,EACN,iBAAiB,mBAClB;GACD,QAAQ,EACN,iBAAiB,mBAClB;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,SACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,SACT;EACD,YAAY,EACV,QAAQ,SACT;EACF;CACD,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;CACX,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;AAQF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,EAAE,KAAK,UAAU,WAA4B;AAC/D,KAAI,IACF,QACE,oBAAC;EAAqB,IAAI,uBAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;;AAGT,MAAM,iBAAiB,EACrB,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,iBACW;CACX,MAAM,iBAAiB,SAAS,oBAAC;EAAU,KAAK,GAAG,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,QACE,oBAAC,qBACC,qBAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;GACzB,qBAAC;IACC,oBAAC;KAAK;KAAQ;KAAW,WAAU;eACjC,oBAAC,6BAAiB,MAAM,MAAM,GAAmB;MAC5C;IACP,oBAAC;KAAW,WAAU;eAAe,MAAM,YAAY;MAAc;IACpE,CAAC,CAAC,KAAK,OACN,qBAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,MAAM,IAAI,QAAQ,GAAG,EACtB,oBAAC,mBAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ;;AAId,4BAAe"}
+{"version":3,"file":"CampaignBlock.mjs","names":[],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n  src: string;\n  alt: string;\n}\n\ninterface Props {\n  title: string;\n  description: string;\n  headingLevel?: HeadingLevel;\n  url: {\n    url?: string;\n    text?: string;\n  };\n  image?: Image;\n  imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n  className?: string;\n  path?: string;\n  background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    height: \"100%\",\n    containerType: \"inline-size\",\n  },\n});\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    backgroundColor: \"background.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    imageSide: {\n      left: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"minmax(230px, 455px) auto\",\n          },\n        },\n      },\n      right: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"auto minmax(230px, 455px)\",\n          },\n        },\n      },\n    },\n    background: {\n      neutral: {},\n      brand1: {\n        backgroundColor: \"surface.brand.1\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3\",\n      },\n    },\n  },\n  defaultVariants: {\n    imageSide: \"left\",\n    background: \"neutral\",\n  },\n});\n\nconst StyledImg = styled(\"img\", {\n  base: {\n    objectFit: \"cover\",\n    width: \"100%\",\n    height: \"215px\",\n    \"@/tablet\": {\n      height: \"340px\",\n    },\n    \"@supports not (container-type: inline-size)\": {\n      tablet: {\n        height: \"265px\",\n      },\n      tabletWide: {\n        height: \"340px\",\n      },\n    },\n    backgroundColor: \"background.default\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    alignItems: \"flex-start\",\n    justifyContent: \"center\",\n    paddingBlock: \"medium\",\n    paddingInline: \"medium\",\n    position: \"relative\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    tablet: {\n      display: \"block\",\n      overflow: \"hidden\",\n      position: \"relative\",\n      lineClamp: 4,\n      boxOrient: \"vertical\",\n    },\n  },\n});\n\ninterface LinkButtonProps {\n  url?: string;\n  path?: string;\n  children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n  base: {\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n  },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n  if (url)\n    return (\n      <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n        {children}\n      </StyledSafeLinkButton>\n    );\n  return children;\n};\n\nexport const CampaignBlock = ({\n  title,\n  image,\n  imageSide = \"left\",\n  description,\n  headingLevel: InternalHeading = \"h2\",\n  url,\n  path,\n  className,\n  background,\n}: Props) => {\n  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n  return (\n    <Wrapper>\n      <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n        {imageSide === \"left\" && imageComponent}\n        <ContentWrapper>\n          <Text asChild consumeCss textStyle=\"heading.small\">\n            <InternalHeading>{parse(title)}</InternalHeading>\n          </Text>\n          <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n          {!!url?.url && (\n            <LinkButton url={url.url} path={path}>\n              {parse(url.text ?? \"\")}\n              <ArrowRightLine />\n            </LinkButton>\n          )}\n        </ContentWrapper>\n        {imageSide !== \"left\" && imageComponent}\n      </Container>\n    </Wrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,UAAU,OAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;CAChB,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;EACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,6BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,6BACtB,EACF;IACF;GACF;EACD,YAAY;GACV,SAAS,EAAE;GACX,QAAQ,EACN,iBAAiB,mBAClB;GACD,QAAQ,EACN,iBAAiB,mBAClB;GACF;EACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;EACb;CACF,CAAC;AAEF,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,SACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,SACT;EACD,YAAY,EACV,QAAQ,SACT;EACF;CACD,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;CACX,EACF,CAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;CACZ,EACF,EACF,CAAC;AAQF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;CACd,EACF,CAAC;AAEF,MAAM,cAAc,EAAE,KAAK,UAAU,WAA4B;AAC/D,KAAI,IACF,QACE,oBAAC;EAAqB,IAAI,uBAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;;AAGT,MAAa,iBAAiB,EAC5B,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,iBACW;CACX,MAAM,iBAAiB,SAAS,oBAAC;EAAU,KAAK,GAAG,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,QACE,oBAAC,qBACC,qBAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;GACzB,qBAAC;IACC,oBAAC;KAAK;KAAQ;KAAW,WAAU;eACjC,oBAAC,6BAAiB,MAAM,MAAM,GAAmB;MAC5C;IACP,oBAAC;KAAW,WAAU;eAAe,MAAM,YAAY;MAAc;IACpE,CAAC,CAAC,KAAK,OACN,qBAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,MAAM,IAAI,QAAQ,GAAG,EACtB,oBAAC,mBAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ"}

package/es/CodeBlock/CodeBlock.mjs

@@ -5,7 +5,7 @@ import { cx } from "@ndla/styled-system/css";
 
 //#region src/CodeBlock/CodeBlock.tsx
 const Pre = styled("pre", {});
-const Codeblock = forwardRef(({ highlightedCode, format, className,...props }, ref) => {
+const CodeBlock = forwardRef(({ highlightedCode, format, className,...props }, ref) => {
 	const codeWithLineNumbers = useMemo(() => {
 		return highlightedCode.split("\n").map((line, i) => {
 			return `<span class="linenumber">${i + 1}</span>${line}`;
@@ -18,8 +18,7 @@ const Codeblock = forwardRef(({ highlightedCode, format, className,...props }, r
 		ref
 	});
 });
-var CodeBlock_default = Codeblock;
 
 //#endregion
-export { CodeBlock_default as default };
+export { CodeBlock };
 //# sourceMappingURL=CodeBlock.mjs.map

package/es/CodeBlock/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../src/CodeBlock/CodeBlock.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 ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n\nexport default Codeblock;\n"],"mappings":";;;;;;AAkBA,MAAM,MAAM,OAAO,OAAO,EAAE,CAAC;AAE7B,MAAa,YAAY,YAAmC,EAAE,iBAAiB,QAAQ,UAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,sBAAsB,cAAc;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ;AAEF,wBAAe"}
+{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../src/CodeBlock/CodeBlock.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 ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n"],"mappings":";;;;;;AAkBA,MAAM,MAAM,OAAO,OAAO,EAAE,CAAC;AAE7B,MAAa,YAAY,YAAmC,EAAE,iBAAiB,QAAQ,UAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,sBAAsB,cAAc;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC;EACC,WAAW,GAAG,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}

package/es/Concept/Concept.mjs

@@ -1,10 +1,10 @@
 import { EmbedByline } from "../LicenseByline/EmbedByline.mjs";
 import { licenseAttributes } from "../utils/licenseAttributes.mjs";
-import BrightcoveEmbed_default from "../Embed/BrightcoveEmbed.mjs";
-import ExternalEmbed_default from "../Embed/ExternalEmbed.mjs";
-import H5pEmbed_default from "../Embed/H5pEmbed.mjs";
-import IframeEmbed_default from "../Embed/IframeEmbed.mjs";
-import ImageEmbed_default from "../Embed/ImageEmbed.mjs";
+import { BrightcoveEmbed } from "../Embed/BrightcoveEmbed.mjs";
+import { ExternalEmbed } from "../Embed/ExternalEmbed.mjs";
+import { H5pEmbed } from "../Embed/H5pEmbed.mjs";
+import { IframeEmbed } from "../Embed/IframeEmbed.mjs";
+import { ImageEmbed } from "../Embed/ImageEmbed.mjs";
 import { forwardRef } from "react";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -32,11 +32,11 @@ const Concept = forwardRef(({ copyright, visualElement, lang, children, title, s
 				lang,
 				children: [!!title && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("b", { children: title }), ` – `] }), children]
 			}),
-			visualElement?.resource === "image" ? /* @__PURE__ */ jsx(ImageEmbed_default, {
+			visualElement?.resource === "image" ? /* @__PURE__ */ jsx(ImageEmbed, {
 				embed: visualElement,
 				lang,
 				previewAlt
-			}) : visualElement?.resource === "brightcove" ? /* @__PURE__ */ jsx(BrightcoveEmbed_default, { embed: visualElement }) : visualElement?.resource === "h5p" ? /* @__PURE__ */ jsx(H5pEmbed_default, { embed: visualElement }) : visualElement?.resource === "iframe" ? /* @__PURE__ */ jsx(IframeEmbed_default, { embed: visualElement }) : visualElement?.resource === "external" ? /* @__PURE__ */ jsx(ExternalEmbed_default, { embed: visualElement }) : null,
+			}) : visualElement?.resource === "brightcove" ? /* @__PURE__ */ jsx(BrightcoveEmbed, { embed: visualElement }) : visualElement?.resource === "h5p" ? /* @__PURE__ */ jsx(H5pEmbed, { embed: visualElement }) : visualElement?.resource === "iframe" ? /* @__PURE__ */ jsx(IframeEmbed, { embed: visualElement }) : visualElement?.resource === "external" ? /* @__PURE__ */ jsx(ExternalEmbed, { embed: visualElement }) : null,
 			!!copyright && /* @__PURE__ */ jsx(EmbedByline, {
 				copyright,
 				type: "concept"