@ndla/ui 56.0.192-alpha.0 → 56.0.194-alpha.0

package/dist/panda.buildinfo.json

@@ -259,6 +259,16 @@
       "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
       "alignSelf]___[value:flex-end",
       "fill]___[value:icon.subtle",
+      "position]___[value:absolute]___[cond:&:not(:focus)",
+      "width]___[value:1px]___[cond:&:not(:focus)",
+      "height]___[value:1px]___[cond:&:not(:focus)",
+      "padding]___[value:0]___[cond:&:not(:focus)",
+      "margin]___[value:-1px]___[cond:&:not(:focus)",
+      "overflow]___[value:hidden]___[cond:&:not(:focus)",
+      "clip]___[value:rect(0,0,0,0)]___[cond:&:not(:focus)",
+      "whiteSpace]___[value:nowrap]___[cond:&:not(:focus)",
+      "borderWidth]___[value:0]___[cond:&:not(:focus)",
+      "srOnly]___[value:true",
       "paddingBottom]___[value:xxlarge",
       "gridTemplateRows]___[value:0fr",
       "transitionProperty]___[value:grid-template-rows",

package/dist/styles.css

@@ -636,6 +636,18 @@
     fill: var(--colors-icon-subtle);
 }
 
+  .sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
   .grid-tr_0fr {
     grid-template-rows: 0fr;
 }
@@ -1118,7 +1130,19 @@
     height: 100%;
 }
 
-  .focusWithin\:text-decoration_none:focus-within,.focusVisible\:text-decoration_none:is(:focus-visible, [data-focus-visible]) {
+  .focusWithin\:text-decoration_none:focus-within {
+    text-decoration: none;
+}
+
+  .\[\&\:not\(\:focus\)\]\:p_0:not(:focus) {
+    padding: 0;
+}
+
+  .\[\&\:not\(\:focus\)\]\:m_-1px:not(:focus) {
+    margin: -1px;
+}
+
+  .focusVisible\:text-decoration_none:is(:focus-visible, [data-focus-visible]) {
     text-decoration: none;
 }
 
@@ -1131,6 +1155,34 @@
     border-radius: 0;
 }
 
+  .\[\&\:not\(\:focus\)\]\:ov_hidden:not(:focus) {
+    overflow: hidden;
+}
+
+  .\[\&\:not\(\:focus\)\]\:bd-w_0:not(:focus) {
+    border-width: 0;
+}
+
+  .\[\&\:not\(\:focus\)\]\:pos_absolute:not(:focus) {
+    position: absolute;
+}
+
+  .\[\&\:not\(\:focus\)\]\:clip_rect\(0\,0\,0\,0\):not(:focus) {
+    clip: rect(0,0,0,0);
+}
+
+  .\[\&\:not\(\:focus\)\]\:white-space_nowrap:not(:focus) {
+    white-space: nowrap;
+}
+
+  .\[\&\:not\(\:focus\)\]\:w_1px:not(:focus) {
+    width: 1px;
+}
+
+  .\[\&\:not\(\:focus\)\]\:h_1px:not(:focus) {
+    height: 1px;
+}
+
   .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
     background: var(--colors-surface-action-subtle-hover);
 }

package/es/Article/Article.mjs

@@ -3,8 +3,8 @@ import { Heading, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ark } from "@ark-ui/react";
 import { cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react/factory";
 //#region src/Article/Article.tsx
 /**
 * Copyright (c) 2016-present, NDLA.

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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,uBAAuB,OAAO,IAAI,SAAS,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE5E,MAAa,iBAAiB,YAC3B,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,sBAAD;CAAsB,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;CAAY;AAAM,CAAA,CAE1F;AAEA,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,kCACb;CACA,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;CACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC,sBAAD;CAAsB,qBAAkB;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAClE;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,WAChB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;AAChB,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,UACnB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;AACb,EACF,CAAC;AAED,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;AACd,EACF,CAAC;AAcD,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;CACvB,OACE,qBAAC,eAAD,EAAA,UAAA;EACE,qBAAC,eAAD,EAAA,UAAA,EACI,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,qBAAC,aAAD,EAAA,UAAA,CACG,CAAC,CAAC,UAAU,oBAAC,iBAAD,EAAA,UAAkB,OAAwB,CAAA,GACtD,WACU,EAAA,CAAA,GAEf,oBAAC,SAAD;GAAS,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;EACM,CAAA,CACI,EAAA,CAAA;EACd,CAAC,CAAC,gBACD,oBAAC,MAAD;GAAY;GAAM,WAAU;GAAc,SAAA;GAAQ,YAAA;aAChD,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA;EACpB,CAAA;EAER,qBAAC,eAAD,EAAA,UAAA,CACG,iBACA,UACY,EAAA,CAAA;EACd;CACY,EAAA,CAAA;AAEnB"}
+{"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 { ark, type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,uBAAuB,OAAO,IAAI,SAAS,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAE5E,MAAa,iBAAiB,YAC3B,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,sBAAD;CAAsB,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;CAAY;AAAM,CAAA,CAE1F;AAEA,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,kCACb;CACA,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;CACT;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,iBAAiB,YAAyE,OAAO,QAC5G,oBAAC,sBAAD;CAAsB,qBAAkB;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAClE;AAED,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,WAChB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;AAChB,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,gBAAgB,OAC3B,IAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,UACnB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;AACb,EACF,CAAC;AAED,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;AACd,EACF,CAAC;AAcD,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;CACvB,OACE,qBAAC,eAAD,EAAA,UAAA;EACE,qBAAC,eAAD,EAAA,UAAA,EACI,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,qBAAC,aAAD,EAAA,UAAA,CACG,CAAC,CAAC,UAAU,oBAAC,iBAAD,EAAA,UAAkB,OAAwB,CAAA,GACtD,WACU,EAAA,CAAA,GAEf,oBAAC,SAAD;GAAS,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;EACM,CAAA,CACI,EAAA,CAAA;EACd,CAAC,CAAC,gBACD,oBAAC,MAAD;GAAY;GAAM,WAAU;GAAc,SAAA;GAAQ,YAAA;aAChD,oBAAC,OAAD,EAAA,UAAM,aAAkB,CAAA;EACpB,CAAA;EAER,qBAAC,eAAD,EAAA,UAAA,CACG,iBACA,UACY,EAAA,CAAA;EACd;CACY,EAAA,CAAA;AAEnB"}

package/es/Article/ArticleByline.mjs

@@ -7,7 +7,7 @@ import { ArrowDownShortLine } from "@ndla/icons";
 import { SafeLink } from "@ndla/safelink";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { toIntlLanguage } from "@ndla/util";
-import { useAccordionContext } from "@ark-ui/react";
+import { useAccordionContext } from "@ark-ui/react/accordion";
 //#region src/Article/ArticleByline.tsx
 /**
 * Copyright (c) 2020-present, NDLA.

package/es/Article/ArticleByline.mjs.map

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

package/es/AudioPlayer/AudioProgress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AudioProgress.mjs","names":[],"sources":["../../src/AudioPlayer/AudioProgress.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n  SliderRoot,\n  SliderLabel,\n  SliderControl,\n  SliderTrack,\n  SliderRange,\n  SliderThumb,\n  SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n  currentTime: number;\n  duration: number;\n  onValueChange: (details: SliderValueChangeDetails) => void;\n  variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        marginBlockStart: \"-4xsmall\",\n        transitionProperty: \"background, border-radius, width, height\",\n        width: \"4xsmall\",\n        height: \"4xsmall\",\n        borderRadius: \"sharp\",\n      },\n    },\n  },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        marginBlockStart: \"-4xsmall\",\n        background: \"unset\",\n      },\n    },\n  },\n});\n\nconst StyledSliderRoot = styled(SliderRoot, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        position: \"relative\",\n        marginBlockEnd: \"-xsmall\",\n      },\n    },\n  },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledSliderRoot\n      value={[currentTime]}\n      defaultValue={[0]}\n      step={1}\n      max={duration}\n      onValueChange={onValueChange}\n      variant={variant}\n      getAriaValueText={(value) =>\n        t(\"audio.valueText\", {\n          start: formatTime(Math.round(value.value)),\n          end: formatTime(Math.round(duration)),\n        })\n      }\n    >\n      <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n      <SliderControl>\n        <StyledSliderTrack variant={variant}>\n          <SliderRange />\n        </StyledSliderTrack>\n        <StyledSliderThumb index={0} variant={variant}>\n          <SliderHiddenInput />\n        </StyledSliderThumb>\n      </SliderControl>\n    </StyledSliderRoot>\n  );\n};\n"],"mappings":";;;;;;AA6BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,kBAAkB;EAClB,oBAAoB;EACpB,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;AACF,EACF,EACF,CAAC;AAED,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,kBAAkB;EAClB,YAAY;CACd;AACF,EACF,EACF,CAAC;AAED,MAAM,mBAAmB,OAAO,YAAY,EAC1C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,UAAU;EACV,gBAAgB;CAClB;AACF,EACF,EACF,CAAC;AAED,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,kBAAD;EACE,OAAO,CAAC,WAAW;EACnB,cAAc,CAAC,CAAC;EAChB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAO,WAAW,KAAK,MAAM,MAAM,KAAK,CAAC;GACzC,KAAK,WAAW,KAAK,MAAM,QAAQ,CAAC;EACtC,CAAC;YAXL,CAcE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,mBAAmB;EAAe,CAAA,GACzD,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,mBAAD;GAA4B;aAC1B,oBAAC,aAAD,CAAc,CAAA;EACG,CAAA,GACnB,oBAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,oBAAC,mBAAD,CAAoB,CAAA;EACH,CAAA,CACN,EAAA,CAAA,CACC;;AAEtB"}
+{"version":3,"file":"AudioProgress.mjs","names":[],"sources":["../../src/AudioPlayer/AudioProgress.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react/slider\";\nimport {\n  SliderRoot,\n  SliderLabel,\n  SliderControl,\n  SliderTrack,\n  SliderRange,\n  SliderThumb,\n  SliderHiddenInput,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { formatTime } from \"./audioUtils\";\n\ninterface Props {\n  currentTime: number;\n  duration: number;\n  onValueChange: (details: SliderValueChangeDetails) => void;\n  variant?: \"simple\" | \"standard\";\n}\n\nconst StyledSliderThumb = styled(SliderThumb, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        marginBlockStart: \"-4xsmall\",\n        transitionProperty: \"background, border-radius, width, height\",\n        width: \"4xsmall\",\n        height: \"4xsmall\",\n        borderRadius: \"sharp\",\n      },\n    },\n  },\n});\n\nconst StyledSliderTrack = styled(SliderTrack, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        marginBlockStart: \"-4xsmall\",\n        background: \"unset\",\n      },\n    },\n  },\n});\n\nconst StyledSliderRoot = styled(SliderRoot, {\n  variants: {\n    variant: {\n      standard: {},\n      simple: {\n        position: \"relative\",\n        marginBlockEnd: \"-xsmall\",\n      },\n    },\n  },\n});\n\nexport const AudioProgress = ({ currentTime, duration, onValueChange, variant }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledSliderRoot\n      value={[currentTime]}\n      defaultValue={[0]}\n      step={1}\n      max={duration}\n      onValueChange={onValueChange}\n      variant={variant}\n      getAriaValueText={(value) =>\n        t(\"audio.valueText\", {\n          start: formatTime(Math.round(value.value)),\n          end: formatTime(Math.round(duration)),\n        })\n      }\n    >\n      <SliderLabel srOnly>{t(\"audio.progressBar\")}</SliderLabel>\n      <SliderControl>\n        <StyledSliderTrack variant={variant}>\n          <SliderRange />\n        </StyledSliderTrack>\n        <StyledSliderThumb index={0} variant={variant}>\n          <SliderHiddenInput />\n        </StyledSliderThumb>\n      </SliderControl>\n    </StyledSliderRoot>\n  );\n};\n"],"mappings":";;;;;;AA6BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,kBAAkB;EAClB,oBAAoB;EACpB,OAAO;EACP,QAAQ;EACR,cAAc;CAChB;AACF,EACF,EACF,CAAC;AAED,MAAM,oBAAoB,OAAO,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,kBAAkB;EAClB,YAAY;CACd;AACF,EACF,EACF,CAAC;AAED,MAAM,mBAAmB,OAAO,YAAY,EAC1C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,UAAU;EACV,gBAAgB;CAClB;AACF,EACF,EACF,CAAC;AAED,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,kBAAD;EACE,OAAO,CAAC,WAAW;EACnB,cAAc,CAAC,CAAC;EAChB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAO,WAAW,KAAK,MAAM,MAAM,KAAK,CAAC;GACzC,KAAK,WAAW,KAAK,MAAM,QAAQ,CAAC;EACtC,CAAC;YAXL,CAcE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,mBAAmB;EAAe,CAAA,GACzD,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,mBAAD;GAA4B;aAC1B,oBAAC,aAAD,CAAc,CAAA;EACG,CAAA,GACnB,oBAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,oBAAC,mBAAD,CAAoB,CAAA;EACH,CAAA,CACN,EAAA,CAAA,CACC;;AAEtB"}

package/es/AudioPlayer/Controls.mjs

@@ -9,7 +9,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { useTranslation } from "react-i18next";
 import { CheckLine, Forward15Line, Replay15Line, VolumeUpFill } from "@ndla/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createListCollection } from "@ark-ui/react";
+import { createListCollection } from "@ark-ui/react/collection";
 //#region src/AudioPlayer/Controls.tsx
 /**
 * Copyright (c) 2021-present, NDLA.

package/es/AudioPlayer/Controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.mjs","names":[],"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 { createListCollection } from \"@ark-ui/react\";\nimport { Replay15Line, Forward15Line, 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  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\n\nconst 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 StyledPlayButton = styled(PlayButton, {\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 StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\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  variant?: \"full\" | \"simplified\";\n}\n\nexport const Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    onEnded,\n    onHandleTime,\n    onSeekSeconds,\n    playing,\n    togglePlay,\n    handleSliderChange,\n    handleVolumeSliderChange,\n    currentTime,\n    duration,\n    speedValue,\n    onPlaybackRateChange,\n    volumeValue,\n  } = useAudioControls();\n\n  return (\n    <div>\n      <AudioElement\n        src={src}\n        title={title}\n        ref={audioRef}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\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        <StyledPlayButton playing={playing} onClick={togglePlay} />\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          <AudioProgress currentTime={currentTime} duration={duration} onValueChange={handleSliderChange} />\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(Math.round(duration - currentTime))}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => onPlaybackRateChange(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Controls.mjs","names":[],"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 { createListCollection } from \"@ark-ui/react/collection\";\nimport { Replay15Line, Forward15Line, 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  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { useTranslation } from \"react-i18next\";\nimport { AudioElement } from \"./AudioElement\";\nimport { AudioProgress } from \"./AudioProgress\";\nimport { formatTime } from \"./audioUtils\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\nimport { VolumeSlider } from \"./VolumeSlider\";\n\nconst 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 StyledPlayButton = styled(PlayButton, {\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 StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    paddingInline: \"small\",\n  },\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  variant?: \"full\" | \"simplified\";\n}\n\nexport const Controls = ({ src, title }: Props) => {\n  const { t } = useTranslation();\n  const {\n    audioRef,\n    onEnded,\n    onHandleTime,\n    onSeekSeconds,\n    playing,\n    togglePlay,\n    handleSliderChange,\n    handleVolumeSliderChange,\n    currentTime,\n    duration,\n    speedValue,\n    onPlaybackRateChange,\n    volumeValue,\n  } = useAudioControls();\n\n  return (\n    <div>\n      <AudioElement\n        src={src}\n        title={title}\n        ref={audioRef}\n        onEnded={onEnded}\n        onLoadedMetadata={onHandleTime}\n        onTimeUpdate={onHandleTime}\n      />\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        <StyledPlayButton playing={playing} onClick={togglePlay} />\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          <AudioProgress currentTime={currentTime} duration={duration} onValueChange={handleSliderChange} />\n          <StyledText textStyle=\"label.medium\" asChild consumeCss>\n            <div>-{formatTime(Math.round(duration - currentTime))}</div>\n          </StyledText>\n        </ProgressWrapper>\n        <FieldRoot>\n          <StyledSelectRoot\n            collection={speedValues}\n            value={[speedValue.toString()]}\n            onValueChange={(details) => onPlaybackRateChange(parseFloat(details.value[0]))}\n            positioning={{ placement: \"top\" }}\n          >\n            <SelectLabel srOnly>{t(\"audio.controls.selectSpeed\")}</SelectLabel>\n            <SelectControl>\n              <SelectTrigger asChild>\n                <SpeedButton\n                  variant=\"tertiary\"\n                  title={t(\"audio.controls.selectSpeed\")}\n                  aria-label={t(\"audio.controls.selectSpeed\")}\n                >\n                  <span>{`${speedValue}x`}</span>\n                </SpeedButton>\n              </SelectTrigger>\n            </SelectControl>\n            <SelectContent>\n              {speedValues.items.map((speed) => (\n                <SelectItem key={speed} item={speed}>\n                  <SelectItemText>{speed}x</SelectItemText>\n                  <SelectItemIndicator>\n                    <CheckLine />\n                  </SelectItemIndicator>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </StyledSelectRoot>\n        </FieldRoot>\n        <PopoverRoot positioning={{ placement: \"top\" }}>\n          <PopoverTrigger asChild>\n            <VolumeButton variant=\"tertiary\" aria-label={t(\"audio.controls.adjustVolume\")}>\n              <VolumeUpFill />\n            </VolumeButton>\n          </PopoverTrigger>\n          <StyledPopoverContent>\n            <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n          </StyledPopoverContent>\n        </PopoverRoot>\n      </ControlsWrapper>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/es/AudioPlayer/VolumeSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeSlider.mjs","names":[],"sources":["../../src/AudioPlayer/VolumeSlider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport {\n  SliderControl,\n  SliderRoot,\n  SliderLabel,\n  SliderTrack,\n  SliderRange,\n  SliderHiddenInput,\n  SliderThumb,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { t } from \"i18next\";\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\ninterface Props {\n  value: number;\n  onValueChange: (value: SliderValueChangeDetails) => void;\n}\n\nexport const VolumeSlider = ({ value, onValueChange }: Props) => {\n  return (\n    <SliderRoot\n      orientation=\"vertical\"\n      value={[value]}\n      min={0}\n      max={100}\n      defaultValue={[100]}\n      step={1}\n      onValueChange={onValueChange}\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  );\n};\n"],"mappings":";;;;;AAqBA,MAAM,sBAAsB,OAAO,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;AACZ,EACF,CAAC;AAOD,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;CAC/D,OACE,qBAAC,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,KAAK;EACb,KAAK;EACL,KAAK;EACL,cAAc,CAAC,GAAG;EAClB,MAAM;EACS;YAPjB,CASE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,6BAA6B;EAAe,CAAA,GACnE,qBAAC,qBAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,CAAc,CAAA,EACH,CAAA,GACb,oBAAC,aAAD;GAAa,OAAO;aAClB,oBAAC,mBAAD,CAAoB,CAAA;EACT,CAAA,CACM,EAAA,CAAA,CACX;;AAEhB"}
+{"version":3,"file":"VolumeSlider.mjs","names":[],"sources":["../../src/AudioPlayer/VolumeSlider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react/slider\";\nimport {\n  SliderControl,\n  SliderRoot,\n  SliderLabel,\n  SliderTrack,\n  SliderRange,\n  SliderHiddenInput,\n  SliderThumb,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { t } from \"i18next\";\n\nconst StyledSliderControl = styled(SliderControl, {\n  base: {\n    height: \"surface.3xsmall\",\n    minWidth: \"small\",\n  },\n});\n\ninterface Props {\n  value: number;\n  onValueChange: (value: SliderValueChangeDetails) => void;\n}\n\nexport const VolumeSlider = ({ value, onValueChange }: Props) => {\n  return (\n    <SliderRoot\n      orientation=\"vertical\"\n      value={[value]}\n      min={0}\n      max={100}\n      defaultValue={[100]}\n      step={1}\n      onValueChange={onValueChange}\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  );\n};\n"],"mappings":";;;;;AAqBA,MAAM,sBAAsB,OAAO,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;AACZ,EACF,CAAC;AAOD,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;CAC/D,OACE,qBAAC,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,KAAK;EACb,KAAK;EACL,KAAK;EACL,cAAc,CAAC,GAAG;EAClB,MAAM;EACS;YAPjB,CASE,oBAAC,aAAD;GAAa,QAAA;aAAQ,EAAE,6BAA6B;EAAe,CAAA,GACnE,qBAAC,qBAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UACE,oBAAC,aAAD,CAAc,CAAA,EACH,CAAA,GACb,oBAAC,aAAD;GAAa,OAAO;aAClB,oBAAC,mBAAD,CAAoB,CAAA;EACT,CAAA,CACM,EAAA,CAAA,CACX;;AAEhB"}

package/es/AudioPlayer/useAudioControls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioControls.mjs","names":[],"sources":["../../src/AudioPlayer/useAudioControls.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react\";\nimport { useCallback, useRef, useState, type ReactEventHandler } from \"react\";\n\nexport const useAudioControls = () => {\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = useCallback(() => {\n    if (!audioRef.current) return;\n    if (audioRef.current.paused) {\n      audioRef.current.play();\n    } else {\n      audioRef.current.pause();\n    }\n    setPlaying((p) => !p);\n  }, []);\n\n  const onPlaybackRateChange = useCallback((rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\n    }\n  }, []);\n\n  const onSeekSeconds = useCallback((seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  }, []);\n\n  const handleSliderChange = useCallback((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 = useCallback((details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  }, []);\n\n  const onEnded = useCallback(() => setPlaying(false), []);\n\n  const onHandleTime: ReactEventHandler<HTMLAudioElement> = useCallback((meta) => {\n    const target = meta.currentTarget;\n    setCurrentTime(Math.round(target.currentTime));\n    setDuration(Math.round(target.duration));\n  }, []);\n\n  return {\n    togglePlay,\n    onPlaybackRateChange,\n    onSeekSeconds,\n    handleVolumeSliderChange,\n    handleSliderChange,\n    onEnded,\n    onHandleTime,\n    speedValue,\n    volumeValue,\n    currentTime,\n    duration,\n    playing,\n    audioRef,\n  };\n};\n"],"mappings":";;AAWA,MAAa,yBAAyB;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAChD,MAAM,CAAC,UAAU,eAAe,SAAS,CAAC;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,aAAa,kBAAkB;EACnC,IAAI,CAAC,SAAS,SAAS;EACvB,IAAI,SAAS,QAAQ,QACnB,SAAS,QAAQ,KAAK;OAEtB,SAAS,QAAQ,MAAM;EAEzB,YAAY,MAAM,CAAC,CAAC;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,uBAAuB,aAAa,SAAiB;EACzD,cAAc,IAAI;EAClB,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,aAAa,YAAoB;EACrD,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,qBAAqB,aAAa,YAAsC;EAC5E,MAAM,WAAW,QAAQ,MAAM;EAC/B,IAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,QAAQ,GACzD,SAAS,QAAQ,cAAc,QAAQ,MAAM;CAEjD,GAAG,CAAC,CAAC;CAiBL,OAAO;EACL;EACA;EACA;EACA,0BAnB+B,aAAa,YAAsC;GAClF,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;IAC7C,eAAe,QAAQ,MAAM,EAAE;GACjC;EACF,GAAG,CAAC,CAcqB;EACvB;EACA,SAdc,kBAAkB,WAAW,KAAK,GAAG,CAAC,CAc9C;EACN,cAbwD,aAAa,SAAS;GAC9E,MAAM,SAAS,KAAK;GACpB,eAAe,KAAK,MAAM,OAAO,WAAW,CAAC;GAC7C,YAAY,KAAK,MAAM,OAAO,QAAQ,CAAC;EACzC,GAAG,CAAC,CASS;EACX;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useAudioControls.mjs","names":[],"sources":["../../src/AudioPlayer/useAudioControls.ts"],"sourcesContent":["/**\n * Copyright (c) 2026-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { SliderValueChangeDetails } from \"@ark-ui/react/slider\";\nimport { useCallback, useRef, useState, type ReactEventHandler } from \"react\";\n\nexport const useAudioControls = () => {\n  const [speedValue, setSpeedValue] = useState(1);\n  const [volumeValue, setVolumeValue] = useState(100);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [playing, setPlaying] = useState(false);\n  const audioRef = useRef<HTMLAudioElement>(null);\n\n  const togglePlay = useCallback(() => {\n    if (!audioRef.current) return;\n    if (audioRef.current.paused) {\n      audioRef.current.play();\n    } else {\n      audioRef.current.pause();\n    }\n    setPlaying((p) => !p);\n  }, []);\n\n  const onPlaybackRateChange = useCallback((rate: number) => {\n    setSpeedValue(rate);\n    if (audioRef.current) {\n      audioRef.current.playbackRate = rate;\n    }\n  }, []);\n\n  const onSeekSeconds = useCallback((seconds: number) => {\n    if (audioRef.current) {\n      audioRef.current.currentTime += seconds;\n    }\n  }, []);\n\n  const handleSliderChange = useCallback((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 = useCallback((details: SliderValueChangeDetails) => {\n    if (audioRef.current) {\n      audioRef.current.volume = details.value[0] / 100;\n      setVolumeValue(details.value[0]);\n    }\n  }, []);\n\n  const onEnded = useCallback(() => setPlaying(false), []);\n\n  const onHandleTime: ReactEventHandler<HTMLAudioElement> = useCallback((meta) => {\n    const target = meta.currentTarget;\n    setCurrentTime(Math.round(target.currentTime));\n    setDuration(Math.round(target.duration));\n  }, []);\n\n  return {\n    togglePlay,\n    onPlaybackRateChange,\n    onSeekSeconds,\n    handleVolumeSliderChange,\n    handleSliderChange,\n    onEnded,\n    onHandleTime,\n    speedValue,\n    volumeValue,\n    currentTime,\n    duration,\n    playing,\n    audioRef,\n  };\n};\n"],"mappings":";;AAWA,MAAa,yBAAyB;CACpC,MAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;CAC9C,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,MAAM,CAAC,aAAa,kBAAkB,SAAS,CAAC;CAChD,MAAM,CAAC,UAAU,eAAe,SAAS,CAAC;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,aAAa,kBAAkB;EACnC,IAAI,CAAC,SAAS,SAAS;EACvB,IAAI,SAAS,QAAQ,QACnB,SAAS,QAAQ,KAAK;OAEtB,SAAS,QAAQ,MAAM;EAEzB,YAAY,MAAM,CAAC,CAAC;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,uBAAuB,aAAa,SAAiB;EACzD,cAAc,IAAI;EAClB,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,aAAa,YAAoB;EACrD,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,qBAAqB,aAAa,YAAsC;EAC5E,MAAM,WAAW,QAAQ,MAAM;EAC/B,IAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,QAAQ,GACzD,SAAS,QAAQ,cAAc,QAAQ,MAAM;CAEjD,GAAG,CAAC,CAAC;CAiBL,OAAO;EACL;EACA;EACA;EACA,0BAnB+B,aAAa,YAAsC;GAClF,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;IAC7C,eAAe,QAAQ,MAAM,EAAE;GACjC;EACF,GAAG,CAAC,CAcqB;EACvB;EACA,SAdc,kBAAkB,WAAW,KAAK,GAAG,CAAC,CAc9C;EACN,cAbwD,aAAa,SAAS;GAC9E,MAAM,SAAS,KAAK;GACpB,eAAe,KAAK,MAAM,OAAO,WAAW,CAAC;GAC7C,YAAY,KAAK,MAAM,OAAO,QAAQ,CAAC;EACzC,GAAG,CAAC,CASS;EACX;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/es/Embed/ConceptEmbed.mjs

@@ -7,7 +7,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { forwardRef, useMemo, useRef } from "react";
 import parse from "html-react-parser";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@ark-ui/react";
+import { Portal } from "@ark-ui/react/portal";
 //#region src/Embed/ConceptEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Embed/ConceptEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n  renderContext?: RenderContext;\n  lang?: string;\n  previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n  const parsedContent = useMemo(() => {\n    if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n    return parse(embed.data.concept.content.htmlContent);\n  }, [embed]);\n\n  const parsedTitle = useMemo(\n    () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n    [embed],\n  );\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\") {\n    // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  // TODO: Consider whether we should do this in article-converter instead.\n  if (embed.data.concept.glossData) {\n    return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkContent={children}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={parsedTitle}\n        source={concept.source}\n      >\n        {parsedContent}\n      </InlineConcept>\n    );\n  }\n\n  return (\n    <BlockConcept\n      previewAlt={previewAlt}\n      copyright={concept.copyright}\n      visualElement={visualElement}\n      lang={lang}\n      title={renderContext === \"embed\" ? undefined : parsedTitle}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkContent?: ReactNode;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n        <PopoverTrigger asChild ref={ref} {...rest}>\n          <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Concept\n              copyright={copyright}\n              visualElement={visualElement}\n              title={title}\n              lang={lang}\n              source={source}\n              previewAlt={previewAlt}\n            >\n              {children}\n            </Concept>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n  <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;EAClC,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,SAAS,OAAO,KAAA;EACpE,OAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,WAAW;CACrD,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,SAAS,IAAI,KAAA,GAChF,CAAC,KAAK,CACR;CAEA,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,oBAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,SAEnB,OAAO,oBAAC,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAGzC,IAAI,MAAM,KAAK,QAAQ,WACrB,OAAO,oBAAC,YAAD;EAAmB;EAAQ;CAAqB,CAAA;CAGzD,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,oBAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;CACY,CAAA;CAInB,OACE,oBAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;CACW,CAAA;AAElB;AAOA,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,IAAI;CAC9C,OACE,qBAAC,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,oBAAC,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,oBAAC,4BAAD,EAAA,UAA6B,YAAwC,CAAA;EACvD,CAAA,GAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,KAAK;aACzB,oBAAC,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;GACM,CAAA;EACW,CAAA,EAChB,CAAA,CACG;;AAEjB,CACF;AAIA,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;AAAM,CAAA,CAC1D"}
+{"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n  renderContext?: RenderContext;\n  lang?: string;\n  previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n  const parsedContent = useMemo(() => {\n    if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n    return parse(embed.data.concept.content.htmlContent);\n  }, [embed]);\n\n  const parsedTitle = useMemo(\n    () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n    [embed],\n  );\n\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\") {\n    // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  // TODO: Consider whether we should do this in article-converter instead.\n  if (embed.data.concept.glossData) {\n    return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n  }\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <InlineConcept\n        previewAlt={previewAlt}\n        linkContent={children}\n        copyright={concept.copyright}\n        visualElement={visualElement}\n        lang={lang}\n        title={parsedTitle}\n        source={concept.source}\n      >\n        {parsedContent}\n      </InlineConcept>\n    );\n  }\n\n  return (\n    <BlockConcept\n      previewAlt={previewAlt}\n      copyright={concept.copyright}\n      visualElement={visualElement}\n      lang={lang}\n      title={renderContext === \"embed\" ? undefined : parsedTitle}\n      source={concept.source}\n    >\n      {parsedContent}\n    </BlockConcept>\n  );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n  linkContent?: ReactNode;\n  source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n  ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n    const contentRef = useRef<HTMLDivElement>(null);\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n        <PopoverTrigger asChild ref={ref} {...rest}>\n          <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Concept\n              copyright={copyright}\n              visualElement={visualElement}\n              title={title}\n              lang={lang}\n              source={source}\n              previewAlt={previewAlt}\n            >\n              {children}\n            </Concept>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n  <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;EAClC,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,SAAS,OAAO,KAAA;EACpE,OAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,WAAW;CACrD,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,SAAS,IAAI,KAAA,GAChF,CAAC,KAAK,CACR;CAEA,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,oBAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,SAEnB,OAAO,oBAAC,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAGzC,IAAI,MAAM,KAAK,QAAQ,WACrB,OAAO,oBAAC,YAAD;EAAmB;EAAQ;CAAqB,CAAA;CAGzD,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,oBAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;CACY,CAAA;CAInB,OACE,oBAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;CACW,CAAA;AAElB;AAOA,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,IAAI;CAC9C,OACE,qBAAC,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,oBAAC,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,oBAAC,4BAAD,EAAA,UAA6B,YAAwC,CAAA;EACvD,CAAA,GAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,KAAK;aACzB,oBAAC,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;GACM,CAAA;EACW,CAAA,EAChB,CAAA,CACG;;AAEjB,CACF;AAIA,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;AAAM,CAAA,CAC1D"}

package/es/Embed/EmbedWrapper.mjs

@@ -1,8 +1,8 @@
 import { styled } from "@ndla/styled-system/jsx";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react/factory";
 //#region src/Embed/EmbedWrapper.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Embed/EmbedWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedWrapper.mjs","names":[],"sources":["../../src/Embed/EmbedWrapper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAqB,IAAI;CAC7B,MAAM,EACJ,UAAU,WACZ;CACA,iBAAiB,EACf,SAAS,MACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,OACT,EACF;EACA,OAAO,EACL,OAAO,OACT;CACF,EACF;AACF,CAAC;AAMD,MAAM,qBAAqB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEtE,MAAa,eAAe,YACzB,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC,oBAAD;CACE,KAAK,IAAI,IAAI,mBAAmB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CACzD,sBAAmB;CACnB,GAAI;CACC;AACN,CAAA,CAEL"}
+{"version":3,"file":"EmbedWrapper.mjs","names":[],"sources":["../../src/Embed/EmbedWrapper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAqB,IAAI;CAC7B,MAAM,EACJ,UAAU,WACZ;CACA,iBAAiB,EACf,SAAS,MACX;CACA,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,OACT,EACF;EACA,OAAO,EACL,OAAO,OACT;CACF,EACF;AACF,CAAC;AAMD,MAAM,qBAAqB,OAAO,IAAI,KAAK,CAAC,GAAG,EAAE,eAAe,KAAK,CAAC;AAEtE,MAAa,eAAe,YACzB,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC,oBAAD;CACE,KAAK,IAAI,IAAI,mBAAmB,IAAI,EAAE,QAAQ,CAAC,GAAG,OAAO;CACzD,sBAAmB;CACnB,GAAI;CACC;AACN,CAAA,CAEL"}

package/es/Embed/GlossEmbed.mjs

@@ -5,7 +5,7 @@ import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primi
 import { styled } from "@ndla/styled-system/jsx";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@ark-ui/react";
+import { Portal } from "@ark-ui/react/portal";
 //#region src/Embed/GlossEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.

package/es/Embed/GlossEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlossEmbed.mjs","names":[],"sources":["../../src/Embed/GlossEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { Gloss } from \"../Gloss/Gloss\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,OAAO,iBACT,EACF,CAAC;AAED,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,aAAa,OAAuB,IAAI;CAC9C,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,oBAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,WAClD,OAAO,oBAAC,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;CAClC,IACA,KAAA;CAEN,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,qBAAC,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;EACpD,CAAA,GAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,KAAK;aACzB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAD;IACE,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;GAC/B,CAAA,EACK,CAAA;EACY,CAAA,EAChB,CAAA,CACG;;CAIjB,OACE,oBAAC,QAAD;EAAQ,mBAAgB;YACtB,oBAAC,OAAD;GACE,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;EACT,CAAA;CACK,CAAA;AAEZ"}
+{"version":3,"file":"GlossEmbed.mjs","names":[],"sources":["../../src/Embed/GlossEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { Gloss } from \"../Gloss/Gloss\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,OAAO,iBACT,EACF,CAAC;AAED,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,aAAa,OAAuB,IAAI;CAC9C,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,oBAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,WAClD,OAAO,oBAAC,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;CAClC,IACA,KAAA;CAEN,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,qBAAC,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;EACpD,CAAA,GAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,KAAK;aACzB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAD;IACE,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;GAC/B,CAAA,EACK,CAAA;EACY,CAAA,EAChB,CAAA,CACG;;CAIjB,OACE,oBAAC,QAAD;EAAQ,mBAAgB;YACtB,oBAAC,OAAD;GACE,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;EACT,CAAA;CACK,CAAA;AAEZ"}

package/es/Embed/UuDisclaimerEmbed.mjs

@@ -1,10 +1,11 @@
-import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
+import { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import "react";
+import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Portal } from "@ark-ui/react";
+import { visuallyHidden } from "@ndla/styled-system/patterns";
+import { Portal } from "@ark-ui/react/portal";
 //#region src/Embed/UuDisclaimerEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -25,12 +26,28 @@ const StyledErrorWarningFill = styled(ErrorWarningFill, { base: {
 	fill: "icon.subtle"
 } });
 const StyledPopoverContent = styled(PopoverContent, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
 	width: "surface.xlarge",
 	maxHeight: "50vh",
 	overflowY: "auto"
 } });
+const HiddenButton = styled(Button, { base: { "&:not(:focus)": {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	padding: "0",
+	margin: "-1px",
+	overflow: "hidden",
+	clip: "rect(0,0,0,0)",
+	whiteSpace: "nowrap",
+	borderWidth: "0"
+} } });
 const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 	const { t } = useTranslation();
+	const skipRef = useRef(null);
+	const contentRef = useRef(null);
 	if (embed.status === "error") return /* @__PURE__ */ jsxs(DisclaimerWrapper, { children: [/* @__PURE__ */ jsx(StyledErrorWarningFill, {
 		"aria-label": t("embed.embedError", { type: t("embed.type.disclaimer") }),
 		title: t("embed.embedError", { type: t("embed.type.disclaimer") })
@@ -38,19 +55,37 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 	return /* @__PURE__ */ jsxs(DisclaimerWrapper, {
 		role: "region",
 		"data-embed-type": "uu-disclaimer",
-		children: [/* @__PURE__ */ jsxs(PopoverRoot, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(StyledIconButton, {
-				size: "small",
-				variant: "secondary",
-				"aria-label": t("uuDisclaimer.title"),
-				title: t("uuDisclaimer.title"),
-				children: /* @__PURE__ */ jsx(AccessibilityFill, {})
+		children: [
+			/* @__PURE__ */ jsxs(PopoverRoot, {
+				initialFocusEl: () => contentRef.current,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(StyledIconButton, {
+						size: "small",
+						variant: "secondary",
+						"aria-label": t("uuDisclaimer.title"),
+						title: t("uuDisclaimer.title"),
+						children: /* @__PURE__ */ jsx(AccessibilityFill, {})
+					})
+				}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(StyledPopoverContent, {
+					ref: contentRef,
+					children: [/* @__PURE__ */ jsx("div", { children: transformedDisclaimer }), /* @__PURE__ */ jsx(HiddenButton, {
+						onClick: () => skipRef.current?.focus(),
+						children: t("uuDisclaimer.skipContent")
+					})]
+				}) })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-uu-content": "",
+				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: visuallyHidden(),
+				tabIndex: -1,
+				ref: skipRef,
+				children: t("uuDisclaimer.contentCompleted")
 			})
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledPopoverContent, { children: /* @__PURE__ */ jsx("div", { children: transformedDisclaimer }) }) })] }), /* @__PURE__ */ jsx("div", {
-			"data-uu-content": "",
-			children
-		})]
+		]
 	});
 };
 //#endregion

package/es/Embed/UuDisclaimerEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UuDisclaimerEmbed.mjs","names":[],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,CAAC;AAED,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,WAAW,WACb,EACF,CAAC;AAED,MAAM,yBAAyB,OAAO,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACR,EACF,CAAC;AAED,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,MAAM,eAAe;CAC7B,IAAI,MAAM,WAAW,SACnB,OACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,wBAAD;EACE,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;EACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;CAClE,CAAA,GACA,QACgB,EAAA,CAAA;CAIvB,OAEE,qBAAC,mBAAD;EAAmB,MAAK;EAAS,mBAAgB;YAAjD,CACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,kBAAD;IACE,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,oBAAoB;IAClC,OAAO,EAAE,oBAAoB;cAE7B,oBAAC,mBAAD,CAAoB,CAAA;GACJ,CAAA;EACJ,CAAA,GAChB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAM,sBAA2B,CAAA,EACb,CAAA,EAChB,CAAA,CACG,EAAA,CAAA,GACb,oBAAC,OAAD;GAAK,mBAAgB;GAAI;EAAc,CAAA,CACtB;;AAEvB"}
+{"version":3,"file":"UuDisclaimerEmbed.mjs","names":[],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { Button, IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { visuallyHidden } from \"@ndla/styled-system/patterns\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nconst HiddenButton = styled(Button, {\n  base: {\n    \"&:not(:focus)\": {\n      position: \"absolute\",\n      width: \"1px\",\n      height: \"1px\",\n      padding: \"0\",\n      margin: \"-1px\",\n      overflow: \"hidden\",\n      clip: \"rect(0,0,0,0)\",\n      whiteSpace: \"nowrap\",\n      borderWidth: \"0\",\n    },\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  const skipRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <div>{transformedDisclaimer}</div>\n            <HiddenButton onClick={() => skipRef.current?.focus()}>{t(\"uuDisclaimer.skipContent\")}</HiddenButton>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n      <div className={visuallyHidden()} tabIndex={-1} ref={skipRef}>\n        {t(\"uuDisclaimer.contentCompleted\")}\n      </div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,CAAC;AAED,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,WAAW,WACb,EACF,CAAC;AAED,MAAM,yBAAyB,OAAO,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACR,EACF,CAAC;AAED,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,iBAAiB;CACf,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACN,YAAY;CACZ,aAAa;AACf,EACF,EACF,CAAC;AAED,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,aAAa,OAAuB,IAAI;CAC9C,IAAI,MAAM,WAAW,SACnB,OACE,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,wBAAD;EACE,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;EACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,uBAAuB,EAAE,CAAC;CAClE,CAAA,GACA,QACgB,EAAA,CAAA;CAIvB,OAEE,qBAAC,mBAAD;EAAmB,MAAK;EAAS,mBAAgB;YAAjD;GACE,qBAAC,aAAD;IAAa,sBAAsB,WAAW;cAA9C,CACE,oBAAC,gBAAD;KAAgB,SAAA;eACd,oBAAC,kBAAD;MACE,MAAK;MACL,SAAQ;MACR,cAAY,EAAE,oBAAoB;MAClC,OAAO,EAAE,oBAAoB;gBAE7B,oBAAC,mBAAD,CAAoB,CAAA;KACJ,CAAA;IACJ,CAAA,GAChB,oBAAC,QAAD,EAAA,UACE,qBAAC,sBAAD;KAAsB,KAAK;eAA3B,CACE,oBAAC,OAAD,EAAA,UAAM,sBAA2B,CAAA,GACjC,oBAAC,cAAD;MAAc,eAAe,QAAQ,SAAS,MAAM;gBAAI,EAAE,0BAA0B;KAAgB,CAAA,CAChF;OAChB,CAAA,CACG;;GACb,oBAAC,OAAD;IAAK,mBAAgB;IAAI;GAAc,CAAA;GACvC,oBAAC,OAAD;IAAK,WAAW,eAAe;IAAG,UAAU;IAAI,KAAK;cAClD,EAAE,+BAA+B;GAC/B,CAAA;EACY;;AAEvB"}

package/es/FileList/FileList.mjs

@@ -1,7 +1,7 @@
 import { styled } from "@ndla/styled-system/jsx";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import { ark } from "@ark-ui/react";
+import { ark } from "@ark-ui/react/factory";
 //#region src/FileList/FileList.tsx
 /**
 * Copyright (c) 2023-present, NDLA.

package/es/FileList/FileList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":[],"sources":["../../src/FileList/FileList.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 { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,kBAAkB,OAC7B,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,eAAe,OAC1B,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BACnB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;CAC7D,OACE,oBAAC,iBAAD;EAAiB,GAAI;EAAM,mBAAgB;EACxC;CACc,CAAA;AAErB"}
+{"version":3,"file":"FileList.mjs","names":[],"sources":["../../src/FileList/FileList.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 { ark } from \"@ark-ui/react/factory\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ComponentPropsWithoutRef } from \"react\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,kBAAkB,OAC7B,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACT,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,eAAe,OAC1B,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BACnB;AACF,EACF,GACA,EAAE,eAAe,KAAK,CACxB;AAEA,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;CAC7D,OACE,oBAAC,iBAAD;EAAiB,GAAI;EAAM,mBAAgB;EACxC;CACc,CAAA;AAErB"}

package/es/Gloss/Gloss.mjs

@@ -7,7 +7,7 @@ import parse from "html-react-parser";
 import { useTranslation } from "react-i18next";
 import { ArrowDownShortLine } from "@ndla/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AccordionItemTrigger as AccordionItemTrigger$1 } from "@ark-ui/react";
+import { AccordionItemTrigger as AccordionItemTrigger$1 } from "@ark-ui/react/accordion";
 //#region src/Gloss/Gloss.tsx
 /**
 * Copyright (c) 2023-present, NDLA.