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

package/lib/Embed/ExternalEmbed.js

@@ -29,7 +29,7 @@ const ExternalEmbed = ({ embed }) => {
 			iframe.height = "";
 		}
 	}, []);
-	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.default, { type: "external" });
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type: "external" });
 	const { embedData, data } = embed;
 	if (embedData.type === "fullscreen") {
 		const image = {
@@ -38,7 +38,7 @@ const ExternalEmbed = ({ embed }) => {
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
 			"data-embed-type": "external",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.default, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox, {
 				image,
 				title: embedData.title ?? "",
 				url: embedData.url,
@@ -53,8 +53,7 @@ const ExternalEmbed = ({ embed }) => {
 		dangerouslySetInnerHTML: { __html: data?.oembed?.html ?? "" }
 	});
 };
-var ExternalEmbed_default = ExternalEmbed;
 
 //#endregion
-exports.default = ExternalEmbed_default;
+exports.ExternalEmbed = ExternalEmbed;
 //# sourceMappingURL=ExternalEmbed.js.map

package/lib/Embed/ExternalEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport ResourceBox from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nconst ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\nexport default ExternalEmbed;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAM,iBAAiB,EAAE,YAAmB;CAC1C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,2BAA6B,KAAK;AAExC,4BAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,yCAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,2CAACD;GAAO,mBAAgB;aACtB,2CAACE;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,2CAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D;;AAGN,4BAAe"}
+{"version":3,"file":"ExternalEmbed.js","names":["Figure","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/ExternalEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const figRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const iframe = figRef.current?.querySelector(\"iframe\");\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const image = {\n      src: data.iframeImage?.image.imageUrl,\n      alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n    };\n    return (\n      <Figure data-embed-type=\"external\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </Figure>\n    );\n  }\n\n  return (\n    <StyledFigure\n      data-embed-type=\"external\"\n      ref={figRef}\n      dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,yCAAsB;CAC9B,MAAM,2BAA6B,KAAK;AAExC,4BAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,SAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,2CAACD;GAAO,mBAAgB;aACtB,2CAACE;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACK;;AAIb,QACE,2CAAC;EACC,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;GAC7D"}

package/lib/Embed/FootnoteEmbed.d.ts

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

package/lib/Embed/FootnoteEmbed.js

@@ -24,8 +24,7 @@ const FootnoteEmbed = ({ embed }) => {
 		}) })
 	});
 };
-var FootnoteEmbed_default = FootnoteEmbed;
 
 //#endregion
-exports.default = FootnoteEmbed_default;
+exports.FootnoteEmbed = FootnoteEmbed;
 //# sourceMappingURL=FootnoteEmbed.js.map

package/lib/Embed/FootnoteEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"FootnoteEmbed.js","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n  base: {\n    \"& a\": {\n      textStyle: \"label.xsmall\",\n      marginInlineStart: \"1\",\n    },\n  },\n});\n\nconst FootnoteEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <div>{t(\"error\")}</div>;\n  }\n\n  return (\n    <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n      <StyledSup>\n        <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n      </StyledSup>\n    </span>\n  );\n};\n\nexport default FootnoteEmbed;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,iDAAmB,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAM,iBAAiB,EAAE,YAAmB;CAC1C,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,2CAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,2CAAC,uBACC,2CAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP;;AAIX,4BAAe"}
+{"version":3,"file":"FootnoteEmbed.js","names":[],"sources":["../../src/Embed/FootnoteEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n  base: {\n    \"& a\": {\n      textStyle: \"label.xsmall\",\n      marginInlineStart: \"1\",\n    },\n  },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <div>{t(\"error\")}</div>;\n  }\n\n  return (\n    <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n      <StyledSup>\n        <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n      </StyledSup>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,MAAM,iDAAmB,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAAC,mBAAK,EAAE,QAAQ,GAAO;AAGhC,QACE,2CAAC;EAAK,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,2CAAC,uBACC,2CAAC;GAAE,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;IAAO,GAC7E;GACP"}

package/lib/Embed/GlossEmbed.js

@@ -18,7 +18,7 @@ const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primiti
 const GlossEmbed = ({ embed, children }) => {
 	const contentRef = (0, react.useRef)(null);
 	if (embed.status === "error" && embed.embedData.type === "inline") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children });
-	if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.default, { type: "gloss" });
+	if (embed.status === "error" || !embed.data.concept.glossData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type: "gloss" });
 	const { concept, visualElement } = embed.data;
 	const audio = visualElement?.status === "success" && visualElement.resource === "audio" ? {
 		src: visualElement.data.audioFile.url,
@@ -31,7 +31,7 @@ const GlossEmbed = ({ embed, children }) => {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ConceptInlineTriggerButton.ConceptInlineTriggerButton, { children })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, {
 			ref: contentRef,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.default, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.Gloss, {
 				glossData: concept.glossData,
 				title: concept.title,
 				audio,
@@ -42,7 +42,7 @@ const GlossEmbed = ({ embed, children }) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Figure, {
 		"data-embed-type": "gloss",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.default, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Gloss.Gloss, {
 			glossData: concept.glossData,
 			title: concept.title,
 			audio,

package/lib/Embed/GlossEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","Gloss"],"sources":["../../src/Embed/GlossEmbed.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 { useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport Gloss from \"../Gloss/Gloss\";\n\ninterface Props {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,4DAA8BA,kCAAgB,EAClD,MAAM,EACJ,OAAO,kBACR,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,+BAAoC,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,2CAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,UAClD,QAAO,2CAACC,yCAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;EACjC,GACD;AAEN,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,4CAACC;EAAY,sBAAsB,WAAW;aAC5C,2CAACC;GAAe;aACd,2CAACC,iEAA4B,WAAsC;IACpD,EACjB,2CAACC,mCACC,2CAAC;GAAqB,KAAK;aACzB,2CAACC,sCACC,2CAACC;IACC,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;KAC9B,GACK;IACY,GAChB;GACG;AAIlB,QACE,2CAACD;EAAO,mBAAgB;YACtB,2CAACC;GACC,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;IACR;GACK"}
+{"version":3,"file":"GlossEmbed.js","names":["PopoverContent","EmbedErrorPlaceholder","PopoverRoot","PopoverTrigger","ConceptInlineTriggerButton","Portal","Figure","Gloss"],"sources":["../../src/Embed/GlossEmbed.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 { useRef, type ReactNode } from \"react\";\nimport { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { Gloss } from \"../Gloss/Gloss\";\n\ninterface Props {\n  embed: ConceptMetaData;\n  children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n  base: {\n    width: \"surface.xlarge\",\n  },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n    return <span>{children}</span>;\n  }\n  if (embed.status === \"error\" || !embed.data.concept.glossData) {\n    return <EmbedErrorPlaceholder type=\"gloss\" />;\n  }\n\n  const { concept, visualElement } = embed.data;\n\n  const audio =\n    visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n      ? {\n          src: visualElement.data.audioFile.url,\n          title: visualElement.data.title.title,\n        }\n      : undefined;\n\n  if (embed.embedData.type === \"inline\") {\n    return (\n      <PopoverRoot initialFocusEl={() => contentRef.current}>\n        <PopoverTrigger asChild>\n          <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n        </PopoverTrigger>\n        <Portal>\n          <StyledPopoverContent ref={contentRef}>\n            <Figure>\n              <Gloss\n                glossData={concept.glossData}\n                title={concept.title}\n                audio={audio}\n                exampleIds={embed.embedData.exampleIds}\n                exampleLangs={embed.embedData.exampleLangs}\n              />\n            </Figure>\n          </StyledPopoverContent>\n        </Portal>\n      </PopoverRoot>\n    );\n  }\n\n  return (\n    <Figure data-embed-type=\"gloss\">\n      <Gloss\n        glossData={concept.glossData}\n        title={concept.title}\n        audio={audio}\n        exampleIds={embed.embedData.exampleIds}\n        exampleLangs={embed.embedData.exampleLangs}\n        variant=\"bordered\"\n      />\n    </Figure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,4DAA8BA,kCAAgB,EAClD,MAAM,EACJ,OAAO,kBACR,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,+BAAoC,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,2CAAC,UAAM,WAAgB;AAEhC,KAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,UAClD,QAAO,2CAACC,uDAAsB,MAAK,UAAU;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;EACjC,GACD;AAEN,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,4CAACC;EAAY,sBAAsB,WAAW;aAC5C,2CAACC;GAAe;aACd,2CAACC,iEAA4B,WAAsC;IACpD,EACjB,2CAACC,mCACC,2CAAC;GAAqB,KAAK;aACzB,2CAACC,sCACC,2CAACC;IACC,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;KAC9B,GACK;IACY,GAChB;GACG;AAIlB,QACE,2CAACD;EAAO,mBAAgB;YACtB,2CAACC;GACC,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;IACR;GACK"}

package/lib/Embed/H5pEmbed.d.ts

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

package/lib/Embed/H5pEmbed.js

@@ -20,7 +20,7 @@ const FigureOembed = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figu
 } });
 const H5pEmbed = ({ embed }) => {
 	const { t } = (0, react_i18next.useTranslation)();
-	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.default, { type: "h5p" });
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type: "h5p" });
 	if (embed.data.oembed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureOembed, {
 		"data-embed-type": "h5p",
 		dangerouslySetInnerHTML: { __html: embed.data.oembed.html ?? "" }
@@ -36,8 +36,7 @@ const H5pEmbed = ({ embed }) => {
 		})
 	});
 };
-var H5pEmbed_default = H5pEmbed;
 
 //#endregion
-exports.default = H5pEmbed_default;
+exports.H5pEmbed = H5pEmbed;
 //# sourceMappingURL=H5pEmbed.js.map

package/lib/Embed/H5pEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"H5pEmbed.js","names":["Figure","EmbedErrorPlaceholder"],"sources":["../../src/Embed/H5pEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: H5pMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nconst FigureOembed = styled(Figure, {\n  base: {\n    width: \"100%\",\n    \"& iframe\": {\n      width: \"100%\",\n    },\n  },\n});\n\nconst H5pEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"h5p\" />;\n  }\n\n  if (embed.data.oembed) {\n    return <FigureOembed data-embed-type=\"h5p\" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? \"\" }} />;\n  }\n\n  const title = embed.embedData.title?.trim()\n    ? embed.embedData.title\n    : embed.data.h5pLicenseInformation?.h5p.title?.trim()\n      ? embed.data.h5pLicenseInformation.h5p.title\n      : embed.embedData.url;\n\n  const titleWithPrefix = `${t(\"embed.type.h5p\")}: ${title}`;\n\n  return (\n    <StyledFigure data-embed-type=\"h5p\">\n      <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />\n    </StyledFigure>\n  );\n};\n\nexport default H5pEmbed;\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,QACR;CACF,EACF,CAAC;AAEF,MAAM,YAAY,EAAE,YAAmB;CACrC,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,yCAAsB,MAAK,QAAQ;AAG7C,KAAI,MAAM,KAAK,OACb,QAAO,2CAAC;EAAa,mBAAgB;EAAM,yBAAyB,EAAE,QAAQ,MAAM,KAAK,OAAO,QAAQ,IAAI;GAAI;CAGlH,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,GACvC,MAAM,UAAU,QAChB,MAAM,KAAK,uBAAuB,IAAI,OAAO,MAAM,GACjD,MAAM,KAAK,sBAAsB,IAAI,QACrC,MAAM,UAAU;CAEtB,MAAM,kBAAkB,GAAG,EAAE,iBAAiB,CAAC,IAAI;AAEnD,QACE,2CAAC;EAAa,mBAAgB;YAC5B,2CAAC;GAAO,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;IAAO;GAC5E;;AAInB,uBAAe"}
+{"version":3,"file":"H5pEmbed.js","names":["Figure","EmbedErrorPlaceholder"],"sources":["../../src/Embed/H5pEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n  embed: H5pMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    \"& iframe\": {\n      height: \"auto\",\n      width: \"100%\",\n    },\n  },\n});\n\nconst FigureOembed = styled(Figure, {\n  base: {\n    width: \"100%\",\n    \"& iframe\": {\n      width: \"100%\",\n    },\n  },\n});\n\nexport const H5pEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"h5p\" />;\n  }\n\n  if (embed.data.oembed) {\n    return <FigureOembed data-embed-type=\"h5p\" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? \"\" }} />;\n  }\n\n  const title = embed.embedData.title?.trim()\n    ? embed.embedData.title\n    : embed.data.h5pLicenseInformation?.h5p.title?.trim()\n      ? embed.data.h5pLicenseInformation.h5p.title\n      : embed.embedData.url;\n\n  const titleWithPrefix = `${t(\"embed.type.h5p\")}: ${title}`;\n\n  return (\n    <StyledFigure data-embed-type=\"h5p\">\n      <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,QACR;CACF,EACF,CAAC;AAEF,MAAa,YAAY,EAAE,YAAmB;CAC5C,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,QAAQ;AAG7C,KAAI,MAAM,KAAK,OACb,QAAO,2CAAC;EAAa,mBAAgB;EAAM,yBAAyB,EAAE,QAAQ,MAAM,KAAK,OAAO,QAAQ,IAAI;GAAI;CAGlH,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,GACvC,MAAM,UAAU,QAChB,MAAM,KAAK,uBAAuB,IAAI,OAAO,MAAM,GACjD,MAAM,KAAK,sBAAsB,IAAI,QACrC,MAAM,UAAU;CAEtB,MAAM,kBAAkB,GAAG,EAAE,iBAAiB,CAAC,IAAI;AAEnD,QACE,2CAAC;EAAa,mBAAgB;YAC5B,2CAAC;GAAO,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;IAAO;GAC5E"}

package/lib/Embed/IframeEmbed.d.ts

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

package/lib/Embed/IframeEmbed.js

@@ -30,7 +30,7 @@ const IframeEmbed = ({ embed }) => {
 			iframe.height = "";
 		}
 	}, []);
-	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.default, { type: "external" });
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, { type: "external" });
 	const { embedData, data } = embed;
 	if (embedData.type === "fullscreen") {
 		const iframeImage = embed.status === "success" ? data.iframeImage : void 0;
@@ -41,7 +41,7 @@ const IframeEmbed = ({ embed }) => {
 		};
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
 			"data-embed-type": "iframe",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.default, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ResourceBox.ResourceBox, {
 				image,
 				title: embedData.title ?? "",
 				url: embedData.url,
@@ -68,8 +68,7 @@ const IframeEmbed = ({ embed }) => {
 		})
 	});
 };
-var IframeEmbed_default = IframeEmbed;
 
 //#endregion
-exports.default = IframeEmbed_default;
+exports.IframeEmbed = IframeEmbed;
 //# sourceMappingURL=IframeEmbed.js.map

package/lib/Embed/IframeEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"IframeEmbed.js","names":["Figure","width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\nimport ResourceBox from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nconst IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"fullscreen; encrypted-media\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n\nexport default IframeEmbed;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,oDAAsB,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,eAAe,EAAE,YAAmB;CACxC,MAAM,EAAE,yCAAsB;CAC9B,MAAM,8BAAsC,KAAK;AAEjD,4BAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACC,SAAOC,YAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAGD,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,yCAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc;EACpE,MAAM,MAAM,UAAU,QAAQ,SAAY,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;GAAI;AAClE,SACE,2CAAC;GAAa,mBAAgB;aAC5B,2CAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,2CAAC;EAAa,mBAAgB;YAC5B,2CAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW;;AAInB,0BAAe"}
+{"version":3,"file":"IframeEmbed.js","names":["Figure","width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n  embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n    border: 0,\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    clear: \"both\",\n  },\n});\n\nexport const IframeEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n\n  useEffect(() => {\n    const iframe = iframeRef.current;\n    if (iframe) {\n      const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n      iframe.width = \"\";\n      iframe.height = \"\";\n    }\n  }, []);\n\n  if (embed.status === \"error\") {\n    return <EmbedErrorPlaceholder type=\"external\" />;\n  }\n\n  const { embedData, data } = embed;\n\n  if (embedData.type === \"fullscreen\") {\n    const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n    const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n    const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n    return (\n      <StyledFigure data-embed-type=\"iframe\">\n        <ResourceBox\n          image={image}\n          title={embedData.title ?? \"\"}\n          url={embedData.url}\n          caption={embedData.caption ?? \"\"}\n          buttonText={t(\"license.other.itemImage.ariaLabel\")}\n        />\n      </StyledFigure>\n    );\n  }\n\n  const { width, height, url } = embedData;\n\n  const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n  const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n  const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n  return (\n    <StyledFigure data-embed-type=\"iframe\">\n      <StyledIframe\n        ref={iframeRef}\n        title={title}\n        aria-label={title}\n        src={url}\n        width={strippedWidth}\n        height={strippedHeight}\n        allow=\"fullscreen; encrypted-media\"\n        loading=\"lazy\"\n      />\n    </StyledFigure>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,oDAAsB,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAa,eAAe,EAAE,YAAmB;CAC/C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,8BAAsC,KAAK;AAEjD,4BAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACC,SAAOC,YAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAGD,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc;EACpE,MAAM,MAAM,UAAU,QAAQ,SAAY,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;GAAI;AAClE,SACE,2CAAC;GAAa,mBAAgB;aAC5B,2CAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,2CAAC;EAAa,mBAAgB;YAC5B,2CAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW"}

package/lib/Embed/ImageEmbed.d.ts

@@ -38,5 +38,5 @@ export declare const getCrop: (data: ImageEmbedData) => {
     endX: number;
     endY: number;
 } | undefined;
-declare const ImageEmbed: ({ embed, previewAlt, lang, renderContext, children }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ImageEmbed;
+export declare const ImageEmbed: ({ embed, previewAlt, lang, renderContext, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Embed/ImageEmbed.js

@@ -126,7 +126,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 		if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? (0, html_react_parser.default)(embed.embedData.caption) : void 0;
 		if (embed.status === "success" && embed.data.caption.caption) return (0, html_react_parser.default)(embed.data.caption.caption);
 	}, [embed, renderContext]);
-	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.default, {
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedErrorPlaceholder.EmbedErrorPlaceholder, {
 		type: "image",
 		figureType: figureProps?.size,
 		float: figureProps?.float
@@ -179,10 +179,9 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 		]
 	});
 };
-var ImageEmbed_default = ImageEmbed;
 
 //#endregion
-exports.default = ImageEmbed_default;
+exports.ImageEmbed = ImageEmbed;
 exports.getCrop = getCrop;
 exports.getFocalPoint = getFocalPoint;
 //# sourceMappingURL=ImageEmbed.js.map

package/lib/Embed/ImageEmbed.js.map

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

package/lib/Embed/RelatedContentEmbed.d.ts

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

package/lib/Embed/RelatedContentEmbed.js

@@ -33,8 +33,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
 	});
 	return null;
 };
-var RelatedContentEmbed_default = RelatedContentEmbed;
 
 //#endregion
-exports.default = RelatedContentEmbed_default;
+exports.RelatedContentEmbed = RelatedContentEmbed;
 //# sourceMappingURL=RelatedContentEmbed.js.map

package/lib/Embed/RelatedContentEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","RelatedArticle"],"sources":["../../src/Embed/RelatedContentEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n  embed: RelatedContentMetaData;\n  isOembed?: boolean;\n  subject?: string;\n  ndlaFrontendDomain?: string;\n}\n\nconst RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return null;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.articleId && data) {\n    const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n    const type = typeId ? contentTypeMapping[typeId] : undefined;\n    const context = data.resource?.contexts.find((c) => c.rootId === subject);\n    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n    return (\n      <RelatedArticle\n        title={data.article.title?.title ?? \"\"}\n        introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n        target={isOembed ? \"_blank\" : undefined}\n        to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n        type={type}\n      />\n    );\n  }\n  if (typeof embedData.url === \"string\") {\n    return (\n      <RelatedArticle\n        title={embedData.title ?? \"\"}\n        introduction=\"\"\n        to={embedData.url}\n        target=\"_blank\"\n        type=\"external\"\n        linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n      />\n    );\n  }\n  return null;\n};\n\nexport default RelatedContentEmbed;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,uBAAuB,EAAE,OAAO,UAAU,SAAS,yBAAgC;CACvF,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,MAAM,OAAOA,uCAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAASA,uCAAmB,UAAU;EAEnD,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,2CAACC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW,WAAW;GAC9B,IAAI,GAAG,sBAAsB,KAAK,OAAO;GACnC;IACN;;AAGN,KAAI,OAAO,UAAU,QAAQ,SAC3B,QACE,2CAACA;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,UAAU,GAAG,EAAE,mBAAmB,CAAC,GAAG,UAAU;GAChD;AAGN,QAAO;;AAGT,kCAAe"}
+{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","RelatedArticle"],"sources":["../../src/Embed/RelatedContentEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n  embed: RelatedContentMetaData;\n  isOembed?: boolean;\n  subject?: string;\n  ndlaFrontendDomain?: string;\n}\n\nexport const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {\n  const { t } = useTranslation();\n  if (embed.status === \"error\") {\n    return null;\n  }\n\n  const { data, embedData } = embed;\n\n  if (embedData.articleId && data) {\n    const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n    const type = typeId ? contentTypeMapping[typeId] : undefined;\n    const context = data.resource?.contexts.find((c) => c.rootId === subject);\n    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n    return (\n      <RelatedArticle\n        title={data.article.title?.title ?? \"\"}\n        introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n        target={isOembed ? \"_blank\" : undefined}\n        to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n        type={type}\n      />\n    );\n  }\n  if (typeof embedData.url === \"string\") {\n    return (\n      <RelatedArticle\n        title={embedData.title ?? \"\"}\n        introduction=\"\"\n        to={embedData.url}\n        target=\"_blank\"\n        type=\"external\"\n        linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n      />\n    );\n  }\n  return null;\n};\n"],"mappings":";;;;;;;;;AAoBA,MAAa,uBAAuB,EAAE,OAAO,UAAU,SAAS,yBAAgC;CAC9F,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,MAAM,OAAOA,uCAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAASA,uCAAmB,UAAU;EAEnD,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,2CAACC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW,WAAW;GAC9B,IAAI,GAAG,sBAAsB,KAAK,OAAO;GACnC;IACN;;AAGN,KAAI,OAAO,UAAU,QAAQ,SAC3B,QACE,2CAACA;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,UAAU,GAAG,EAAE,mBAAmB,CAAC,GAAG,UAAU;GAChD;AAGN,QAAO"}

package/lib/Embed/UnknownEmbed.d.ts

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

package/lib/Embed/UnknownEmbed.js

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

package/lib/Embed/UnknownEmbed.js.map

@@ -1 +1 @@
-{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nconst UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n\nexport default UnknownEmbed;\n"],"mappings":";;;;;;;;;AAgBA,MAAM,gBAAgB,EAAE,YAAmB;CACzC,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,2CAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D;;AAIX,2BAAe"}
+{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n  embed: MetaData<any, any>;\n}\n\nexport const UnknownEmbed = ({ embed }: Props) => {\n  const { t } = useTranslation();\n  return (\n    <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n      <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n    </Text>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,MAAa,gBAAgB,EAAE,YAAmB;CAChD,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,2CAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D"}

package/lib/Embed/UuDisclaimerEmbed.d.ts

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

package/lib/Embed/UuDisclaimerEmbed.js

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

package/lib/Embed/UuDisclaimerEmbed.js.map

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

package/lib/FactBox/FactBox.d.ts

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

package/lib/FactBox/FactBox.js

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

package/lib/FactBox/FactBox.js.map

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

package/lib/Gloss/Gloss.d.ts

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

package/lib/Gloss/Gloss.js

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

package/lib/Gloss/Gloss.js.map

@@ -1 +1 @@
-{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport GlossExample from \"./GlossExample\";\nimport SpeechControl from \"../AudioPlayer/SpeechControl\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nconst Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n\nexport default Gloss;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBACJ,WACA,YACA,iBACyB;AACzB,KAAI,eAAe,UAAa,iBAAiB,QAAW;EAC1D,MAAM,iBAAiB,YAAY,UAAU,EAAE,MAAM,IAAI,IAAI,EAAE;EAC/D,MAAM,mBAAmB,cAAc,MAAM,IAAI,IAAI,EAAE;AAUvD,UAPE,WAAW,UAAU,KAAK,UAAU,MAAM;AACxC,OAAI,eAAe,SAAS,EAAE,UAAU,CAAC,CACvC,QAAO,SAAS,QAAQ,MAAM,iBAAiB,SAAS,EAAE,SAAS,CAAC;AAEtE,UAAO,EAAE;IACT,IAAI,EAAE,EACoC,QAAQ,OAAO,CAAC,CAAC,GAAG,OAAO;;AAG3E,QAAO,WAAW,YAAY,EAAE;;AAGlC,MAAM,iDAAmB,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CACjB,EACF,CAAC;AAEF,MAAM,mDAAqB,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,kEAAoCA,wCAAsB,EAC9D,MAAM,EACJ,eAAe,KAChB,EACF,CAAC;AAEF,MAAM,uDAAyB,WAAW,EACxC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,2DAA6BC,iCAAe;CAChD,MAAM;EACJ,cAAc;EACd,eAAe;EAChB;CACD,iBAAiB,EACf,SAAS,UACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,EAAE;EACV,UAAU;GACR,QAAQ;GACR,aAAa;GACb,cAAc;GACf;EACF,EACF;CACF,CAAC;AAeF,MAAM,SAAS,EAAE,OAAO,WAAW,OAAO,YAAY,cAAc,cAAyC;CAC3G,MAAM,EAAE,yCAAsB;CAE9B,MAAM,sEAAkC,MAAM,UAAU,EAAE,CAAC,MAAM,UAAU,CAAC;CAE5E,MAAM,4CACE,oBAAoB,WAAW,YAAY,aAAa,EAC9D;EAAC;EAAY;EAAc;EAAU,CACtC;AAED,KAAI,CAAC,UAAW,QAAO;AAEvB,QACE,2CAACC;EAAc;EAAS,SAAQ;YAC9B,4CAAC;GAAoB,OAAM;GAAiB;;IAC1C,4CAAC,wBACC,4CAAC;KACC,2CAACC;MAAK,WAAU;MAAe,YAAW;MAAO;MAAQ;MAAW,MAAM,UAAU;gBAClF,2CAAC,oBAAM,UAAU,QAAa;OACzB;KACN,CAAC,CAAC,UAAU,eAAe,eAC1B,2CAACA;MAAK,WAAU;MAAe;MAAQ;gBACrC,2CAAC;OAEC,cAAY,EAAE,mCAAmC;OACjD,MAAM,UAAU;iBAEf,UAAU,eAAe;SAJrB,EAAE,mCAAmC,CAKrC;OACF;KAER,CAAC,CAAC,UAAU,eAAe,UAC1B,2CAACA;MAAK,WAAU;MAAe;MAAQ;gBACrC,2CAAC;OACC,eAAY;OAEZ,cAAY,EAAE,8BAA8B;OAC5C,MAAM,UAAU;iBAEf,UAAU,eAAe;SAJrB,EAAE,8BAA8B,CAKhC;OACF;KAER,CAAC,CAAC,UAAU,aACX,2CAACA;MAAK,WAAU;MAAe;MAAQ;gBACrC,2CAAC;OAAK,cAAY,EAAE,kBAAkB;iBAAG,EAAE,aAAa,UAAU,YAAY,CAAC,aAAa;QAAQ;OAC/F;QAEG,EACb,CAAC,CAAC,OAAO,OAAO,2CAACC;KAAc,KAAK,MAAM;KAAK,OAAO,MAAM;KAAO,MAAK;MAAU,IACzE;IACZ,4CAAC,8BACC,2CAACD;KAAK,WAAU;KAAe;KAAQ;eACrC,2CAAC;MAAK,MAAM,MAAM;gBAAW;OAAmB;MAC3C,EACN,CAAC,CAAC,iBAAiB,UAClB,2CAACE;KAAqB;eACpB,2CAACC;MAAW,SAAQ;MAAW,cAAY,EAAE,qBAAqB;MAAE,OAAO,EAAE,qBAAqB;gBAChG,2CAACC;OAAuB;iBACtB,2CAACC,mCAAmB,MAAK,WAAW;QACb;OACd;MACQ,IAET;IAClB,2CAAC,wCACE,iBAAiB,KAAK,UAAU,UAC/B,2CAACC;KAEW;KACV,kBAAkB,UAAU;OAFvB,iBAAiB,QAGtB,CACF,GACyB;;IACT;GACR;;AAIpB,oBAAe"}
+{"version":3,"file":"Gloss.js","names":["AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { ConceptTitleDTO, IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport { GlossExample } from \"./GlossExample\";\nimport { SpeechControl } from \"../AudioPlayer/SpeechControl\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: ConceptTitleDTO;\n  glossData?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nexport const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const parsedTitle = useMemo(() => parse(title.htmlTitle), [title.htmlTitle]);\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{parsedTitle}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n"],"mappings":"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"}