@ndla/ui 56.0.123-alpha.0 → 56.0.124-alpha.0

package/lib/Embed/ImageEmbed.js

@@ -1,248 +1,183 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
+const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
+const require_licenseAttributes = require('../utils/licenseAttributes.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getLicenseCredits = exports.getFocalPoint = exports.getCrop = exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _LicenseByline = require("../LicenseByline");
-var _licenseAttributes = require("../utils/licenseAttributes");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const getLicenseCredits = copyright => {
-  return {
-    creators: copyright?.creators ?? [],
-    rightsholders: copyright?.rightsholders ?? [],
-    processors: copyright?.processors ?? []
-  };
-};
-exports.getLicenseCredits = getLicenseCredits;
+//#region src/Embed/ImageEmbed.tsx
 const getFigureProps = (size, float) => {
-  const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
-  const replacedSize = size?.replace("-hide-byline", "") ?? "full";
-  const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
-  return {
-    float: actualFloat,
-    // 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.
-    size: actualSize === "full" && float ? "medium" : actualSize
-  };
+	const actualFloat = float === "left" ? "left" : float === "right" ? "right" : void 0;
+	const replacedSize = size?.replace("-hide-byline", "") ?? "full";
+	const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
+	return {
+		float: actualFloat,
+		size: actualSize === "full" && float ? "medium" : actualSize
+	};
 };
 const getSizes = (size, align) => {
-  if (align && size === "full") {
-    return "(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw";
-  }
-  if (align && size === "small") {
-    return "(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw";
-  }
-  if (align && size === "xsmall") {
-    return "(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw";
-  }
-  return "(min-width: 1024px) 1024px, 100vw";
+	if (align && size === "full") return "(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw";
+	if (align && size === "small") return "(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw";
+	if (align && size === "xsmall") return "(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw";
+	return "(min-width: 1024px) 1024px, 100vw";
 };
-const getFocalPoint = data => {
-  const focalX = Number.parseFloat(data.focalX ?? "");
-  const focalY = Number.parseFloat(data.focalY ?? "");
-  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {
-    return {
-      x: focalX,
-      y: focalY
-    };
-  }
-  return undefined;
+const getFocalPoint = (data) => {
+	const focalX = Number.parseFloat(data.focalX ?? "");
+	const focalY = Number.parseFloat(data.focalY ?? "");
+	if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) return {
+		x: focalX,
+		y: focalY
+	};
+	return void 0;
 };
-exports.getFocalPoint = getFocalPoint;
-const getCrop = data => {
-  const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
-  const lowerRightY = Number.parseFloat(data.lowerRightY ?? "");
-  const upperLeftX = Number.parseFloat(data.upperLeftX ?? "");
-  const upperLeftY = Number.parseFloat(data.upperLeftY ?? "");
-  if (!Number.isNaN(lowerRightX) && !Number.isNaN(lowerRightY) && !Number.isNaN(upperLeftX) && !Number.isNaN(upperLeftY)) {
-    return {
-      startX: lowerRightX,
-      startY: lowerRightY,
-      endX: upperLeftX,
-      endY: upperLeftY
-    };
-  }
-  return undefined;
+const getCrop = (data) => {
+	const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
+	const lowerRightY = Number.parseFloat(data.lowerRightY ?? "");
+	const upperLeftX = Number.parseFloat(data.upperLeftX ?? "");
+	const upperLeftY = Number.parseFloat(data.upperLeftY ?? "");
+	if (!Number.isNaN(lowerRightX) && !Number.isNaN(lowerRightY) && !Number.isNaN(upperLeftX) && !Number.isNaN(upperLeftY)) return {
+		startX: lowerRightX,
+		startY: lowerRightY,
+		endX: upperLeftX,
+		endY: upperLeftY
+	};
+	return void 0;
 };
-exports.getCrop = getCrop;
 const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
-const ImageWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    overflow: "hidden",
-    position: "relative",
-    width: "100%",
-    "& img": {
-      width: "100%"
-    }
-  },
-  variants: {
-    svg: {
-      true: {
-        display: "flex",
-        justifyContent: "center"
-      },
-      false: {}
-    },
-    border: {
-      true: {
-        border: "1px solid",
-        borderColor: "stroke.subtle",
-        borderRadius: "xsmall",
-        "& img": {
-          borderRadius: "0"
-        }
-      },
-      false: {}
-    },
-    expandable: {
-      true: {
-        cursor: "pointer"
-      },
-      false: {}
-    }
-  }
+const ImageWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
+	base: {
+		overflow: "hidden",
+		position: "relative",
+		width: "100%",
+		"& img": { width: "100%" }
+	},
+	variants: {
+		svg: {
+			true: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			false: {}
+		},
+		border: {
+			true: {
+				border: "1px solid",
+				borderColor: "stroke.subtle",
+				borderRadius: "xsmall",
+				"& img": { borderRadius: "0" }
+			},
+			false: {}
+		},
+		expandable: {
+			true: { cursor: "pointer" },
+			false: {}
+		}
+	}
 });
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    zIndex: "docked",
-    _hover: {
-      "& [data-byline-button]": {
-        background: "background.default"
-      },
-      "& button[data-expanded]": {
-        transform: "scale(1.2)"
-      }
-    },
-    "& button[data-expanded='true']": {
-      "& svg": {
-        transform: "rotate(-45deg)"
-      }
-    }
-  }
-});
-const ExpandButton = (0, _jsx2.styled)("button", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    position: "absolute",
-    padding: "0",
-    top: "xsmall",
-    right: "xsmall",
-    width: "medium",
-    height: "medium",
-    border: "2px solid",
-    borderColor: "background.default",
-    transitionProperty: "transform, background-color, color",
-    transitionDuration: "normal",
-    transitionTimingFunction: "ease-out",
-    color: "background.default",
-    backgroundColor: "surface.action",
-    borderRadius: "large",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      transitionTimingFunction: "ease-out"
-    },
-    tabletDown: {
-      display: "none"
-    }
-  }
-}, {
-  defaultProps: {
-    type: "button"
-  }
-});
-const ImageEmbed = _ref => {
-  let {
-    embed,
-    previewAlt,
-    lang,
-    renderContext = "article",
-    children
-  } = _ref;
-  const [imageSizes, setImageSizes] = (0, _react.useState)(undefined);
-  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const parsedDescription = (0, _react.useMemo)(() => {
-    if (embed.embedData.caption || renderContext === "article") {
-      return embed.embedData.caption ? (0, _htmlReactParser.default)(embed.embedData.caption) : undefined;
-    }
-    if (embed.status === "success" && embed.data.caption.caption) {
-      return (0, _htmlReactParser.default)(embed.data.caption.caption);
-    }
-  }, [embed, renderContext]);
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
-      type: "image",
-      figureType: figureProps?.size,
-      float: figureProps?.float
-    });
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  const altText = embedData.alt || "";
-  const sizes = getSizes(embedData.size, embedData.align);
-  const focalPoint = getFocalPoint(embedData);
-  const crop = getCrop(embedData);
-  const toggleImageSize = () => {
-    setImageSizes(sizes => !sizes ? expandedSizes : undefined);
-  };
-  const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
-  const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-    float: figureProps?.float,
-    size: imageSizes ? "full" : figureSize,
-    "data-embed-type": "image",
-    ...licenseProps,
-    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
-      border: embedData.border === "true",
-      expandable: !!figureProps?.float,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Image, {
-        focalPoint: focalPoint,
-        contentType: data.image.contentType,
-        crop: crop,
-        sizes: imageSizes ?? sizes,
-        alt: altText,
-        src: data.image.imageUrl,
-        lang: lang,
-        onClick: figureProps?.float ? toggleImageSize : undefined,
-        variant: "rounded"
-      }), (embedData.align === "right" || embedData.align === "left") && /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandButton, {
-        "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
-        onClick: toggleImageSize,
-        "data-expanded": !!imageSizes,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AddLine, {})
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
-      type: "image",
-      copyright: data.copyright,
-      description: parsedDescription,
-      hideDescription: embedData.hideCaption === "true",
-      hideCopyright: embedData.hideByline === "true",
-      visibleAlt: previewAlt ? embed.embedData.alt : ""
-    })]
-  });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+	zIndex: "docked",
+	_hover: {
+		"& [data-byline-button]": { background: "background.default" },
+		"& button[data-expanded]": { transform: "scale(1.2)" }
+	},
+	"& button[data-expanded='true']": { "& svg": { transform: "rotate(-45deg)" } }
+} });
+const ExpandButton = (0, __ndla_styled_system_jsx.styled)("button", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	cursor: "pointer",
+	position: "absolute",
+	padding: "0",
+	top: "xsmall",
+	right: "xsmall",
+	width: "medium",
+	height: "medium",
+	border: "2px solid",
+	borderColor: "background.default",
+	transitionProperty: "transform, background-color, color",
+	transitionDuration: "normal",
+	transitionTimingFunction: "ease-out",
+	color: "background.default",
+	backgroundColor: "surface.action",
+	borderRadius: "large",
+	"& svg": {
+		transitionProperty: "transform",
+		transitionDuration: "normal",
+		transitionTimingFunction: "ease-out"
+	},
+	tabletDown: { display: "none" }
+} }, { defaultProps: { type: "button" } });
+const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }) => {
+	const [imageSizes, setImageSizes] = (0, react.useState)(void 0);
+	const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
+	const { t } = (0, react_i18next.useTranslation)();
+	const parsedDescription = (0, react.useMemo)(() => {
+		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.EmbedErrorPlaceholder_default, {
+		type: "image",
+		figureType: figureProps?.size,
+		float: figureProps?.float
+	});
+	const { data, embedData } = embed;
+	const altText = embedData.alt || "";
+	const sizes = getSizes(embedData.size, embedData.align);
+	const focalPoint = getFocalPoint(embedData);
+	const crop = getCrop(embedData);
+	const toggleImageSize = () => {
+		setImageSizes((sizes$1) => !sizes$1 ? expandedSizes : void 0);
+	};
+	const licenseProps = require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
+	const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
+		float: figureProps?.float,
+		size: imageSizes ? "full" : figureSize,
+		"data-embed-type": "image",
+		...licenseProps,
+		children: [
+			children,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ImageWrapper, {
+				border: embedData.border === "true",
+				expandable: !!figureProps?.float,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Image, {
+					focalPoint,
+					contentType: data.image.contentType,
+					crop,
+					sizes: imageSizes ?? sizes,
+					alt: altText,
+					src: data.image.imageUrl,
+					lang,
+					onClick: figureProps?.float ? toggleImageSize : void 0,
+					variant: "rounded"
+				}), (embedData.align === "right" || embedData.align === "left") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandButton, {
+					"aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
+					onClick: toggleImageSize,
+					"data-expanded": !!imageSizes,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AddLine, {})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmbedByline.EmbedByline, {
+				type: "image",
+				copyright: data.copyright,
+				description: parsedDescription,
+				hideDescription: embedData.hideCaption === "true",
+				hideCopyright: embedData.hideByline === "true",
+				visibleAlt: previewAlt ? embed.embedData.alt : ""
+			})
+		]
+	});
 };
-var _default = exports.default = ImageEmbed;
+var ImageEmbed_default = ImageEmbed;
+
+//#endregion
+exports.ImageEmbed_default = ImageEmbed_default;
+exports.getCrop = getCrop;
+exports.getFocalPoint = getFocalPoint;
+//# sourceMappingURL=ImageEmbed.js.map

package/lib/Embed/ImageEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEmbed.js","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","Figure","EmbedErrorPlaceholder","sizes","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\";\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":";;;;;;;;;;;;;AA6CA,MAAM,iBAAiB,CAACA,MAAeC,UAAuC;CAC5E,MAAM,cAAc,UAAU,SAAS,SAAS,UAAU,UAAU;CACpE,MAAM,eAAe,MAAM,QAAQ,gBAAgB,GAAG,IAAI;CAC1D,MAAMC,aAA0B,iBAAiB,cAAc,SAAS;AACxE,QAAO;EACL,OAAO;EAEP,MAAM,eAAe,UAAU,QAAQ,WAAW;CACnD;AACF;AAED,MAAM,WAAW,CAACF,MAAeG,UAAmB;AAClD,KAAI,SAAS,SAAS,OACpB,QAAO;AAET,KAAI,SAAS,SAAS,QACpB,QAAO;AAET,KAAI,SAAS,SAAS,SACpB,QAAO;AAET,QAAO;AACR;AAED,MAAa,gBAAgB,CAACC,SAAyB;CACrD,MAAM,SAAS,OAAO,WAAW,KAAK,UAAU,GAAG;CACnD,MAAM,SAAS,OAAO,WAAW,KAAK,UAAU,GAAG;AACnD,MAAK,OAAO,MAAM,OAAO,KAAK,OAAO,MAAM,OAAO,CAChD,QAAO;EAAE,GAAG;EAAQ,GAAG;CAAQ;AAEjC;AACD;AAED,MAAa,UAAU,CAACA,SAAyB;CAC/C,MAAM,cAAc,OAAO,WAAW,KAAK,eAAe,GAAG;CAC7D,MAAM,cAAc,OAAO,WAAW,KAAK,eAAe,GAAG;CAC7D,MAAM,aAAa,OAAO,WAAW,KAAK,cAAc,GAAG;CAC3D,MAAM,aAAa,OAAO,WAAW,KAAK,cAAc,GAAG;AAC3D,MACG,OAAO,MAAM,YAAY,KACzB,OAAO,MAAM,YAAY,KACzB,OAAO,MAAM,WAAW,KACxB,OAAO,MAAM,WAAW,CAEzB,QAAO;EACL,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,MAAM;CACP;AAEH;AACD;AAED,MAAM,gBAAgB;AAEtB,MAAM,eAAe,qCAAO,OAAO;CACjC,MAAM;EACJ,UAAU;EACV,UAAU;EACV,OAAO;EACP,SAAS,EACP,OAAO,OACR;CACF;CACD,UAAU;EACR,KAAK;GACH,MAAM;IACJ,SAAS;IACT,gBAAgB;GACjB;GACD,OAAO,CAAE;EACV;EACD,QAAQ;GACN,MAAM;IACJ,QAAQ;IACR,aAAa;IACb,cAAc;IACd,SAAS,EACP,cAAc,IACf;GACF;GACD,OAAO,CAAE;EACV;EACD,YAAY;GACV,MAAM,EACJ,QAAQ,UACT;GACD,OAAO,CAAE;EACV;CACF;AACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,0BAAQ,EAClC,MAAM;CACJ,QAAQ;CACR,QAAQ;EACN,0BAA0B,EACxB,YAAY,qBACb;EACD,2BAA2B,EACzB,WAAW,aACZ;CACF;CACD,kCAAkC,EAChC,SAAS,EACP,WAAW,iBACZ,EACF;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCACnB,UACA,EACE,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,SAAS;CACT,KAAK;CACL,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,oBAAoB;CACpB,oBAAoB;CACpB,0BAA0B;CAC1B,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;CAC3B;CACD,YAAY,EACV,SAAS,OACV;AACF,EACF,GACD,EAAE,cAAc,EAAE,MAAM,SAAU,EAAE,EACrC;AAED,MAAM,aAAa,CAAC,EAAE,OAAO,YAAY,MAAM,gBAAgB,WAAW,UAAiB,KAAK;CAC9F,MAAM,CAAC,YAAY,cAAc,GAAG,2BAAuC;CAC3E,MAAM,cAAc,eAAe,MAAM,UAAU,MAAM,MAAM,UAAU,MAAM;CAC/E,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAE9B,MAAM,oBAAoB,mBAAQ,MAAM;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,+BAAM,MAAM,UAAU,QAAQ;AAEjE,MAAI,MAAM,WAAW,aAAa,MAAM,KAAK,QAAQ,QACnD,QAAO,+BAAM,MAAM,KAAK,QAAQ,QAAQ;CAE3C,GAAE,CAAC,OAAO,aAAc,EAAC;AAE1B,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC;EAAsB,MAAM;EAAS,YAAY,aAAa;EAAM,OAAO,aAAa;GAAS;CAG3G,MAAM,EAAE,MAAM,WAAW,GAAG;CAE5B,MAAM,UAAU,UAAU,OAAO;CAEjC,MAAM,QAAQ,SAAS,UAAU,MAAM,UAAU,MAAM;CAEvD,MAAM,aAAa,cAAc,UAAU;CAC3C,MAAM,OAAO,QAAQ,UAAU;CAE/B,MAAM,kBAAkB,MAAM;AAC5B,gBAAc,CAACC,aAAYA,UAAQ,uBAA2B;CAC/D;CAED,MAAM,eAAe,4CAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;CAE3F,MAAM,aAAa,aAAa,QAAS,aAAa,QAAQ,WAAY;AAE1E,wBACE,4BAAC;EACC,OAAO,aAAa;EACpB,MAAM,aAAa,SAAS;EAC5B,mBAAgB;EAChB,GAAI;;GAEH;mBACD,4BAAC;IAAa,QAAQ,UAAU,WAAW;IAAQ,cAAc,aAAa;+BAC5E,2BAACC;KACa;KACZ,aAAa,KAAK,MAAM;KAClB;KACN,OAAO,cAAc;KACrB,KAAK;KACL,KAAK,KAAK,MAAM;KACV;KACN,SAAS,aAAa,QAAQ;KAC9B,SAAQ;MACR,GACA,UAAU,UAAU,WAAW,UAAU,UAAU,2BACnD,2BAAC;KACC,cAAY,GAAG,+BAA+B,aAAa,QAAQ,GAAG,kBAAkB;KACxF,SAAS;KACT,mBAAiB;+BAEjB,2BAACC,yBAAU;MACE;KAEJ;mBACf,2BAACC;IACC,MAAK;IACL,WAAW,KAAK;IAChB,aAAa;IACb,iBAAiB,UAAU,gBAAgB;IAC3C,eAAe,UAAU,eAAe;IACxC,YAAY,aAAa,MAAM,UAAU,MAAM;KAC/C;;GACW;AAElB;AAED,yBAAe"}

package/lib/Embed/InlineTriggerButton.js

@@ -1,43 +1,26 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+//#region src/Embed/InlineTriggerButton.tsx
+const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {} });
+const InlineTriggerButton = (0, react.forwardRef)(({ onClick,...props }, ref) => {
+	const spanRef = (0, react.useRef)(null);
+	const onKeyboardEvent = (0, react.useCallback)((event) => {
+		if (event.key === "Enter" || event.key === " ") spanRef.current?.click();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSpan, {
+		ref: (0, __ndla_util.composeRefs)(spanRef, ref),
+		onKeyUp: onKeyboardEvent,
+		onClick,
+		role: "button",
+		tabIndex: 0,
+		...props
+	});
 });
-exports.InlineTriggerButton = void 0;
-var _react = require("react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _util = require("@ndla/util");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 
-const StyledSpan = (0, _jsx2.styled)("span", {
-  base: {}
-});
-const InlineTriggerButton = exports.InlineTriggerButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    onClick,
-    ...props
-  } = _ref;
-  const spanRef = (0, _react.useRef)(null);
-
-  // Emulate a button click when pressing Enter or Space
-  const onKeyboardEvent = (0, _react.useCallback)(event => {
-    if (event.key === "Enter" || event.key === " ") {
-      spanRef.current?.click();
-    }
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
-    ref: (0, _util.composeRefs)(spanRef, ref),
-    onKeyUp: onKeyboardEvent,
-    onClick: onClick,
-    role: "button",
-    tabIndex: 0,
-    ...props
-  });
-});
+//#endregion
+exports.InlineTriggerButton = InlineTriggerButton;
+//# sourceMappingURL=InlineTriggerButton.js.map

package/lib/Embed/InlineTriggerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineTriggerButton.js","names":["event: KeyboardEvent<HTMLSpanElement>"],"sources":["../../src/Embed/InlineTriggerButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { composeRefs } from \"@ndla/util\";\n\nconst StyledSpan = styled(\"span\", { base: {} });\n\nexport const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<\"span\">>(\n  ({ onClick, ...props }, ref) => {\n    const spanRef = useRef<HTMLSpanElement>(null);\n\n    // Emulate a button click when pressing Enter or Space\n    const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        spanRef.current?.click();\n      }\n    }, []);\n\n    return (\n      <StyledSpan\n        ref={composeRefs(spanRef, ref)}\n        onKeyUp={onKeyboardEvent}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa,qCAAO,QAAQ,EAAE,MAAM,CAAE,EAAE,EAAC;AAE/C,MAAa,sBAAsB,sBACjC,CAAC,EAAE,QAAS,GAAG,OAAO,EAAE,QAAQ;CAC9B,MAAM,UAAU,kBAAwB,KAAK;CAG7C,MAAM,kBAAkB,uBAAY,CAACA,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;CAE3B,GAAE,CAAE,EAAC;AAEN,wBACE,2BAAC;EACC,KAAK,6BAAY,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;AAEL,EACF"}

package/lib/Embed/RelatedContentEmbed.js

@@ -1,61 +1,39 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_ContentType = require('../model/ContentType.js');
+const require_RelatedArticleList = require('../RelatedArticleList/RelatedArticleList.js');
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _ContentType = require("../model/ContentType");
-var _RelatedArticleList = require("../RelatedArticleList/RelatedArticleList");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const RelatedContentEmbed = _ref => {
-  let {
-    embed,
-    isOembed,
-    subject,
-    ndlaFrontendDomain
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return null;
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  if (embedData.articleId && data) {
-    const typeId = data.resource?.resourceTypes.find(rt => _ContentType.contentTypeMapping[rt.id])?.id;
-    const type = typeId ? _ContentType.contentTypeMapping[typeId] : undefined;
-    const context = data.resource?.contexts.find(c => c.rootId === subject);
-    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
-      title: data.article.title?.title ?? "",
-      introduction: data.article.metaDescription?.metaDescription ?? "",
-      target: isOembed ? "_blank" : undefined,
-      to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
-      type: type
-    });
-  }
-  if (typeof embedData.url === "string") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
-      title: embedData.title ?? "",
-      introduction: "",
-      to: embedData.url,
-      target: "_blank",
-      type: "external",
-      linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
-    });
-  }
-  return null;
+//#region src/Embed/RelatedContentEmbed.tsx
+const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	if (embed.status === "error") return null;
+	const { data, embedData } = embed;
+	if (embedData.articleId && data) {
+		const typeId = data.resource?.resourceTypes.find((rt) => require_ContentType.contentTypeMapping[rt.id])?.id;
+		const type = typeId ? require_ContentType.contentTypeMapping[typeId] : void 0;
+		const context = data.resource?.contexts.find((c) => c.rootId === subject);
+		const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RelatedArticleList.RelatedArticle, {
+			title: data.article.title?.title ?? "",
+			introduction: data.article.metaDescription?.metaDescription ?? "",
+			target: isOembed ? "_blank" : void 0,
+			to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
+			type
+		});
+	}
+	if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RelatedArticleList.RelatedArticle, {
+		title: embedData.title ?? "",
+		introduction: "",
+		to: embedData.url,
+		target: "_blank",
+		type: "external",
+		linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
+	});
+	return null;
 };
-var _default = exports.default = RelatedContentEmbed;
+var RelatedContentEmbed_default = RelatedContentEmbed;
+
+//#endregion
+exports.RelatedContentEmbed_default = RelatedContentEmbed_default;
+//# sourceMappingURL=RelatedContentEmbed.js.map

package/lib/Embed/RelatedContentEmbed.js.map

@@ -0,0 +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,sBAAsB,CAAC,EAAE,OAAO,UAAU,SAAS,oBAA2B,KAAK;CACvF,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,CAAC,OAAOA,uCAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAASA,uCAAmB;EACzC,MAAM,UAAU,KAAK,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,WAAW,QAAQ;EACzE,MAAM,MAAM,SAAS,OAAO,KAAK,UAAU,QAAQ,WAAW,UAAU,UAAU;AAClF,yBACE,2BAACC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW;GACnB,KAAK,EAAE,sBAAsB,GAAG,EAAE,OAAO,GAAG;GACtC;IACN;CAEL;AACD,YAAW,UAAU,QAAQ,SAC3B,wBACE,2BAACA;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,WAAW,EAAE,EAAE,mBAAmB,CAAC,GAAG,UAAU,UAAU;GAC1D;AAGN,QAAO;AACR;AAED,kCAAe"}