@ndla/ui 56.0.142-alpha.0 → 56.0.143-alpha.0

package/es/Embed/IframeEmbed.mjs

@@ -1,5 +1,5 @@
-import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.mjs";
-import { ResourceBox_default } from "../ResourceBox/ResourceBox.mjs";
+import EmbedErrorPlaceholder_default from "./EmbedErrorPlaceholder.mjs";
+import ResourceBox_default from "../ResourceBox/ResourceBox.mjs";
 import { useEffect, useRef } from "react";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -65,5 +65,5 @@ const IframeEmbed = ({ embed }) => {
 var IframeEmbed_default = IframeEmbed;
 
 //#endregion
-export { IframeEmbed_default };
+export { IframeEmbed_default as default };
 //# sourceMappingURL=IframeEmbed.mjs.map

package/es/Embed/IframeEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IframeEmbed.mjs","names":["width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.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 { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nconst IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"fullscreen; encrypted-media\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n\nexport default IframeEmbed;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,cAAc,CAAC,EAAE,OAAc,KAAK;CACxC,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;AAEjD,WAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACA,SAAOC,SAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAED,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,IAACC,iCAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,MAAM,GAAG;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK;EACtD,MAAM,MAAM,UAAU,iBAAoB,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;EAAI;AAClE,yBACE,IAAC;GAAa,mBAAgB;6BAC5B,IAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;CAElB;CAED,MAAM,EAAE,OAAO,QAAQ,KAAK,GAAG;CAE/B,MAAM,uBAAuB,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,wBAAwB,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,SAAS,EAAE,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ,IAAI;AAE9F,wBACE,IAAC;EAAa,mBAAgB;4BAC5B,IAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW;AAElB;AAED,0BAAe"}
+{"version":3,"file":"IframeEmbed.mjs","names":["width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.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 { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport ResourceBox from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nconst IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"fullscreen; encrypted-media\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n\nexport default IframeEmbed;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,eAAe,EAAE,YAAmB;CACxC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;AAEjD,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACA,SAAOC,YAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAGD,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,oBAACC,iCAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc;EACpE,MAAM,MAAM,UAAU,QAAQ,SAAY,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;GAAI;AAClE,SACE,oBAAC;GAAa,mBAAgB;aAC5B,oBAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,oBAAC;EAAa,mBAAgB;YAC5B,oBAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW;;AAInB,0BAAe"}

package/es/Embed/ImageEmbed.mjs

@@ -1,5 +1,5 @@
 import { EmbedByline } from "../LicenseByline/EmbedByline.mjs";
-import { EmbedErrorPlaceholder_default } from "./EmbedErrorPlaceholder.mjs";
+import EmbedErrorPlaceholder_default from "./EmbedErrorPlaceholder.mjs";
 import { licenseAttributes } from "../utils/licenseAttributes.mjs";
 import { useMemo, useState } from "react";
 import { Figure, Image } from "@ndla/primitives";
@@ -32,7 +32,6 @@ const getFocalPoint = (data) => {
 		x: focalX,
 		y: focalY
 	};
-	return void 0;
 };
 const getCrop = (data) => {
 	const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
@@ -45,7 +44,6 @@ const getCrop = (data) => {
 		endX: upperLeftX,
 		endY: upperLeftY
 	};
-	return void 0;
 };
 const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
 const ImageWrapper = styled("div", {
@@ -176,5 +174,5 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 var ImageEmbed_default = ImageEmbed;
 
 //#endregion
-export { ImageEmbed_default, getCrop, getFocalPoint };
+export { ImageEmbed_default as default, getCrop, getFocalPoint };
 //# sourceMappingURL=ImageEmbed.mjs.map

package/es/Embed/ImageEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageEmbed.mjs","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","EmbedErrorPlaceholder","sizes"],"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\";\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.mjs","names":["actualSize: FigureSize","EmbedErrorPlaceholder","sizes"],"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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"}

package/es/Embed/InlineTriggerButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineTriggerButton.mjs","names":["event: KeyboardEvent<HTMLSpanElement>"],"sources":["../../src/Embed/InlineTriggerButton.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 ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { composeRefs } from \"@ndla/util\";\n\nconst StyledSpan = styled(\"span\", { base: {} });\n\nexport const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<\"span\">>(\n  ({ onClick, ...props }, ref) => {\n    const spanRef = useRef<HTMLSpanElement>(null);\n\n    // Emulate a button click when pressing Enter or Space\n    const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        spanRef.current?.click();\n      }\n    }, []);\n\n    return (\n      <StyledSpan\n        ref={composeRefs(spanRef, ref)}\n        onKeyUp={onKeyboardEvent}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;AAYA,MAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,CAAE,EAAE,EAAC;AAE/C,MAAa,sBAAsB,WACjC,CAAC,EAAE,QAAS,GAAG,OAAO,EAAE,QAAQ;CAC9B,MAAM,UAAU,OAAwB,KAAK;CAG7C,MAAM,kBAAkB,YAAY,CAACA,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;CAE3B,GAAE,CAAE,EAAC;AAEN,wBACE,IAAC;EACC,KAAK,YAAY,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;AAEL,EACF"}
+{"version":3,"file":"InlineTriggerButton.mjs","names":[],"sources":["../../src/Embed/InlineTriggerButton.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 ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { composeRefs } from \"@ndla/util\";\n\nconst StyledSpan = styled(\"span\", { base: {} });\n\nexport const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<\"span\">>(\n  ({ onClick, ...props }, ref) => {\n    const spanRef = useRef<HTMLSpanElement>(null);\n\n    // Emulate a button click when pressing Enter or Space\n    const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        spanRef.current?.click();\n      }\n    }, []);\n\n    return (\n      <StyledSpan\n        ref={composeRefs(spanRef, ref)}\n        onKeyUp={onKeyboardEvent}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;AAYA,MAAM,aAAa,OAAO,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC;AAE/C,MAAa,sBAAsB,YAChC,EAAE,QAAS,GAAG,SAAS,QAAQ;CAC9B,MAAM,UAAU,OAAwB,KAAK;CAG7C,MAAM,kBAAkB,aAAa,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;IAEzB,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,KAAK,YAAY,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;EAGP"}

package/es/Embed/RelatedContentEmbed.mjs

@@ -11,8 +11,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
 	if (embedData.articleId && data) {
 		const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;
 		const type = typeId ? contentTypeMapping[typeId] : void 0;
-		const context = data.resource?.contexts.find((c) => c.rootId === subject);
-		const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
+		const url = (data.resource?.contexts.find((c) => c.rootId === subject))?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
 		return /* @__PURE__ */ jsx(RelatedArticle, {
 			title: data.article.title?.title ?? "",
 			introduction: data.article.metaDescription?.metaDescription ?? "",
@@ -34,5 +33,5 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
 var RelatedContentEmbed_default = RelatedContentEmbed;
 
 //#endregion
-export { RelatedContentEmbed_default };
+export { RelatedContentEmbed_default as default };
 //# sourceMappingURL=RelatedContentEmbed.mjs.map

package/es/Embed/RelatedContentEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedContentEmbed.mjs","names":[],"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,sBAAsB,CAAC,EAAE,OAAO,UAAU,SAAS,oBAA2B,KAAK;CACvF,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,CAAC,OAAO,mBAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAAS,mBAAmB;EACzC,MAAM,UAAU,KAAK,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,WAAW,QAAQ;EACzE,MAAM,MAAM,SAAS,OAAO,KAAK,UAAU,QAAQ,WAAW,UAAU,UAAU;AAClF,yBACE,IAAC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW;GACnB,KAAK,EAAE,sBAAsB,GAAG,EAAE,OAAO,GAAG;GACtC;IACN;CAEL;AACD,YAAW,UAAU,QAAQ,SAC3B,wBACE,IAAC;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,WAAW,EAAE,EAAE,mBAAmB,CAAC,GAAG,UAAU,UAAU;GAC1D;AAGN,QAAO;AACR;AAED,kCAAe"}
+{"version":3,"file":"RelatedContentEmbed.mjs","names":[],"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,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,MAAM,OAAO,mBAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAAS,mBAAmB,UAAU;EAEnD,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,oBAAC;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,oBAAC;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"}

package/es/Embed/UnknownEmbed.mjs

@@ -16,5 +16,5 @@ const UnknownEmbed = ({ embed }) => {
 var UnknownEmbed_default = UnknownEmbed;
 
 //#endregion
-export { UnknownEmbed_default };
+export { UnknownEmbed_default as default };
 //# sourceMappingURL=UnknownEmbed.mjs.map

package/es/Embed/UnknownEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UnknownEmbed.mjs","names":[],"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,eAAe,CAAC,EAAE,OAAc,KAAK;CACzC,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,wBACE,IAAC;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;4BAC1D,IAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,SAAU,EAAC,GAAQ;GAC1D;AAEV;AAED,2BAAe"}
+{"version":3,"file":"UnknownEmbed.mjs","names":[],"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,MAAM,gBAAgB;AAC9B,QACE,oBAAC;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,oBAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D;;AAIX,2BAAe"}

package/es/Embed/UuDisclaimerEmbed.mjs

@@ -50,5 +50,5 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
 var UuDisclaimerEmbed_default = UuDisclaimerEmbed;
 
 //#endregion
-export { UuDisclaimerEmbed_default };
+export { UuDisclaimerEmbed_default as default };
 //# sourceMappingURL=UuDisclaimerEmbed.mjs.map

package/es/Embed/UuDisclaimerEmbed.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UuDisclaimerEmbed.mjs","names":[],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { 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,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,WAAW,WACZ,EACF,EAAC;AAEF,MAAM,yBAAyB,OAAO,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACP,EACF,EAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,oBAAoB,CAAC,EAAE,OAAO,uBAAuB,UAAiB,KAAK;CAC/E,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBACE,KAAC,gDACC,IAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;GAClE,EACD,YACiB;AAIxB,wBACE,KAAC;EAAkB,MAAK;EAAS,mBAAgB;6BAC/C,KAAC,0CACC,IAAC;GAAe;6BACd,IAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;8BAE9B,IAAC,sBAAoB;KACJ;IACJ,kBACjB,IAAC,oCACC,IAAC,kDACC,IAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,kBACd,IAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;AAEvB;AAED,gCAAe"}
+{"version":3,"file":"UuDisclaimerEmbed.mjs","names":[],"sources":["../../src/Embed/UuDisclaimerEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { 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,oBAAoB,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,EACJ,WAAW,YACZ,EACF,CAAC;AAEF,MAAM,yBAAyB,OAAO,kBAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;CACP,EACF,CAAC;AAEF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,qBAAqB,EAAE,OAAO,uBAAuB,eAAsB;CAC/E,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,qBAAC,gCACC,oBAAC;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,qBAAC;EAAkB,MAAK;EAAS,mBAAgB;aAC/C,qBAAC,0BACC,oBAAC;GAAe;aACd,oBAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;cAE9B,oBAAC,sBAAoB;KACJ;IACJ,EACjB,oBAAC,oBACC,oBAAC,kCACC,oBAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,EACd,oBAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;;AAIxB,gCAAe"}

package/es/FactBox/FactBox.mjs

@@ -117,5 +117,5 @@ const FactBox = forwardRef(({ children, open, onOpenChange, defaultOpen = false,
 var FactBox_default = FactBox;
 
 //#endregion
-export { FactBox_default as FactBox_default$1 };
+export { FactBox_default as default };
 //# sourceMappingURL=FactBox.mjs.map

package/es/FactBox/FactBox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FactBox.mjs","names":[],"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,cAAc,OAAO,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,MACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;EACZ,EACF;EACD,WAAW,EACT,WAAW,kBACZ;CACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,SACX,EACF,EACF,EACF;AACF,EAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,IACnB;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;CAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,OACV;CACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,IACV;CACF;AACF,EACF,EAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,iBACZ,EACF;CACD,QAAQ,EACN,SAAS,OACV;AACF,EACF,EAAC;AAIF,MAAM,UAAU,WACd,CAAC,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,MAAM,EAAE,QAAQ;CACvE,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,CAAC,OAAO,SAAS,GAAG,SAA4B,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,UAAU,YAAY;CAClE,MAAM,YAAY,OAAO;CAIzB,MAAM,iBAAiB,QAAQ,MAAM;AACnC,SAAO,UAAU,WAAW,EAAE,cAAc,MAAM,QAAQ,aAAa,OAAO,GAAI,IAAG,CAAE;CACxF,GAAE,CAAC,KAAM,EAAC;AAEX,WAAU,MAAM;AACd,MAAI,gBACF,UAAS,OAAO,SAAS,SAAS;CAErC,GAAE,CAAC,IAAK,EAAC;CAEV,MAAM,UAAU,YAAY,MAAM;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;CACpC,GAAE,CAAC,OAAO,YAAa,EAAC;AAEzB,wBACE,KAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,mBAAmB,CAAC,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;EAE1B;EACD,iBAAiB,CAAC,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;EAE3B;6BAED,IAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,GAAG,UAAU,UAAU,SAAS,UAAU,OAAO,EAAE;6BAE/D,IAAC,uBAAqB;IACL,kBACnB,IAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;AAEjB,EACF;AAED,sBAAe"}
+{"version":3,"file":"FactBox.mjs","names":[],"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,cAAc,OAAO,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,gBAAgB,OAAO,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,mBAAmB,OAAO,YAAY,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,UAAU,YACb,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,OAAO,YAAY,SAA4B,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC,YAAY;CAClE,MAAM,YAAY,OAAO;CAIzB,MAAM,iBAAiB,cAAc;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAO,MAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,iBAAgB;AACd,MAAI,SAAS,OACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,UAAU,kBAAkB;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,qBAAC;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,oBAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,EAAE,WAAW,UAAU,SAAS,UAAU,SAAS;aAE/D,oBAAC,uBAAqB;IACL,EACnB,oBAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;EAGnB;AAED,sBAAe"}

package/es/FileList/File.mjs

@@ -1,7 +1,7 @@
 import { FileListItem } from "./FileList.mjs";
 import { forwardRef } from "react";
 import { Text } from "@ndla/primitives";
-import { HStack, styled } from "@ndla/styled-system/jsx";
+import { styled } from "@ndla/styled-system/jsx";
 import { useTranslation } from "react-i18next";
 import { DownloadLine } from "@ndla/icons";
 import { SafeLink } from "@ndla/safelink";
@@ -14,48 +14,52 @@ const StyledSafeLink = styled(SafeLink, { base: {
 	textDecoration: "underline",
 	_hover: { textDecoration: "none" }
 } });
-const StyledHStack = styled(HStack, { base: {
+const FileContainer = styled("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
 	position: "relative",
 	paddingBlock: "small",
 	paddingInlineEnd: "medium",
 	paddingInlineStart: "small",
 	width: "100%"
 } });
+const InfoContainer = styled("div", { base: {
+	display: "flex",
+	gap: "xxsmall",
+	alignItems: "center"
+} });
 const File = forwardRef(({ title, url, fileExists, fileType, fileSize,...rest }, ref) => {
 	const { t } = useTranslation();
 	const filename = `${title}-${url.split("/").pop() ?? ""}`;
 	const downloadUrl = `${url}?download=${filename}`;
 	const tooltip = `${t("download")} ${filename}`;
-	return /* @__PURE__ */ jsxs(StyledHStack, {
-		justify: "space-between",
+	return /* @__PURE__ */ jsxs(FileContainer, {
 		ref,
 		...rest,
-		children: [/* @__PURE__ */ jsxs(HStack, {
-			gap: "xxsmall",
-			children: [
-				/* @__PURE__ */ jsx(DownloadLine, {}),
-				fileExists ? /* @__PURE__ */ jsx(StyledSafeLink, {
-					unstyled: true,
-					css: linkOverlay.raw(),
-					to: downloadUrl,
-					title: tooltip,
-					children: title
-				}) : /* @__PURE__ */ jsx(Text, {
-					textStyle: "label.medium",
-					children: title
-				}),
-				/* @__PURE__ */ jsx(Text, {
-					textStyle: "label.large",
-					asChild: true,
-					consumeCss: true,
-					children: /* @__PURE__ */ jsxs("span", { children: [
-						"(",
-						fileType?.toUpperCase(),
-						")"
-					] })
-				})
-			]
-		}), /* @__PURE__ */ jsx(Text, {
+		children: [/* @__PURE__ */ jsxs(InfoContainer, { children: [
+			/* @__PURE__ */ jsx(DownloadLine, {}),
+			fileExists ? /* @__PURE__ */ jsx(StyledSafeLink, {
+				unstyled: true,
+				css: linkOverlay.raw(),
+				to: downloadUrl,
+				title: tooltip,
+				children: title
+			}) : /* @__PURE__ */ jsx(Text, {
+				textStyle: "label.medium",
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				textStyle: "label.large",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsxs("span", { children: [
+					"(",
+					fileType?.toUpperCase(),
+					")"
+				] })
+			})
+		] }), /* @__PURE__ */ jsx(Text, {
 			textStyle: "label.large",
 			asChild: true,
 			consumeCss: true,

package/es/FileList/File.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"File.mjs","names":[],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  url: string;\n  fileExists: boolean;\n  fileType: string;\n  fileSize?: string;\n}\n\nexport interface FileType {\n  title: string;\n  formats: FileFormat[];\n  fileExists?: boolean;\n}\n\nexport interface FileFormat {\n  url: string;\n  fileType: string;\n  tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    textUnderlineOffset: \"2px\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledHStack = styled(HStack, {\n  base: {\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\n  },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n    const downloadUrl = `${url}?download=${filename}`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n        <HStack gap=\"xxsmall\">\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n              {title}\n            </StyledSafeLink>\n          ) : (\n            <Text textStyle=\"label.medium\">{title}</Text>\n          )}\n          <Text textStyle=\"label.large\" asChild consumeCss>\n            <span>({fileType?.toUpperCase()})</span>\n          </Text>\n        </HStack>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </StyledHStack>\n    );\n  },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n  <FileListItem>\n    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n  </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,WAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,KAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,KAAC;GAAO,KAAI;;oBACV,IAAC,iBAAe;IACf,6BACC,IAAC;KAAe;KAAS,KAAK,YAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,IAAC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,IAAC;KAAK,WAAU;KAAc;KAAQ;+BACpC,KAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,IAAC;GAAK,WAAU;GAAc;GAAQ;6BACpC,IAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,IAAC,0CACC,IAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
+{"version":3,"file":"File.mjs","names":[],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  url: string;\n  fileExists: boolean;\n  fileType: string;\n  fileSize?: string;\n}\n\nexport interface FileType {\n  title: string;\n  formats: FileFormat[];\n  fileExists?: boolean;\n}\n\nexport interface FileFormat {\n  url: string;\n  fileType: string;\n  tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    textUnderlineOffset: \"2px\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst FileContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\n  },\n});\n\nconst InfoContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"center\",\n  },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n    const downloadUrl = `${url}?download=${filename}`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <FileContainer ref={ref} {...rest}>\n        <InfoContainer>\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n              {title}\n            </StyledSafeLink>\n          ) : (\n            <Text textStyle=\"label.medium\">{title}</Text>\n          )}\n          <Text textStyle=\"label.large\" asChild consumeCss>\n            <span>({fileType?.toUpperCase()})</span>\n          </Text>\n        </InfoContainer>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </FileContainer>\n    );\n  },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n  <FileListItem>\n    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n  </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,OAAO,YACjB,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI,YAAY;CACvC,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,qBAAC;EAAmB;EAAK,GAAI;aAC3B,qBAAC;GACC,oBAAC,iBAAe;GACf,aACC,oBAAC;IAAe;IAAS,KAAK,YAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cACtE;KACc,GAEjB,oBAAC;IAAK,WAAU;cAAgB;KAAa;GAE/C,oBAAC;IAAK,WAAU;IAAc;IAAQ;cACpC,qBAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,oBAAC;GAAK,WAAU;GAAc;GAAQ;aACpC,oBAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,oBAAC,0BACC,oBAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}

package/es/FileList/FileList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":[],"sources":["../../src/FileList/FileList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;AAcA,MAAa,kBAAkB,OAC7B,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,eAAe,OAC1B,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BAClB;AACF,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,gBAAgB,CAAC,EAAE,SAAU,GAAG,MAAa,KAAK;AAC7D,wBACE,IAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe;AAErB"}
+{"version":3,"file":"FileList.mjs","names":[],"sources":["../../src/FileList/FileList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;AAcA,MAAa,kBAAkB,OAC7B,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,eAAe,OAC1B,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,4BAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,EAAE,SAAU,GAAG,WAAkB;AAC7D,QACE,oBAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe"}

package/es/FileList/PdfFile.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PdfFile.mjs","names":[],"sources":["../../src/FileList/PdfFile.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 { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n  title: string;\n  url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n  },\n});\n\nconst StyledListElement = styled(\"li\", {\n  base: {\n    listStyle: \"none\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n  return (\n    <StyledListElement>\n      <StyledFigure>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h4>{title}</h4>\n        </Heading>\n        <StyledIframe title={title} height=\"1050\" src={url} />\n      </StyledFigure>\n    </StyledListElement>\n  );\n};\n"],"mappings":";;;;;AAgBA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM,EACJ,WAAW,OACZ,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAa,UAAU,CAAC,EAAE,OAAO,KAAY,KAAK;AAChD,wBACE,IAAC,+CACC,KAAC,2CACC,IAAC;EAAQ;EAAQ;EAAW,WAAU;4BACpC,IAAC,kBAAI,QAAW;GACR,kBACV,IAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG;AAEvB"}
+{"version":3,"file":"PdfFile.mjs","names":[],"sources":["../../src/FileList/PdfFile.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 { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n  title: string;\n  url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n  },\n});\n\nconst StyledListElement = styled(\"li\", {\n  base: {\n    listStyle: \"none\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n  return (\n    <StyledListElement>\n      <StyledFigure>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h4>{title}</h4>\n        </Heading>\n        <StyledIframe title={title} height=\"1050\" src={url} />\n      </StyledFigure>\n    </StyledListElement>\n  );\n};\n"],"mappings":";;;;;AAgBA,MAAM,eAAe,OAAO,UAAU,EACpC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM,EACJ,WAAW,QACZ,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAa,WAAW,EAAE,OAAO,UAAiB;AAChD,QACE,oBAAC,+BACC,qBAAC,2BACC,oBAAC;EAAQ;EAAQ;EAAW,WAAU;YACpC,oBAAC,kBAAI,QAAW;GACR,EACV,oBAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG"}

package/es/Gloss/Gloss.mjs

@@ -1,5 +1,5 @@
-import { SpeechControl_default } from "../AudioPlayer/SpeechControl.mjs";
-import { GlossExample_default } from "./GlossExample.mjs";
+import SpeechControl_default from "../AudioPlayer/SpeechControl.mjs";
+import GlossExample_default from "./GlossExample.mjs";
 import { useMemo } from "react";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionRoot, IconButton, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -14,12 +14,10 @@ const getFilteredExamples = (glossData, exampleIds, exampleLangs) => {
 	if (exampleIds !== void 0 || exampleLangs !== void 0) {
 		const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
 		const exampleLangsList = exampleLangs?.split(",") ?? [];
-		const filteredExamples = glossData?.examples?.map((examples, i) => {
+		return (glossData?.examples?.map((examples, i) => {
 			if (exampleIdsList.includes(i.toString())) return examples.filter((e) => exampleLangsList.includes(e.language));
 			return [];
-		}) ?? [];
-		const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);
-		return examplesWithoutEmpty;
+		}) ?? []).filter((el) => !!el.length);
 	}
 	return glossData?.examples ?? [];
 };
@@ -140,5 +138,5 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 var Gloss_default = Gloss;
 
 //#endregion
-export { Gloss_default };
+export { Gloss_default as default };
 //# sourceMappingURL=Gloss.mjs.map

package/es/Gloss/Gloss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.mjs","names":["glossData: IGlossDataDTO | undefined","exampleIds: string | undefined","exampleLangs: string | undefined","SpeechControl","AccordionItemTrigger","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.mjs","names":["SpeechControl","AccordionItemTrigger","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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"}

package/es/Gloss/GlossExample.mjs

@@ -42,5 +42,5 @@ const GlossExample = ({ examples, originalLanguage }) => {
 var GlossExample_default = GlossExample;
 
 //#endregion
-export { GlossExample_default };
+export { GlossExample_default as default };
 //# sourceMappingURL=GlossExample.mjs.map

package/es/Gloss/GlossExample.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlossExample.mjs","names":["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,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,OACb;CACF;AACF,EACF,EAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,SACZ,EACF,EAAC;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,kBAAyB,KAAK;AAC9D,wBACE,IAAC,mBACE,SAAS,IAAI,CAACA,YAAU,0BACvB,KAAC;kBACC,IAAC;GAAmB,MAAMA,WAAS;6BACjC,IAAC;IAAK,WAAU;IAAe,MAAMA,WAAS;cAC3CA,WAAS;KACL;IACY;IAClBA,WAAS,eAAe,0BACzB,IAAC,gDACC,IAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;IAEpBA,WAAS,gBAAgB,+BAC1B,IAAC,gDACC,IAAC;GAAK,WAAU;GAAe,MAAM;aAClCA,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;AAET;AAED,2BAAe"}
+{"version":3,"file":"GlossExample.mjs","names":["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,qBAAqB,OAAO,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,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,UACZ,EACF,CAAC;AAEF,MAAM,gBAAgB,EAAE,UAAU,uBAA8B;AAC9D,QACE,oBAAC,mBACE,SAAS,KAAK,YAAU,UACvB,qBAAC;EACC,oBAAC;GAAmB,MAAMA,WAAS;aACjC,oBAAC;IAAK,WAAU;IAAe,MAAMA,WAAS;cAC3CA,WAAS;KACL;IACY;EACpB,CAAC,CAACA,WAAS,eAAe,UACzB,oBAAC,gCACC,oBAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;EAEtB,CAAC,CAACA,WAAS,gBAAgB,eAC1B,oBAAC,gCACC,oBAAC;GAAK,WAAU;GAAe,MAAM;aAClCA,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;;AAIV,2BAAe"}

package/es/Grid/Grid.mjs.map

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

package/es/Grid/GridParallaxItem.mjs.map

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

package/es/KeyFigure/KeyFigure.mjs

@@ -42,5 +42,5 @@ const KeyFigure = ({ image, title, subtitle }) => {
 var KeyFigure_default = KeyFigure;
 
 //#endregion
-export { KeyFigure_default };
+export { KeyFigure_default as default };
 //# sourceMappingURL=KeyFigure.mjs.map