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

package/es/Gloss/Gloss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.mjs","names":["AccordionItemTrigger"],"sources":["../../src/Gloss/Gloss.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 { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBACJ,WACA,YACA,iBACwB;CACxB,IAAI,eAAe,KAAA,KAAa,iBAAiB,KAAA,GAAW;EAC1D,MAAM,iBAAiB,YAAY,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;EAC9D,MAAM,mBAAmB,cAAc,MAAM,GAAG,KAAK,CAAC;EAUtD,QAPE,WAAW,UAAU,KAAK,UAAU,MAAM;GACxC,IAAI,eAAe,SAAS,EAAE,SAAS,CAAC,GACtC,OAAO,SAAS,QAAQ,MAAM,iBAAiB,SAAS,EAAE,QAAQ,CAAC;GAErE,OAAO,CAAC;EACV,CAAC,KAAK,CAAC,GACqC,QAAQ,OAAO,CAAC,CAAC,GAAG,MACxC;CAC5B;CACA,OAAO,WAAW,YAAY,CAAC;AACjC;AAEA,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;AAClB,EACF,CAAC;AAED,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACP,EACF,CAAC;AAED,MAAM,6BAA6B,OAAO,sBAAsB,EAC9D,MAAM,EACJ,eAAe,IACjB,EACF,CAAC;AAED,MAAM,kBAAkB,OAAO,WAAW,EACxC,MAAM,EACJ,kBAAkB,UACpB,EACF,CAAC;AAED,MAAM,sBAAsB,OAAO,eAAe;CAChD,MAAM;EACJ,cAAc;EACd,eAAe;CACjB;CACA,iBAAiB,EACf,SAAS,SACX;CACA,UAAU,EACR,SAAS;EACP,QAAQ,CAAC;EACT,UAAU;GACR,QAAQ;GACR,aAAa;GACb,cAAc;EAChB;CACF,EACF;AACF,CAAC;AAeD,MAAa,SAAS,EAAE,OAAO,WAAW,OAAO,YAAY,cAAc,cAAyC;CAClH,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,cAAc,cAAc,MAAM,MAAM,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC;CAE3E,MAAM,mBAAmB,cACjB,oBAAoB,WAAW,YAAY,YAAY,GAC7D;EAAC;EAAY;EAAc;CAAS,CACtC;CAEA,IAAI,CAAC,WAAW,OAAO;CAEvB,OACE,oBAAC,eAAD;EAAe,UAAA;EAAS,SAAQ;YAC9B,qBAAC,qBAAD;GAAqB,OAAM;GAAiB;aAA5C;IACE,qBAAC,WAAD,EAAA,UAAA,CACE,qBAAC,aAAD,EAAA,UAAA;KACE,oBAAC,MAAD;MAAM,WAAU;MAAe,YAAW;MAAO,SAAA;MAAQ,YAAA;MAAW,MAAM,UAAU;gBAClF,oBAAC,QAAD,EAAA,UAAO,UAAU,MAAY,CAAA;KACzB,CAAA;KACL,CAAC,CAAC,UAAU,eAAe,eAC1B,oBAAC,MAAD;MAAM,WAAU;MAAe,SAAA;MAAQ,YAAA;gBACrC,oBAAC,QAAD;OAEE,cAAY,EAAE,kCAAkC;OAChD,MAAM,UAAU;iBAEf,UAAU,eAAe;MACtB,GALC,EAAE,kCAAkC,CAKrC;KACF,CAAA;KAEP,CAAC,CAAC,UAAU,eAAe,UAC1B,oBAAC,MAAD;MAAM,WAAU;MAAe,SAAA;MAAQ,YAAA;gBACrC,oBAAC,QAAD;OACE,eAAY;OAEZ,cAAY,EAAE,6BAA6B;OAC3C,MAAM,UAAU;iBAEf,UAAU,eAAe;MACtB,GALC,EAAE,6BAA6B,CAKhC;KACF,CAAA;KAEP,CAAC,CAAC,UAAU,aACX,oBAAC,MAAD;MAAM,WAAU;MAAe,SAAA;MAAQ,YAAA;gBACrC,oBAAC,QAAD;OAAM,cAAY,EAAE,iBAAiB;iBAClC,UAAU,UAAU,KAAK,OAAO,EAAE,aAAa,IAAI,EAAE,YAAY,CAAC,EAAE,KAAK,KAAK;MAC3E,CAAA;KACF,CAAA;IAEG,EAAA,CAAA,GACZ,CAAC,CAAC,OAAO,OAAO,oBAAC,eAAD;KAAe,KAAK,MAAM;KAAK,OAAO,MAAM;IAAQ,CAAA,CAC5D,EAAA,CAAA;IACX,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,WAAU;KAAe,SAAA;KAAQ,YAAA;eACrC,oBAAC,QAAD;MAAM,MAAM,MAAM;gBAAW;KAAkB,CAAA;IAC3C,CAAA,GACL,CAAC,CAAC,iBAAiB,UAClB,oBAACA,wBAAD;KAAsB,SAAA;eACpB,oBAAC,YAAD;MAAY,SAAQ;MAAW,cAAY,EAAE,oBAAoB;MAAG,OAAO,EAAE,oBAAoB;gBAC/F,oBAAC,wBAAD;OAAwB,SAAA;iBACtB,oBAAC,oBAAD,EAAoB,MAAK,SAAU,CAAA;MACb,CAAA;KACd,CAAA;IACQ,CAAA,CAET,EAAA,CAAA;IACjB,oBAAC,4BAAD,EAAA,UACG,iBAAiB,KAAK,UAAU,UAC/B,oBAAC,cAAD;KAEY;KACV,kBAAkB,UAAU;IAC7B,GAHM,iBAAiB,OAGvB,CACF,EACyB,CAAA;GACT;;CACR,CAAA;AAEnB"}
+{"version":3,"file":"Gloss.mjs","names":["AccordionItemTrigger"],"sources":["../../src/Gloss/Gloss.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 { AccordionItemTrigger } from \"@ark-ui/react/accordion\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\nimport { GlossExample } from \"./GlossExample\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: GlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): GlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: GlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>\n                  {glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(\" / \")}\n                </span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}

package/es/TagSelector/TagSelector.mjs

@@ -3,15 +3,10 @@ import { forwardRef, useEffect, useId, useRef } from "react";
 import { CloseLine } from "@ndla/icons";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { contains } from "@ndla/util";
-import { useComboboxContext, useTagsInputContext } from "@ark-ui/react";
+import "@ark-ui/react/collection";
+import { useComboboxContext } from "@ark-ui/react/combobox";
+import { useTagsInputContext } from "@ark-ui/react/tags-input";
 //#region src/TagSelector/TagSelector.tsx
-/**
-* Copyright (c) 2024-present, NDLA.
-*
-* This source code is licensed under the GPLv3 license found in the
-* LICENSE file in the root directory of this source tree.
-*
-*/
 const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBehavior = "clear", editable, addOnPaste = false, onValueChange, children, value, translations, ...rest }) => {
 	const ids = {
 		root: useId(),

package/es/TagSelector/TagSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagSelector.mjs","names":[],"sources":["../../src/TagSelector/TagSelector.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 { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAa,mBAA6C,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,cACA,GAAG,WAC0B;CAC7B,MAAM,MAAM;EACV,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,SAAS,MAAM;CACjB;CAEA,MAAM,aAAa,OAAmC,KAAA,CAAS;CAE/D,gBAAgB;EACd,IAAI,CAAC,WAAW,SACd,WAAW,UAAU,SAAS,eAAe,IAAI,OAAO;CAE5D,GAAG,CAAC,IAAI,OAAO,CAAC;CAEhB,OACE,oBAAC,cAAD;EACO;EACL,SAAA;EACkB;EACR;EACS;EACJ;EACD;EACd,uBAAuB,UAAU;GAC/B,IAAI,SAAS,WAAW,SAAS,MAAM,OAAO,cAAc,MAAM,GAChE,MAAM,eAAe;EAEzB;EACO;EACP,GAAI;YAEJ,oBAAC,0BAAD;GACO;GACE;GACG;GACK;GACH;GACE;GAEb;EACuB,CAAA;CACd,CAAA;AAElB;AAEA,MAAM,2BAA2B,YAAgD,OAAO,QAAQ;CAC9F,MAAM,cAAc,mBAAmB;CACvC,OACE,oBAAC,eAAD;EACO;EACL,qBAAqB,YAAY,YAAY,cAAc,QAAQ,UAAU;EAC7E,GAAI;CACL,CAAA;AAEL,CAAC;AAID,MAAa,mBAAmB;AAEhC,MAAa,uBAAuB;AAEpC,MAAa,qBAAqB;AAElC,MAAa,qBAAqB,YAAqD,EAAE,UAAU,GAAG,SAAS,QAAQ;CACrH,OACE,oBAAC,iBAAD;EAAsB;EAAK,SAAA;YACzB,oBAAC,kBAAD;GAAkB,GAAI;GAAQ;EAA2B,CAAA;CAC1C,CAAA;AAErB,CAAC;AAED,MAAa,0BAA0B;AAKvC,MAAa,uBAAuB,YACjC,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/B,MAAM,UAAU,oBAAoB;CAEpC,OACE,oBAAC,eAAD;EAAoB;EAAK,SAAA;YACvB,oBAAC,gBAAD;GACE,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,SAChB,QAAQ,SAAS,QAAQ,UAAU;GAEvC;GACA,GAAI;GAEH;EACa,CAAA;CACH,CAAA;AAEnB,CACF;AAEA,MAAa,mBAAmB,YAAqD,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnH,MAAM,UAAU,oBAAoB;CAEpC,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,QAAQ,MAAM,KAAK,OAAO,UACzB,qBAAC,eAAD;EAAsB;EAAc;YAApC,CACE,qBAAC,sBAAD,EAAA,UAAA,CACE,oBAAC,mBAAD,EAAA,UAAoB,MAAyB,CAAA,GAC7C,oBAAC,4BAAD,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACc,CAAA,CACR,EAAA,CAAA,GACtB,oBAAC,oBAAD,CAAqB,CAAA,CACR;IARiC,KAQjC,CAChB,GACD,oBAAC,eAAD;EAAoB;EAAK,SAAA;YACvB,oBAAC,gBAAD;GACE,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,SAChB,QAAQ,SAAS,QAAQ,UAAU;GAEvC;GACA,GAAI;GAEH;EACa,CAAA;CACH,CAAA,CACf,EAAA,CAAA;AAEN,CAAC"}
+{"version":3,"file":"TagSelector.mjs","names":[],"sources":["../../src/TagSelector/TagSelector.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 { type CollectionItem } from \"@ark-ui/react/collection\";\nimport { useComboboxContext } from \"@ark-ui/react/combobox\";\nimport { useTagsInputContext } from \"@ark-ui/react/tags-input\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;AAuCA,MAAa,mBAA6C,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,cACA,GAAG,WAC0B;CAC7B,MAAM,MAAM;EACV,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,SAAS,MAAM;CACjB;CAEA,MAAM,aAAa,OAAmC,KAAA,CAAS;CAE/D,gBAAgB;EACd,IAAI,CAAC,WAAW,SACd,WAAW,UAAU,SAAS,eAAe,IAAI,OAAO;CAE5D,GAAG,CAAC,IAAI,OAAO,CAAC;CAEhB,OACE,oBAAC,cAAD;EACO;EACL,SAAA;EACkB;EACR;EACS;EACJ;EACD;EACd,uBAAuB,UAAU;GAC/B,IAAI,SAAS,WAAW,SAAS,MAAM,OAAO,cAAc,MAAM,GAChE,MAAM,eAAe;EAEzB;EACO;EACP,GAAI;YAEJ,oBAAC,0BAAD;GACO;GACE;GACG;GACK;GACH;GACE;GAEb;EACuB,CAAA;CACd,CAAA;AAElB;AAEA,MAAM,2BAA2B,YAAgD,OAAO,QAAQ;CAC9F,MAAM,cAAc,mBAAmB;CACvC,OACE,oBAAC,eAAD;EACO;EACL,qBAAqB,YAAY,YAAY,cAAc,QAAQ,UAAU;EAC7E,GAAI;CACL,CAAA;AAEL,CAAC;AAID,MAAa,mBAAmB;AAEhC,MAAa,uBAAuB;AAEpC,MAAa,qBAAqB;AAElC,MAAa,qBAAqB,YAAqD,EAAE,UAAU,GAAG,SAAS,QAAQ;CACrH,OACE,oBAAC,iBAAD;EAAsB;EAAK,SAAA;YACzB,oBAAC,kBAAD;GAAkB,GAAI;GAAQ;EAA2B,CAAA;CAC1C,CAAA;AAErB,CAAC;AAED,MAAa,0BAA0B;AAKvC,MAAa,uBAAuB,YACjC,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/B,MAAM,UAAU,oBAAoB;CAEpC,OACE,oBAAC,eAAD;EAAoB;EAAK,SAAA;YACvB,oBAAC,gBAAD;GACE,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,SAChB,QAAQ,SAAS,QAAQ,UAAU;GAEvC;GACA,GAAI;GAEH;EACa,CAAA;CACH,CAAA;AAEnB,CACF;AAEA,MAAa,mBAAmB,YAAqD,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnH,MAAM,UAAU,oBAAoB;CAEpC,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,QAAQ,MAAM,KAAK,OAAO,UACzB,qBAAC,eAAD;EAAsB;EAAc;YAApC,CACE,qBAAC,sBAAD,EAAA,UAAA,CACE,oBAAC,mBAAD,EAAA,UAAoB,MAAyB,CAAA,GAC7C,oBAAC,4BAAD,EAAA,UACE,oBAAC,WAAD,CAAY,CAAA,EACc,CAAA,CACR,EAAA,CAAA,GACtB,oBAAC,oBAAD,CAAqB,CAAA,CACR;IARiC,KAQjC,CAChB,GACD,oBAAC,eAAD;EAAoB;EAAK,SAAA;YACvB,oBAAC,gBAAD;GACE,YAAY,UAAU;IACpB,IAAI,MAAM,QAAQ,SAChB,QAAQ,SAAS,QAAQ,UAAU;GAEvC;GACA,GAAI;GAEH;EACa,CAAA;CACH,CAAA,CACf,EAAA,CAAA;AAEN,CAAC"}

package/es/i18n/useComponentTranslations.mjs

@@ -119,9 +119,9 @@ const useDatePickerTranslations = (translations) => {
 	const { t } = useTranslation("translation", { keyPrefix: "component.datePicker" });
 	return useMemo(() => ({
 		dayCell: (state) => {
-			if (state.unavailable) return t("dayCell.unavailable", { date: state.formattedDate });
-			else if (state.selected) return t("dayCell.selected", { date: state.formattedDate });
-			else return t("dayCell.select", { date: state.formattedDate });
+			if (state.unavailable) return t("dayCell.unavailable", { date: state.valueText });
+			else if (state.selected) return t("dayCell.selected", { date: state.valueText });
+			else return t("dayCell.select", { date: state.valueText });
 		},
 		nextTrigger: (view) => t(`nextTrigger.${view}`),
 		prevTrigger: (view) => t(`prevTrigger.${view}`),

package/es/i18n/useComponentTranslations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentTranslations.mjs","names":[],"sources":["../../src/i18n/useComponentTranslations.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { CollectionItem } from \"@ark-ui/react\";\nimport type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from \"@ndla/primitives\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type TagSelectorRootProps } from \"../TagSelector/TagSelector\";\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport const useTagsInputTranslations = (\n  translations?: Partial<TagsInputRootProps[\"translations\"]>,\n): TagsInputRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.tagsInput\" });\n\n  return useMemo(\n    () => ({\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      deleteTagTriggerLabel: (tag) => t(\"deleteTagTriggerLabel\", { tag }),\n      tagAdded: (tag) => t(\"tagAdded\", { tag }),\n      tagsPasted: (tag) => t(\"tagsPasted\", { length: tag.length }),\n      tagEdited: (tag) => t(\"tagEdited\", { tag }),\n      tagUpdated: (tag) => t(\"tagUpdated\", { tag }),\n      tagDeleted: (tag) => t(\"tagDeleted\", { tag }),\n      tagSelected: (tag) => t(\"tagSelected\", { tag }),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useComboboxTranslations = <T extends CollectionItem>(\n  translations?: Partial<ComboboxRootProps<T>[\"translations\"]>,\n): ComboboxRootProps<T>[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.combobox\" });\n\n  return useMemo(\n    () => ({\n      triggerLabel: t(\"triggerLabel\"),\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useTagSelectorTranslations = <T extends CollectionItem>(\n  translations?: Partial<TagSelectorRootProps<T>[\"translations\"]>,\n): TagSelectorRootProps<T>[\"translations\"] => {\n  const tagsInputTranslations = useTagsInputTranslations();\n  const comboboxTranslations = useComboboxTranslations();\n\n  return useMemo(\n    () =>\n      ({\n        ...comboboxTranslations,\n        ...tagsInputTranslations,\n        ...translations,\n      }) as TagSelectorRootProps<T>[\"translations\"],\n    [comboboxTranslations, tagsInputTranslations, translations],\n  );\n};\n\nexport const usePaginationTranslations = (\n  translations?: Partial<PaginationRootProps[\"translations\"]>,\n): PaginationRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.pagination\" });\n\n  return useMemo(\n    () => ({\n      rootLabel: t(\"rootLabel\"),\n      prevTriggerLabel: t(\"prevTriggerLabel\"),\n      nextTriggerLabel: t(\"nextTriggerLabel\"),\n      itemLabel: (details) => {\n        const lastPage = details.totalPages > 1 && details.page === details.totalPages;\n        return lastPage ? t(\"lastPage\", { page: details.page }) : t(\"page\", { page: details.page });\n      },\n      ...translations,\n    }),\n    [translations, t],\n  );\n};\n\n// TODO: Deduplicate this and place it somewhere smart. Maybe core?\ninterface AudioSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  useAudio: string;\n  noResults: string;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\ninterface VideoTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  loadMoreVideos: string;\n  noResults: string;\n  is360Video: string;\n  previewVideo: string;\n  addVideo: string;\n  close: string;\n}\ninterface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\ninterface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport const useImageSearchTranslations = (\n  translations: DeepPartial<ImageSearchTranslations> = {},\n): ImageSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.imageSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      imagePreview: {\n        creatorsLabel: t(\"imagePreview.creatorsLabel\"),\n        license: t(\"imagePreview.license\"),\n        caption: t(\"imagePreview.caption\"),\n        altText: t(\"imagePreview.altText\"),\n        modelRelease: t(\"imagePreview.modelRelease\"),\n        tags: t(\"imagePreview.tags\"),\n        close: t(\"close\"),\n        checkboxLabel: t(\"imagePreview.checkboxLabel\"),\n        useImageTitle: t(\"imagePreview.useImageTitle\"),\n        ...imagePreview,\n      },\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useAudioSearchTranslations = (\n  translations: DeepPartial<AudioSearchTranslations> = {},\n): AudioSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.audioSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      useAudio: t(\"useAudio\"),\n      noResults: t(\"noResults\"),\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.videoSearch\" });\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      loadMoreVideos: t(\"loadMoreVideos\"),\n      noResults: t(\"noResults\"),\n      is360Video: t(\"is360Video\"),\n      previewVideo: t(\"previewVideo\"),\n      addVideo: t(\"addVideo\"),\n      close: t(\"close\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useDatePickerTranslations = (\n  translations?: Partial<DatePickerRootProps[\"translations\"]>,\n): NonNullable<DatePickerRootProps[\"translations\"]> => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.datePicker\" });\n\n  return useMemo(\n    () => ({\n      dayCell: (state) => {\n        if (state.unavailable) {\n          return t(\"dayCell.unavailable\", { date: state.formattedDate });\n        } else if (state.selected) {\n          return t(\"dayCell.selected\", { date: state.formattedDate });\n        } else return t(\"dayCell.select\", { date: state.formattedDate });\n      },\n      nextTrigger: (view) => t(`nextTrigger.${view}`),\n      prevTrigger: (view) => t(`prevTrigger.${view}`),\n      monthSelect: t(\"monthSelect\"),\n      yearSelect: t(\"yearSelect\"),\n      viewTrigger: (view) => t(`viewTrigger.${view}`),\n      presetTrigger: (value) => {\n        if (Array.isArray(value)) {\n          return t(\"presetTrigger.range\", { start: value[0], end: value[1] });\n        } else return t(\"presetTrigger.single\", { date: value });\n      },\n      clearTrigger: t(\"clearTrigger\"),\n      trigger: (open) => t(`trigger.${open ? \"close\" : \"open\"}`),\n      content: t(\"content\"),\n      placeholder: (_locale) => {\n        return { day: \"dd\", month: \"mm\", year: \"yyyy\" };\n      },\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"useComponentTranslations.mjs","names":[],"sources":["../../src/i18n/useComponentTranslations.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { CollectionItem } from \"@ark-ui/react/collection\";\nimport type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from \"@ndla/primitives\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { type TagSelectorRootProps } from \"../TagSelector/TagSelector\";\n\ntype DeepPartial<T> = {\n  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];\n};\n\nexport const useTagsInputTranslations = (\n  translations?: Partial<TagsInputRootProps[\"translations\"]>,\n): TagsInputRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.tagsInput\" });\n\n  return useMemo(\n    () => ({\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      deleteTagTriggerLabel: (tag) => t(\"deleteTagTriggerLabel\", { tag }),\n      tagAdded: (tag) => t(\"tagAdded\", { tag }),\n      tagsPasted: (tag) => t(\"tagsPasted\", { length: tag.length }),\n      tagEdited: (tag) => t(\"tagEdited\", { tag }),\n      tagUpdated: (tag) => t(\"tagUpdated\", { tag }),\n      tagDeleted: (tag) => t(\"tagDeleted\", { tag }),\n      tagSelected: (tag) => t(\"tagSelected\", { tag }),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useComboboxTranslations = <T extends CollectionItem>(\n  translations?: Partial<ComboboxRootProps<T>[\"translations\"]>,\n): ComboboxRootProps<T>[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.combobox\" });\n\n  return useMemo(\n    () => ({\n      triggerLabel: t(\"triggerLabel\"),\n      clearTriggerLabel: t(\"clearTriggerLabel\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useTagSelectorTranslations = <T extends CollectionItem>(\n  translations?: Partial<TagSelectorRootProps<T>[\"translations\"]>,\n): TagSelectorRootProps<T>[\"translations\"] => {\n  const tagsInputTranslations = useTagsInputTranslations();\n  const comboboxTranslations = useComboboxTranslations();\n\n  return useMemo(\n    () =>\n      ({\n        ...comboboxTranslations,\n        ...tagsInputTranslations,\n        ...translations,\n      }) as TagSelectorRootProps<T>[\"translations\"],\n    [comboboxTranslations, tagsInputTranslations, translations],\n  );\n};\n\nexport const usePaginationTranslations = (\n  translations?: Partial<PaginationRootProps[\"translations\"]>,\n): PaginationRootProps[\"translations\"] => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.pagination\" });\n\n  return useMemo(\n    () => ({\n      rootLabel: t(\"rootLabel\"),\n      prevTriggerLabel: t(\"prevTriggerLabel\"),\n      nextTriggerLabel: t(\"nextTriggerLabel\"),\n      itemLabel: (details) => {\n        const lastPage = details.totalPages > 1 && details.page === details.totalPages;\n        return lastPage ? t(\"lastPage\", { page: details.page }) : t(\"page\", { page: details.page });\n      },\n      ...translations,\n    }),\n    [translations, t],\n  );\n};\n\n// TODO: Deduplicate this and place it somewhere smart. Maybe core?\ninterface AudioSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  useAudio: string;\n  noResults: string;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\ninterface VideoTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  loadMoreVideos: string;\n  noResults: string;\n  is360Video: string;\n  previewVideo: string;\n  addVideo: string;\n  close: string;\n}\ninterface PreviewTranslations {\n  creatorsLabel: string;\n  license: string;\n  caption: string;\n  altText: string;\n  modelRelease: string;\n  tags: string;\n  close: string;\n  checkboxLabel?: string;\n  missingTitleFallback?: string;\n  useImageTitle: string;\n}\n\ninterface ImageSearchTranslations {\n  searchPlaceholder: string;\n  searchButtonTitle: string;\n  imagePreview: PreviewTranslations;\n  paginationTranslations: PaginationRootProps[\"translations\"];\n}\n\nexport const useImageSearchTranslations = (\n  translations: DeepPartial<ImageSearchTranslations> = {},\n): ImageSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.imageSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      imagePreview: {\n        creatorsLabel: t(\"imagePreview.creatorsLabel\"),\n        license: t(\"imagePreview.license\"),\n        caption: t(\"imagePreview.caption\"),\n        altText: t(\"imagePreview.altText\"),\n        modelRelease: t(\"imagePreview.modelRelease\"),\n        tags: t(\"imagePreview.tags\"),\n        close: t(\"close\"),\n        checkboxLabel: t(\"imagePreview.checkboxLabel\"),\n        useImageTitle: t(\"imagePreview.useImageTitle\"),\n        ...imagePreview,\n      },\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, imagePreview, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useAudioSearchTranslations = (\n  translations: DeepPartial<AudioSearchTranslations> = {},\n): AudioSearchTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.audioSearch\" });\n  const paginationTranslations = usePaginationTranslations();\n\n  const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      useAudio: t(\"useAudio\"),\n      noResults: t(\"noResults\"),\n      paginationTranslations: { ...paginationTranslations, ...fallbackPaginationTranslations },\n      ...remaining,\n    }),\n    [t, paginationTranslations, fallbackPaginationTranslations, remaining],\n  );\n};\n\nexport const useVideoSearchTranslations = (translations?: Partial<VideoTranslations>): VideoTranslations => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.videoSearch\" });\n\n  return useMemo(\n    () => ({\n      searchPlaceholder: t(\"searchPlaceholder\"),\n      searchButtonTitle: t(\"searchButtonTitle\"),\n      loadMoreVideos: t(\"loadMoreVideos\"),\n      noResults: t(\"noResults\"),\n      is360Video: t(\"is360Video\"),\n      previewVideo: t(\"previewVideo\"),\n      addVideo: t(\"addVideo\"),\n      close: t(\"close\"),\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n\nexport const useDatePickerTranslations = (\n  translations?: Partial<DatePickerRootProps[\"translations\"]>,\n): NonNullable<DatePickerRootProps[\"translations\"]> => {\n  const { t } = useTranslation(\"translation\", { keyPrefix: \"component.datePicker\" });\n\n  return useMemo(\n    () => ({\n      dayCell: (state) => {\n        if (state.unavailable) {\n          return t(\"dayCell.unavailable\", { date: state.valueText });\n        } else if (state.selected) {\n          return t(\"dayCell.selected\", { date: state.valueText });\n        } else return t(\"dayCell.select\", { date: state.valueText });\n      },\n      nextTrigger: (view) => t(`nextTrigger.${view}`),\n      prevTrigger: (view) => t(`prevTrigger.${view}`),\n      monthSelect: t(\"monthSelect\"),\n      yearSelect: t(\"yearSelect\"),\n      viewTrigger: (view) => t(`viewTrigger.${view}`),\n      presetTrigger: (value) => {\n        if (Array.isArray(value)) {\n          return t(\"presetTrigger.range\", { start: value[0], end: value[1] });\n        } else return t(\"presetTrigger.single\", { date: value });\n      },\n      clearTrigger: t(\"clearTrigger\"),\n      trigger: (open) => t(`trigger.${open ? \"close\" : \"open\"}`),\n      content: t(\"content\"),\n      placeholder: (_locale) => {\n        return { day: \"dd\", month: \"mm\", year: \"yyyy\" };\n      },\n      ...translations,\n    }),\n    [t, translations],\n  );\n};\n"],"mappings":"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"}

package/lib/Article/Article.d.ts

@@ -7,11 +7,11 @@
  */
 import type { StyledProps } from "@ndla/styled-system/types";
 import { type ReactNode } from "react";
-export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & StyledProps & import("react").RefAttributes<HTMLElement>>;
+export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & StyledProps & import("react").RefAttributes<HTMLElement>>;
 export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & StyledProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
-export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
-export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
-export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
+export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
+export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react/factory").PolymorphicProps>, {}>;
 interface ArticleTitleProps {
     badges?: ReactNode;
     heartButton?: ReactNode;

package/lib/Article/Article.js

@@ -4,8 +4,8 @@ let _ndla_primitives = require("@ndla/primitives");
 let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
 let _ndla_styled_system_css = require("@ndla/styled-system/css");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
 //#region src/Article/Article.tsx
 /**
 * Copyright (c) 2016-present, NDLA.
@@ -14,13 +14,13 @@ let _ndla_styled_system_css = require("@ndla/styled-system/css");
 * LICENSE file in the root directory of this source tree.
 *
 */
-const StyledArticleContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.section, {}, { baseComponent: true });
+const StyledArticleContent = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.section, {}, { baseComponent: true });
 const ArticleContent = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArticleContent, {
 	className: (0, _ndla_styled_system_css.cx)("ndla-article", className),
 	...props,
 	ref
 }));
-const StyledArticleWrapper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.article, { base: {
+const StyledArticleWrapper = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.article, { base: {
 	background: "background.default",
 	display: "flex",
 	flexDirection: "column",
@@ -41,14 +41,14 @@ const ArticleWrapper = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 	ref,
 	...props
 }));
-const ArticleHGroup = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.hgroup, { base: {
+const ArticleHGroup = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.hgroup, { base: {
 	display: "flex",
 	width: "100%",
 	flexDirection: "column",
 	alignItems: "flex-start",
 	"& h1": { overflowWrap: "anywhere" }
 } }, { baseComponent: true });
-const ArticleHeader = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.header, { base: {
+const ArticleHeader = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.header, { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "medium",
@@ -57,7 +57,7 @@ const ArticleHeader = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.head
 	paddingBlockStart: "xxlarge",
 	overflowWrap: "anywhere"
 } }, { baseComponent: true });
-const ArticleFooter = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react.ark.footer, { base: {
+const ArticleFooter = (0, _ndla_styled_system_jsx.styled)(_ark_ui_react_factory.ark.footer, { base: {
 	display: "flex",
 	flexDirection: "column",
 	gap: "xxlarge",

package/lib/Article/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BadgesContainer } from \"./BadgesContainer\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ark, type HTMLArkProps } from \"@ark-ui/react/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":"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"}

package/lib/Article/ArticleByline.js

@@ -8,7 +8,7 @@ let _ndla_icons = require("@ndla/icons");
 let _ndla_safelink = require("@ndla/safelink");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _ndla_util = require("@ndla/util");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_accordion = require("@ark-ui/react/accordion");
 //#region src/Article/ArticleByline.tsx
 /**
 * Copyright (c) 2020-present, NDLA.
@@ -85,7 +85,7 @@ const ArticleByline = ({ lang, authors = [], suppliers = [], footnotes, licenseB
 };
 const ArticleBylineFootnotes = ({ footnotes }) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	const { value, setValue } = (0, _ark_ui_react.useAccordionContext)();
+	const { value, setValue } = (0, _ark_ui_react_accordion.useAccordionContext)();
 	const ref = (0, react.useRef)(null);
 	const onHashChange = (0, react.useCallback)((e) => {
 		const hash = e.newURL.split("#")[1];

package/lib/Article/ArticleByline.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArticleByline.js","names":["AccordionRoot","SafeLink","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useAccordionContext } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { 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.js","names":["AccordionRoot","SafeLink","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useAccordionContext } from \"@ark-ui/react/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/lib/AudioPlayer/AudioProgress.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 interface Props {
     currentTime: number;
     duration: number;

package/lib/AudioPlayer/AudioProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"AudioProgress.js","names":["SliderThumb","SliderTrack","SliderRoot","formatTime","SliderLabel","SliderControl","SliderRange","SliderHiddenInput"],"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,qBAAA,GAAA,wBAAA,QAA2BA,iBAAAA,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,qBAAA,GAAA,wBAAA,QAA2BC,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,kBAAkB;EAClB,YAAY;CACd;AACF,EACF,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,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,OAAA,GAAA,cAAA,gBAAqB;CAC7B,OACE,iBAAA,GAAA,kBAAA,MAAC,kBAAD;EACE,OAAO,CAAC,WAAW;EACnB,cAAc,CAAC,CAAC;EAChB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAOC,mBAAAA,WAAW,KAAK,MAAM,MAAM,KAAK,CAAC;GACzC,KAAKA,mBAAAA,WAAW,KAAK,MAAM,QAAQ,CAAC;EACtC,CAAC;YAXL,CAcE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;aAAQ,EAAE,mBAAmB;EAAe,CAAA,GACzD,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,eAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAA4B;aAC1B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,CAAc,CAAA;EACG,CAAA,GACnB,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,CAAoB,CAAA;EACH,CAAA,CACN,EAAA,CAAA,CACC;;AAEtB"}
+{"version":3,"file":"AudioProgress.js","names":["SliderThumb","SliderTrack","SliderRoot","formatTime","SliderLabel","SliderControl","SliderRange","SliderHiddenInput"],"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,qBAAA,GAAA,wBAAA,QAA2BA,iBAAAA,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,qBAAA,GAAA,wBAAA,QAA2BC,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,CAAC;CACX,QAAQ;EACN,kBAAkB;EAClB,YAAY;CACd;AACF,EACF,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,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,OAAA,GAAA,cAAA,gBAAqB;CAC7B,OACE,iBAAA,GAAA,kBAAA,MAAC,kBAAD;EACE,OAAO,CAAC,WAAW;EACnB,cAAc,CAAC,CAAC;EAChB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAOC,mBAAAA,WAAW,KAAK,MAAM,MAAM,KAAK,CAAC;GACzC,KAAKA,mBAAAA,WAAW,KAAK,MAAM,QAAQ,CAAC;EACtC,CAAC;YAXL,CAcE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;aAAQ,EAAE,mBAAmB;EAAe,CAAA,GACzD,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,eAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAA4B;aAC1B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,CAAc,CAAA;EACG,CAAA,GACnB,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,CAAoB,CAAA;EACH,CAAA,CACN,EAAA,CAAA,CACC;;AAEtB"}

package/lib/AudioPlayer/Controls.js

@@ -10,7 +10,7 @@ let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
 let react_i18next = require("react-i18next");
 let _ndla_icons = require("@ndla/icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_collection = require("@ark-ui/react/collection");
 //#region src/AudioPlayer/Controls.tsx
 /**
 * Copyright (c) 2021-present, NDLA.
@@ -71,7 +71,7 @@ const SpeedButton = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Button,
 } });
 const StyledSelectRoot = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.SelectRoot, { base: { gridArea: "speed" } });
 const StyledPopoverContent = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.PopoverContent, { base: { paddingInline: "small" } });
-const speedValues = (0, _ark_ui_react.createListCollection)({ items: [
+const speedValues = (0, _ark_ui_react_collection.createListCollection)({ items: [
 	"0.5",
 	"0.75",
 	"1",

package/lib/AudioPlayer/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","names":["PlayButton","IconButton","Text","Button","SelectRoot","PopoverContent","useAudioControls","AudioElement","Replay15Line","Forward15Line","formatTime","AudioProgress","FieldRoot","SelectLabel","SelectControl","SelectTrigger","SelectContent","SelectItem","SelectItemText","SelectItemIndicator","CheckLine","PopoverRoot","PopoverTrigger","VolumeUpFill","VolumeSlider"],"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.js","names":["PlayButton","IconButton","Text","Button","SelectRoot","PopoverContent","useAudioControls","AudioElement","Replay15Line","Forward15Line","formatTime","AudioProgress","FieldRoot","SelectLabel","SelectControl","SelectTrigger","SelectContent","SelectItem","SelectItemText","SelectItemIndicator","CheckLine","PopoverRoot","PopoverTrigger","VolumeUpFill","VolumeSlider"],"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/lib/AudioPlayer/VolumeSlider.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 interface Props {
     value: number;
     onValueChange: (value: SliderValueChangeDetails) => void;

package/lib/AudioPlayer/VolumeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeSlider.js","names":["SliderControl","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput"],"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,uBAAA,GAAA,wBAAA,QAA6BA,iBAAAA,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;AACZ,EACF,CAAC;AAOD,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,KAAK;EACb,KAAK;EACL,KAAK;EACL,cAAc,CAAC,GAAG;EAClB,MAAM;EACS;YAPjB,CASE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;4BAAU,6BAA6B;EAAe,CAAA,GACnE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,CAAc,CAAA,EACH,CAAA,GACb,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,OAAO;aAClB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,CAAoB,CAAA;EACT,CAAA,CACM,EAAA,CAAA,CACX;;AAEhB"}
+{"version":3,"file":"VolumeSlider.js","names":["SliderControl","SliderRoot","SliderLabel","SliderTrack","SliderRange","SliderThumb","SliderHiddenInput"],"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,uBAAA,GAAA,wBAAA,QAA6BA,iBAAAA,eAAe,EAChD,MAAM;CACJ,QAAQ;CACR,UAAU;AACZ,EACF,CAAC;AAOD,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;CAC/D,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,KAAK;EACb,KAAK;EACL,KAAK;EACL,cAAc,CAAC,GAAG;EAClB,MAAM;EACS;YAPjB,CASE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;4BAAU,6BAA6B;EAAe,CAAA,GACnE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,CAAc,CAAA,EACH,CAAA,GACb,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,OAAO;aAClB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,CAAoB,CAAA;EACT,CAAA,CACM,EAAA,CAAA,CACX;;AAEhB"}

package/lib/AudioPlayer/useAudioControls.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import type { SliderValueChangeDetails } from "@ark-ui/react/slider";
 import { type ReactEventHandler } from "react";
 export declare const useAudioControls: () => {
     togglePlay: () => void;

package/lib/AudioPlayer/useAudioControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioControls.js","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,kBAAA,GAAA,MAAA,UAA0B,CAAC;CAC9C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,GAAG;CAClD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,CAAC;CAChD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,CAAC;CAC1C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAC5C,MAAM,YAAA,GAAA,MAAA,QAAoC,IAAI;CAE9C,MAAM,cAAA,GAAA,MAAA,mBAA+B;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,wBAAA,GAAA,MAAA,cAAoC,SAAiB;EACzD,cAAc,IAAI;EAClB,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAA,GAAA,MAAA,cAA6B,YAAoB;EACrD,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAA,GAAA,MAAA,cAAkC,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,2BAAA,GAAA,MAAA,cAnB4C,YAAsC;GAClF,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;IAC7C,eAAe,QAAQ,MAAM,EAAE;GACjC;EACF,GAAG,CAAC,CAcqB;EACvB;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,KAAK,GAAG,CAAC,CAc9C;EACN,eAAA,GAAA,MAAA,cAbqE,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.js","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,kBAAA,GAAA,MAAA,UAA0B,CAAC;CAC9C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,GAAG;CAClD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,CAAC;CAChD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,CAAC;CAC1C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,KAAK;CAC5C,MAAM,YAAA,GAAA,MAAA,QAAoC,IAAI;CAE9C,MAAM,cAAA,GAAA,MAAA,mBAA+B;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,wBAAA,GAAA,MAAA,cAAoC,SAAiB;EACzD,cAAc,IAAI;EAClB,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAA,GAAA,MAAA,cAA6B,YAAoB;EACrD,IAAI,SAAS,SACX,SAAS,QAAQ,eAAe;CAEpC,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAA,GAAA,MAAA,cAAkC,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,2BAAA,GAAA,MAAA,cAnB4C,YAAsC;GAClF,IAAI,SAAS,SAAS;IACpB,SAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;IAC7C,eAAe,QAAQ,MAAM,EAAE;GACjC;EACF,GAAG,CAAC,CAcqB;EACvB;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,KAAK,GAAG,CAAC,CAc9C;EACN,eAAA,GAAA,MAAA,cAbqE,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/lib/Embed/ConceptEmbed.js

@@ -9,7 +9,7 @@ let react = require("react");
 let html_react_parser = require("html-react-parser");
 html_react_parser = require_runtime.__toESM(html_react_parser);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _ark_ui_react = require("@ark-ui/react");
+let _ark_ui_react_portal = require("@ark-ui/react/portal");
 //#region src/Embed/ConceptEmbed.tsx
 /**
 * Copyright (c) 2024-present, NDLA.
@@ -65,7 +65,7 @@ const InlineConcept = (0, react.forwardRef)(({ linkContent, copyright, visualEle
 			ref,
 			...rest,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children: linkContent })
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
 			ref: contentRef,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Concept.Concept, {
 				copyright,

package/lib/Embed/ConceptEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"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,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,iBAAA,GAAA,MAAA,eAA8B;EAClC,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,SAAS,OAAO,KAAA;EACpE,QAAA,GAAA,kBAAA,SAAa,MAAM,KAAK,QAAQ,QAAQ,WAAW;CACrD,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAA,GAAA,MAAA,eACG,MAAM,WAAW,aAAA,GAAA,kBAAA,SAAkB,MAAM,KAAK,QAAQ,MAAM,SAAS,IAAI,KAAA,GAChF,CAAC,KAAK,CACR;CAEA,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,SAEnB,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAGzC,IAAI,MAAM,KAAK,QAAQ,WACrB,OAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EAAmB;EAAQ;CAAqB,CAAA;CAGzD,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;CACY,CAAA;CAInB,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;CACW,CAAA;AAElB;AAOA,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,cAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD,EAAA,UAA6B,YAAwC,CAAA;EACvD,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,cAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAsB,KAAK;aACzB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;GACM,CAAA;EACW,CAAA,EAChB,CAAA,CACG;;AAEjB,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,aAA2D,OAAO,QAC7E,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;AAAM,CAAA,CAC1D"}
+{"version":3,"file":"ConceptEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","GlossEmbed","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Concept"],"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,wBAAA,GAAA,wBAAA,QAA8BA,iBAAAA,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACb,EACF,CAAC;AAED,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,iBAAA,GAAA,MAAA,eAA8B;EAClC,IAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,SAAS,OAAO,KAAA;EACpE,QAAA,GAAA,kBAAA,SAAa,MAAM,KAAK,QAAQ,QAAQ,WAAW;CACrD,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAA,GAAA,MAAA,eACG,MAAM,WAAW,aAAA,GAAA,kBAAA,SAAkB,MAAM,KAAK,QAAQ,MAAM,SAAS,IAAI,KAAA,GAChF,CAAC,KAAK,CACR;CAEA,IAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,UACvD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAO,SAAe,CAAA;CAE/B,IAAI,MAAM,WAAW,SAEnB,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAuB,MAAK,QAAS,CAAA;CAG9C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAGzC,IAAI,MAAM,KAAK,QAAQ,WACrB,OAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EAAmB;EAAQ;CAAqB,CAAA;CAGzD,IAAI,MAAM,UAAU,SAAS,UAC3B,OACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;CACY,CAAA;CAInB,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;CACW,CAAA;AAElB;AAOA,MAAa,iBAAA,GAAA,MAAA,aACV,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,cAAA,GAAA,MAAA,QAAoC,IAAI;CAC9C,OACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD,EAAA,UAA6B,YAAwC,CAAA;EACvD,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,sBAAD;GAAsB,KAAK;aACzB,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;GACM,CAAA;EACW,CAAA,EAChB,CAAA,CACG;;AAEjB,CACF;AAIA,MAAa,gBAAA,GAAA,MAAA,aAA2D,OAAO,QAC7E,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;AAAM,CAAA,CAC1D"}