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

package/lib/Embed/ImageEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEmbed.js","names":["actualSize: FigureSize","Figure","EmbedErrorPlaceholder","sizes","licenseAttributes","Image","AddLine","EmbedByline"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n  embed: ImageMetaData;\n  previewAlt?: boolean;\n  lang?: string;\n  renderContext?: RenderContext;\n  children?: ReactNode;\n}\n\nexport interface Author {\n  name: string;\n  type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n  creators?: Author[];\n  rightsholders?: Author[];\n  processors?: Author[];\n}) => {\n  return {\n    creators: copyright?.creators ?? [],\n    rightsholders: copyright?.rightsholders ?? [],\n    processors: copyright?.processors ?? [],\n  };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n  const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n  const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n  const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n  return {\n    float: actualFloat,\n    // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n    size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n  };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n  if (align && size === \"full\") {\n    return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n  }\n  if (align && size === \"small\") {\n    return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n  }\n  if (align && size === \"xsmall\") {\n    return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n  }\n  return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n  const focalX = Number.parseFloat(data.focalX ?? \"\");\n  const focalY = Number.parseFloat(data.focalY ?? \"\");\n  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n    return { x: focalX, y: focalY };\n  }\n  return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n  const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n  const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n  const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n  const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n  if (\n    !Number.isNaN(lowerRightX) &&\n    !Number.isNaN(lowerRightY) &&\n    !Number.isNaN(upperLeftX) &&\n    !Number.isNaN(upperLeftY)\n  ) {\n    return {\n      startX: lowerRightX,\n      startY: lowerRightY,\n      endX: upperLeftX,\n      endY: upperLeftY,\n    };\n  }\n  return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n    \"& img\": {\n      width: \"100%\",\n    },\n  },\n  variants: {\n    svg: {\n      true: {\n        display: \"flex\",\n        justifyContent: \"center\",\n      },\n      false: {},\n    },\n    border: {\n      true: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n        \"& img\": {\n          borderRadius: \"0\",\n        },\n      },\n      false: {},\n    },\n    expandable: {\n      true: {\n        cursor: \"pointer\",\n      },\n      false: {},\n    },\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    zIndex: \"docked\",\n    _hover: {\n      \"& [data-byline-button]\": {\n        background: \"background.default\",\n      },\n      \"& button[data-expanded]\": {\n        transform: \"scale(1.2)\",\n      },\n    },\n    \"& button[data-expanded='true']\": {\n      \"& svg\": {\n        transform: \"rotate(-45deg)\",\n      },\n    },\n  },\n});\n\nconst ExpandButton = styled(\n  \"button\",\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"pointer\",\n      position: \"absolute\",\n      padding: \"0\",\n      top: \"xsmall\",\n      right: \"xsmall\",\n      width: \"medium\",\n      height: \"medium\",\n      border: \"2px solid\",\n      borderColor: \"background.default\",\n      transitionProperty: \"transform, background-color, color\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"ease-out\",\n      color: \"background.default\",\n      backgroundColor: \"surface.action\",\n      borderRadius: \"large\",\n      \"& svg\": {\n        transitionProperty: \"transform\",\n        transitionDuration: \"normal\",\n        transitionTimingFunction: \"ease-out\",\n      },\n      tabletDown: {\n        display: \"none\",\n      },\n    },\n  },\n  { defaultProps: { type: \"button\" } },\n);\n\nconst ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n  const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);\n  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n  const { t } = useTranslation();\n\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    }\n    if (embed.status === \"success\" && embed.data.caption.caption) {\n      return parse(embed.data.caption.caption);\n    }\n  }, [embed, renderContext]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n  }\n\n  const { data, embedData } = embed;\n\n  const altText = embedData.alt || \"\";\n\n  const sizes = getSizes(embedData.size, embedData.align);\n\n  const focalPoint = getFocalPoint(embedData);\n  const crop = getCrop(embedData);\n\n  const toggleImageSize = () => {\n    setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));\n  };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n  return (\n    <StyledFigure\n      float={figureProps?.float}\n      size={imageSizes ? \"full\" : figureSize}\n      data-embed-type=\"image\"\n      {...licenseProps}\n    >\n      {children}\n      <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n        <Image\n          focalPoint={focalPoint}\n          contentType={data.image.contentType}\n          crop={crop}\n          sizes={imageSizes ?? sizes}\n          alt={altText}\n          src={data.image.imageUrl}\n          lang={lang}\n          onClick={figureProps?.float ? toggleImageSize : undefined}\n          variant=\"rounded\"\n        />\n        {(embedData.align === \"right\" || embedData.align === \"left\") && (\n          <ExpandButton\n            aria-label={t(`license.images.itemImage.zoom${imageSizes ? \"Out\" : \"\"}ImageButtonLabel`)}\n            onClick={toggleImageSize}\n            data-expanded={!!imageSizes}\n          >\n            <AddLine />\n          </ExpandButton>\n        )}\n      </ImageWrapper>\n      <EmbedByline\n        type=\"image\"\n        copyright={data.copyright}\n        description={parsedDescription}\n        hideDescription={embedData.hideCaption === \"true\"}\n        hideCopyright={embedData.hideByline === \"true\"}\n        visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n      />\n    </StyledFigure>\n  );\n};\n\nexport default ImageEmbed;\n"],"mappings":"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"}
+{"version":3,"file":"ImageEmbed.js","names":["actualSize: FigureSize","Figure","EmbedErrorPlaceholder","sizes","licenseAttributes","Image","AddLine","EmbedByline"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n  embed: ImageMetaData;\n  previewAlt?: boolean;\n  lang?: string;\n  renderContext?: RenderContext;\n  children?: ReactNode;\n}\n\nexport interface Author {\n  name: string;\n  type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n  creators?: Author[];\n  rightsholders?: Author[];\n  processors?: Author[];\n}) => {\n  return {\n    creators: copyright?.creators ?? [],\n    rightsholders: copyright?.rightsholders ?? [],\n    processors: copyright?.processors ?? [],\n  };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n  const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n  const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n  const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n  return {\n    float: actualFloat,\n    // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n    size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n  };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n  if (align && size === \"full\") {\n    return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n  }\n  if (align && size === \"small\") {\n    return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n  }\n  if (align && size === \"xsmall\") {\n    return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n  }\n  return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n  const focalX = Number.parseFloat(data.focalX ?? \"\");\n  const focalY = Number.parseFloat(data.focalY ?? \"\");\n  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n    return { x: focalX, y: focalY };\n  }\n  return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n  const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n  const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n  const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n  const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n  if (\n    !Number.isNaN(lowerRightX) &&\n    !Number.isNaN(lowerRightY) &&\n    !Number.isNaN(upperLeftX) &&\n    !Number.isNaN(upperLeftY)\n  ) {\n    return {\n      startX: lowerRightX,\n      startY: lowerRightY,\n      endX: upperLeftX,\n      endY: upperLeftY,\n    };\n  }\n  return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    overflow: \"hidden\",\n    position: \"relative\",\n    width: \"100%\",\n    \"& img\": {\n      width: \"100%\",\n    },\n  },\n  variants: {\n    svg: {\n      true: {\n        display: \"flex\",\n        justifyContent: \"center\",\n      },\n      false: {},\n    },\n    border: {\n      true: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n        \"& img\": {\n          borderRadius: \"0\",\n        },\n      },\n      false: {},\n    },\n    expandable: {\n      true: {\n        cursor: \"pointer\",\n      },\n      false: {},\n    },\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    zIndex: \"docked\",\n    _hover: {\n      \"& [data-byline-button]\": {\n        background: \"background.default\",\n      },\n      \"& button[data-expanded]\": {\n        transform: \"scale(1.2)\",\n      },\n    },\n    \"& button[data-expanded='true']\": {\n      \"& svg\": {\n        transform: \"rotate(-45deg)\",\n      },\n    },\n  },\n});\n\nconst ExpandButton = styled(\n  \"button\",\n  {\n    base: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"pointer\",\n      position: \"absolute\",\n      padding: \"0\",\n      top: \"xsmall\",\n      right: \"xsmall\",\n      width: \"medium\",\n      height: \"medium\",\n      border: \"2px solid\",\n      borderColor: \"background.default\",\n      transitionProperty: \"transform, background-color, color\",\n      transitionDuration: \"normal\",\n      transitionTimingFunction: \"ease-out\",\n      color: \"background.default\",\n      backgroundColor: \"surface.action\",\n      borderRadius: \"large\",\n      \"& svg\": {\n        transitionProperty: \"transform\",\n        transitionDuration: \"normal\",\n        transitionTimingFunction: \"ease-out\",\n      },\n      tabletDown: {\n        display: \"none\",\n      },\n    },\n  },\n  { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n  const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);\n  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n  const { t } = useTranslation();\n\n  const parsedDescription = useMemo(() => {\n    if (embed.embedData.caption || renderContext === \"article\") {\n      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n    }\n    if (embed.status === \"success\" && embed.data.caption.caption) {\n      return parse(embed.data.caption.caption);\n    }\n  }, [embed, renderContext]);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n  }\n\n  const { data, embedData } = embed;\n\n  const altText = embedData.alt || \"\";\n\n  const sizes = getSizes(embedData.size, embedData.align);\n\n  const focalPoint = getFocalPoint(embedData);\n  const crop = getCrop(embedData);\n\n  const toggleImageSize = () => {\n    setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));\n  };\n\n  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n  const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n  return (\n    <StyledFigure\n      float={figureProps?.float}\n      size={imageSizes ? \"full\" : figureSize}\n      data-embed-type=\"image\"\n      {...licenseProps}\n    >\n      {children}\n      <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n        <Image\n          focalPoint={focalPoint}\n          contentType={data.image.contentType}\n          crop={crop}\n          sizes={imageSizes ?? sizes}\n          alt={altText}\n          src={data.image.imageUrl}\n          lang={lang}\n          onClick={figureProps?.float ? toggleImageSize : undefined}\n          variant=\"rounded\"\n        />\n        {(embedData.align === \"right\" || embedData.align === \"left\") && (\n          <ExpandButton\n            aria-label={t(`license.images.itemImage.zoom${imageSizes ? \"Out\" : \"\"}ImageButtonLabel`)}\n            onClick={toggleImageSize}\n            data-expanded={!!imageSizes}\n          >\n            <AddLine />\n          </ExpandButton>\n        )}\n      </ImageWrapper>\n      <EmbedByline\n        type=\"image\"\n        copyright={data.copyright}\n        description={parsedDescription}\n        hideDescription={embedData.hideCaption === \"true\"}\n        hideCopyright={embedData.hideByline === \"true\"}\n        visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n      />\n    </StyledFigure>\n  );\n};\n"],"mappings":"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"}

package/lib/Embed/RelatedContentEmbed.d.ts

@@ -11,6 +11,7 @@ interface Props {
     isOembed?: boolean;
     subject?: string;
     ndlaFrontendDomain?: string;
+    language?: string;
 }
-declare const RelatedContentEmbed: ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export default RelatedContentEmbed;
+export declare const RelatedContentEmbed: ({ embed, isOembed, subject, ndlaFrontendDomain, language }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/Embed/RelatedContentEmbed.js

@@ -1,26 +1,26 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require_ContentType = require('../model/ContentType.js');
 const require_RelatedArticleList = require('../RelatedArticleList/RelatedArticleList.js');
+let __ndla_primitives = require("@ndla/primitives");
+__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
 let react_i18next = require("react-i18next");
 react_i18next = require_rolldown_runtime.__toESM(react_i18next);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/Embed/RelatedContentEmbed.tsx
-const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) => {
+const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain, language }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	if (embed.status === "error") return null;
 	const { data, embedData } = embed;
 	if (embedData.articleId && data) {
-		const typeId = data.resource?.resourceTypes.find((rt) => require_ContentType.contentTypeMapping[rt.id])?.id;
-		const type = typeId ? require_ContentType.contentTypeMapping[typeId] : void 0;
+		const badges = data.resource?.resourceTypes?.map((rt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Badge, { children: rt.translations.find((t$1) => t$1.language === language)?.name ?? rt.name }, rt.id));
 		const url = (data.resource?.contexts.find((c) => c.rootId === subject))?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RelatedArticleList.RelatedArticle, {
 			title: data.article.title?.title ?? "",
 			introduction: data.article.metaDescription?.metaDescription ?? "",
 			target: isOembed ? "_blank" : void 0,
 			to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
-			type
+			badges
 		});
 	}
 	if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RelatedArticleList.RelatedArticle, {
@@ -28,13 +28,12 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
 		introduction: "",
 		to: embedData.url,
 		target: "_blank",
-		type: "external",
+		badges: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Badge, { children: t("contentTypes.external") }),
 		linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
 	});
 	return null;
 };
-var RelatedContentEmbed_default = RelatedContentEmbed;
 
 //#endregion
-exports.default = RelatedContentEmbed_default;
+exports.RelatedContentEmbed = RelatedContentEmbed;
 //# sourceMappingURL=RelatedContentEmbed.js.map

package/lib/Embed/RelatedContentEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","RelatedArticle"],"sources":["../../src/Embed/RelatedContentEmbed.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 { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n  embed: RelatedContentMetaData;\n  isOembed?: boolean;\n  subject?: string;\n  ndlaFrontendDomain?: string;\n}\n\nconst RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return null;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.articleId && data) {\n    const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n    const type = typeId ? contentTypeMapping[typeId] : undefined;\n    const context = data.resource?.contexts.find((c) => c.rootId === subject);\n    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n    return (\n      <RelatedArticle\n        title={data.article.title?.title ?? \"\"}\n        introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n        target={isOembed ? \"_blank\" : undefined}\n        to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n        type={type}\n      />\n    );\n  }\n  if (typeof embedData.url === \"string\") {\n    return (\n      <RelatedArticle\n        title={embedData.title ?? \"\"}\n        introduction=\"\"\n        to={embedData.url}\n        target=\"_blank\"\n        type=\"external\"\n        linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n      />\n    );\n  }\n  return null;\n};\n\nexport default RelatedContentEmbed;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,uBAAuB,EAAE,OAAO,UAAU,SAAS,yBAAgC;CACvF,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,MAAM,OAAOA,uCAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAASA,uCAAmB,UAAU;EAEnD,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,2CAACC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW,WAAW;GAC9B,IAAI,GAAG,sBAAsB,KAAK,OAAO;GACnC;IACN;;AAGN,KAAI,OAAO,UAAU,QAAQ,SAC3B,QACE,2CAACA;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,UAAU,GAAG,EAAE,mBAAmB,CAAC,GAAG,UAAU;GAChD;AAGN,QAAO;;AAGT,kCAAe"}
+{"version":3,"file":"RelatedContentEmbed.js","names":["Badge","t","RelatedArticle"],"sources":["../../src/Embed/RelatedContentEmbed.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 { useTranslation } from \"react-i18next\";\nimport { Badge } from \"@ndla/primitives\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n  embed: RelatedContentMetaData;\n  isOembed?: boolean;\n  subject?: string;\n  ndlaFrontendDomain?: string;\n  language?: string;\n}\n\nexport const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain, language }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return null;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.articleId && data) {\n    const badges = data.resource?.resourceTypes?.map((rt) => (\n      <Badge key={rt.id}>{rt.translations.find((t) => t.language === language)?.name ?? rt.name}</Badge>\n    ));\n    const context = data.resource?.contexts.find((c) => c.rootId === subject);\n    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n    return (\n      <RelatedArticle\n        title={data.article.title?.title ?? \"\"}\n        introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n        target={isOembed ? \"_blank\" : undefined}\n        to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n        badges={badges}\n      />\n    );\n  }\n  if (typeof embedData.url === \"string\") {\n    return (\n      <RelatedArticle\n        title={embedData.title ?? \"\"}\n        introduction=\"\"\n        to={embedData.url}\n        target=\"_blank\"\n        badges={<Badge>{t(\"contentTypes.external\")}</Badge>}\n        linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n      />\n    );\n  }\n  return null;\n};\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,uBAAuB,EAAE,OAAO,UAAU,SAAS,oBAAoB,eAAsB;CACxG,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,eAAe,KAAK,OAChD,2CAACA,qCAAmB,GAAG,aAAa,MAAM,QAAMC,IAAE,aAAa,SAAS,EAAE,QAAQ,GAAG,QAAzE,GAAG,GAAmF,CAClG;EAEF,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,2CAACC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW,WAAW;GAC9B,IAAI,GAAG,sBAAsB,KAAK,OAAO;GACjC;IACR;;AAGN,KAAI,OAAO,UAAU,QAAQ,SAC3B,QACE,2CAACA;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,QAAQ,2CAACF,qCAAO,EAAE,wBAAwB,GAAS;EACnD,UAAU,GAAG,EAAE,mBAAmB,CAAC,GAAG,UAAU;GAChD;AAGN,QAAO"}

package/lib/Embed/UnknownEmbed.d.ts

@@ -9,5 +9,5 @@ import type { MetaData } from "@ndla/types-embed";
 interface Props {
     embed: MetaData<any, any>;
 }
-declare const UnknownEmbed: ({ embed }: Props) => import("react/jsx-runtime").JSX.Element;
-export default UnknownEmbed;
+export declare const UnknownEmbed: ({ embed }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Embed/UnknownEmbed.js

@@ -17,8 +17,7 @@ const UnknownEmbed = ({ embed }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("embed.unsupported", { type: embed.resource }) })
 	});
 };
-var UnknownEmbed_default = UnknownEmbed;
 
 //#endregion
-exports.default = UnknownEmbed_default;
+exports.UnknownEmbed = UnknownEmbed;
 //# sourceMappingURL=UnknownEmbed.js.map

package/lib/Embed/UnknownEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nconst UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n\nexport default UnknownEmbed;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,gBAAgB,EAAE,YAAmB;CACzC,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,2CAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D;;AAIX,2BAAe"}
+{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nexport const UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,MAAa,gBAAgB,EAAE,YAAmB;CAChD,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,2CAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D"}

package/lib/Embed/UuDisclaimerEmbed.d.ts

@@ -12,5 +12,5 @@ interface Props {
     transformedDisclaimer: ReactNode;
     children?: ReactNode;
 }
-declare const UuDisclaimerEmbed: ({ embed, transformedDisclaimer, children }: Props) => import("react/jsx-runtime").JSX.Element;
-export default UuDisclaimerEmbed;
+export declare const UuDisclaimerEmbed: ({ embed, transformedDisclaimer, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Embed/UuDisclaimerEmbed.js

@@ -55,8 +55,7 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 		})]
 	});
 };
-var UuDisclaimerEmbed_default = UuDisclaimerEmbed;
 
 //#endregion
-exports.default = UuDisclaimerEmbed_default;
+exports.UuDisclaimerEmbed = UuDisclaimerEmbed;
 //# sourceMappingURL=UuDisclaimerEmbed.js.map

package/lib/Embed/UuDisclaimerEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"UuDisclaimerEmbed.js","names":["IconButton","ErrorWarningFill","PopoverContent","PopoverRoot","PopoverTrigger","AccessibilityFill","Portal"],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nconst UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n\nexport default UuDisclaimerEmbed;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,yDAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,wDAA0BA,8BAAY,EAC1C,MAAM,EACJ,WAAW,YACZ,EACF,CAAC;AAEF,MAAM,8DAAgCC,+BAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;CACP,EACF,CAAC;AAEF,MAAM,4DAA8BC,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CAC/E,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,4CAAC,gCACC,2CAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;GAClE,EACD,YACiB;AAIxB,QACE,4CAAC;EAAkB,MAAK;EAAS,mBAAgB;aAC/C,4CAACC,4CACC,2CAACC;GAAe;aACd,2CAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;cAE9B,2CAACC,mCAAoB;KACJ;IACJ,EACjB,2CAACC,mCACC,2CAAC,kCACC,2CAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,EACd,2CAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;;AAIxB,gCAAe"}
+{"version":3,"file":"UuDisclaimerEmbed.js","names":["IconButton","ErrorWarningFill","PopoverContent","PopoverRoot","PopoverTrigger","AccessibilityFill","Portal"],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Portal } from \"@ark-ui/react\";\nimport { AccessibilityFill, ErrorWarningFill } from \"@ndla/icons\";\nimport { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { UuDisclaimerMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: UuDisclaimerMetaData;\n  transformedDisclaimer: ReactNode;\n  children?: ReactNode;\n}\n\nconst DisclaimerWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    clear: \"both\",\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    alignSelf: \"flex-end\",\n  },\n});\n\nconst StyledErrorWarningFill = styled(ErrorWarningFill, {\n  base: {\n    alignSelf: \"flex-end\",\n    fill: \"icon.subtle\",\n  },\n});\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n    maxHeight: \"50vh\",\n    overflowY: \"auto\",\n  },\n});\n\nexport const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return (\n      <DisclaimerWrapper>\n        <StyledErrorWarningFill\n          aria-label={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n          title={t(\"embed.embedError\", { type: t(\"embed.type.disclaimer\") })}\n        />\n        {children}\n      </DisclaimerWrapper>\n    );\n  }\n\n  return (\n    <DisclaimerWrapper role=\"region\" data-embed-type=\"uu-disclaimer\">\n      <PopoverRoot>\n        <PopoverTrigger asChild>\n          <StyledIconButton\n            size=\"small\"\n            variant=\"secondary\"\n            aria-label={t(\"uuDisclaimer.title\")}\n            title={t(\"uuDisclaimer.title\")}\n          >\n            <AccessibilityFill />\n          </StyledIconButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent>\n            <div>{transformedDisclaimer}</div>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n      <div data-uu-content=\"\">{children}</div>\n    </DisclaimerWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,yDAA2B,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,wDAA0BA,8BAAY,EAC1C,MAAM,EACJ,WAAW,YACZ,EACF,CAAC;AAEF,MAAM,8DAAgCC,+BAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;CACP,EACF,CAAC;AAEF,MAAM,4DAA8BC,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CACtF,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,4CAAC,gCACC,2CAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,EAAE,CAAC;GAClE,EACD,YACiB;AAIxB,QACE,4CAAC;EAAkB,MAAK;EAAS,mBAAgB;aAC/C,4CAACC,4CACC,2CAACC;GAAe;aACd,2CAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;cAE9B,2CAACC,mCAAoB;KACJ;IACJ,EACjB,2CAACC,mCACC,2CAAC,kCACC,2CAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,EACd,2CAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB"}

package/lib/FactBox/FactBox.d.ts

@@ -12,5 +12,5 @@ interface Props extends ComponentProps<"aside"> {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
-declare const FactBox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
-export default FactBox;
+export declare const FactBox: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/FactBox/FactBox.js

@@ -121,8 +121,7 @@ const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOp
 		})]
 	});
 });
-var FactBox_default = FactBox;
 
 //#endregion
-exports.default = FactBox_default;
+exports.FactBox = FactBox;
 //# sourceMappingURL=FactBox.js.map

package/lib/FactBox/FactBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.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 React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _closed: {\n      _print: {\n        overflow: \"visible\",\n        maxHeight: \"500vh\",\n      },\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _after: {\n      content: '\"\"',\n      textAlign: \"center\",\n      position: \"absolute\",\n      inset: \"0\",\n      transitionProperty: \"opacity\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in-out\",\n      gradientFrom: \"surface.default/20\",\n      gradientTo: \"surface.default/95\",\n      backgroundGradient: \"to-b\",\n      opacity: \"1\",\n      zIndex: \"base\",\n      pointerEvents: \"none\",\n    },\n    _print: {\n      overflow: \"visible\",\n      _after: {\n        display: \"none\",\n      },\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n      _after: {\n        opacity: \"0\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    \"& svg\": {\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _open: {\n      \"& svg\": {\n        transform: \"rotate(180deg)\",\n      },\n    },\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nconst FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledIconButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          aria-controls={contentId}\n          aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n        >\n          <ArrowDownShortLine />\n        </StyledIconButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n\nexport default FactBox;\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,mDAAqB,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,OACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;GACZ,EACF;EACD,WAAW,EACT,WAAW,mBACZ;EACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,UACX,EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,KACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;EAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,QACV;EACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,KACV;EACF;CACF,EACF,CAAC;AAEF,MAAM,wDAA0BA,8BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,kBACZ,EACF;CACD,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAIF,MAAM,iCACH,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,CAAC,OAAO,gCAAwC,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,yCAA8B,CAAC,YAAY;CAClE,MAAM,8BAAmB;CAIzB,MAAM,0CAA+B;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAOC,cAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,4BAAgB;AACd,MAAI,SAAS,OACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,uCAA4B;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,4CAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,oBAAoB,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;;EAG3B,kBAAkB,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;;aAI5B,2CAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,EAAE,WAAW,UAAU,SAAS,UAAU,SAAS;aAE/D,2CAACC,oCAAqB;IACL,EACnB,2CAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;EAGnB;AAED,sBAAe"}
+{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.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 React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _closed: {\n      _print: {\n        overflow: \"visible\",\n        maxHeight: \"500vh\",\n      },\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _after: {\n      content: '\"\"',\n      textAlign: \"center\",\n      position: \"absolute\",\n      inset: \"0\",\n      transitionProperty: \"opacity\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in-out\",\n      gradientFrom: \"surface.default/20\",\n      gradientTo: \"surface.default/95\",\n      backgroundGradient: \"to-b\",\n      opacity: \"1\",\n      zIndex: \"base\",\n      pointerEvents: \"none\",\n    },\n    _print: {\n      overflow: \"visible\",\n      _after: {\n        display: \"none\",\n      },\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n      _after: {\n        opacity: \"0\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    \"& svg\": {\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _open: {\n      \"& svg\": {\n        transform: \"rotate(180deg)\",\n      },\n    },\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledIconButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          aria-controls={contentId}\n          aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n        >\n          <ArrowDownShortLine />\n        </StyledIconButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,mDAAqB,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,OACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;GACZ,EACF;EACD,WAAW,EACT,WAAW,mBACZ;EACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,UACX,EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,KACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;EAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,QACV;EACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,KACV;EACF;CACF,EACF,CAAC;AAEF,MAAM,wDAA0BA,8BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,kBACZ,EACF;CACD,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAIF,MAAa,iCACV,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,CAAC,OAAO,gCAAwC,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,yCAA8B,CAAC,YAAY;CAClE,MAAM,8BAAmB;CAIzB,MAAM,0CAA+B;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAOC,cAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,4BAAgB;AACd,MAAI,SAAS,OACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,uCAA4B;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,4CAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,oBAAoB,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;;EAG3B,kBAAkB,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;;aAI5B,2CAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,EAAE,WAAW,UAAU,SAAS,UAAU,SAAS;aAE/D,2CAACC,oCAAqB;IACL,EACnB,2CAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;EAGnB"}

package/lib/Gloss/Gloss.d.ts

@@ -23,5 +23,5 @@ export interface Props {
     exampleIds?: string;
     exampleLangs?: string;
 }
-declare const Gloss: ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => import("react/jsx-runtime").JSX.Element | null;
-export default Gloss;
+export declare const Gloss: ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/Gloss/Gloss.js

@@ -111,7 +111,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 							children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
 						})
 					})
-				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.default, {
+				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl, {
 					src: audio.src,
 					title: audio.title,
 					type: "gloss"
@@ -136,7 +136,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 						})
 					})
 				})] }),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossExample.default, {
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossExample.GlossExample, {
 					examples,
 					originalLanguage: glossData.originalLanguage
 				}, `gloss-example-${index}`)) })
@@ -144,8 +144,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 		})
 	});
 };
-var Gloss_default = Gloss;
 
 //#endregion
-exports.default = Gloss_default;
+exports.Gloss = Gloss;
 //# sourceMappingURL=Gloss.js.map

package/lib/Gloss/Gloss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport GlossExample from \"./GlossExample\";\nimport SpeechControl from \"../AudioPlayer/SpeechControl\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nconst Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n\nexport default Gloss;\n"],"mappings":"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"}
+{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport { GlossExample } from \"./GlossExample\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}

package/lib/Gloss/GlossExample.d.ts

@@ -10,5 +10,5 @@ interface Props {
     examples: IGlossExampleDTO[];
     originalLanguage: string | undefined;
 }
-declare const GlossExample: ({ examples, originalLanguage }: Props) => import("react/jsx-runtime").JSX.Element;
-export default GlossExample;
+export declare const GlossExample: ({ examples, originalLanguage }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Gloss/GlossExample.js

@@ -44,8 +44,7 @@ const GlossExample = ({ examples, originalLanguage }) => {
 		}) })
 	] }, index)) });
 };
-var GlossExample_default = GlossExample;
 
 //#endregion
-exports.default = GlossExample_default;
+exports.GlossExample = GlossExample;
 //# sourceMappingURL=GlossExample.js.map

package/lib/Gloss/GlossExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlossExample.js","names":["Text","Fragment","examples"],"sources":["../../src/Gloss/GlossExample.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 { Fragment } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\n\ninterface Props {\n  examples: IGlossExampleDTO[];\n  originalLanguage: string | undefined;\n}\n\nconst StyledGlossExample = styled(\"div\", {\n  base: {\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    _first: {\n      background: \"surface.brand.1.subtle\",\n      borderColor: \"stroke.default\",\n      \"& p\": {\n        fontWeight: \"bold\",\n      },\n    },\n  },\n});\n\nconst PinyinText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst GlossExample = ({ examples, originalLanguage }: Props) => {\n  return (\n    <div>\n      {examples.map((examples, index) => (\n        <Fragment key={index}>\n          <StyledGlossExample lang={examples.language}>\n            <Text textStyle=\"label.medium\" lang={examples.language}>\n              {examples.example}\n            </Text>\n          </StyledGlossExample>\n          {!!examples.transcriptions.pinyin && (\n            <StyledGlossExample>\n              <PinyinText data-pinyin=\"\" lang={originalLanguage} textStyle=\"label.medium\">\n                {examples.transcriptions?.pinyin}\n              </PinyinText>\n            </StyledGlossExample>\n          )}\n          {!!examples.transcriptions?.traditional && (\n            <StyledGlossExample>\n              <Text textStyle=\"label.medium\" lang={originalLanguage}>\n                {examples.transcriptions.traditional}\n              </Text>\n            </StyledGlossExample>\n          )}\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n\nexport default GlossExample;\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,0DAA4B,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,QACb;EACF;CACF,EACF,CAAC;AAEF,MAAM,kDAAoBA,wBAAM,EAC9B,MAAM,EACJ,WAAW,UACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,EAAE,UAAU,uBAA8B;AAC9D,QACE,2CAAC,mBACE,SAAS,KAAK,YAAU,UACvB,4CAACC;EACC,2CAAC;GAAmB,MAAMC,WAAS;aACjC,2CAACF;IAAK,WAAU;IAAe,MAAME,WAAS;cAC3CA,WAAS;KACL;IACY;EACpB,CAAC,CAACA,WAAS,eAAe,UACzB,2CAAC,gCACC,2CAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;EAEtB,CAAC,CAACA,WAAS,gBAAgB,eAC1B,2CAAC,gCACC,2CAACF;GAAK,WAAU;GAAe,MAAM;aAClCE,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;;AAIV,2BAAe"}
+{"version":3,"file":"GlossExample.js","names":["Text","Fragment","examples"],"sources":["../../src/Gloss/GlossExample.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 { Fragment } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\n\ninterface Props {\n  examples: IGlossExampleDTO[];\n  originalLanguage: string | undefined;\n}\n\nconst StyledGlossExample = styled(\"div\", {\n  base: {\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    _first: {\n      background: \"surface.brand.1.subtle\",\n      borderColor: \"stroke.default\",\n      \"& p\": {\n        fontWeight: \"bold\",\n      },\n    },\n  },\n});\n\nconst PinyinText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nexport const GlossExample = ({ examples, originalLanguage }: Props) => {\n  return (\n    <div>\n      {examples.map((examples, index) => (\n        <Fragment key={index}>\n          <StyledGlossExample lang={examples.language}>\n            <Text textStyle=\"label.medium\" lang={examples.language}>\n              {examples.example}\n            </Text>\n          </StyledGlossExample>\n          {!!examples.transcriptions.pinyin && (\n            <StyledGlossExample>\n              <PinyinText data-pinyin=\"\" lang={originalLanguage} textStyle=\"label.medium\">\n                {examples.transcriptions?.pinyin}\n              </PinyinText>\n            </StyledGlossExample>\n          )}\n          {!!examples.transcriptions?.traditional && (\n            <StyledGlossExample>\n              <Text textStyle=\"label.medium\" lang={originalLanguage}>\n                {examples.transcriptions.traditional}\n              </Text>\n            </StyledGlossExample>\n          )}\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,0DAA4B,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,QACb;EACF;CACF,EACF,CAAC;AAEF,MAAM,kDAAoBA,wBAAM,EAC9B,MAAM,EACJ,WAAW,UACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,UAAU,uBAA8B;AACrE,QACE,2CAAC,mBACE,SAAS,KAAK,YAAU,UACvB,4CAACC;EACC,2CAAC;GAAmB,MAAMC,WAAS;aACjC,2CAACF;IAAK,WAAU;IAAe,MAAME,WAAS;cAC3CA,WAAS;KACL;IACY;EACpB,CAAC,CAACA,WAAS,eAAe,UACzB,2CAAC,gCACC,2CAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;EAEtB,CAAC,CAACA,WAAS,gBAAgB,eAC1B,2CAAC,gCACC,2CAACF;GAAK,WAAU;GAAe,MAAM;aAClCE,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE"}

package/lib/KeyFigure/KeyFigure.d.ts

@@ -13,5 +13,4 @@ export interface Props {
     title: string;
     subtitle: string;
 }
-declare const KeyFigure: ({ image, title, subtitle }: Props) => import("react/jsx-runtime").JSX.Element;
-export default KeyFigure;
+export declare const KeyFigure: ({ image, title, subtitle }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/KeyFigure/KeyFigure.js

@@ -43,8 +43,7 @@ const KeyFigure = ({ image, title, subtitle }) => {
 		]
 	});
 };
-var KeyFigure_default = KeyFigure;
 
 //#endregion
-exports.default = KeyFigure_default;
+exports.KeyFigure = KeyFigure;
 //# sourceMappingURL=KeyFigure.js.map

package/lib/KeyFigure/KeyFigure.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nconst KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n\nexport default KeyFigure;\n"],"mappings":";;;;;;;;;AAWA,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,WACf;CACF,EACF,CAAC;AAEF,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;CACf,EACF,CAAC;AAEF,MAAM,oDAAsB,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAWF,MAAM,aAAa,EAAE,OAAO,OAAO,eAAsB;AACvD,QACE,4CAAC;EAAe,mBAAgB;;GAC7B,CAAC,CAAC,SAAS,2CAAC;IAAY,KAAK,GAAG,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;GACrG,2CAAC,yDAAoB,MAAM,GAAgB;GAC3C,2CAAC,4DAAuB,SAAS,GAAmB;;GACrC;;AAIrB,wBAAe"}
+{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nexport const KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,WACf;CACF,EACF,CAAC;AAEF,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;CACf,EACF,CAAC;AAEF,MAAM,oDAAsB,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAWF,MAAa,aAAa,EAAE,OAAO,OAAO,eAAsB;AAC9D,QACE,4CAAC;EAAe,mBAAgB;;GAC7B,CAAC,CAAC,SAAS,2CAAC;IAAY,KAAK,GAAG,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;GACrG,2CAAC,yDAAoB,MAAM,GAAgB;GAC3C,2CAAC,4DAAuB,SAAS,GAAmB;;GACrC"}

package/lib/LinkBlock/LinkBlock.d.ts

@@ -10,5 +10,5 @@ interface Props extends Omit<LinkBlockEmbedData, "resource"> {
     path?: string;
     articleLanguage?: string;
 }
-declare const LinkBlock: ({ title, articleLanguage, date, url, path }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LinkBlock;
+export declare const LinkBlock: ({ title, articleLanguage, date, url, path }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/LinkBlock/LinkBlock.js

@@ -75,8 +75,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
 		}), !!date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDateContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightLine, { "data-forward": true })]
 	});
 };
-var LinkBlock_default = LinkBlock;
 
 //#endregion
-exports.default = LinkBlock_default;
+exports.LinkBlock = LinkBlock;
 //# sourceMappingURL=LinkBlock.js.map

package/lib/LinkBlock/LinkBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","getPossiblyRelativeUrl","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,aACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,QACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF,CAAC;AAEF,MAAM,2DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wDAA0BC,2BAAc,EAC5C,MAAM,EACJ,OAAO,eACR,EACF,CAAC;AAOF,MAAM,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CACxE,MAAM,OAAOC,2CAAuB,KAAK,KAAK;CAC9C,MAAM,yCAA8B;AAClC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;GACP,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC;IACxB,CAAC,MAAM,gBAAgB,CAAC;AAC3B,QACE,4CAAC;EAAe,IAAI;EAAM,mBAAgB;aACxC,4CAAC,0BACC,2CAACC;GAAQ;GAAQ;GAAW,WAAU;aACpC,2CAAC;IAAG;6CAAoB,MAAM;KAAM;IAC5B,EACT,CAAC,CAAC,QACD,4CAAC,kCACC,2CAAC,qBAAmB,EACnB,iBACmB,IAEZ,EACd,2CAACC,+BAAe,uBAAe;GAChB;;AAIrB,wBAAe"}
+{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","getPossiblyRelativeUrl","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nexport const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,aACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,QACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;GACT;EACF;CACF,EACF,CAAC;AAEF,MAAM,2DAA6B,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wDAA0BC,2BAAc,EAC5C,MAAM,EACJ,OAAO,eACR,EACF,CAAC;AAOF,MAAa,aAAa,EAAE,OAAO,iBAAiB,MAAM,KAAK,WAAkB;CAC/E,MAAM,OAAOC,2CAAuB,KAAK,KAAK;CAC9C,MAAM,yCAA8B;AAClC,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;GACP,CAAC,CAAC,OAAO,IAAI,KAAK,KAAK,CAAC;IACxB,CAAC,MAAM,gBAAgB,CAAC;AAC3B,QACE,4CAAC;EAAe,IAAI;EAAM,mBAAgB;aACxC,4CAAC,0BACC,2CAACC;GAAQ;GAAQ;GAAW,WAAU;aACpC,2CAAC;IAAG;6CAAoB,MAAM;KAAM;IAC5B,EACT,CAAC,CAAC,QACD,4CAAC,kCACC,2CAAC,qBAAmB,EACnB,iBACmB,IAEZ,EACd,2CAACC,+BAAe,uBAAe;GAChB"}

package/lib/LinkBlock/LinkBlockSection.d.ts

@@ -9,5 +9,5 @@ import { type HTMLAttributes, type ReactNode } from "react";
 interface Props extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
 }
-declare const LinkBlockSection: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export default LinkBlockSection;
+export declare const LinkBlockSection: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/LinkBlock/LinkBlockSection.js

@@ -20,8 +20,7 @@ const LinkBlockSection = ({ children,...rest }) => {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, { children: react.Children.map(children, (child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: child })) })
 	});
 };
-var LinkBlockSection_default = LinkBlockSection;
 
 //#endregion
-exports.default = LinkBlockSection_default;
+exports.LinkBlockSection = LinkBlockSection;
 //# sourceMappingURL=LinkBlockSection.js.map

package/lib/LinkBlock/LinkBlockSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlockSection.js","names":["Children"],"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\nconst 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\nexport default LinkBlockSection;\n"],"mappings":";;;;;;;;;AAeA,MAAM,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,oBAAoB,EAAE,SAAU,GAAG,WAAkB;AACzD,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT;;AAIV,+BAAe"}
+{"version":3,"file":"LinkBlockSection.js","names":["Children"],"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,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,SAAU,GAAG,WAAkB;AAChE,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT"}

package/lib/RelatedArticleList/RelatedArticleList.d.ts

@@ -13,9 +13,9 @@ interface RelatedArticleProps {
     to: string;
     linkInfo?: string;
     target?: string;
-    type?: string;
+    badges?: ReactNode;
 }
-export declare const RelatedArticle: ({ title, introduction, to, linkInfo, target, type, }: RelatedArticleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RelatedArticle: ({ title, introduction, to, badges, linkInfo, target, }: RelatedArticleProps) => import("react/jsx-runtime").JSX.Element;
 interface Props extends ComponentPropsWithoutRef<"section"> {
     children?: ReactElement[];
     articleCount?: number;

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -1,6 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
-const require_ContentType = require('../model/ContentType.js');
-const require_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
+const require_BadgesContainer = require('../Article/BadgesContainer.js');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let __ndla_primitives = require("@ndla/primitives");
@@ -23,11 +22,11 @@ const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {
 	display: "flex",
 	gap: "3xsmall"
 } });
-const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = require_ContentType.contentTypes.SUBJECT_MATERIAL }) => {
+const RelatedArticle = ({ title, introduction, to, badges, linkInfo = "", target = "" }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardRoot, {
 		"data-embed-type": "related-article",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.CardContent, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentTypeBadge.ContentTypeBadge, { contentType: type }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BadgesContainer.BadgesContainer, { children: badges }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardHeading, {
 				asChild: true,
 				consumeCss: true,

package/lib/RelatedArticleList/RelatedArticleList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","linkOverlay","ExternalLinkLine","Text","Button","Children","Heading"],"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 { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n  type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({\n  title,\n  introduction,\n  to,\n  linkInfo = \"\",\n  target = \"\",\n  type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <ContentTypeBadge contentType={type} />\n        <CardHeading asChild consumeCss>\n          <span>\n            <SafeLink\n              unstyled\n              to={to}\n              target={target}\n              rel={linkInfo ? \"noopener noreferrer\" : undefined}\n              css={linkOverlay.raw()}\n            >\n              <StyledSpan>\n                {title}\n                {target === \"_blank\" && <ExternalLinkLine />}\n              </StyledSpan>\n            </SafeLink>\n          </span>\n        </CardHeading>\n        <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":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,kDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,iCAAa,uBACK;AACzB,QACE,2CAACC;EAAS,mBAAgB;YACxB,4CAACC;GACC,2CAACC,6CAAiB,aAAa,OAAQ;GACvC,2CAACC;IAAY;IAAQ;cACnB,2CAAC,oBACC,2CAACC;KACC;KACI;KACI;KACR,KAAK,WAAW,wBAAwB;KACxC,KAAKC,0CAAY,KAAK;eAEtB,4CAAC,yBACE,OACA,WAAW,YAAY,2CAACC,kCAAmB,IACjC;MACJ,GACN;KACK;GACd,2CAACC,0BAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC3D,2CAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oDAAsBC,0BAAQ,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,mCAAwB,MAAM;CAC/C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,sCAA2B,gBAAgBC,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,0CACG,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,4CAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,4CAAC,6BACC,2CAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,2CAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,2CAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,2CAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}
+{"version":3,"file":"RelatedArticleList.js","names":["CardRoot","CardContent","BadgesContainer","CardHeading","SafeLink","linkOverlay","ExternalLinkLine","Text","Button","Children","Heading"],"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 { BadgesContainer } from \"../Article/BadgesContainer\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n  badges?: ReactNode;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({\n  title,\n  introduction,\n  to,\n  badges,\n  linkInfo = \"\",\n  target = \"\",\n}: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <BadgesContainer>{badges}</BadgesContainer>\n        <CardHeading asChild consumeCss>\n          <span>\n            <SafeLink\n              unstyled\n              to={to}\n              target={target}\n              rel={linkInfo ? \"noopener noreferrer\" : undefined}\n              css={linkOverlay.raw()}\n            >\n              <StyledSpan>\n                {title}\n                {target === \"_blank\" && <ExternalLinkLine />}\n              </StyledSpan>\n            </SafeLink>\n          </span>\n        </CardHeading>\n        <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":";;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,kDAAoB,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAa,kBAAkB,EAC7B,OACA,cACA,IACA,QACA,WAAW,IACX,SAAS,SACgB;AACzB,QACE,2CAACA;EAAS,mBAAgB;YACxB,4CAACC;GACC,2CAACC,qDAAiB,SAAyB;GAC3C,2CAACC;IAAY;IAAQ;cACnB,2CAAC,oBACC,2CAACC;KACC;KACI;KACI;KACR,KAAK,WAAW,wBAAwB;KACxC,KAAKC,0CAAY,KAAK;eAEtB,4CAAC,yBACE,OACA,WAAW,YAAY,2CAACC,kCAAmB,IACjC;MACJ,GACN;KACK;GACd,2CAACC,0BAAK,yBAAyB,EAAE,QAAQ,cAAc,GAAI;GAC3D,2CAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;;AAIf,MAAM,sDAAwB,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,uDAAyB,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,OACtB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oDAAsBC,0BAAQ,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,mCAAwB,MAAM;CAC/C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,sCAA2B,gBAAgBC,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,aAAa,CAAC;CACpG,MAAM,0CACG,aAAa,KAAK,CAAC,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;EAAS,CACjC;AAED,QACE,4CAAC;EAAc,GAAI;EAAM,mBAAgB;;GACvC,4CAAC,6BACC,2CAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;cAC7D,2CAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;GACjB,2CAAC,6BAAiB,iBAAiC;GAClD,aAAa,IACZ,2CAAC;IAAa,SAAQ;IAAY,eAAe,aAAa,MAAM,CAAC,EAAE;cACpE,EAAE,eAAe,WAAW,SAAS,SAAS;KAClC,GACb;;GACU"}

package/lib/ResourceBox/ResourceBox.d.ts

@@ -17,4 +17,4 @@ interface Props {
     buttonText: string;
 }
 export declare const ResourceBox: ({ image, title, caption, url, buttonText }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ResourceBox;
+export {};