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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/es/AnchorHeading/AnchorHeading.mjs.map +1 -1
  2. package/es/Article/Article.mjs.map +1 -1
  3. package/es/Article/ArticleByline.mjs.map +1 -1
  4. package/es/Article/ArticleFootNotes.mjs.map +1 -1
  5. package/es/Article/BadgesContainer.mjs.map +1 -1
  6. package/es/AudioPlayer/AudioElement.mjs.map +1 -1
  7. package/es/AudioPlayer/AudioPlayer.mjs.map +1 -1
  8. package/es/AudioPlayer/AudioProgress.mjs.map +1 -1
  9. package/es/AudioPlayer/CompactAudioPlayer.mjs.map +1 -1
  10. package/es/AudioPlayer/Controls.mjs.map +1 -1
  11. package/es/AudioPlayer/PlayButton.mjs.map +1 -1
  12. package/es/AudioPlayer/SpeechControl.mjs.map +1 -1
  13. package/es/AudioPlayer/VolumeSlider.mjs.map +1 -1
  14. package/es/AudioPlayer/audioUtils.mjs.map +1 -1
  15. package/es/AudioPlayer/useAudioControls.mjs.map +1 -1
  16. package/es/Breadcrumb/Breadcrumb.mjs.map +1 -1
  17. package/es/Breadcrumb/BreadcrumbItem.mjs.map +1 -1
  18. package/es/Breadcrumb/HomeBreadcrumb.mjs.map +1 -1
  19. package/es/CampaignBlock/CampaignBlock.mjs.map +1 -1
  20. package/es/CodeBlock/CodeBlock.mjs.map +1 -1
  21. package/es/CodeBlock/codeLanguageOptions.mjs.map +1 -1
  22. package/es/Concept/Concept.mjs.map +1 -1
  23. package/es/ContactBlock/ContactBlock.mjs.map +1 -1
  24. package/es/Embed/AudioEmbed.mjs.map +1 -1
  25. package/es/Embed/BrightcoveEmbed.mjs.map +1 -1
  26. package/es/Embed/CodeEmbed.mjs.map +1 -1
  27. package/es/Embed/ConceptEmbed.mjs.map +1 -1
  28. package/es/Embed/ConceptInlineTriggerButton.mjs.map +1 -1
  29. package/es/Embed/ContentLinkEmbed.mjs.map +1 -1
  30. package/es/Embed/CopyrightEmbed.mjs.map +1 -1
  31. package/es/Embed/EmbedErrorPlaceholder.mjs.map +1 -1
  32. package/es/Embed/EmbedWrapper.mjs.map +1 -1
  33. package/es/Embed/ExternalEmbed.mjs.map +1 -1
  34. package/es/Embed/FootnoteEmbed.mjs.map +1 -1
  35. package/es/Embed/GlossEmbed.mjs.map +1 -1
  36. package/es/Embed/H5pEmbed.mjs.map +1 -1
  37. package/es/Embed/IframeEmbed.mjs.map +1 -1
  38. package/es/Embed/ImageEmbed.mjs.map +1 -1
  39. package/es/Embed/InlineTriggerButton.mjs.map +1 -1
  40. package/es/Embed/RelatedContentEmbed.mjs.map +1 -1
  41. package/es/Embed/UnknownEmbed.mjs.map +1 -1
  42. package/es/Embed/UuDisclaimerEmbed.mjs.map +1 -1
  43. package/es/FactBox/FactBox.mjs.map +1 -1
  44. package/es/FileList/File.mjs.map +1 -1
  45. package/es/FileList/FileList.mjs.map +1 -1
  46. package/es/FileList/PdfFile.mjs.map +1 -1
  47. package/es/Gloss/Gloss.mjs.map +1 -1
  48. package/es/Gloss/GlossExample.mjs.map +1 -1
  49. package/es/Grid/Grid.mjs.map +1 -1
  50. package/es/KeyFigure/KeyFigure.mjs.map +1 -1
  51. package/es/LicenseByline/EmbedByline.mjs.map +1 -1
  52. package/es/LicenseByline/LicenseLink.mjs.map +1 -1
  53. package/es/LinkBlock/LinkBlock.mjs.map +1 -1
  54. package/es/LinkBlock/LinkBlockSection.mjs.map +1 -1
  55. package/es/Pitch/Pitch.mjs.map +1 -1
  56. package/es/RelatedArticleList/RelatedArticleList.mjs.map +1 -1
  57. package/es/ResourceBox/ResourceBox.mjs.map +1 -1
  58. package/es/TagSelector/TagSelector.mjs.map +1 -1
  59. package/es/ZendeskButton/ZendeskButton.mjs.map +1 -1
  60. package/es/i18n/useComponentTranslations.mjs.map +1 -1
  61. package/es/model/ContentType.mjs.map +1 -1
  62. package/es/model/SubjectCategories.mjs.map +1 -1
  63. package/es/model/SubjectTypes.mjs.map +1 -1
  64. package/es/model/WordClass.mjs.map +1 -1
  65. package/es/model/index.mjs.map +1 -1
  66. package/es/utils/licenseAttributes.mjs.map +1 -1
  67. package/es/utils/relativeUrl.mjs.map +1 -1
  68. package/lib/AnchorHeading/AnchorHeading.js.map +1 -1
  69. package/lib/Article/Article.js.map +1 -1
  70. package/lib/Article/ArticleByline.js.map +1 -1
  71. package/lib/Article/ArticleFootNotes.js.map +1 -1
  72. package/lib/Article/BadgesContainer.js.map +1 -1
  73. package/lib/AudioPlayer/AudioElement.js.map +1 -1
  74. package/lib/AudioPlayer/AudioPlayer.js.map +1 -1
  75. package/lib/AudioPlayer/AudioProgress.js.map +1 -1
  76. package/lib/AudioPlayer/CompactAudioPlayer.js.map +1 -1
  77. package/lib/AudioPlayer/Controls.js.map +1 -1
  78. package/lib/AudioPlayer/PlayButton.js.map +1 -1
  79. package/lib/AudioPlayer/SpeechControl.js.map +1 -1
  80. package/lib/AudioPlayer/VolumeSlider.js.map +1 -1
  81. package/lib/AudioPlayer/audioUtils.js.map +1 -1
  82. package/lib/AudioPlayer/useAudioControls.js.map +1 -1
  83. package/lib/Breadcrumb/Breadcrumb.js.map +1 -1
  84. package/lib/Breadcrumb/BreadcrumbItem.js.map +1 -1
  85. package/lib/Breadcrumb/HomeBreadcrumb.js.map +1 -1
  86. package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
  87. package/lib/CodeBlock/CodeBlock.js.map +1 -1
  88. package/lib/CodeBlock/codeLanguageOptions.js.map +1 -1
  89. package/lib/Concept/Concept.js.map +1 -1
  90. package/lib/ContactBlock/ContactBlock.js.map +1 -1
  91. package/lib/Embed/AudioEmbed.js.map +1 -1
  92. package/lib/Embed/BrightcoveEmbed.js.map +1 -1
  93. package/lib/Embed/CodeEmbed.js.map +1 -1
  94. package/lib/Embed/ConceptEmbed.js.map +1 -1
  95. package/lib/Embed/ConceptInlineTriggerButton.js.map +1 -1
  96. package/lib/Embed/ContentLinkEmbed.js.map +1 -1
  97. package/lib/Embed/CopyrightEmbed.js.map +1 -1
  98. package/lib/Embed/EmbedErrorPlaceholder.js.map +1 -1
  99. package/lib/Embed/EmbedWrapper.js.map +1 -1
  100. package/lib/Embed/ExternalEmbed.js.map +1 -1
  101. package/lib/Embed/FootnoteEmbed.js.map +1 -1
  102. package/lib/Embed/GlossEmbed.js.map +1 -1
  103. package/lib/Embed/H5pEmbed.js.map +1 -1
  104. package/lib/Embed/IframeEmbed.js.map +1 -1
  105. package/lib/Embed/ImageEmbed.js.map +1 -1
  106. package/lib/Embed/InlineTriggerButton.js.map +1 -1
  107. package/lib/Embed/RelatedContentEmbed.js.map +1 -1
  108. package/lib/Embed/UnknownEmbed.js.map +1 -1
  109. package/lib/Embed/UuDisclaimerEmbed.js.map +1 -1
  110. package/lib/FactBox/FactBox.js.map +1 -1
  111. package/lib/FileList/File.js.map +1 -1
  112. package/lib/FileList/FileList.js.map +1 -1
  113. package/lib/FileList/PdfFile.js.map +1 -1
  114. package/lib/Gloss/Gloss.js.map +1 -1
  115. package/lib/Gloss/GlossExample.js.map +1 -1
  116. package/lib/Grid/Grid.js.map +1 -1
  117. package/lib/KeyFigure/KeyFigure.js.map +1 -1
  118. package/lib/LicenseByline/EmbedByline.js.map +1 -1
  119. package/lib/LicenseByline/LicenseLink.js.map +1 -1
  120. package/lib/LinkBlock/LinkBlock.js.map +1 -1
  121. package/lib/LinkBlock/LinkBlockSection.js.map +1 -1
  122. package/lib/Pitch/Pitch.js.map +1 -1
  123. package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
  124. package/lib/ResourceBox/ResourceBox.js.map +1 -1
  125. package/lib/TagSelector/TagSelector.js.map +1 -1
  126. package/lib/ZendeskButton/ZendeskButton.js.map +1 -1
  127. package/lib/i18n/useComponentTranslations.js.map +1 -1
  128. package/lib/model/ContentType.js.map +1 -1
  129. package/lib/model/SubjectCategories.js.map +1 -1
  130. package/lib/model/SubjectTypes.js.map +1 -1
  131. package/lib/model/WordClass.js.map +1 -1
  132. package/lib/model/index.js.map +1 -1
  133. package/lib/utils/licenseAttributes.js.map +1 -1
  134. package/lib/utils/relativeUrl.js.map +1 -1
  135. package/package.json +4 -4
  136. package/src/AudioPlayer/SpeechControl.tsx +1 -1
  137. package/src/Embed/UuDisclaimerEmbed.tsx +1 -0
@@ -1 +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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"}
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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"}
@@ -1 +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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"}
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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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ArticleFootNotes.js","names":["Text"],"sources":["../../src/Article/ArticleFootNotes.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootNote as FootNoteType } from \"../types\";\n\nconst citeDetailString = (description: string | undefined) => (description ? `${description}. ` : \"\");\n\ntype FootNoteProps = {\n footNote: FootNoteType;\n};\n\nconst StyledCite = styled(\"cite\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nconst FootNote = ({ footNote }: FootNoteProps) => (\n <li>\n <Text id={`note${footNote.ref}`} asChild consumeCss textStyle=\"body.medium\" tabIndex={-1}>\n <StyledCite>\n <a href={`#ref${footNote.ref}`} target=\"_self\">\n {footNote.ref}\n </a>\n {`«${footNote.title}». ${footNote.authors.join(\" \")}. ${citeDetailString(footNote.edition)}${citeDetailString(\n footNote.publisher,\n )}${footNote.year}. `}\n {footNote.url ? (\n <a href={footNote.url}>\n {footNote.url}\n {\".\"}\n </a>\n ) : null}\n </StyledCite>\n </Text>\n </li>\n);\n\ntype ArticleFootNotesProps = {\n footNotes: Array<FootNoteType>;\n};\n\nconst FootnoteList = styled(\"ol\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n listStyle: \"none\",\n },\n});\n\nexport const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (\n <FootnoteList>\n {footNotes.map((footNote) => (\n <FootNote key={footNote.ref} footNote={footNote} />\n ))}\n </FootnoteList>\n);\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,oBAAoB,gBAAqC,cAAc,GAAG,YAAY,MAAM;AAMlG,MAAM,cAAA,GAAA,wBAAA,QAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,YAAY,EAAE,eAClB,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD;CAAM,IAAI,OAAO,SAAS;CAAO,SAAA;CAAQ,YAAA;CAAW,WAAU;CAAc,UAAU;WACpF,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,MAAM,OAAO,SAAS;GAAO,QAAO;aACpC,SAAS;GACR,CAAA;EACH,IAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,KAAK,IAAI,CAAC,IAAI,iBAAiB,SAAS,QAAQ,GAAG,iBAC3F,SAAS,UACV,GAAG,SAAS,KAAK;EACjB,SAAS,MACR,iBAAA,GAAA,kBAAA,MAAC,KAAD;GAAG,MAAM,SAAS;aAAlB,CACG,SAAS,KACT,IACC;OACF;EACO,EAAA,CAAA;CACR,CAAA,EACJ,CAAA;AAOP,MAAM,gBAAA,GAAA,wBAAA,QAAsB,MAAM,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,gBACjC,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,UACG,UAAU,KAAK,aACd,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAuC,UAAY,EAApC,SAAS,IAA2B,CACnD,EACW,CAAA"}
1
+ {"version":3,"file":"ArticleFootNotes.js","names":["Text"],"sources":["../../src/Article/ArticleFootNotes.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootNote as FootNoteType } from \"../types\";\n\nconst citeDetailString = (description: string | undefined) => (description ? `${description}. ` : \"\");\n\ntype FootNoteProps = {\n footNote: FootNoteType;\n};\n\nconst StyledCite = styled(\"cite\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nconst FootNote = ({ footNote }: FootNoteProps) => (\n <li>\n <Text id={`note${footNote.ref}`} asChild consumeCss textStyle=\"body.medium\" tabIndex={-1}>\n <StyledCite>\n <a href={`#ref${footNote.ref}`} target=\"_self\">\n {footNote.ref}\n </a>\n {`«${footNote.title}». ${footNote.authors.join(\" \")}. ${citeDetailString(footNote.edition)}${citeDetailString(\n footNote.publisher,\n )}${footNote.year}. `}\n {footNote.url ? (\n <a href={footNote.url}>\n {footNote.url}\n {\".\"}\n </a>\n ) : null}\n </StyledCite>\n </Text>\n </li>\n);\n\ntype ArticleFootNotesProps = {\n footNotes: Array<FootNoteType>;\n};\n\nconst FootnoteList = styled(\"ol\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n listStyle: \"none\",\n },\n});\n\nexport const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (\n <FootnoteList>\n {footNotes.map((footNote) => (\n <FootNote key={footNote.ref} footNote={footNote} />\n ))}\n </FootnoteList>\n);\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,oBAAoB,gBAAqC,cAAc,GAAG,YAAY,MAAM;AAMlG,MAAM,cAAA,GAAA,wBAAA,QAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACP,EACF,CAAC;AAED,MAAM,YAAY,EAAE,eAClB,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,MAAD;CAAM,IAAI,OAAO,SAAS;CAAO,SAAA;CAAQ,YAAA;CAAW,WAAU;CAAc,UAAU;WACpF,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,MAAM,OAAO,SAAS;GAAO,QAAO;aACpC,SAAS;EACT,CAAA;EACF,IAAI,SAAS,MAAM,KAAK,SAAS,QAAQ,KAAK,GAAG,EAAE,IAAI,iBAAiB,SAAS,OAAO,IAAI,iBAC3F,SAAS,SACX,IAAI,SAAS,KAAK;EACjB,SAAS,MACR,iBAAA,GAAA,kBAAA,MAAC,KAAD;GAAG,MAAM,SAAS;aAAlB,CACG,SAAS,KACT,GACA;OACD;CACM,EAAA,CAAA;AACR,CAAA,EACJ,CAAA;AAON,MAAM,gBAAA,GAAA,wBAAA,QAAsB,MAAM,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;AACb,EACF,CAAC;AAED,MAAa,oBAAoB,EAAE,gBACjC,iBAAA,GAAA,kBAAA,KAAC,cAAD,EAAA,UACG,UAAU,KAAK,aACd,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAuC,SAAW,GAAnC,SAAS,GAA0B,CACnD,EACW,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"BadgesContainer.js","names":[],"sources":["../../src/Article/BadgesContainer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport const BadgesContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"flex-start\",\n flexWrap: \"wrap\",\n gap: \"xxsmall\",\n },\n});\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAA,qCAAA,CAAA,QAAyB,OAAO,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,UAAU;CACV,KAAK;CACN,EACF,CAAC"}
1
+ {"version":3,"file":"BadgesContainer.js","names":[],"sources":["../../src/Article/BadgesContainer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nexport const BadgesContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"flex-start\",\n flexWrap: \"wrap\",\n gap: \"xxsmall\",\n },\n});\n"],"mappings":";;;;;;;;;AAUA,MAAa,mBAAA,oCAAA,EAAA,QAAyB,OAAO,EAC3C,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,UAAU;CACV,KAAK;AACP,EACF,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"AudioElement.js","names":[],"sources":["../../src/AudioPlayer/AudioElement.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 { ComponentProps } from \"react\";\n\ninterface Props extends ComponentProps<\"audio\"> {\n src: string;\n title: string;\n}\n\nexport const AudioElement = (props: Props) => {\n // TODO: We should tie this up to the textual description somehow\n // oxlint-disable-next-line jsx-a11y/media-has-caption\n return <audio preload=\"metadata\" {...props} />;\n};\n"],"mappings":";;;AAeA,MAAa,gBAAgB,UAAiB;AAG5C,QAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,SAAQ;EAAW,GAAI;EAAS,CAAA"}
1
+ {"version":3,"file":"AudioElement.js","names":[],"sources":["../../src/AudioPlayer/AudioElement.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 { ComponentProps } from \"react\";\n\ninterface Props extends ComponentProps<\"audio\"> {\n src: string;\n title: string;\n}\n\nexport const AudioElement = (props: Props) => {\n // TODO: We should tie this up to the textual description somehow\n // oxlint-disable-next-line jsx-a11y/media-has-caption\n return <audio preload=\"metadata\" {...props} />;\n};\n"],"mappings":";;;AAeA,MAAa,gBAAgB,UAAiB;CAG5C,OAAO,iBAAA,GAAA,kBAAA,KAAC,SAAD;EAAO,SAAQ;EAAW,GAAI;CAAQ,CAAA;AAC/C"}
@@ -1 +1 @@
1
- {"version":3,"file":"AudioPlayer.js","names":["Button","SpeechControl","CompactAudioPlayer","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CompactAudioPlayer } from \"./CompactAudioPlayer\";\nimport { Controls } from \"./Controls\";\nimport { SpeechControl } from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n base: {\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"full\",\n marginBlockEnd: \"4xsmall\",\n overflow: \"hidden\",\n },\n});\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n tabletWideDown: {\n display: \"block\",\n },\n },\n});\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n flex: \"1 0 auto\",\n width: \"surface.4xsmall\",\n height: \"surface.4xsmall\",\n overflow: \"hidden\",\n \"& img\": {\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n },\n desktop: {\n width: \"260px\",\n height: \"260px\",\n },\n tabletWideDown: {\n maxHeight: \"surface.small\",\n maxWidth: \"100%\",\n width: \"100%\",\n height: \"auto\",\n },\n },\n});\n\nconst TextWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"flex-start\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n width: \"100%\",\n \"&[data-has-image='true']\": {\n tablet: {\n paddingBlock: \"xsmall\",\n paddingInline: \"medium\",\n },\n },\n },\n});\n\nconst TitleWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n fontFamily: \"sans\",\n tabletWide: {\n width: \"100%\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n borderBlockStart: \"1px solid\",\n borderColor: \"stroke.default\",\n paddingBlock: \"medium\",\n paddingInline: \"xsmall\",\n tablet: {\n paddingInline: \"medium\",\n },\n },\n});\n\nconst TextVersionText = styled(\"div\", {\n base: {\n maxWidth: \"surface.xlarge\",\n \"& span > *\": {\n whiteSpace: \"pre-wrap\",\n },\n \"& p:not(:first-child):not(:last-child)\": {\n marginBlock: \"small\",\n },\n '& p[data-align=\"center\"]': {\n textAlign: \"center\",\n },\n '& p:has(span[dir=\"rtl\"])': {\n direction: \"rtl\",\n },\n },\n});\n\nconst TextVersionButton = styled(Button, {\n base: {\n alignSelf: \"flex-start\",\n },\n});\n\nconst ShowMoreButton = styled(Button, {\n base: {\n marginInlineStart: \"3xsmall\",\n },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\nexport type AudioPlayerVariant = \"standard\" | \"minimal\" | \"compact\";\n\ninterface Props {\n src: string;\n title: string;\n subtitle?: {\n title: string;\n url?: string;\n };\n variant?: AudioPlayerVariant;\n description?: string;\n textVersion?: ReactNode;\n img?: {\n url: string;\n alt: string;\n };\n}\n\nexport const AudioPlayer = ({ src, title, subtitle, variant = \"standard\", description, img, textVersion }: Props) => {\n const { t } = useTranslation();\n const [showTextVersion, setShowTextVersion] = useState(false);\n const [showFullDescription, setShowFullDescription] = useState(false);\n const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);\n const textDescriptionId = useId();\n\n if (variant === \"minimal\") {\n return <SpeechControl src={src} title={title} />;\n }\n\n if (variant === \"compact\") {\n return <CompactAudioPlayer src={src} title={title} />;\n }\n\n const toggleTextVersion = () => {\n setShowTextVersion((curr) => !curr);\n };\n\n const textVersionButton = (\n <TextVersionButton\n variant=\"secondary\"\n aria-expanded={showTextVersion}\n aria-controls={textDescriptionId}\n size=\"small\"\n onClick={toggleTextVersion}\n >\n {t(showTextVersion ? \"audio.textVersion.close\" : \"audio.textVersion.heading\")}\n </TextVersionButton>\n );\n\n return (\n <AudioPlayerWrapper>\n <InfoWrapper>\n {!!img && (\n <ImageWrapper>\n <img src={img.url} alt={img.alt} />\n </ImageWrapper>\n )}\n <TextWrapper data-has-image={!!img}>\n <TitleWrapper>\n <div>\n {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}\n <Heading asChild consumeCss textStyle=\"title.large\">\n <h3>{title}</h3>\n </Heading>\n </div>\n {!!textVersion && !img && textVersionButton}\n </TitleWrapper>\n {!!description && (\n <Text textStyle=\"body.medium\">\n {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH\n ? description\n : `${truncatedDescription}...`}\n {description.length > DESCRIPTION_MAX_LENGTH && (\n <ShowMoreButton variant=\"link\" onClick={() => setShowFullDescription((p) => !p)}>\n {t(`audio.${showFullDescription ? \"readLessDescriptionLabel\" : \"readMoreDescriptionLabel\"}`)}\n </ShowMoreButton>\n )}\n </Text>\n )}\n {!!textVersion && !!img && textVersionButton}\n </TextWrapper>\n </InfoWrapper>\n <Controls src={src} title={title} />\n {!!textVersion && (\n <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>\n <Heading asChild textStyle=\"title.medium\" consumeCss>\n <h4>{t(\"audio.textVersion.heading\")}</h4>\n </Heading>\n <TextVersionText>{textVersion}</TextVersionText>\n </TextVersionWrapper>\n )}\n </AudioPlayerWrapper>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"AudioPlayer.js","names":["Button","SpeechControl","CompactAudioPlayer","SafeLink","Heading","Text","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CompactAudioPlayer } from \"./CompactAudioPlayer\";\nimport { Controls } from \"./Controls\";\nimport { SpeechControl } from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n base: {\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"full\",\n marginBlockEnd: \"4xsmall\",\n overflow: \"hidden\",\n },\n});\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n tabletWideDown: {\n display: \"block\",\n },\n },\n});\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n flex: \"1 0 auto\",\n width: \"surface.4xsmall\",\n height: \"surface.4xsmall\",\n overflow: \"hidden\",\n \"& img\": {\n width: \"100%\",\n height: \"100%\",\n objectFit: \"cover\",\n },\n desktop: {\n width: \"260px\",\n height: \"260px\",\n },\n tabletWideDown: {\n maxHeight: \"surface.small\",\n maxWidth: \"100%\",\n width: \"100%\",\n height: \"auto\",\n },\n },\n});\n\nconst TextWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"flex-start\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n width: \"100%\",\n \"&[data-has-image='true']\": {\n tablet: {\n paddingBlock: \"xsmall\",\n paddingInline: \"medium\",\n },\n },\n },\n});\n\nconst TitleWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n fontFamily: \"sans\",\n tabletWide: {\n width: \"100%\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n },\n },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n borderBlockStart: \"1px solid\",\n borderColor: \"stroke.default\",\n paddingBlock: \"medium\",\n paddingInline: \"xsmall\",\n tablet: {\n paddingInline: \"medium\",\n },\n },\n});\n\nconst TextVersionText = styled(\"div\", {\n base: {\n maxWidth: \"surface.xlarge\",\n \"& span > *\": {\n whiteSpace: \"pre-wrap\",\n },\n \"& p:not(:first-child):not(:last-child)\": {\n marginBlock: \"small\",\n },\n '& p[data-align=\"center\"]': {\n textAlign: \"center\",\n },\n '& p:has(span[dir=\"rtl\"])': {\n direction: \"rtl\",\n },\n },\n});\n\nconst TextVersionButton = styled(Button, {\n base: {\n alignSelf: \"flex-start\",\n },\n});\n\nconst ShowMoreButton = styled(Button, {\n base: {\n marginInlineStart: \"3xsmall\",\n },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\nexport type AudioPlayerVariant = \"standard\" | \"minimal\" | \"compact\";\n\ninterface Props {\n src: string;\n title: string;\n subtitle?: {\n title: string;\n url?: string;\n };\n variant?: AudioPlayerVariant;\n description?: string;\n textVersion?: ReactNode;\n img?: {\n url: string;\n alt: string;\n };\n}\n\nexport const AudioPlayer = ({ src, title, subtitle, variant = \"standard\", description, img, textVersion }: Props) => {\n const { t } = useTranslation();\n const [showTextVersion, setShowTextVersion] = useState(false);\n const [showFullDescription, setShowFullDescription] = useState(false);\n const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);\n const textDescriptionId = useId();\n\n if (variant === \"minimal\") {\n return <SpeechControl src={src} title={title} />;\n }\n\n if (variant === \"compact\") {\n return <CompactAudioPlayer src={src} title={title} />;\n }\n\n const toggleTextVersion = () => {\n setShowTextVersion((curr) => !curr);\n };\n\n const textVersionButton = (\n <TextVersionButton\n variant=\"secondary\"\n aria-expanded={showTextVersion}\n aria-controls={textDescriptionId}\n size=\"small\"\n onClick={toggleTextVersion}\n >\n {t(showTextVersion ? \"audio.textVersion.close\" : \"audio.textVersion.heading\")}\n </TextVersionButton>\n );\n\n return (\n <AudioPlayerWrapper>\n <InfoWrapper>\n {!!img && (\n <ImageWrapper>\n <img src={img.url} alt={img.alt} />\n </ImageWrapper>\n )}\n <TextWrapper data-has-image={!!img}>\n <TitleWrapper>\n <div>\n {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}\n <Heading asChild consumeCss textStyle=\"title.large\">\n <h3>{title}</h3>\n </Heading>\n </div>\n {!!textVersion && !img && textVersionButton}\n </TitleWrapper>\n {!!description && (\n <Text textStyle=\"body.medium\">\n {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH\n ? description\n : `${truncatedDescription}...`}\n {description.length > DESCRIPTION_MAX_LENGTH && (\n <ShowMoreButton variant=\"link\" onClick={() => setShowFullDescription((p) => !p)}>\n {t(`audio.${showFullDescription ? \"readLessDescriptionLabel\" : \"readMoreDescriptionLabel\"}`)}\n </ShowMoreButton>\n )}\n </Text>\n )}\n {!!textVersion && !!img && textVersionButton}\n </TextWrapper>\n </InfoWrapper>\n <Controls src={src} title={title} />\n {!!textVersion && (\n <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>\n <Heading asChild textStyle=\"title.medium\" consumeCss>\n <h4>{t(\"audio.textVersion.heading\")}</h4>\n </Heading>\n <TextVersionText>{textVersion}</TextVersionText>\n </TextVersionWrapper>\n )}\n </AudioPlayerWrapper>\n );\n};\n"],"mappings":"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"}
@@ -1 +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,EAAE;CACZ,QAAQ;EACN,kBAAkB;EAClB,oBAAoB;EACpB,OAAO;EACP,QAAQ;EACR,cAAc;EACf;CACF,EACF,EACF,CAAC;AAEF,MAAM,qBAAA,GAAA,wBAAA,QAA2BC,iBAAAA,aAAa,EAC5C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,kBAAkB;EAClB,YAAY;EACb;CACF,EACF,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAY,EAC1C,UAAU,EACR,SAAS;CACP,UAAU,EAAE;CACZ,QAAQ;EACN,UAAU;EACV,gBAAgB;EACjB;CACF,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,aAAa,UAAU,eAAe,cAAqB;CACzF,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,MAAC,kBAAD;EACE,OAAO,CAAC,YAAY;EACpB,cAAc,CAAC,EAAE;EACjB,MAAM;EACN,KAAK;EACU;EACN;EACT,mBAAmB,UACjB,EAAE,mBAAmB;GACnB,OAAOC,mBAAAA,WAAW,KAAK,MAAM,MAAM,MAAM,CAAC;GAC1C,KAAKA,mBAAAA,WAAW,KAAK,MAAM,SAAS,CAAC;GACtC,CAAC;YAXN,CAcE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;aAAQ,EAAE,oBAAoB;GAAe,CAAA,EAC1D,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,eAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAA4B;aAC1B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAe,CAAA;GACG,CAAA,EACpB,iBAAA,GAAA,kBAAA,KAAC,mBAAD;GAAmB,OAAO;GAAY;aACpC,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;GACH,CAAA,CACN,EAAA,CAAA,CACC"}
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"}
@@ -1 +1 @@
1
- {"version":3,"file":"CompactAudioPlayer.js","names":["Text","IconButton","useAudioControls","AudioElement","PlayButton","formatTime","PopoverRoot","PopoverTrigger","VolumeUpFill","PopoverContent","PopoverTitle","VolumeSlider","AudioProgress"],"sources":["../../src/AudioPlayer/CompactAudioPlayer.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 { VolumeUpFill } from \"@ndla/icons\";\nimport { PopoverRoot, PopoverTrigger, IconButton, PopoverContent, Text, PopoverTitle } 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 AudioContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n padding: \"xsmall\",\n paddingBlockEnd: \"0\",\n borderRadius: \"xsmall\",\n boxShadow: \"xsmall\",\n background: \"surface.brand.1.subtle\",\n },\n});\n\nconst ControlsContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xsmall\",\n alignItems: \"center\",\n },\n});\n\ninterface Props {\n src: string;\n title: string;\n}\n\nconst StyledText = styled(Text, {\n base: {\n minWidth: \"4xlarge\",\n flexShrink: \"0\",\n textAlign: \"center\",\n },\n});\n\nconst StyledIconButton = styled(IconButton, {\n base: {\n marginInlineStart: \"auto\",\n },\n});\n\nconst EllipsedText = styled(Text, {\n base: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n});\n\nexport const CompactAudioPlayer = ({ src, title }: Props) => {\n const { t } = useTranslation();\n const {\n audioRef,\n playing,\n togglePlay,\n currentTime,\n duration,\n handleSliderChange,\n volumeValue,\n handleVolumeSliderChange,\n onEnded,\n onHandleTime,\n } = useAudioControls();\n return (\n <AudioContainer>\n <AudioElement\n ref={audioRef}\n src={src}\n title={title}\n onEnded={onEnded}\n onLoadedMetadata={onHandleTime}\n onTimeUpdate={onHandleTime}\n />\n <ControlsContainer>\n <PlayButton playing={playing} onClick={togglePlay} />\n <StyledText>\n <Text textStyle=\"label.medium\" asChild consumeCss>\n <span>{formatTime(currentTime)}</span>\n </Text>\n {\"/ \"}\n <Text textStyle=\"label.medium\" color=\"text.subtle\" asChild consumeCss>\n <span>{formatTime(duration)}</span>\n </Text>\n </StyledText>\n <EllipsedText textStyle=\"title.medium\">{title}</EllipsedText>\n <PopoverRoot positioning={{ placement: \"top\" }}>\n <PopoverTrigger asChild>\n <StyledIconButton variant=\"tertiary\">\n <VolumeUpFill />\n </StyledIconButton>\n </PopoverTrigger>\n <PopoverContent>\n <PopoverTitle srOnly>{t(\"audio.controls.adjustVolume\")}</PopoverTitle>\n <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n </PopoverContent>\n </PopoverRoot>\n </ControlsContainer>\n <AudioProgress\n currentTime={currentTime}\n duration={duration}\n onValueChange={handleSliderChange}\n variant=\"simple\"\n />\n </AudioContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,eAAe;CACf,SAAS;CACT,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAOF,MAAM,cAAA,GAAA,wBAAA,QAAoBA,iBAAAA,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAY,EAC1C,MAAM,EACJ,mBAAmB,QACpB,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,iBAAAA,MAAM,EAChC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,YAAY;CACb,EACF,CAAC;AAEF,MAAa,sBAAsB,EAAE,KAAK,YAAmB;CAC3D,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;CAC9B,MAAM,EACJ,UACA,SACA,YACA,aACA,UACA,oBACA,aACA,0BACA,SACA,iBACEE,yBAAAA,kBAAkB;AACtB,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;GACE,KAAK;GACA;GACE;GACE;GACT,kBAAkB;GAClB,cAAc;GACd,CAAA;EACF,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAqB;IAAS,SAAS;IAAc,CAAA;GACrD,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAACJ,iBAAAA,MAAD;KAAM,WAAU;KAAe,SAAA;KAAQ,YAAA;eACrC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,YAAY,EAAQ,CAAA;KACjC,CAAA;IACN;IACD,iBAAA,GAAA,kBAAA,KAACL,iBAAAA,MAAD;KAAM,WAAU;KAAe,OAAM;KAAc,SAAA;KAAQ,YAAA;eACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,SAAS,EAAQ,CAAA;KAC9B,CAAA;IACI,EAAA,CAAA;GACb,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,WAAU;cAAgB;IAAqB,CAAA;GAC7D,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;IAAa,aAAa,EAAE,WAAW,OAAO;cAA9C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;KAAgB,SAAA;eACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;MAAkB,SAAQ;gBACxB,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,EAAgB,CAAA;MACC,CAAA;KACJ,CAAA,EACjB,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD;KAAc,QAAA;eAAQ,EAAE,8BAA8B;KAAgB,CAAA,EACtE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;KAAc,OAAO;KAAa,eAAe;KAA4B,CAAA,CAC9D,EAAA,CAAA,CACL;;GACI,EAAA,CAAA;EACpB,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GACe;GACH;GACV,eAAe;GACf,SAAQ;GACR,CAAA;EACa,EAAA,CAAA"}
1
+ {"version":3,"file":"CompactAudioPlayer.js","names":["Text","IconButton","useAudioControls","AudioElement","PlayButton","formatTime","PopoverRoot","PopoverTrigger","VolumeUpFill","PopoverContent","PopoverTitle","VolumeSlider","AudioProgress"],"sources":["../../src/AudioPlayer/CompactAudioPlayer.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 { VolumeUpFill } from \"@ndla/icons\";\nimport { PopoverRoot, PopoverTrigger, IconButton, PopoverContent, Text, PopoverTitle } 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 AudioContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n padding: \"xsmall\",\n paddingBlockEnd: \"0\",\n borderRadius: \"xsmall\",\n boxShadow: \"xsmall\",\n background: \"surface.brand.1.subtle\",\n },\n});\n\nconst ControlsContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xsmall\",\n alignItems: \"center\",\n },\n});\n\ninterface Props {\n src: string;\n title: string;\n}\n\nconst StyledText = styled(Text, {\n base: {\n minWidth: \"4xlarge\",\n flexShrink: \"0\",\n textAlign: \"center\",\n },\n});\n\nconst StyledIconButton = styled(IconButton, {\n base: {\n marginInlineStart: \"auto\",\n },\n});\n\nconst EllipsedText = styled(Text, {\n base: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n});\n\nexport const CompactAudioPlayer = ({ src, title }: Props) => {\n const { t } = useTranslation();\n const {\n audioRef,\n playing,\n togglePlay,\n currentTime,\n duration,\n handleSliderChange,\n volumeValue,\n handleVolumeSliderChange,\n onEnded,\n onHandleTime,\n } = useAudioControls();\n return (\n <AudioContainer>\n <AudioElement\n ref={audioRef}\n src={src}\n title={title}\n onEnded={onEnded}\n onLoadedMetadata={onHandleTime}\n onTimeUpdate={onHandleTime}\n />\n <ControlsContainer>\n <PlayButton playing={playing} onClick={togglePlay} />\n <StyledText>\n <Text textStyle=\"label.medium\" asChild consumeCss>\n <span>{formatTime(currentTime)}</span>\n </Text>\n {\"/ \"}\n <Text textStyle=\"label.medium\" color=\"text.subtle\" asChild consumeCss>\n <span>{formatTime(duration)}</span>\n </Text>\n </StyledText>\n <EllipsedText textStyle=\"title.medium\">{title}</EllipsedText>\n <PopoverRoot positioning={{ placement: \"top\" }}>\n <PopoverTrigger asChild>\n <StyledIconButton variant=\"tertiary\">\n <VolumeUpFill />\n </StyledIconButton>\n </PopoverTrigger>\n <PopoverContent>\n <PopoverTitle srOnly>{t(\"audio.controls.adjustVolume\")}</PopoverTitle>\n <VolumeSlider value={volumeValue} onValueChange={handleVolumeSliderChange} />\n </PopoverContent>\n </PopoverRoot>\n </ControlsContainer>\n <AudioProgress\n currentTime={currentTime}\n duration={duration}\n onValueChange={handleSliderChange}\n variant=\"simple\"\n />\n </AudioContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,eAAe;CACf,SAAS;CACT,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,YAAY;AACd,EACF,CAAC;AAED,MAAM,qBAAA,GAAA,wBAAA,QAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;AACd,EACF,CAAC;AAOD,MAAM,cAAA,GAAA,wBAAA,QAAoBA,iBAAAA,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;AACb,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAY,EAC1C,MAAM,EACJ,mBAAmB,OACrB,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,iBAAAA,MAAM,EAChC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,YAAY;AACd,EACF,CAAC;AAED,MAAa,sBAAsB,EAAE,KAAK,YAAmB;CAC3D,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,MAAM,EACJ,UACA,SACA,YACA,aACA,UACA,oBACA,aACA,0BACA,SACA,iBACEE,yBAAAA,iBAAiB;CACrB,OACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;GACE,KAAK;GACA;GACE;GACE;GACT,kBAAkB;GAClB,cAAc;EACf,CAAA;EACD,iBAAA,GAAA,kBAAA,MAAC,mBAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAqB;IAAS,SAAS;GAAa,CAAA;GACpD,iBAAA,GAAA,kBAAA,MAAC,YAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAACJ,iBAAAA,MAAD;KAAM,WAAU;KAAe,SAAA;KAAQ,YAAA;eACrC,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,WAAW,EAAQ,CAAA;IACjC,CAAA;IACL;IACD,iBAAA,GAAA,kBAAA,KAACL,iBAAAA,MAAD;KAAM,WAAU;KAAe,OAAM;KAAc,SAAA;KAAQ,YAAA;eACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAOK,mBAAAA,WAAW,QAAQ,EAAQ,CAAA;IAC9B,CAAA;GACI,EAAA,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAAC,cAAD;IAAc,WAAU;cAAgB;GAAoB,CAAA;GAC5D,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;IAAa,aAAa,EAAE,WAAW,MAAM;cAA7C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;KAAgB,SAAA;eACd,iBAAA,GAAA,kBAAA,KAAC,kBAAD;MAAkB,SAAQ;gBACxB,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA;KACC,CAAA;IACJ,CAAA,GAChB,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD;KAAc,QAAA;eAAQ,EAAE,6BAA6B;IAAgB,CAAA,GACrE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;KAAc,OAAO;KAAa,eAAe;IAA2B,CAAA,CAC9D,EAAA,CAAA,CACL;;EACI,EAAA,CAAA;EACnB,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;GACe;GACH;GACV,eAAe;GACf,SAAQ;EACT,CAAA;CACa,EAAA,CAAA;AAEpB"}
@@ -1 +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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"}
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":";;;;;;;;;;;;;;;;;;;;;AAoCA,MAAM,mBAAA,GAAA,wBAAA,QAAyB,OAAO,EACpC,MAAM;CACJ,kBAAkB;CAClB,aAAa;CACb,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACL,cAAc;CACd,eAAe;CACf,gBAAgB;EACd,SAAS;EACT,cAAc;EACd,eAAe;EACf,qBAAqB;EACrB,mBAAmB;;;;CAIrB;CACA,gBAAgB,EACd,WAAW,UACb;AACF,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BA,mBAAAA,YAAY,EAC1C,MAAM,EACJ,UAAU,OACZ,EACF,CAAC;AAED,MAAM,sBAAA,GAAA,wBAAA,QAA4BC,iBAAAA,YAAY,EAC5C,MAAM,EACJ,UAAU,WACZ,EACF,CAAC;AAED,MAAM,mBAAA,GAAA,wBAAA,QAAyBA,iBAAAA,YAAY,EACzC,MAAM,EACJ,UAAU,YACZ,EACF,CAAC;AAED,MAAM,mBAAA,GAAA,wBAAA,QAAyB,OAAO,EACpC,MAAM;CACJ,MAAM;CACN,SAAS;CACT,YAAY;CACZ,KAAK;CACL,UAAU;CACV,cAAc;CACd,YAAY,EACV,eAAe,SACjB;AACF,EACF,CAAC;AAED,MAAM,cAAA,GAAA,wBAAA,QAAoBC,iBAAAA,MAAM,EAC9B,MAAM;CACJ,UAAU;CACV,YAAY;CACZ,WAAW;AACb,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,iBAAAA,YAAY,EACtC,MAAM,EACJ,UAAU,SACZ,EACF,CAAC;AAED,MAAM,eAAA,GAAA,wBAAA,QAAqBE,iBAAAA,QAAQ,EACjC,MAAM;CACJ,cAAc;CACd,eAAe;CACf,UAAU;CACV,WAAW;CACX,UAAU;CACV,WAAW;CACX,UAAU,EACR,MAAM,IACR;AACF,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,iBAAAA,YAAoB,EAClD,MAAM,EACJ,UAAU,QACZ,EACF,CAAC;AAED,MAAM,wBAAA,GAAA,wBAAA,QAA8BC,iBAAAA,gBAAgB,EAClD,MAAM,EACJ,eAAe,QACjB,EACF,CAAC;AAED,MAAM,eAAA,GAAA,cAAA,sBAAmC,EAAE,OAAO;CAAC;CAAO;CAAQ;CAAK;CAAQ;CAAO;CAAQ;AAAG,EAAE,CAAC;AAQpG,MAAa,YAAY,EAAE,KAAK,YAAmB;CACjD,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,MAAM,EACJ,UACA,SACA,cACA,eACA,SACA,YACA,oBACA,0BACA,aACA,UACA,YACA,sBACA,gBACEC,yBAAAA,iBAAiB;CAErB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACO;EACE;EACP,KAAK;EACI;EACT,kBAAkB;EAClB,cAAc;CACf,CAAA,GACD,iBAAA,GAAA,kBAAA,MAAC,iBAAD,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD;GACE,SAAQ;GACR,OAAO,EAAE,4BAA4B;GACrC,cAAY,EAAE,4BAA4B;GAC1C,eAAe,cAAc,GAAG;aAEhC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA;EACA,CAAA;EACjB,iBAAA,GAAA,kBAAA,KAAC,kBAAD;GAA2B;GAAS,SAAS;EAAa,CAAA;EAC1D,iBAAA,GAAA,kBAAA,KAAC,oBAAD;GACE,SAAQ;GACR,OAAO,EAAE,6BAA6B;GACtC,cAAY,EAAE,6BAA6B;GAC3C,eAAe,cAAc,EAAE;aAE/B,iBAAA,GAAA,kBAAA,KAACC,YAAAA,eAAD,CAAgB,CAAA;EACE,CAAA;EACpB,iBAAA,GAAA,kBAAA,MAAC,iBAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;IAAY,WAAU;IAAe,SAAA;IAAQ,YAAA;cAC3C,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAAMC,mBAAAA,WAAW,WAAW,EAAO,CAAA;GACzB,CAAA;GACZ,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;IAA4B;IAAuB;IAAU,eAAe;GAAqB,CAAA;GACjG,iBAAA,GAAA,kBAAA,KAAC,YAAD;IAAY,WAAU;IAAe,SAAA;IAAQ,YAAA;cAC3C,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA,CAAK,KAAED,mBAAAA,WAAW,KAAK,MAAM,WAAW,WAAW,CAAC,CAAO,EAAA,CAAA;GACjD,CAAA;EACG,EAAA,CAAA;EACjB,iBAAA,GAAA,kBAAA,KAACE,iBAAAA,WAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,kBAAD;GACE,YAAY;GACZ,OAAO,CAAC,WAAW,SAAS,CAAC;GAC7B,gBAAgB,YAAY,qBAAqB,WAAW,QAAQ,MAAM,EAAE,CAAC;GAC7E,aAAa,EAAE,WAAW,MAAM;aAJlC;IAME,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;KAAa,QAAA;eAAQ,EAAE,4BAA4B;IAAe,CAAA;IAClE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,eAAD;KAAe,SAAA;eACb,iBAAA,GAAA,kBAAA,KAAC,aAAD;MACE,SAAQ;MACR,OAAO,EAAE,4BAA4B;MACrC,cAAY,EAAE,4BAA4B;gBAE1C,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,GAAG,WAAW,GAAS,CAAA;KACnB,CAAA;IACA,CAAA,EACF,CAAA;IACf,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,eAAD,EAAA,UACG,YAAY,MAAM,KAAK,UACtB,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;KAAwB,MAAM;eAA9B,CACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,gBAAD,EAAA,UAAA,CAAiB,OAAM,GAAiB,EAAA,CAAA,GACxC,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,qBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,CAAY,CAAA,EACO,CAAA,CACX;OALK,KAKL,CACb,EACY,CAAA;GACC;KACT,CAAA;EACX,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,aAAD;GAAa,aAAa,EAAE,WAAW,MAAM;aAA7C,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,gBAAD;IAAgB,SAAA;cACd,iBAAA,GAAA,kBAAA,KAAC,cAAD;KAAc,SAAQ;KAAW,cAAY,EAAE,6BAA6B;eAC1E,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA;IACH,CAAA;GACA,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,sBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;IAAc,OAAO;IAAa,eAAe;GAA2B,CAAA,EACxD,CAAA,CACX;;CACE,EAAA,CAAA,CACd,EAAA,CAAA;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"PlayButton.js","names":["IconButton","PauseLine","PlayFill"],"sources":["../../src/AudioPlayer/PlayButton.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 { PauseLine, PlayFill } from \"@ndla/icons\";\nimport { IconButton, type IconButtonProps } from \"@ndla/primitives\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends IconButtonProps {\n playing?: boolean;\n}\n\nexport const PlayButton = ({ playing, children, ...rest }: Props) => {\n const { t } = useTranslation();\n return (\n <IconButton aria-label={playing ? t(\"audio.pause\") : t(\"audio.play\")} {...rest}>\n {children ?? (playing ? <PauseLine /> : <PlayFill />)}\n </IconButton>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,cAAc,EAAE,SAAS,UAAU,GAAG,WAAkB;CACnE,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAC9B,QACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,YAAD;EAAY,cAAY,UAAU,EAAE,cAAc,GAAG,EAAE,aAAa;EAAE,GAAI;YACvE,aAAa,UAAU,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,EAAa,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,YAAAA,UAAD,EAAY,CAAA;EACzC,CAAA"}
1
+ {"version":3,"file":"PlayButton.js","names":["IconButton","PauseLine","PlayFill"],"sources":["../../src/AudioPlayer/PlayButton.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 { PauseLine, PlayFill } from \"@ndla/icons\";\nimport { IconButton, type IconButtonProps } from \"@ndla/primitives\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props extends IconButtonProps {\n playing?: boolean;\n}\n\nexport const PlayButton = ({ playing, children, ...rest }: Props) => {\n const { t } = useTranslation();\n return (\n <IconButton aria-label={playing ? t(\"audio.pause\") : t(\"audio.play\")} {...rest}>\n {children ?? (playing ? <PauseLine /> : <PlayFill />)}\n </IconButton>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,cAAc,EAAE,SAAS,UAAU,GAAG,WAAkB;CACnE,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAC7B,OACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,YAAD;EAAY,cAAY,UAAU,EAAE,aAAa,IAAI,EAAE,YAAY;EAAG,GAAI;YACvE,aAAa,UAAU,iBAAA,GAAA,kBAAA,KAACC,YAAAA,WAAD,CAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,KAACC,YAAAA,UAAD,CAAW,CAAA;CACzC,CAAA;AAEhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"SpeechControl.js","names":["useAudioControls","PlayButton","VolumeUpFill"],"sources":["../../src/AudioPlayer/SpeechControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\n\ntype Props = {\n src: string;\n title: string;\n};\n\nexport const SpeechControl = ({ src, title }: Props) => {\n const { audioRef, togglePlay } = useAudioControls();\n\n return (\n <div data-embed-type=\"speech\">\n {/* oxlint-disable-next-line jsx-a11y/media-has-caption */}\n <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n <PlayButton variant=\"tertiary\" onClick={togglePlay}>\n <VolumeUpFill />\n </PlayButton>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,iBAAiB,EAAE,KAAK,YAAmB;CACtD,MAAM,EAAE,UAAU,eAAeA,yBAAAA,kBAAkB;AAEnD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,mBAAgB;YAArB,CAEE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GAAO,KAAK;GAAe;GAAY;GAAO,SAAQ;GAAa,CAAA,EACnE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GAAY,SAAQ;GAAW,SAAS;aACtC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,EAAgB,CAAA;GACL,CAAA,CACT"}
1
+ {"version":3,"file":"SpeechControl.js","names":["useAudioControls","PlayButton","VolumeUpFill"],"sources":["../../src/AudioPlayer/SpeechControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { VolumeUpFill } from \"@ndla/icons\";\nimport { PlayButton } from \"./PlayButton\";\nimport { useAudioControls } from \"./useAudioControls\";\n\ntype Props = {\n src: string;\n title: string;\n};\n\nexport const SpeechControl = ({ src, title }: Props) => {\n const { audioRef, togglePlay } = useAudioControls();\n\n return (\n <div data-embed-type=\"speech\">\n {/* oxlint-disable-next-line jsx-a11y/media-has-caption oxlint-disable-next-line jsx-a11y/control-has-associated-label */}\n <audio ref={audioRef} src={src} title={title} preload=\"metadata\" />\n <PlayButton variant=\"tertiary\" onClick={togglePlay}>\n <VolumeUpFill />\n </PlayButton>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,iBAAiB,EAAE,KAAK,YAAmB;CACtD,MAAM,EAAE,UAAU,eAAeA,yBAAAA,iBAAiB;CAElD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,mBAAgB;YAArB,CAEE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GAAO,KAAK;GAAe;GAAY;GAAO,SAAQ;EAAY,CAAA,GAClE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GAAY,SAAQ;GAAW,SAAS;aACtC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,cAAD,CAAe,CAAA;EACL,CAAA,CACT;;AAET"}
@@ -1 +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;CACX,EACF,CAAC;AAOF,MAAa,gBAAgB,EAAE,OAAO,oBAA2B;AAC/D,QACE,iBAAA,GAAA,kBAAA,MAACC,iBAAAA,YAAD;EACE,aAAY;EACZ,OAAO,CAAC,MAAM;EACd,KAAK;EACL,KAAK;EACL,cAAc,CAAC,IAAI;EACnB,MAAM;EACS;YAPjB,CASE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA;4BAAU,8BAA8B;GAAe,CAAA,EACpE,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD,EAAe,CAAA,EACH,CAAA,EACd,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,OAAO;aAClB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,mBAAD,EAAqB,CAAA;GACT,CAAA,CACM,EAAA,CAAA,CACX"}
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"}
@@ -1 +1 @@
1
- {"version":3,"file":"audioUtils.js","names":[],"sources":["../../src/AudioPlayer/audioUtils.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\nexport const formatTime = (seconds: number) => {\n const minutes = Math.floor(seconds / 60);\n const currentSeconds = seconds % 60;\n\n const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n return `${minutes}:${formattedSeconds}`;\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAc,YAAoB;CAC7C,MAAM,UAAU,KAAK,MAAM,UAAU,GAAG;CACxC,MAAM,iBAAiB,UAAU;AAGjC,QAAO,GAAG,QAAQ,GADO,iBAAiB,KAAK,IAAI,mBAAmB"}
1
+ {"version":3,"file":"audioUtils.js","names":[],"sources":["../../src/AudioPlayer/audioUtils.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\nexport const formatTime = (seconds: number) => {\n const minutes = Math.floor(seconds / 60);\n const currentSeconds = seconds % 60;\n\n const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;\n return `${minutes}:${formattedSeconds}`;\n};\n"],"mappings":";;;;;;;;AAQA,MAAa,cAAc,YAAoB;CAC7C,MAAM,UAAU,KAAK,MAAM,UAAU,EAAE;CACvC,MAAM,iBAAiB,UAAU;CAGjC,OAAO,GAAG,QAAQ,GADO,iBAAiB,KAAK,IAAI,mBAAmB;AAExE"}
@@ -1 +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,EAAE;CAC/C,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,IAAI;CACnD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAA2B,EAAE;CACjD,MAAM,CAAC,UAAU,gBAAA,GAAA,MAAA,UAAwB,EAAE;CAC3C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,YAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,cAAA,GAAA,MAAA,mBAA+B;AACnC,MAAI,CAAC,SAAS,QAAS;AACvB,MAAI,SAAS,QAAQ,OACnB,UAAS,QAAQ,MAAM;MAEvB,UAAS,QAAQ,OAAO;AAE1B,cAAY,MAAM,CAAC,EAAE;IACpB,EAAE,CAAC;CAEN,MAAM,wBAAA,GAAA,MAAA,cAAoC,SAAiB;AACzD,gBAAc,KAAK;AACnB,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,iBAAA,GAAA,MAAA,cAA6B,YAAoB;AACrD,MAAI,SAAS,QACX,UAAS,QAAQ,eAAe;IAEjC,EAAE,CAAC;CAEN,MAAM,sBAAA,GAAA,MAAA,cAAkC,YAAsC;EAC5E,MAAM,WAAW,QAAQ,MAAM;AAC/B,MAAI,SAAS,WAAW,YAAY,QAAQ,CAAC,MAAM,SAAS,CAC1D,UAAS,QAAQ,cAAc,QAAQ,MAAM;IAE9C,EAAE,CAAC;AAiBN,QAAO;EACL;EACA;EACA;EACA,2BAAA,GAAA,MAAA,cAnB4C,YAAsC;AAClF,OAAI,SAAS,SAAS;AACpB,aAAS,QAAQ,SAAS,QAAQ,MAAM,KAAK;AAC7C,mBAAe,QAAQ,MAAM,GAAG;;KAEjC,EAAE,CAcqB;EACxB;EACA,UAAA,GAAA,MAAA,mBAdgC,WAAW,MAAM,EAAE,EAAE,CAc9C;EACP,eAAA,GAAA,MAAA,cAbqE,SAAS;GAC9E,MAAM,SAAS,KAAK;AACpB,kBAAe,KAAK,MAAM,OAAO,YAAY,CAAC;AAC9C,eAAY,KAAK,MAAM,OAAO,SAAS,CAAC;KACvC,EAAE,CASS;EACZ;EACA;EACA;EACA;EACA;EACA;EACD"}
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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n items: SimpleBreadcrumbItem[];\n renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst StyledList = styled(\"ol\", {\n base: {\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n listStyle: \"none\",\n gap: \"xxsmall\",\n mobileDown: {\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n },\n },\n});\n\nexport const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {\n const { t } = useTranslation();\n\n return (\n <nav aria-label={t(\"breadcrumb.breadcrumb\")}>\n <StyledList>\n {items.map((item, index) => (\n <BreadcrumbItem\n renderItem={renderItem}\n renderSeparator={renderSeparator}\n key={typeof item.to === \"string\" ? item.to : item.to.pathname}\n totalCount={items.length}\n item={{ ...item, index }}\n />\n ))}\n </StyledList>\n </nav>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,cAAA,GAAA,wBAAA,QAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,OAAA,GAAA,cAAA,iBAAsB;AAE9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY,EAAE,wBAAwB;YACzC,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,gBAAD;GACc;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;IAAO;GACxB,EAHK,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,SAGrD,CACF,EACS,CAAA;EACT,CAAA"}
1
+ {"version":3,"file":"Breadcrumb.js","names":["BreadcrumbItem"],"sources":["../../src/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { BreadcrumbItem, type IndexedBreadcrumbItem, type SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\ninterface Props {\n items: SimpleBreadcrumbItem[];\n renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nconst StyledList = styled(\"ol\", {\n base: {\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n listStyle: \"none\",\n gap: \"xxsmall\",\n mobileDown: {\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n flexDirection: \"column\",\n },\n },\n});\n\nexport const Breadcrumb = ({ items, renderItem, renderSeparator }: Props) => {\n const { t } = useTranslation();\n\n return (\n <nav aria-label={t(\"breadcrumb.breadcrumb\")}>\n <StyledList>\n {items.map((item, index) => (\n <BreadcrumbItem\n renderItem={renderItem}\n renderSeparator={renderSeparator}\n key={typeof item.to === \"string\" ? item.to : item.to.pathname}\n totalCount={items.length}\n item={{ ...item, index }}\n />\n ))}\n </StyledList>\n </nav>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,cAAA,GAAA,wBAAA,QAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,UAAU;CACV,YAAY;CACZ,WAAW;CACX,KAAK;CACL,YAAY;EACV,YAAY;EACZ,gBAAgB;EAChB,eAAe;CACjB;AACF,EACF,CAAC;AAED,MAAa,cAAc,EAAE,OAAO,YAAY,sBAA6B;CAC3E,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB;CAE7B,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,cAAY,EAAE,uBAAuB;YACxC,iBAAA,GAAA,kBAAA,KAAC,YAAD,EAAA,UACG,MAAM,KAAK,MAAM,UAChB,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,gBAAD;GACc;GACK;GAEjB,YAAY,MAAM;GAClB,MAAM;IAAE,GAAG;IAAM;GAAM;EACxB,GAHM,OAAO,KAAK,OAAO,WAAW,KAAK,KAAK,KAAK,GAAG,QAGtD,CACF,EACS,CAAA;CACT,CAAA;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\n\nexport interface SimpleBreadcrumbItem {\n to: string | Partial<Location>;\n name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n item: IndexedBreadcrumbItem;\n totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n base: {\n display: \"flex\",\n color: \"inherit\",\n gap: \"3xsmall\",\n alignItems: \"flex-end\",\n tabletDown: {\n display: \"block\",\n },\n \"& a\": {\n _visited: {\n color: \"inherit\",\n },\n },\n },\n});\n\ninterface Props {\n item: IndexedBreadcrumbItem;\n autoCollapse?: boolean;\n totalCount: number;\n renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nexport const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {\n const isLast = item.index === totalCount - 1;\n return (\n <StyledListItem aria-current={isLast ? \"page\" : undefined}>\n {renderItem(item, totalCount)}\n {renderSeparator(item, totalCount)}\n </StyledListItem>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAyBA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,SACV;CACD,OAAO,EACL,UAAU,EACR,OAAO,WACR,EACF;CACF,EACF,CAAC;AAUF,MAAa,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;AAE1F,QACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,gBAFH,KAAK,UAAU,aAAa,IAEF,SAAS,KAAA;YAAhD,CACG,WAAW,MAAM,WAAW,EAC5B,gBAAgB,MAAM,WAAW,CACnB"}
1
+ {"version":3,"file":"BreadcrumbItem.js","names":[],"sources":["../../src/Breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\n\nexport interface SimpleBreadcrumbItem {\n to: string | Partial<Location>;\n name: ReactNode;\n}\n\nexport interface IndexedBreadcrumbItem extends SimpleBreadcrumbItem {\n index: number;\n}\n\nexport interface BreadcrumbRenderProps {\n item: IndexedBreadcrumbItem;\n totalCount: number;\n}\n\nconst StyledListItem = styled(\"li\", {\n base: {\n display: \"flex\",\n color: \"inherit\",\n gap: \"3xsmall\",\n alignItems: \"flex-end\",\n tabletDown: {\n display: \"block\",\n },\n \"& a\": {\n _visited: {\n color: \"inherit\",\n },\n },\n },\n});\n\ninterface Props {\n item: IndexedBreadcrumbItem;\n autoCollapse?: boolean;\n totalCount: number;\n renderItem: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n renderSeparator: (item: IndexedBreadcrumbItem, totalCount: number) => ReactNode;\n}\n\nexport const BreadcrumbItem = ({ renderItem, renderSeparator, item, totalCount }: Props) => {\n const isLast = item.index === totalCount - 1;\n return (\n <StyledListItem aria-current={isLast ? \"page\" : undefined}>\n {renderItem(item, totalCount)}\n {renderSeparator(item, totalCount)}\n </StyledListItem>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAyBA,MAAM,kBAAA,GAAA,wBAAA,QAAwB,MAAM,EAClC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,KAAK;CACL,YAAY;CACZ,YAAY,EACV,SAAS,QACX;CACA,OAAO,EACL,UAAU,EACR,OAAO,UACT,EACF;AACF,EACF,CAAC;AAUD,MAAa,kBAAkB,EAAE,YAAY,iBAAiB,MAAM,iBAAwB;CAE1F,OACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;EAAgB,gBAFH,KAAK,UAAU,aAAa,IAEF,SAAS,KAAA;YAAhD,CACG,WAAW,MAAM,UAAU,GAC3B,gBAAgB,MAAM,UAAU,CACnB;;AAEpB"}
@@ -1 +1 @@
1
- {"version":3,"file":"HomeBreadcrumb.js","names":["SafeLink","ArrowRightShortLine","HomeLine","Breadcrumb"],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Breadcrumb } from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n _focusVisible: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n base: {\n tabletDown: {\n display: \"none\",\n },\n },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n },\n});\n\ninterface Props {\n items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return <span>{item.name}</span>;\n }\n if (item.index === 0 && typeof item.name === \"string\") {\n return (\n <IconSafeLink aria-label={item.name} to={item.to}>\n <HomeLine title={item.name} />\n </IconSafeLink>\n );\n }\n return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n };\n\n const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return null;\n }\n if (item.index === 0) {\n return <StyledArrowRight aria-hidden />;\n }\n return <ArrowRightShortLine aria-hidden />;\n };\n\n return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACD,eAAe,EACb,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,YAAAA,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,QACV,EACF,EACF,CAAC;AAEF,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,eAAAA,UAAU,EACpC,MAAM,EACJ,OAAO,WACR,EACF,CAAC;AAMF,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;AACtE,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;AAEjC,MAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,SAC3C,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,iBAAA,GAAA,kBAAA,KAACE,YAAAA,UAAD,EAAU,OAAO,KAAK,MAAQ,CAAA;GACjB,CAAA;AAGnB,SAAO,iBAAA,GAAA,kBAAA,KAAC,gBAAD;GAAgB,IAAI,KAAK;aAAK,KAAK;GAAsB,CAAA;;CAGlE,MAAM,mBAAmB,MAA6B,eAAuB;AAC3E,MAAI,KAAK,UAAU,aAAa,EAC9B,QAAO;AAET,MAAI,KAAK,UAAU,EACjB,QAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAkB,eAAA,MAAc,CAAA;AAEzC,SAAO,iBAAA,GAAA,kBAAA,KAACD,YAAAA,qBAAD,EAAqB,eAAA,MAAc,CAAA;;AAG5C,QAAO,iBAAA,GAAA,kBAAA,KAACE,mBAAAA,YAAD;EAAmB;EAAmB;EAA6B;EAAmB,CAAA"}
1
+ {"version":3,"file":"HomeBreadcrumb.js","names":["SafeLink","ArrowRightShortLine","HomeLine","Breadcrumb"],"sources":["../../src/Breadcrumb/HomeBreadcrumb.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightShortLine, HomeLine } from \"@ndla/icons\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { Breadcrumb } from \"./Breadcrumb\";\nimport type { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from \"./BreadcrumbItem\";\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n _focusVisible: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst StyledArrowRight = styled(ArrowRightShortLine, {\n base: {\n tabletDown: {\n display: \"none\",\n },\n },\n});\n\nconst IconSafeLink = styled(SafeLink, {\n base: {\n color: \"inherit\",\n },\n});\n\ninterface Props {\n items: SimpleBreadcrumbItem[];\n}\n\nexport const HomeBreadcrumb = ({ items }: Props) => {\n const renderItem = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return <span>{item.name}</span>;\n }\n if (item.index === 0 && typeof item.name === \"string\") {\n return (\n <IconSafeLink aria-label={item.name} to={item.to}>\n <HomeLine title={item.name} />\n </IconSafeLink>\n );\n }\n return <StyledSafeLink to={item.to}>{item.name}</StyledSafeLink>;\n };\n\n const renderSeparator = (item: IndexedBreadcrumbItem, totalCount: number) => {\n if (item.index === totalCount - 1) {\n return null;\n }\n if (item.index === 0) {\n return <StyledArrowRight aria-hidden />;\n }\n return <ArrowRightShortLine aria-hidden />;\n };\n\n return <Breadcrumb items={items} renderItem={renderItem} renderSeparator={renderSeparator} />;\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,kBAAA,GAAA,wBAAA,QAAwBA,eAAAA,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OAClB;CACA,eAAe,EACb,gBAAgB,OAClB;AACF,EACF,CAAC;AAED,MAAM,oBAAA,GAAA,wBAAA,QAA0BC,YAAAA,qBAAqB,EACnD,MAAM,EACJ,YAAY,EACV,SAAS,OACX,EACF,EACF,CAAC;AAED,MAAM,gBAAA,GAAA,wBAAA,QAAsBD,eAAAA,UAAU,EACpC,MAAM,EACJ,OAAO,UACT,EACF,CAAC;AAMD,MAAa,kBAAkB,EAAE,YAAmB;CAClD,MAAM,cAAc,MAA6B,eAAuB;EACtE,IAAI,KAAK,UAAU,aAAa,GAC9B,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UAAO,KAAK,KAAW,CAAA;EAEhC,IAAI,KAAK,UAAU,KAAK,OAAO,KAAK,SAAS,UAC3C,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAD;GAAc,cAAY,KAAK;GAAM,IAAI,KAAK;aAC5C,iBAAA,GAAA,kBAAA,KAACE,YAAAA,UAAD,EAAU,OAAO,KAAK,KAAO,CAAA;EACjB,CAAA;EAGlB,OAAO,iBAAA,GAAA,kBAAA,KAAC,gBAAD;GAAgB,IAAI,KAAK;aAAK,KAAK;EAAqB,CAAA;CACjE;CAEA,MAAM,mBAAmB,MAA6B,eAAuB;EAC3E,IAAI,KAAK,UAAU,aAAa,GAC9B,OAAO;EAET,IAAI,KAAK,UAAU,GACjB,OAAO,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAkB,eAAA,KAAa,CAAA;EAExC,OAAO,iBAAA,GAAA,kBAAA,KAACD,YAAAA,qBAAD,EAAqB,eAAA,KAAa,CAAA;CAC3C;CAEA,OAAO,iBAAA,GAAA,kBAAA,KAACE,mBAAAA,YAAD;EAAmB;EAAmB;EAA6B;CAAkB,CAAA;AAC9F"}
@@ -1 +1 @@
1
- {"version":3,"file":"CampaignBlock.js","names":["Text","SafeLinkButton","getPossiblyRelativeUrl","ArrowRightLine"],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n src: string;\n alt: string;\n}\n\ninterface Props {\n title: string;\n description: string;\n headingLevel?: HeadingLevel;\n url: {\n url?: string;\n text?: string;\n };\n image?: Image;\n imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n className?: string;\n path?: string;\n background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n height: \"100%\",\n containerType: \"inline-size\",\n },\n});\n\nconst Container = styled(\"div\", {\n base: {\n display: \"grid\",\n gridTemplateColumns: \"1fr\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n backgroundColor: \"background.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"full\",\n overflow: \"hidden\",\n },\n variants: {\n imageSide: {\n left: {\n \"@/tablet\": {\n gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"minmax(230px, 455px) auto\",\n },\n },\n },\n right: {\n \"@/tablet\": {\n gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"auto minmax(230px, 455px)\",\n },\n },\n },\n },\n background: {\n neutral: {},\n brand1: {\n backgroundColor: \"surface.brand.1\",\n },\n brand3: {\n backgroundColor: \"surface.brand.3\",\n },\n },\n },\n defaultVariants: {\n imageSide: \"left\",\n background: \"neutral\",\n },\n});\n\nconst StyledImg = styled(\"img\", {\n base: {\n objectFit: \"cover\",\n width: \"100%\",\n height: \"215px\",\n \"@/tablet\": {\n height: \"340px\",\n },\n \"@supports not (container-type: inline-size)\": {\n tablet: {\n height: \"265px\",\n },\n tabletWide: {\n height: \"340px\",\n },\n },\n backgroundColor: \"background.default\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n paddingBlock: \"medium\",\n paddingInline: \"medium\",\n position: \"relative\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n tablet: {\n display: \"block\",\n overflow: \"hidden\",\n position: \"relative\",\n lineClamp: 4,\n boxOrient: \"vertical\",\n },\n },\n});\n\ninterface LinkButtonProps {\n url?: string;\n path?: string;\n children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n base: {\n boxShadow: \"full\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n if (url)\n return (\n <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n {children}\n </StyledSafeLinkButton>\n );\n return children;\n};\n\nexport const CampaignBlock = ({\n title,\n image,\n imageSide = \"left\",\n description,\n headingLevel: InternalHeading = \"h2\",\n url,\n path,\n className,\n background,\n}: Props) => {\n const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n return (\n <Wrapper>\n <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n {imageSide === \"left\" && imageComponent}\n <ContentWrapper>\n <Text asChild consumeCss textStyle=\"heading.small\">\n <InternalHeading>{parse(title)}</InternalHeading>\n </Text>\n <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n {!!url?.url && (\n <LinkButton url={url.url} path={path}>\n {parse(url.text ?? \"\")}\n <ArrowRightLine />\n </LinkButton>\n )}\n </ContentWrapper>\n {imageSide !== \"left\" && imageComponent}\n </Container>\n </Wrapper>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"CampaignBlock.js","names":["Text","SafeLinkButton","getPossiblyRelativeUrl","ArrowRightLine"],"sources":["../../src/CampaignBlock/CampaignBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { type ReactNode } from \"react\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n src: string;\n alt: string;\n}\n\ninterface Props {\n title: string;\n description: string;\n headingLevel?: HeadingLevel;\n url: {\n url?: string;\n text?: string;\n };\n image?: Image;\n imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n className?: string;\n path?: string;\n background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n height: \"100%\",\n containerType: \"inline-size\",\n },\n});\n\nconst Container = styled(\"div\", {\n base: {\n display: \"grid\",\n gridTemplateColumns: \"1fr\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n backgroundColor: \"background.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"full\",\n overflow: \"hidden\",\n },\n variants: {\n imageSide: {\n left: {\n \"@/tablet\": {\n gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"minmax(230px, 455px) auto\",\n },\n },\n },\n right: {\n \"@/tablet\": {\n gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n },\n \"@supports not (container-type: inline-size)\": {\n tabletWide: {\n gridTemplateColumns: \"auto minmax(230px, 455px)\",\n },\n },\n },\n },\n background: {\n neutral: {},\n brand1: {\n backgroundColor: \"surface.brand.1\",\n },\n brand3: {\n backgroundColor: \"surface.brand.3\",\n },\n },\n },\n defaultVariants: {\n imageSide: \"left\",\n background: \"neutral\",\n },\n});\n\nconst StyledImg = styled(\"img\", {\n base: {\n objectFit: \"cover\",\n width: \"100%\",\n height: \"215px\",\n \"@/tablet\": {\n height: \"340px\",\n },\n \"@supports not (container-type: inline-size)\": {\n tablet: {\n height: \"265px\",\n },\n tabletWide: {\n height: \"340px\",\n },\n },\n backgroundColor: \"background.default\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"flex-start\",\n justifyContent: \"center\",\n paddingBlock: \"medium\",\n paddingInline: \"medium\",\n position: \"relative\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n tablet: {\n display: \"block\",\n overflow: \"hidden\",\n position: \"relative\",\n lineClamp: 4,\n boxOrient: \"vertical\",\n },\n },\n});\n\ninterface LinkButtonProps {\n url?: string;\n path?: string;\n children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n base: {\n boxShadow: \"full\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n if (url)\n return (\n <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n {children}\n </StyledSafeLinkButton>\n );\n return children;\n};\n\nexport const CampaignBlock = ({\n title,\n image,\n imageSide = \"left\",\n description,\n headingLevel: InternalHeading = \"h2\",\n url,\n path,\n className,\n background,\n}: Props) => {\n const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n return (\n <Wrapper>\n <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n {imageSide === \"left\" && imageComponent}\n <ContentWrapper>\n <Text asChild consumeCss textStyle=\"heading.small\">\n <InternalHeading>{parse(title)}</InternalHeading>\n </Text>\n <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n {!!url?.url && (\n <LinkButton url={url.url} path={path}>\n {parse(url.text ?? \"\")}\n <ArrowRightLine />\n </LinkButton>\n )}\n </ContentWrapper>\n {imageSide !== \"left\" && imageComponent}\n </Container>\n </Wrapper>\n );\n};\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n highlightedCode: string;\n format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n const codeWithLineNumbers = useMemo(() => {\n return highlightedCode\n .split(\"\\n\")\n .map((line, i) => {\n return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n })\n .join(\"\\n\");\n }, [highlightedCode]);\n\n return (\n <Pre\n className={cx(\"codeblock\", `language-${format}`, className)}\n {...props}\n dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n ref={ref}\n />\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,OAAA,GAAA,wBAAA,QAAa,OAAO,EAAE,CAAC;AAE7B,MAAa,aAAA,GAAA,MAAA,aAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,uBAAA,GAAA,MAAA,eAAoC;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,KAAK,MAAM,MAAM;AAChB,UAAO,4BAA4B,IAAI,EAAE,SAAS;IAClD,CACD,KAAK,KAAK;IACZ,CAAC,gBAAgB,CAAC;AAErB,QACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,YAAA,GAAA,wBAAA,IAAc,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;EACL,CAAA;EAEJ"}
1
+ {"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n highlightedCode: string;\n format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n const codeWithLineNumbers = useMemo(() => {\n return highlightedCode\n .split(\"\\n\")\n .map((line, i) => {\n return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n })\n .join(\"\\n\");\n }, [highlightedCode]);\n\n return (\n <Pre\n className={cx(\"codeblock\", `language-${format}`, className)}\n {...props}\n dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n ref={ref}\n />\n );\n});\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,OAAA,GAAA,wBAAA,QAAa,OAAO,CAAC,CAAC;AAE5B,MAAa,aAAA,GAAA,MAAA,aAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,uBAAA,GAAA,MAAA,eAAoC;EACxC,OAAO,gBACJ,MAAM,IAAI,EACV,KAAK,MAAM,MAAM;GAChB,OAAO,4BAA4B,IAAI,EAAE,SAAS;EACpD,CAAC,EACA,KAAK,IAAI;CACd,GAAG,CAAC,eAAe,CAAC;CAEpB,OACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;EACE,YAAA,GAAA,wBAAA,IAAc,aAAa,YAAY,UAAU,SAAS;EAC1D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,oBAAoB;EAClD;CACN,CAAA;AAEL,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"codeLanguageOptions.js","names":[],"sources":["../../src/CodeBlock/codeLanguageOptions.ts"],"sourcesContent":["/**\n * Copyright (c) 2019-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\nexport const codeLanguageOptions: Array<ICodeLangugeOption> = [\n {\n title: \"Bash\",\n format: \"bash\",\n },\n {\n title: \"C\",\n format: \"c\",\n },\n {\n title: \"CSharp\",\n format: \"csharp\",\n },\n {\n title: \"CSS\",\n format: \"css\",\n },\n {\n title: \"Diff\",\n format: \"diff\",\n },\n {\n title: \"HTML\",\n format: \"markup\",\n },\n {\n title: \"Ini\",\n format: \"ini\",\n },\n {\n title: \"Java\",\n format: \"java\",\n },\n {\n title: \"Javascript\",\n format: \"js\",\n },\n {\n title: \"JSON\",\n format: \"json\",\n },\n {\n title: \"JSX\",\n format: \"jsx\",\n },\n {\n title: \"Kotlin\",\n format: \"kotlin\",\n },\n {\n title: \"LUA\",\n format: \"lua\",\n },\n {\n title: \"Markdown\",\n format: \"markdown\",\n },\n {\n title: \"Matlab\",\n format: \"matlab\",\n },\n {\n title: \"NSIS\",\n format: \"nsis\",\n },\n {\n title: \"PHP\",\n format: \"php\",\n },\n {\n title: \"Powershell\",\n format: \"powershell\",\n },\n {\n title: \"Python\",\n format: \"python\",\n },\n {\n title: \"Ruby\",\n format: \"ruby\",\n },\n {\n title: \"Rust\",\n format: \"rust\",\n },\n {\n title: \"SQL\",\n format: \"sql\",\n },\n {\n title: \"Text\",\n format: \"text\",\n },\n {\n title: \"VHDL\",\n format: \"vhdl\",\n },\n {\n title: \"XML\",\n format: \"xml\",\n },\n];\n\nexport interface ICodeLangugeOption {\n title: string;\n format: string;\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,sBAAiD;CAC5D;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACD;EACE,OAAO;EACP,QAAQ;EACT;CACF"}
1
+ {"version":3,"file":"codeLanguageOptions.js","names":[],"sources":["../../src/CodeBlock/codeLanguageOptions.ts"],"sourcesContent":["/**\n * Copyright (c) 2019-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\nexport const codeLanguageOptions: Array<ICodeLangugeOption> = [\n {\n title: \"Bash\",\n format: \"bash\",\n },\n {\n title: \"C\",\n format: \"c\",\n },\n {\n title: \"CSharp\",\n format: \"csharp\",\n },\n {\n title: \"CSS\",\n format: \"css\",\n },\n {\n title: \"Diff\",\n format: \"diff\",\n },\n {\n title: \"HTML\",\n format: \"markup\",\n },\n {\n title: \"Ini\",\n format: \"ini\",\n },\n {\n title: \"Java\",\n format: \"java\",\n },\n {\n title: \"Javascript\",\n format: \"js\",\n },\n {\n title: \"JSON\",\n format: \"json\",\n },\n {\n title: \"JSX\",\n format: \"jsx\",\n },\n {\n title: \"Kotlin\",\n format: \"kotlin\",\n },\n {\n title: \"LUA\",\n format: \"lua\",\n },\n {\n title: \"Markdown\",\n format: \"markdown\",\n },\n {\n title: \"Matlab\",\n format: \"matlab\",\n },\n {\n title: \"NSIS\",\n format: \"nsis\",\n },\n {\n title: \"PHP\",\n format: \"php\",\n },\n {\n title: \"Powershell\",\n format: \"powershell\",\n },\n {\n title: \"Python\",\n format: \"python\",\n },\n {\n title: \"Ruby\",\n format: \"ruby\",\n },\n {\n title: \"Rust\",\n format: \"rust\",\n },\n {\n title: \"SQL\",\n format: \"sql\",\n },\n {\n title: \"Text\",\n format: \"text\",\n },\n {\n title: \"VHDL\",\n format: \"vhdl\",\n },\n {\n title: \"XML\",\n format: \"xml\",\n },\n];\n\nexport interface ICodeLangugeOption {\n title: string;\n format: string;\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,sBAAiD;CAC5D;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;CACA;EACE,OAAO;EACP,QAAQ;CACV;AACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"Concept.js","names":["Figure","licenseAttributes","ImageEmbed","BrightcoveEmbed","H5pEmbed","IframeEmbed","ExternalEmbed","EmbedByline"],"sources":["../../src/Concept/Concept.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n copyright?: ConceptCopyright;\n visualElement?: ConceptVisualElementMeta;\n lang?: string;\n title?: ReactNode;\n children?: ReactNode;\n source?: string;\n previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n textStyle: \"body.large\",\n display: \"inline\",\n \"& p\": {\n display: \"inline\",\n },\n },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n return (\n <StyledFigure ref={ref} {...rest} {...licenseProps}>\n <ContentWrapper lang={lang}>\n {!!title && (\n <>\n <b>{title}</b>\n {` – `}\n </>\n )}\n {children}\n </ContentWrapper>\n {visualElement?.resource === \"image\" ? (\n <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n ) : visualElement?.resource === \"brightcove\" ? (\n <BrightcoveEmbed embed={visualElement} />\n ) : visualElement?.resource === \"h5p\" ? (\n <H5pEmbed embed={visualElement} />\n ) : visualElement?.resource === \"iframe\" ? (\n <IframeEmbed embed={visualElement} />\n ) : visualElement?.resource === \"external\" ? (\n <ExternalEmbed embed={visualElement} />\n ) : null}\n {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n </StyledFigure>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAeC,0BAAAA,kBAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,GAAI;EAAM,GAAI;YAAtC;GACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;IAAsB;cAAtB,CACG,CAAC,CAAC,SACD,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAAA,UAAI,OAAU,CAAA,EACb,MACA,EAAA,CAAA,EAEJ,SACc;;GAChB,eAAe,aAAa,UAC3B,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,OAAO;IAAqB;IAAkB;IAAc,CAAA,GACtE,eAAe,aAAa,eAC9B,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD,EAAiB,OAAO,eAAiB,CAAA,GACvC,eAAe,aAAa,QAC9B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD,EAAU,OAAO,eAAiB,CAAA,GAChC,eAAe,aAAa,WAC9B,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,EAAa,OAAO,eAAiB,CAAA,GACnC,eAAe,aAAa,aAC9B,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD,EAAe,OAAO,eAAiB,CAAA,GACrC;GACH,CAAC,CAAC,aAAa,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IAAwB;IAAW,MAAK;IAAY,CAAA;GACvD;;EAGpB"}
1
+ {"version":3,"file":"Concept.js","names":["Figure","licenseAttributes","ImageEmbed","BrightcoveEmbed","H5pEmbed","IframeEmbed","ExternalEmbed","EmbedByline"],"sources":["../../src/Concept/Concept.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n copyright?: ConceptCopyright;\n visualElement?: ConceptVisualElementMeta;\n lang?: string;\n title?: ReactNode;\n children?: ReactNode;\n source?: string;\n previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n textStyle: \"body.large\",\n display: \"inline\",\n \"& p\": {\n display: \"inline\",\n },\n },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n return (\n <StyledFigure ref={ref} {...rest} {...licenseProps}>\n <ContentWrapper lang={lang}>\n {!!title && (\n <>\n <b>{title}</b>\n {` – `}\n </>\n )}\n {children}\n </ContentWrapper>\n {visualElement?.resource === \"image\" ? (\n <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n ) : visualElement?.resource === \"brightcove\" ? (\n <BrightcoveEmbed embed={visualElement} />\n ) : visualElement?.resource === \"h5p\" ? (\n <H5pEmbed embed={visualElement} />\n ) : visualElement?.resource === \"iframe\" ? (\n <IframeEmbed embed={visualElement} />\n ) : visualElement?.resource === \"external\" ? (\n <ExternalEmbed embed={visualElement} />\n ) : null}\n {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n </StyledFigure>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,iBAAAA,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACP,EACF,CAAC;AAED,MAAM,kBAAA,GAAA,wBAAA,QAAwB,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,SACX;AACF,EACF,CAAC;AAED,MAAa,WAAA,GAAA,MAAA,aACV,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAeC,0BAAAA,kBAAkB,WAAW,SAAS,SAAS,MAAM,MAAM;CAEhF,OACE,iBAAA,GAAA,kBAAA,MAAC,cAAD;EAAmB;EAAK,GAAI;EAAM,GAAI;YAAtC;GACE,iBAAA,GAAA,kBAAA,MAAC,gBAAD;IAAsB;cAAtB,CACG,CAAC,CAAC,SACD,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD,EAAA,UAAI,MAAS,CAAA,GACZ,KACD,EAAA,CAAA,GAEH,QACa;;GACf,eAAe,aAAa,UAC3B,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,OAAO;IAAqB;IAAkB;GAAa,CAAA,IACrE,eAAe,aAAa,eAC9B,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD,EAAiB,OAAO,cAAgB,CAAA,IACtC,eAAe,aAAa,QAC9B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD,EAAU,OAAO,cAAgB,CAAA,IAC/B,eAAe,aAAa,WAC9B,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,EAAa,OAAO,cAAgB,CAAA,IAClC,eAAe,aAAa,aAC9B,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD,EAAe,OAAO,cAAgB,CAAA,IACpC;GACH,CAAC,CAAC,aAAa,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;IAAwB;IAAW,MAAK;GAAW,CAAA;EACvD;;AAElB,CACF"}