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

package/lib/Embed/EmbedWrapper.js

@@ -22,7 +22,7 @@ const embedWrapperRecipe = (0, __ndla_styled_system_css.cva)({
 	} }
 });
 const StyledEmbedWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.div, {}, { baseComponent: true });
-const EmbedWrapper = (0, react.forwardRef)(({ noClear, css: cssProp,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmbedWrapper, {
+const EmbedWrapper = (0, react.forwardRef)(({ noClear, css: cssProp, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledEmbedWrapper, {
 	css: __ndla_styled_system_css.css.raw(embedWrapperRecipe.raw({ noClear }), cssProp),
 	"data-embed-wrapper": "",
 	...props,

package/lib/Embed/EmbedWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmbedWrapper.js","names":["ark","css"],"sources":["../../src/Embed/EmbedWrapper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,uDAAyB;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,0DAA4BA,mBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,sCACV,EAAE,SAAS,KAAK,QAAS,GAAG,SAAS,QACpC,2CAAC;CACC,KAAKC,6BAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}
+{"version":3,"file":"EmbedWrapper.js","names":["ark","css"],"sources":["../../src/Embed/EmbedWrapper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\n\nconst embedWrapperRecipe = cva({\n  base: {\n    position: \"relative\",\n  },\n  defaultVariants: {\n    noClear: false,\n  },\n  variants: {\n    noClear: {\n      true: {\n        \"& + [data-embed-wrapper]\": {\n          clear: \"both\",\n        },\n      },\n      false: {\n        clear: \"both\",\n      },\n    },\n  },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n  ({ noClear, css: cssProp, ...props }, ref) => (\n    <StyledEmbedWrapper\n      css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n      data-embed-wrapper=\"\"\n      {...props}\n      ref={ref}\n    />\n  ),\n);\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,uDAAyB;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,0DAA4BA,mBAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,sCACV,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,2CAAC;CACC,KAAKC,6BAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;EACL,CAEL"}

package/lib/Embed/ImageEmbed.d.ts

@@ -19,15 +19,6 @@ export interface Author {
     name: string;
     type: string;
 }
-export declare const getLicenseCredits: (copyright?: {
-    creators?: Author[];
-    rightsholders?: Author[];
-    processors?: Author[];
-}) => {
-    creators: Author[];
-    rightsholders: Author[];
-    processors: Author[];
-};
 export declare const getFocalPoint: (data: ImageEmbedData) => {
     x: number;
     y: number;

package/lib/Embed/ImageEmbed.js

@@ -161,7 +161,8 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 					src: data.image.imageUrl,
 					lang,
 					onClick: figureProps?.float ? toggleImageSize : void 0,
-					variant: "rounded"
+					variant: "rounded",
+					...data.image.dimensions
 				}), (embedData.align === "right" || embedData.align === "left") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandButton, {
 					"aria-label": t(`license.images.itemImage.zoom${expanded ? "Out" : ""}ImageButtonLabel`),
 					onClick: toggleImageSize,

package/lib/Embed/ImageEmbed.js.map

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

package/lib/Embed/InlineTriggerButton.js

@@ -13,7 +13,7 @@ let __ndla_util = require("@ndla/util");
 *
 */
 const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {} });
-const InlineTriggerButton = (0, react.forwardRef)(({ onClick,...props }, ref) => {
+const InlineTriggerButton = (0, react.forwardRef)(({ onClick, ...props }, ref) => {
 	const spanRef = (0, react.useRef)(null);
 	const onKeyboardEvent = (0, react.useCallback)((event) => {
 		if (event.key === "Enter" || event.key === " ") spanRef.current?.click();

package/lib/Embed/InlineTriggerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineTriggerButton.js","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,kDAAoB,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC;AAE/C,MAAa,6CACV,EAAE,QAAS,GAAG,SAAS,QAAQ;CAC9B,MAAM,4BAAkC,KAAK;CAG7C,MAAM,0CAA+B,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;IAEzB,EAAE,CAAC;AAEN,QACE,2CAAC;EACC,kCAAiB,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;EAGP"}
+{"version":3,"file":"InlineTriggerButton.js","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,kDAAoB,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC;AAE/C,MAAa,6CACV,EAAE,SAAS,GAAG,SAAS,QAAQ;CAC9B,MAAM,4BAAkC,KAAK;CAG7C,MAAM,0CAA+B,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;IAEzB,EAAE,CAAC;AAEN,QACE,2CAAC;EACC,kCAAiB,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;EAGP"}

package/lib/FactBox/FactBox.js

@@ -78,7 +78,7 @@ const StyledIconButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.
 	_open: { "& svg": { transform: "rotate(180deg)" } },
 	_print: { display: "none" }
 } });
-const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOpen = false,...rest }, ref) => {
+const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const [state, setState] = (0, react.useState)(defaultOpen ? "open" : "closed");
 	const [overflowHidden, setOverflowHidden] = (0, react.useState)(!defaultOpen);

package/lib/FactBox/FactBox.js.map

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

package/lib/FileList/File.js

@@ -37,7 +37,7 @@ const InfoContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	gap: "xxsmall",
 	alignItems: "center"
 } });
-const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize,...rest }, ref) => {
+const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	const filename = `${title}-${url.split("/").pop() ?? ""}`;
 	const downloadUrl = `${url}?download=${filename}`;

package/lib/FileList/File.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"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,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,8BACV,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,yCAAsB;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,4CAAC;EAAmB;EAAK,GAAI;aAC3B,4CAAC;GACC,2CAACC,8BAAe;GACf,aACC,2CAAC;IAAe;IAAS,KAAKC,0CAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cACtE;KACc,GAEjB,2CAACC;IAAK,WAAU;cAAgB;KAAa;GAE/C,2CAACA;IAAK,WAAU;IAAc;IAAQ;cACpC,4CAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,2CAACA;GAAK,WAAU;GAAc;GAAQ;aACpC,2CAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,2CAACC,2CACC,2CAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
+{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"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,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,8BACV,EAAE,OAAO,KAAK,YAAY,UAAU,UAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,yCAAsB;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,4CAAC;EAAmB;EAAK,GAAI;aAC3B,4CAAC;GACC,2CAACC,8BAAe;GACf,aACC,2CAAC;IAAe;IAAS,KAAKC,0CAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cACtE;KACc,GAEjB,2CAACC;IAAK,WAAU;cAAgB;KAAa;GAE/C,2CAACA;IAAK,WAAU;IAAc;IAAQ;cACpC,4CAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,2CAACA;GAAK,WAAU;GAAc;GAAQ;aACpC,2CAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,2CAACC,2CACC,2CAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}

package/lib/FileList/FileList.js

@@ -27,7 +27,7 @@ const FileListItem = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.li,
 	justifyContent: "space-between",
 	_hover: { backgroundColor: "surface.infoSubtle.hover" }
 } }, { baseComponent: true });
-const FileListEmbed = ({ children,...rest }) => {
+const FileListEmbed = ({ children, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileListWrapper, {
 		...rest,
 		"data-embed-type": "file-list",

package/lib/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","names":["ark"],"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,uDACXA,mBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,oDACXA,mBAAI,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,2CAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe"}
+{"version":3,"file":"FileList.js","names":["ark"],"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,uDACXA,mBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,oDACXA,mBAAI,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,UAAU,GAAG,WAAkB;AAC7D,QACE,2CAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe"}

package/lib/Gloss/Gloss.js

@@ -108,7 +108,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
 						consumeCss: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							"aria-label": t("gloss.wordClass"),
-							children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
+							children: glossData.wordClass.map((wc) => t(`wordClass.${wc}`).toLowerCase()).join(" / ")
 						})
 					})
 				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl, {

package/lib/Gloss/Gloss.js.map

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

package/lib/Grid/Grid.js

@@ -57,7 +57,7 @@ const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
 		} }
 	}
 });
-const Grid = ({ columns, border, children, background = "gray",...rest }) => {
+const Grid = ({ columns, border, children, background = "gray", ...rest }) => {
 	const amountOfColumns = children?.length === 3 ? "3" : columns;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
 		"data-embed-type": "grid",

package/lib/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","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,qDAAuB,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,2CAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}
+{"version":3,"file":"Grid.js","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,qDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,mBAAmB;GAC7C,aAAa,EAAE,iBAAiB,eAAe;GAC/C,MAAM,EAAE,iBAAiB,qBAAqB;GAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AASF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,aAAa,QAAQ,GAAG,WAAsB;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,SAAS,SAAY;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa"}

package/lib/Grid/GridParallaxItem.js

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

package/lib/Grid/GridParallaxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridParallaxItem.js","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,8DAAgC,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,SAAU,GAAG,WAC9C,2CAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,2CAAC,SAAK,WAAe;EACE"}
+{"version":3,"file":"GridParallaxItem.js","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,8DAAgC,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;EACX;CACF,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAC9C,2CAAC;CAAuB,GAAI;CAAM,mBAAgB;WAChD,2CAAC,SAAK,WAAe;EACE"}

package/lib/LicenseByline/EmbedByline.js

@@ -42,7 +42,7 @@ const BaseDescription = (0, __ndla_styled_system_jsx.styled)("div", { base: {
 	display: "inline-flex",
 	whiteSpace: "pre-wrap"
 } });
-const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright,...props }) => {
+const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }) => {
 	const { t } = (0, react_i18next.useTranslation)();
 	if (props.error) {
 		const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
@@ -109,8 +109,11 @@ const LicenseDescription = ({ children, isOpen, setIsOpen }) => {
 const LicenseContainerContent = ({ children, copyright, type }) => {
 	const { t, i18n } = (0, react_i18next.useTranslation)();
 	const license = copyright ? (0, __ndla_licenses.getLicenseByAbbreviation)(copyright.license?.license ?? "", i18n.language) : void 0;
-	const authors = (0, __ndla_licenses.getLicenseCredits)(copyright);
-	const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+	const captionAuthors = [
+		copyright?.creators,
+		copyright?.rightsholders,
+		copyright?.processors
+	].find((authors) => authors?.length) ?? [];
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		children,

package/lib/LicenseByline/EmbedByline.js.map

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

package/lib/LicenseByline/LicenseLink.js

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

package/lib/LicenseByline/LicenseLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,qCAAoD,EAAE,SAAS,SAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,2CAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,QAAO,2CAAC,oBAAM,QAAQ,eAAoB;EAC1C"}
+{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,QACjB;CACD,cAAc,EACZ,gBAAgB,QACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,QACV,EACF;CACF,EACF,CAAC;AAEF,MAAa,qCAAoD,EAAE,SAAS,UAAU,GAAG,QAAQ,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,IAAI,GAAG,EAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,QACE,2CAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,QAAO,2CAAC,oBAAM,QAAQ,eAAoB;EAC1C"}

package/lib/LinkBlock/LinkBlockSection.js

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

package/lib/LinkBlock/LinkBlockSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkBlockSection.js","names":["Children"],"sources":["../../src/LinkBlock/LinkBlockSection.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nexport const LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,SAAU,GAAG,WAAkB;AAChE,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT"}
+{"version":3,"file":"LinkBlockSection.js","names":["Children"],"sources":["../../src/LinkBlock/LinkBlockSection.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nexport const LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,kDAAoB,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,oBAAoB,EAAE,UAAU,GAAG,WAAkB;AAChE,QACE,2CAAC;EAAI,GAAI;EAAM,mBAAgB;YAC7B,2CAAC,wBACEA,eAAS,IAAI,WAAW,UACvB,2CAAC,kBAAI,QAAW,CAChB,GACS;GACT"}

package/lib/RelatedArticleList/RelatedArticleList.js

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

package/lib/RelatedArticleList/RelatedArticleList.js.map

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

package/lib/TagSelector/TagSelector.js

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