@ndla/ui 56.0.156-alpha.0 → 56.0.157-alpha.0

package/es/Grid/Grid.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    justifyContent: \"center\",\n    borderRadius: \"xsmall\",\n    gridRowGap: \"large\",\n    gridColumnGap: \"medium\",\n    width: \"100%\",\n    backgroundColor: \"background.subtle\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']\": {\n      height: \"100%\",\n      \"& > :last-child\": {\n        marginTop: \"auto\",\n      },\n    },\n    tabletDown: {\n      gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n    },\n    tabletToDesktop: {\n      gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n      \"& > div:nth-child(3):last-child\": {\n        display: \"flex\",\n        flexFlow: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gridColumn: \"span 2\",\n      },\n    },\n  },\n  variants: {\n    columns: {\n      \"2\": {},\n      \"2x2\": {},\n      \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n      \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n    },\n    background: {\n      white: { backgroundColor: \"surface.default\" },\n      transparent: { backgroundColor: \"transparent\" },\n      gray: { backgroundColor: \"background.subtle\" },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n  columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n  border?: \"none\" | \"lightBlue\";\n  background?: \"transparent\" | \"white\" | \"gray\";\n  children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer\n      data-embed-type=\"grid\"\n      border={border === \"none\" ? undefined : border}\n      columns={amountOfColumns}\n      background={background}\n      {...rest}\n    >\n      {children}\n    </GridContainer>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,OAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}
+{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    justifyContent: \"center\",\n    borderRadius: \"xsmall\",\n    gridRowGap: \"large\",\n    gridColumnGap: \"medium\",\n    width: \"100%\",\n    backgroundColor: \"background.subtle\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']\": {\n      height: \"100%\",\n      \"& > :last-child\": {\n        marginTop: \"auto\",\n      },\n    },\n    tabletDown: {\n      gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n    },\n    tabletToDesktop: {\n      gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n      \"& > div:nth-child(3):last-child\": {\n        display: \"flex\",\n        flexFlow: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gridColumn: \"span 2\",\n      },\n    },\n  },\n  variants: {\n    columns: {\n      \"2\": {},\n      \"2x2\": {},\n      \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n      \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n    },\n    background: {\n      white: { backgroundColor: \"surface.default\" },\n      transparent: { backgroundColor: \"transparent\" },\n      gray: { backgroundColor: \"background.subtle\" },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n  columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n  border?: \"none\" | \"lightBlue\";\n  background?: \"transparent\" | \"white\" | \"gray\";\n  children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer\n      data-embed-type=\"grid\"\n      border={border === \"none\" ? undefined : border}\n      columns={amountOfColumns}\n      background={background}\n      {...rest}\n    >\n      {children}\n    </GridContainer>\n  );\n};\n"],"mappings":";;;;;AAWA,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,QAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}

package/es/Grid/GridParallaxItem.mjs

@@ -10,7 +10,7 @@ const StyledGridParallaxItem = styled("div", { base: {
 		position: "sticky"
 	}
 } });
-const GridParallaxItem = ({ children,...rest }) => /* @__PURE__ */ jsx(StyledGridParallaxItem, {
+const GridParallaxItem = ({ children, ...rest }) => /* @__PURE__ */ jsx(StyledGridParallaxItem, {
 	...rest,
 	"data-embed-type": "grid-parallax",
 	children: /* @__PURE__ */ jsx("div", { children })

package/es/Grid/GridParallaxItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridParallaxItem.mjs","names":[],"sources":["../../src/Grid/GridParallaxItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    \"& > div\": {\n      top: \"var(--masthead-height, 0px)\",\n      position: \"sticky\",\n    },\n  },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n  <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n    <div>{children}</div>\n  </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;AAWA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,SAAU,GAAG,WAC9C,oBAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,oBAAC,SAAK,WAAe;EACE"}
+{"version":3,"file":"GridParallaxItem.mjs","names":[],"sources":["../../src/Grid/GridParallaxItem.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    \"& > div\": {\n      top: \"var(--masthead-height, 0px)\",\n      position: \"sticky\",\n    },\n  },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n  <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n    <div>{children}</div>\n  </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;AAWA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAC9C,oBAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,oBAAC,SAAK,WAAe;EACE"}

package/es/LicenseByline/EmbedByline.mjs

@@ -4,7 +4,7 @@ import { Button, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { useTranslation } from "react-i18next";
 import { AlertLine } from "@ndla/icons";
-import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
+import { getLicenseByAbbreviation } from "@ndla/licenses";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/LicenseByline/EmbedByline.tsx
@@ -41,7 +41,7 @@ const BaseDescription = styled("div", { base: {
 	display: "inline-flex",
 	whiteSpace: "pre-wrap"
 } });
-const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright,...props }) => {
+const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }) => {
 	const { t } = useTranslation();
 	if (props.error) {
 		const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
@@ -108,8 +108,11 @@ const LicenseDescription = ({ children, isOpen, setIsOpen }) => {
 const LicenseContainerContent = ({ children, copyright, type }) => {
 	const { t, i18n } = useTranslation();
 	const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : void 0;
-	const authors = getLicenseCredits(copyright);
-	const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+	const captionAuthors = [
+		copyright?.creators,
+		copyright?.rightsholders,
+		copyright?.processors
+	].find((authors) => authors?.length) ?? [];
 	const [isOpen, setIsOpen] = useState(false);
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		children,

package/es/LicenseByline/EmbedByline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedByline.mjs","names":[],"sources":["../../src/LicenseByline/EmbedByline.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 { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation, getLicenseCredits } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { CopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { CopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const authors = getLicenseCredits(copyright);\n  const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"EmbedByline.mjs","names":[],"sources":["../../src/LicenseByline/EmbedByline.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 { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { CopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { CopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const captionAuthors =\n    [copyright?.creators, copyright?.rightsholders, copyright?.processors].find((authors) => authors?.length) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}

package/es/LicenseByline/LicenseLink.mjs

@@ -19,7 +19,7 @@ const StyledSafeLink = styled(SafeLink, { base: {
 	_focusWithin: { textDecoration: "none" },
 	mobileWideDown: { _disabled: { display: "none" } }
 } });
-const LicenseLink = forwardRef(({ license, hideLink,...rest }, ref) => {
+const LicenseLink = forwardRef(({ license, hideLink, ...rest }, ref) => {
 	const disabled = hideLink ? { "data-disabled": "" } : {};
 	if (license.abbreviation === "unknown") return null;
 	if (license.url?.length) return /* @__PURE__ */ jsx(StyledSafeLink, {

package/es/LicenseByline/LicenseLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LicenseLink.mjs","names":[],"sources":["../../src/LicenseByline/LicenseLink.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 { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,cAAc,YAAsC,EAAE,SAAS,SAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,oBAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,QAAO,oBAAC,oBAAM,QAAQ,eAAoB;EAC1C"}
+{"version":3,"file":"LicenseLink.mjs","names":[],"sources":["../../src/LicenseByline/LicenseLink.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 { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,cAAc,YAAsC,EAAE,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,oBAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,QAAO,oBAAC,oBAAM,QAAQ,eAAoB;EAC1C"}

package/es/LinkBlock/LinkBlockSection.mjs

@@ -16,7 +16,7 @@ const StyledList = styled("ul", { base: {
 	gap: "xsmall",
 	listStyle: "none"
 } });
-const LinkBlockSection = ({ children,...rest }) => {
+const LinkBlockSection = ({ children, ...rest }) => {
 	return /* @__PURE__ */ jsx("nav", {
 		...rest,
 		"data-embed-type": "link-block-list",

package/es/LinkBlock/LinkBlockSection.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlockSection.mjs","names":[],"sources":["../../src/LinkBlock/LinkBlockSection.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 { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nexport const LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,SAAU,GAAG,WAAkB;AAChE,QACE,oBAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,oBAAC,wBACE,SAAS,IAAI,WAAW,UACvB,oBAAC,kBAAI,QAAW,CAChB,GACS;GACT"}
+{"version":3,"file":"LinkBlockSection.mjs","names":[],"sources":["../../src/LinkBlock/LinkBlockSection.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 { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nexport const LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAAkB;AAChE,QACE,oBAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,oBAAC,wBACE,SAAS,IAAI,WAAW,UACvB,oBAAC,kBAAI,QAAW,CAChB,GACS;GACT"}

package/es/RelatedArticleList/RelatedArticleList.mjs

@@ -66,7 +66,7 @@ const StyledSection = styled("section", { base: {
 	clear: "both"
 } });
 const StyledButton = styled(Button, { base: { marginBlockStart: "xsmall" } });
-const RelatedArticleList = ({ children = [], articleCount, headingLevel: HeadingElement = "h2", headingButtons,...rest }) => {
+const RelatedArticleList = ({ children = [], articleCount, headingLevel: HeadingElement = "h2", headingButtons, ...rest }) => {
 	const [expanded, setExpanded] = useState(false);
 	const { t } = useTranslation();
 	const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);

package/es/RelatedArticleList/RelatedArticleList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedArticleList.mjs","names":[],"sources":["../../src/RelatedArticleList/RelatedArticleList.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 { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction?: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({ title, introduction, to, linkInfo = \"\", target = \"\" }: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <CardHeading asChild consumeCss css={linkOverlay.raw()}>\n          <SafeLink to={to} target={target} rel={linkInfo ? \"noopener noreferrer\" : undefined}>\n            <StyledSpan>\n              {title}\n              {target === \"_blank\" && <ExternalLinkLine />}\n            </StyledSpan>\n          </SafeLink>\n        </CardHeading>\n        {!!introduction && <Text dangerouslySetInnerHTML={{ __html: introduction }} />}\n        <Text color=\"text.subtle\" textStyle=\"label.small\">\n          {linkInfo}\n        </Text>\n      </CardContent>\n    </CardRoot>\n  );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    width: \"100%\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"medium\",\n    tabletDown: {\n      gridTemplateColumns: \"1fr\",\n    },\n  },\n});\n\nconst StyledSection = styled(\"section\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"medium\",\n    clear: \"both\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    marginBlockStart: \"xsmall\",\n  },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n  children?: ReactElement[];\n  articleCount?: number;\n  headingLevel?: HeadingLevel;\n  headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n  children = [],\n  articleCount,\n  headingLevel: HeadingElement = \"h2\",\n  headingButtons,\n  ...rest\n}: Props) => {\n  const [expanded, setExpanded] = useState(false);\n  const { t } = useTranslation();\n  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n  const childrenToShow = useMemo(\n    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n    [childCount, children, expanded],\n  );\n\n  return (\n    <StyledSection {...rest} data-embed-type=\"related-content-list\">\n      <HeadingWrapper>\n        <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n          <HeadingElement>{t(\"related.title\")}</HeadingElement>\n        </Heading>\n        {headingButtons}\n      </HeadingWrapper>\n      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n      {childCount > 2 ? (\n        <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n          {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n        </StyledButton>\n      ) : null}\n    </StyledSection>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,aAAa,OAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,cAAc,IAAI,WAAW,IAAI,SAAS,SAA8B;AAC9G,QACE,oBAAC;EAAS,mBAAgB;YACxB,qBAAC;GACC,oBAAC;IAAY;IAAQ;IAAW,KAAK,YAAY,KAAK;cACpD,oBAAC;KAAa;KAAY;KAAQ,KAAK,WAAW,wBAAwB;eACxE,qBAAC,yBACE,OACA,WAAW,YAAY,oBAAC,qBAAmB,IACjC;MACJ;KACC;GACb,CAAC,CAAC,gBAAgB,oBAAC,QAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC9E,oBAAC;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,kBAAkB,UACnB,EACF,CAAC;AASF,MAAa,sBAAsB,EACjC,WAAW,EAAE,EACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,WACQ;CACX,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,aAAa,cAAc,gBAAgB,SAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,iBAAiB,cACd,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,qBAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,qBAAC,6BACC,oBAAC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,oBAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,oBAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,oBAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}
+{"version":3,"file":"RelatedArticleList.mjs","names":[],"sources":["../../src/RelatedArticleList/RelatedArticleList.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 { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction?: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({ title, introduction, to, linkInfo = \"\", target = \"\" }: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <CardHeading asChild consumeCss css={linkOverlay.raw()}>\n          <SafeLink to={to} target={target} rel={linkInfo ? \"noopener noreferrer\" : undefined}>\n            <StyledSpan>\n              {title}\n              {target === \"_blank\" && <ExternalLinkLine />}\n            </StyledSpan>\n          </SafeLink>\n        </CardHeading>\n        {!!introduction && <Text dangerouslySetInnerHTML={{ __html: introduction }} />}\n        <Text color=\"text.subtle\" textStyle=\"label.small\">\n          {linkInfo}\n        </Text>\n      </CardContent>\n    </CardRoot>\n  );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    width: \"100%\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"medium\",\n    tabletDown: {\n      gridTemplateColumns: \"1fr\",\n    },\n  },\n});\n\nconst StyledSection = styled(\"section\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"medium\",\n    clear: \"both\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    marginBlockStart: \"xsmall\",\n  },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n  children?: ReactElement[];\n  articleCount?: number;\n  headingLevel?: HeadingLevel;\n  headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n  children = [],\n  articleCount,\n  headingLevel: HeadingElement = \"h2\",\n  headingButtons,\n  ...rest\n}: Props) => {\n  const [expanded, setExpanded] = useState(false);\n  const { t } = useTranslation();\n  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n  const childrenToShow = useMemo(\n    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n    [childCount, children, expanded],\n  );\n\n  return (\n    <StyledSection {...rest} data-embed-type=\"related-content-list\">\n      <HeadingWrapper>\n        <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n          <HeadingElement>{t(\"related.title\")}</HeadingElement>\n        </Heading>\n        {headingButtons}\n      </HeadingWrapper>\n      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n      {childCount > 2 ? (\n        <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n          {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n        </StyledButton>\n      ) : null}\n    </StyledSection>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,aAAa,OAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,cAAc,IAAI,WAAW,IAAI,SAAS,SAA8B;AAC9G,QACE,oBAAC;EAAS,mBAAgB;YACxB,qBAAC;GACC,oBAAC;IAAY;IAAQ;IAAW,KAAK,YAAY,KAAK;cACpD,oBAAC;KAAa;KAAY;KAAQ,KAAK,WAAW,wBAAwB;eACxE,qBAAC,yBACE,OACA,WAAW,YAAY,oBAAC,qBAAmB,IACjC;MACJ;KACC;GACb,CAAC,CAAC,gBAAgB,oBAAC,QAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC9E,oBAAC;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,kBAAkB,UACnB,EACF,CAAC;AASF,MAAa,sBAAsB,EACjC,WAAW,EAAE,EACb,cACA,cAAc,iBAAiB,MAC/B,gBACA,GAAG,WACQ;CACX,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,aAAa,cAAc,gBAAgB,SAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,iBAAiB,cACd,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,qBAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,qBAAC,6BACC,oBAAC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,oBAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,oBAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,oBAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}

package/es/TagSelector/TagSelector.mjs

@@ -13,7 +13,7 @@ import { useComboboxContext, useTagsInputContext } from "@ark-ui/react";
 * LICENSE file in the root directory of this source tree.
 *
 */
-const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBehavior = "clear", editable, addOnPaste = false, onValueChange, children, value, translations,...rest }) => {
+const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBehavior = "clear", editable, addOnPaste = false, onValueChange, children, value, translations, ...rest }) => {
 	const ids = {
 		root: useId(),
 		input: useId(),
@@ -58,7 +58,7 @@ const TagSelectorTagsInputRoot = forwardRef((props, ref) => {
 const TagSelectorLabel = ComboboxLabel;
 const TagSelectorItemInput = TagsInputItemInput;
 const TagSelectorTrigger = ComboboxTrigger;
-const TagSelectorControl = forwardRef(({ children,...props }, ref) => {
+const TagSelectorControl = forwardRef(({ children, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(ComboboxControl, {
 		ref,
 		asChild: true,
@@ -69,7 +69,7 @@ const TagSelectorControl = forwardRef(({ children,...props }, ref) => {
 	});
 });
 const TagSelectorClearTrigger = ComboboxClearTrigger;
-const TagSelectorInputBase = forwardRef(({ children,...props }, ref) => {
+const TagSelectorInputBase = forwardRef(({ children, ...props }, ref) => {
 	const tagsApi = useTagsInputContext();
 	return /* @__PURE__ */ jsx(ComboboxInput, {
 		ref,
@@ -83,7 +83,7 @@ const TagSelectorInputBase = forwardRef(({ children,...props }, ref) => {
 		})
 	});
 });
-const TagSelectorInput = forwardRef(({ children,...props }, ref) => {
+const TagSelectorInput = forwardRef(({ children, ...props }, ref) => {
 	const tagsApi = useTagsInputContext();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [tagsApi.value.map((value, index) => /* @__PURE__ */ jsxs(TagsInputItem, {
 		index,

package/es/TagSelector/TagSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagSelector.mjs","names":[],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAa,mBAA6C,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,aACA,GAAG,WAC0B;CAC7B,MAAM,MAAM;EACV,MAAM,OAAO;EACb,OAAO,OAAO;EACd,SAAS,OAAO;EACjB;CAED,MAAM,aAAa,OAAmC,OAAU;AAEhE,iBAAgB;AACd,MAAI,CAAC,WAAW,QACd,YAAW,UAAU,SAAS,eAAe,IAAI,QAAQ;IAE1D,CAAC,IAAI,QAAQ,CAAC;AAEjB,QACE,oBAAC;EACM;EACL;EACkB;EACR;EACS;EACJ;EACD;EACd,uBAAuB,UAAU;AAC/B,OAAI,SAAS,WAAW,SAAS,MAAM,OAAO,cAAc,OAAO,CACjE,OAAM,gBAAgB;;EAGnB;EACP,GAAI;YAEJ,oBAAC;GACM;GACE;GACG;GACK;GACH;GACE;GAEb;IACwB;GACd;;AAInB,MAAM,2BAA2B,YAAgD,OAAO,QAAQ;CAC9F,MAAM,cAAc,oBAAoB;AACxC,QACE,oBAAC;EACM;EACL,qBAAqB,YAAY,YAAY,cAAc,QAAQ,WAAW;EAC9E,GAAI;GACJ;EAEJ;AAIF,MAAa,mBAAmB;AAEhC,MAAa,uBAAuB;AAEpC,MAAa,qBAAqB;AAElC,MAAa,qBAAqB,YAAqD,EAAE,SAAU,GAAG,SAAS,QAAQ;AACrH,QACE,oBAAC;EAAqB;EAAK;YACzB,oBAAC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;EAEpB;AAEF,MAAa,0BAA0B;AAKvC,MAAa,uBAAuB,YACjC,EAAE,SAAU,GAAG,SAAS,QAAQ;CAC/B,MAAM,UAAU,qBAAqB;AAErC,QACE,oBAAC;EAAmB;EAAK;YACvB,oBAAC;GACC,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;;GAGxC,GAAI;GAEH;IACc;GACH;EAGrB;AAED,MAAa,mBAAmB,YAAqD,EAAE,SAAU,GAAG,SAAS,QAAQ;CACnH,MAAM,UAAU,qBAAqB;AAErC,QACE,8CACG,QAAQ,MAAM,KAAK,OAAO,UACzB,qBAAC;EAAqB;EAAc;aAClC,qBAAC,mCACC,oBAAC,+BAAmB,QAA0B,EAC9C,oBAAC,wCACC,oBAAC,cAAY,GACc,IACR,EACvB,oBAAC,uBAAqB;IAPwB,MAQhC,CAChB,EACF,oBAAC;EAAmB;EAAK;YACvB,oBAAC;GACC,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;;GAGxC,GAAI;GAEH;IACc;GACH,IACf;EAEL"}
+{"version":3,"file":"TagSelector.mjs","names":[],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAa,mBAA6C,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,cACA,GAAG,WAC0B;CAC7B,MAAM,MAAM;EACV,MAAM,OAAO;EACb,OAAO,OAAO;EACd,SAAS,OAAO;EACjB;CAED,MAAM,aAAa,OAAmC,OAAU;AAEhE,iBAAgB;AACd,MAAI,CAAC,WAAW,QACd,YAAW,UAAU,SAAS,eAAe,IAAI,QAAQ;IAE1D,CAAC,IAAI,QAAQ,CAAC;AAEjB,QACE,oBAAC;EACM;EACL;EACkB;EACR;EACS;EACJ;EACD;EACd,uBAAuB,UAAU;AAC/B,OAAI,SAAS,WAAW,SAAS,MAAM,OAAO,cAAc,OAAO,CACjE,OAAM,gBAAgB;;EAGnB;EACP,GAAI;YAEJ,oBAAC;GACM;GACE;GACG;GACK;GACH;GACE;GAEb;IACwB;GACd;;AAInB,MAAM,2BAA2B,YAAgD,OAAO,QAAQ;CAC9F,MAAM,cAAc,oBAAoB;AACxC,QACE,oBAAC;EACM;EACL,qBAAqB,YAAY,YAAY,cAAc,QAAQ,WAAW;EAC9E,GAAI;GACJ;EAEJ;AAIF,MAAa,mBAAmB;AAEhC,MAAa,uBAAuB;AAEpC,MAAa,qBAAqB;AAElC,MAAa,qBAAqB,YAAqD,EAAE,UAAU,GAAG,SAAS,QAAQ;AACrH,QACE,oBAAC;EAAqB;EAAK;YACzB,oBAAC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;EAEpB;AAEF,MAAa,0BAA0B;AAKvC,MAAa,uBAAuB,YACjC,EAAE,UAAU,GAAG,SAAS,QAAQ;CAC/B,MAAM,UAAU,qBAAqB;AAErC,QACE,oBAAC;EAAmB;EAAK;YACvB,oBAAC;GACC,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;;GAGxC,GAAI;GAEH;IACc;GACH;EAGrB;AAED,MAAa,mBAAmB,YAAqD,EAAE,UAAU,GAAG,SAAS,QAAQ;CACnH,MAAM,UAAU,qBAAqB;AAErC,QACE,8CACG,QAAQ,MAAM,KAAK,OAAO,UACzB,qBAAC;EAAqB;EAAc;aAClC,qBAAC,mCACC,oBAAC,+BAAmB,QAA0B,EAC9C,oBAAC,wCACC,oBAAC,cAAY,GACc,IACR,EACvB,oBAAC,uBAAqB;IAPwB,MAQhC,CAChB,EACF,oBAAC;EAAmB;EAAK;YACvB,oBAAC;GACC,YAAY,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;;GAGxC,GAAI;GAEH;IACc;GACH,IACf;EAEL"}

package/es/ZendeskButton/ZendeskButton.mjs

@@ -10,7 +10,7 @@ import { jsx } from "react/jsx-runtime";
 * LICENSE file in the root directory of this source tree.
 *
 */
-const ZendeskButton = forwardRef(({ locale, variant = "secondary", widgetKey, children,...rest }, ref) => {
+const ZendeskButton = forwardRef(({ locale, variant = "secondary", widgetKey, children, ...rest }, ref) => {
 	const [loading, setLoading] = useState(false);
 	const handleClick = () => {
 		if (window && !window.zE) {

package/es/ZendeskButton/ZendeskButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ZendeskButton.mjs","names":[],"sources":["../../src/ZendeskButton/ZendeskButton.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 { forwardRef, useState } from \"react\";\nimport { Button, type ButtonProps } from \"@ndla/primitives\";\n\n// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.\n\nexport interface ZendeskButtonProps extends ButtonProps {\n  widgetKey: string;\n  locale: string;\n}\n\ndeclare global {\n  interface Window {\n    zE: (modifier: string, action: string, callback?: (() => void) | string) => void;\n  }\n}\n\nexport const ZendeskButton = forwardRef<HTMLButtonElement, ZendeskButtonProps>(\n  ({ locale, variant = \"secondary\", widgetKey, children, ...rest }, ref) => {\n    const [loading, setLoading] = useState(false);\n    const handleClick = () => {\n      if (window && !window.zE) {\n        setLoading(true);\n        // Asynchronously load zendesk scripts for better performance\n        const script = document.createElement(\"script\");\n        script.id = \"ze-snippet\";\n        script.type = \"text/javascript\";\n        script.async = true;\n        script.onload = () => {\n          if (window.zE) {\n            window.zE(\"webWidget\", \"setLocale\", locale);\n            window.zE(\"webWidget:on\", \"close\", () => {\n              setLoading(false);\n            });\n            window.zE(\"webWidget\", \"open\");\n          }\n        };\n        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;\n        document.body.appendChild(script);\n      } else if (window?.zE) {\n        window.zE(\"webWidget\", \"open\");\n      }\n    };\n\n    return (\n      <Button onClick={handleClick} variant={variant} id=\"zendeskButton\" disabled={loading} {...rest} ref={ref}>\n        {children}\n      </Button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,gBAAgB,YAC1B,EAAE,QAAQ,UAAU,aAAa,WAAW,SAAU,GAAG,QAAQ,QAAQ;CACxE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,oBAAoB;AACxB,MAAI,UAAU,CAAC,OAAO,IAAI;AACxB,cAAW,KAAK;GAEhB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,UAAO,KAAK;AACZ,UAAO,OAAO;AACd,UAAO,QAAQ;AACf,UAAO,eAAe;AACpB,QAAI,OAAO,IAAI;AACb,YAAO,GAAG,aAAa,aAAa,OAAO;AAC3C,YAAO,GAAG,gBAAgB,eAAe;AACvC,iBAAW,MAAM;OACjB;AACF,YAAO,GAAG,aAAa,OAAO;;;AAGlC,UAAO,MAAM,kDAAkD;AAC/D,YAAS,KAAK,YAAY,OAAO;aACxB,QAAQ,GACjB,QAAO,GAAG,aAAa,OAAO;;AAIlC,QACE,oBAAC;EAAO,SAAS;EAAsB;EAAS,IAAG;EAAgB,UAAU;EAAS,GAAI;EAAW;EAClG;GACM;EAGd"}
+{"version":3,"file":"ZendeskButton.mjs","names":[],"sources":["../../src/ZendeskButton/ZendeskButton.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 { forwardRef, useState } from \"react\";\nimport { Button, type ButtonProps } from \"@ndla/primitives\";\n\n// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.\n\nexport interface ZendeskButtonProps extends ButtonProps {\n  widgetKey: string;\n  locale: string;\n}\n\ndeclare global {\n  interface Window {\n    zE: (modifier: string, action: string, callback?: (() => void) | string) => void;\n  }\n}\n\nexport const ZendeskButton = forwardRef<HTMLButtonElement, ZendeskButtonProps>(\n  ({ locale, variant = \"secondary\", widgetKey, children, ...rest }, ref) => {\n    const [loading, setLoading] = useState(false);\n    const handleClick = () => {\n      if (window && !window.zE) {\n        setLoading(true);\n        // Asynchronously load zendesk scripts for better performance\n        const script = document.createElement(\"script\");\n        script.id = \"ze-snippet\";\n        script.type = \"text/javascript\";\n        script.async = true;\n        script.onload = () => {\n          if (window.zE) {\n            window.zE(\"webWidget\", \"setLocale\", locale);\n            window.zE(\"webWidget:on\", \"close\", () => {\n              setLoading(false);\n            });\n            window.zE(\"webWidget\", \"open\");\n          }\n        };\n        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;\n        document.body.appendChild(script);\n      } else if (window?.zE) {\n        window.zE(\"webWidget\", \"open\");\n      }\n    };\n\n    return (\n      <Button onClick={handleClick} variant={variant} id=\"zendeskButton\" disabled={loading} {...rest} ref={ref}>\n        {children}\n      </Button>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,gBAAgB,YAC1B,EAAE,QAAQ,UAAU,aAAa,WAAW,UAAU,GAAG,QAAQ,QAAQ;CACxE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,oBAAoB;AACxB,MAAI,UAAU,CAAC,OAAO,IAAI;AACxB,cAAW,KAAK;GAEhB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,UAAO,KAAK;AACZ,UAAO,OAAO;AACd,UAAO,QAAQ;AACf,UAAO,eAAe;AACpB,QAAI,OAAO,IAAI;AACb,YAAO,GAAG,aAAa,aAAa,OAAO;AAC3C,YAAO,GAAG,gBAAgB,eAAe;AACvC,iBAAW,MAAM;OACjB;AACF,YAAO,GAAG,aAAa,OAAO;;;AAGlC,UAAO,MAAM,kDAAkD;AAC/D,YAAS,KAAK,YAAY,OAAO;aACxB,QAAQ,GACjB,QAAO,GAAG,aAAa,OAAO;;AAIlC,QACE,oBAAC;EAAO,SAAS;EAAsB;EAAS,IAAG;EAAgB,UAAU;EAAS,GAAI;EAAW;EAClG;GACM;EAGd"}

package/es/_virtual/rolldown_runtime.mjs

@@ -1,11 +1,16 @@
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
-var __export = (all) => {
+var __export = (all, symbols) => {
 	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
 	return target;
 };
 

package/es/i18n/useComponentTranslations.mjs

@@ -59,7 +59,7 @@ const usePaginationTranslations = (translations) => {
 const useImageSearchTranslations = (translations = {}) => {
 	const { t } = useTranslation("translation", { keyPrefix: "component.imageSearch" });
 	const paginationTranslations = usePaginationTranslations();
-	const { imagePreview, paginationTranslations: fallbackPaginationTranslations,...remaining } = translations;
+	const { imagePreview, paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
 	return useMemo(() => ({
 		searchPlaceholder: t("searchPlaceholder"),
 		searchButtonTitle: t("searchButtonTitle"),
@@ -91,7 +91,7 @@ const useImageSearchTranslations = (translations = {}) => {
 const useAudioSearchTranslations = (translations = {}) => {
 	const { t } = useTranslation("translation", { keyPrefix: "component.audioSearch" });
 	const paginationTranslations = usePaginationTranslations();
-	const { paginationTranslations: fallbackPaginationTranslations,...remaining } = translations;
+	const { paginationTranslations: fallbackPaginationTranslations, ...remaining } = translations;
 	return useMemo(() => ({
 		searchPlaceholder: t("searchPlaceholder"),
 		searchButtonTitle: t("searchButtonTitle"),
@@ -152,7 +152,8 @@ const useDatePickerTranslations = (translations) => {
 				month: "mm",
 				year: "yyyy"
 			};
-		}
+		},
+		...translations
 	}), [t, translations]);
 };
 

package/es/i18n/useComponentTranslations.mjs.map

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

package/lib/Article/Article.js

@@ -17,7 +17,7 @@ let __ndla_styled_system_css = require("@ndla/styled-system/css");
 *
 */
 const StyledArticleContent = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.section, {}, { baseComponent: true });
-const ArticleContent = (0, react.forwardRef)(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArticleContent, {
+const ArticleContent = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArticleContent, {
 	className: (0, __ndla_styled_system_css.cx)("ndla-article", className),
 	...props,
 	ref

package/lib/Article/Article.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text","ArticleByline"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n\ninterface Props {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  article: ArticleType;\n  licenseBox?: ReactNode;\n  children?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n  badges,\n  article,\n  licenseBox,\n  children,\n  competenceGoals,\n  id,\n  heartButton,\n  lang,\n  disclaimer,\n}: Props) => {\n  const { title, introduction, published, content, footNotes, copyright } = article;\n\n  const authors =\n    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n  return (\n    <ArticleWrapper>\n      <ArticleTitle\n        id={id}\n        badges={badges}\n        heartButton={heartButton}\n        title={title}\n        introduction={introduction}\n        competenceGoals={competenceGoals}\n        lang={lang}\n        disclaimer={disclaimer}\n      />\n      <ArticleContent>{content}</ArticleContent>\n      <ArticleFooter>\n        <ArticleByline\n          lang={lang}\n          footnotes={footNotes}\n          authors={authors}\n          suppliers={copyright?.rightsholders}\n          published={published}\n          licenseBox={licenseBox}\n        />\n        {children}\n      </ArticleFooter>\n    </ArticleWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,4DAA8BA,mBAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,wCACV,EAAE,UAAW,GAAG,SAAS,QACxB,2CAAC;CAAqB,4CAAc,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,4DACJA,mBAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,wCAA0F,OAAO,QAC5G,2CAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;AACvB,QACE,4CAAC;EACC,4CAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,4CAAC,0BACE,CAAC,CAAC,UAAU,2CAACC,qDAAiB,SAAyB,EACvD,eACW,EAEhB,2CAACC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,2CAACC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,2CAAC,mBAAK,eAAmB;IACpB;EAET,4CAAC,4BACE,iBACA,cACa;EACf;KACa;;AAgBpB,MAAa,WAAW,EACtB,QACA,SACA,YACA,UACA,iBACA,IACA,aACA,MACA,iBACW;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,cAAc;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,QACE,4CAAC;EACC,2CAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,2CAAC,4BAAgB,UAAyB;EAC1C,4CAAC,4BACC,2CAACC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}
+{"version":3,"file":"Article.js","names":["ark","BadgesContainer","Heading","Text","ArticleByline"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { BadgesContainer } from \"./BadgesContainer\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & StyledProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & StyledProps>((props, ref) => (\n  <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />\n));\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    gap: \"small\",\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n  children?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  badges,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  competenceGoals,\n  disclaimer,\n  children,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!badges || !!heartButton) && (\n          <InfoWrapper>\n            {!!badges && <BadgesContainer>{badges}</BadgesContainer>}\n            {heartButton}\n          </InfoWrapper>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n      {children}\n    </ArticleHeader>\n  );\n};\n\ninterface Props {\n  badges?: ReactNode;\n  heartButton?: ReactNode;\n  article: ArticleType;\n  licenseBox?: ReactNode;\n  children?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n  badges,\n  article,\n  licenseBox,\n  children,\n  competenceGoals,\n  id,\n  heartButton,\n  lang,\n  disclaimer,\n}: Props) => {\n  const { title, introduction, published, content, footNotes, copyright } = article;\n\n  const authors =\n    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n  return (\n    <ArticleWrapper>\n      <ArticleTitle\n        id={id}\n        badges={badges}\n        heartButton={heartButton}\n        title={title}\n        introduction={introduction}\n        competenceGoals={competenceGoals}\n        lang={lang}\n        disclaimer={disclaimer}\n      />\n      <ArticleContent>{content}</ArticleContent>\n      <ArticleFooter>\n        <ArticleByline\n          lang={lang}\n          footnotes={footNotes}\n          authors={authors}\n          suppliers={copyright?.rightsholders}\n          published={published}\n          licenseBox={licenseBox}\n        />\n        {children}\n      </ArticleFooter>\n    </ArticleWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,4DAA8BA,mBAAI,SAAS,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAE7E,MAAa,wCACV,EAAE,WAAW,GAAG,SAAS,QACxB,2CAAC;CAAqB,4CAAc,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,4DACJA,mBAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,mCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,wCAA0F,OAAO,QAC5G,2CAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CAClE;AAEF,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,YACf;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;CACf,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,qDACXA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,WAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,OAAO;CACP,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;CACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,QACA,aACA,OACA,MACA,IACA,cACA,iBACA,YACA,eACuB;AACvB,QACE,4CAAC;EACC,4CAAC,6BACG,CAAC,CAAC,UAAU,CAAC,CAAC,gBACd,4CAAC,0BACE,CAAC,CAAC,UAAU,2CAACC,qDAAiB,SAAyB,EACvD,eACW,EAEhB,2CAACC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;EACf,CAAC,CAAC,gBACD,2CAACC;GAAW;GAAM,WAAU;GAAc;GAAQ;aAChD,2CAAC,mBAAK,eAAmB;IACpB;EAET,4CAAC,4BACE,iBACA,cACa;EACf;KACa;;AAgBpB,MAAa,WAAW,EACtB,QACA,SACA,YACA,UACA,iBACA,IACA,aACA,MACA,iBACW;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,cAAc;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,QACE,4CAAC;EACC,2CAAC;GACK;GACI;GACK;GACN;GACO;GACG;GACX;GACM;IACZ;EACF,2CAAC,4BAAgB,UAAyB;EAC1C,4CAAC,4BACC,2CAACC;GACO;GACN,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD"}

package/lib/Article/ArticleByline.js

@@ -104,7 +104,7 @@ const ArticleByline = ({ lang, authors = [], suppliers = [], footnotes, licenseB
 		})]
 	})] });
 };
-const ArticleBylineAccordionItem = (0, react.forwardRef)(({ value, accordionTitle, children,...props }, ref) => {
+const ArticleBylineAccordionItem = (0, react.forwardRef)(({ value, accordionTitle, children, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.AccordionItem, {
 		value,
 		ref,

package/lib/Article/ArticleByline.js.map

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

package/lib/CodeBlock/CodeBlock.js

@@ -13,7 +13,7 @@ let __ndla_styled_system_css = require("@ndla/styled-system/css");
 *
 */
 const Pre = (0, __ndla_styled_system_jsx.styled)("pre", {});
-const CodeBlock = (0, react.forwardRef)(({ highlightedCode, format, className,...props }, ref) => {
+const CodeBlock = (0, react.forwardRef)(({ highlightedCode, format, className, ...props }, ref) => {
 	const codeWithLineNumbers = (0, react.useMemo)(() => {
 		return highlightedCode.split("\n").map((line, i) => {
 			return `<span class="linenumber">${i + 1}</span>${line}`;

package/lib/CodeBlock/CodeBlock.js.map

@@ -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 { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,2CAAa,OAAO,EAAE,CAAC;AAE7B,MAAa,mCAA+C,EAAE,iBAAiB,QAAQ,UAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,+CAAoC;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,2CAAC;EACC,4CAAc,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}
+{"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 { type ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends StyledProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const CodeBlock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,2CAAa,OAAO,EAAE,CAAC;AAE7B,MAAa,mCAA+C,EAAE,iBAAiB,QAAQ,WAAW,GAAG,SAAS,QAAQ;CACpH,MAAM,+CAAoC;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,2CAAC;EACC,4CAAc,aAAa,YAAY,UAAU,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,qBAAqB;EACnD;GACL;EAEJ"}

package/lib/Concept/Concept.js

@@ -29,7 +29,7 @@ const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	display: "inline",
 	"& p": { display: "inline" }
 } });
-const Concept = (0, react.forwardRef)(({ copyright, visualElement, lang, children, title, source, previewAlt,...rest }, ref) => {
+const Concept = (0, react.forwardRef)(({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {
 	const licenseProps = require_licenseAttributes.licenseAttributes(copyright?.license?.license, lang, source);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
 		ref,