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

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":"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"}

package/lib/Embed/InlineTriggerButton.js

@@ -0,0 +1,26 @@
+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"));
+
+//#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
+	});
+});
+
+//#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

@@ -0,0 +1,39 @@
+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"));
+
+//#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 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"}

package/lib/Embed/UnknownEmbed.js

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Embed/UnknownEmbed.tsx
+const UnknownEmbed = ({ embed }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+		color: "text.error",
+		asChild: true,
+		consumeCss: true,
+		"data-embed-type": "unknown",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("embed.unsupported", { type: embed.resource }) })
+	});
+};
+var UnknownEmbed_default = UnknownEmbed;
+
+//#endregion
+exports.UnknownEmbed_default = UnknownEmbed_default;
+//# sourceMappingURL=UnknownEmbed.js.map

package/lib/Embed/UnknownEmbed.js.map

@@ -0,0 +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,eAAe,CAAC,EAAE,OAAc,KAAK;CACzC,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,wBACE,2BAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;4BAC1D,2BAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,SAAU,EAAC,GAAQ;GAC1D;AAEV;AAED,2BAAe"}

package/lib/Embed/UuDisclaimerEmbed.js

@@ -0,0 +1,55 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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 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"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/Embed/UuDisclaimerEmbed.tsx
+const DisclaimerWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "3xsmall",
+	clear: "both"
+} });
+const StyledIconButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: { alignSelf: "flex-end" } });
+const StyledErrorWarningFill = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.ErrorWarningFill, { base: {
+	alignSelf: "flex-end",
+	fill: "icon.subtle"
+} });
+const StyledPopoverContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.PopoverContent, { base: {
+	width: "surface.xlarge",
+	maxHeight: "50vh",
+	overflowY: "auto"
+} });
+const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DisclaimerWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledErrorWarningFill, {
+		"aria-label": t("embed.embedError", { type: t("embed.type.disclaimer") }),
+		title: t("embed.embedError", { type: t("embed.type.disclaimer") })
+	}), children] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DisclaimerWrapper, {
+		role: "region",
+		"data-embed-type": "uu-disclaimer",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.PopoverRoot, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
+				size: "small",
+				variant: "secondary",
+				"aria-label": t("uuDisclaimer.title"),
+				title: t("uuDisclaimer.title"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AccessibilityFill, {})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: transformedDisclaimer }) }) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-uu-content": "",
+			children
+		})]
+	});
+};
+var UuDisclaimerEmbed_default = UuDisclaimerEmbed;
+
+//#endregion
+exports.UuDisclaimerEmbed_default = UuDisclaimerEmbed_default;
+//# sourceMappingURL=UuDisclaimerEmbed.js.map

package/lib/Embed/UuDisclaimerEmbed.js.map

@@ -0,0 +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,oBAAoB,qCAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOA,8BAAY,EAC1C,MAAM,EACJ,WAAW,WACZ,EACF,EAAC;AAEF,MAAM,yBAAyB,qCAAOC,+BAAkB,EACtD,MAAM;CACJ,WAAW;CACX,MAAM;AACP,EACF,EAAC;AAEF,MAAM,uBAAuB,qCAAOC,kCAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,oBAAoB,CAAC,EAAE,OAAO,uBAAuB,UAAiB,KAAK;CAC/E,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBACE,4BAAC,gDACC,2BAAC;EACC,cAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;EACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,wBAAwB,CAAE,EAAC;GAClE,EACD,YACiB;AAIxB,wBACE,4BAAC;EAAkB,MAAK;EAAS,mBAAgB;6BAC/C,4BAACC,4DACC,2BAACC;GAAe;6BACd,2BAAC;IACC,MAAK;IACL,SAAQ;IACR,cAAY,EAAE,qBAAqB;IACnC,OAAO,EAAE,qBAAqB;8BAE9B,2BAACC,mCAAoB;KACJ;IACJ,kBACjB,2BAACC,mDACC,2BAAC,kDACC,2BAAC,mBAAK,wBAA4B,GACb,GAChB,IACG,kBACd,2BAAC;GAAI,mBAAgB;GAAI;IAAe;GACtB;AAEvB;AAED,gCAAe"}

package/lib/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,55 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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 __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/ErrorMessage/ErrorMessage.tsx
+const StyledErrorMessage = (0, __ndla_styled_system_jsx.styled)("article", { base: {
+	textAlign: "center",
+	"& a": { color: "text.strong" },
+	"& h1": { marginTop: "0" }
+} });
+const IllustrationWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	justifyContent: "center",
+	marginBottom: "medium",
+	tablet: { marginTop: "xxlarge" }
+} });
+const Description = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: {
+	marginBottom: "medium",
+	tablet: { marginBottom: "xxlarge" }
+} });
+const CustomElementWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: { marginBlock: "xxlarge" } });
+const MessageWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: { marginTop: "3xsmall" } });
+const ErrorMessage = ({ children, messages, illustration, illustrationElement, customElement }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledErrorMessage, { children: [
+	!!illustration && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IllustrationWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: illustration.url,
+		alt: illustration.altText
+	}) }),
+	!!illustrationElement && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IllustrationWrapper, { children: illustrationElement }),
+	/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", { children: messages.title }),
+	!!messages.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Description, { children: messages.description }),
+	!!customElement && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomElementWrapper, { children: customElement }),
+	!!messages.linksTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: messages.linksTitle }),
+	!!messages.back && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+		to: `/#${encodeURI(messages.back)}`,
+		onClick: () => window.history.back(),
+		children: messages.back
+	}),
+	!!messages.goToFrontPage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+		to: "/",
+		children: messages.goToFrontPage
+	}) }),
+	!!messages.logInFailed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+		to: "/minndla",
+		children: messages.logInFailed
+	}) }),
+	children
+] });
+var ErrorMessage_default = ErrorMessage;
+
+//#endregion
+exports.ErrorMessage_default = ErrorMessage_default;
+//# sourceMappingURL=ErrorMessage.js.map

package/lib/ErrorMessage/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","names":["Text","SafeLink"],"sources":["../../src/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2019-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 { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\n// TODO: This has not been redesignet yet. This is just a rewrite of the previous design in panda\n\nconst StyledErrorMessage = styled(\"article\", {\n  base: {\n    textAlign: \"center\",\n    \"& a\": {\n      color: \"text.strong\",\n    },\n    \"& h1\": {\n      marginTop: \"0\",\n    },\n  },\n});\n\nconst IllustrationWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    marginBottom: \"medium\",\n    tablet: {\n      marginTop: \"xxlarge\",\n    },\n  },\n});\n\nconst Description = styled(Text, {\n  base: {\n    marginBottom: \"medium\",\n    tablet: {\n      marginBottom: \"xxlarge\",\n    },\n  },\n});\n\nconst CustomElementWrapper = styled(\"div\", {\n  base: {\n    marginBlock: \"xxlarge\",\n  },\n});\n\nconst MessageWrapper = styled(\"div\", {\n  base: {\n    marginTop: \"3xsmall\",\n  },\n});\n\ninterface Props {\n  messages: {\n    title: string;\n    description?: string;\n    linksTitle?: string;\n    back?: string;\n    goToFrontPage?: string;\n    logInFailed?: string;\n  };\n  illustration?: {\n    url: string;\n    altText: string;\n  };\n  illustrationElement?: ReactNode;\n  customElement?: ReactNode;\n  children?: ReactNode;\n}\nexport const ErrorMessage = ({ children, messages, illustration, illustrationElement, customElement }: Props) => (\n  <StyledErrorMessage>\n    {!!illustration && (\n      <IllustrationWrapper>\n        <img src={illustration.url} alt={illustration.altText} />\n      </IllustrationWrapper>\n    )}\n    {!!illustrationElement && <IllustrationWrapper>{illustrationElement}</IllustrationWrapper>}\n    <h1>{messages.title}</h1>\n    {!!messages.description && <Description>{messages.description}</Description>}\n    {!!customElement && <CustomElementWrapper>{customElement}</CustomElementWrapper>}\n    {!!messages.linksTitle && <h2>{messages.linksTitle}</h2>}\n    {!!messages.back && (\n      <SafeLink to={`/#${encodeURI(messages.back)}`} onClick={() => window.history.back()}>\n        {messages.back}\n      </SafeLink>\n    )}\n    {!!messages.goToFrontPage && (\n      <MessageWrapper>\n        <SafeLink to=\"/\">{messages.goToFrontPage}</SafeLink>\n      </MessageWrapper>\n    )}\n    {!!messages.logInFailed && (\n      <MessageWrapper>\n        <SafeLink to=\"/minndla\">{messages.logInFailed}</SafeLink>\n      </MessageWrapper>\n    )}\n    {children}\n  </StyledErrorMessage>\n);\n\nexport default ErrorMessage;\n"],"mappings":";;;;;;;;AAeA,MAAM,qBAAqB,qCAAO,WAAW,EAC3C,MAAM;CACJ,WAAW;CACX,OAAO,EACL,OAAO,cACR;CACD,QAAQ,EACN,WAAW,IACZ;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,qCAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,cAAc;CACd,QAAQ,EACN,WAAW,UACZ;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAOA,wBAAM,EAC/B,MAAM;CACJ,cAAc;CACd,QAAQ,EACN,cAAc,UACf;AACF,EACF,EAAC;AAEF,MAAM,uBAAuB,qCAAO,OAAO,EACzC,MAAM,EACJ,aAAa,UACd,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM,EACJ,WAAW,UACZ,EACF,EAAC;AAmBF,MAAa,eAAe,CAAC,EAAE,UAAU,UAAU,cAAc,qBAAqB,eAAsB,qBAC1G,4BAAC;GACI,gCACD,2BAAC,iDACC,2BAAC;EAAI,KAAK,aAAa;EAAK,KAAK,aAAa;GAAW,GACrC;GAErB,uCAAuB,2BAAC,iCAAqB,sBAA0C;iBAC1F,2BAAC,kBAAI,SAAS,QAAW;GACtB,SAAS,+BAAe,2BAAC,yBAAa,SAAS,cAA0B;GACzE,iCAAiB,2BAAC,kCAAsB,gBAAqC;GAC7E,SAAS,8BAAc,2BAAC,kBAAI,SAAS,aAAgB;GACrD,SAAS,wBACV,2BAACC;EAAS,KAAK,IAAI,UAAU,SAAS,KAAK,CAAC;EAAG,SAAS,MAAM,OAAO,QAAQ,MAAM;YAChF,SAAS;GACD;GAEV,SAAS,iCACV,2BAAC,4CACC,2BAACA;EAAS,IAAG;YAAK,SAAS;GAAyB,GACrC;GAEhB,SAAS,+BACV,2BAAC,4CACC,2BAACA;EAAS,IAAG;YAAY,SAAS;GAAuB,GAC1C;CAElB;IACkB;AAGvB,2BAAe"}

package/lib/ErrorMessage/index.js

@@ -0,0 +1,8 @@
+const require_ErrorMessage = require('./ErrorMessage.js');
+
+//#region src/ErrorMessage/index.ts
+var ErrorMessage_default$1 = require_ErrorMessage.ErrorMessage_default;
+
+//#endregion
+exports.ErrorMessage_default = ErrorMessage_default$1;
+//# sourceMappingURL=index.js.map

package/lib/ErrorMessage/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ErrorMessage"],"sources":["../../src/ErrorMessage/index.ts"],"sourcesContent":["/**\n * Copyright (c) 2019-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 ErrorMessage from \"./ErrorMessage\";\n\nexport default ErrorMessage;\n"],"mappings":";;;AAUA,6BAAeA"}

package/lib/FactBox/FactBox.js

@@ -0,0 +1,122 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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 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"));
+
+//#region src/FactBox/FactBox.tsx
+const StyledAside = (0, __ndla_styled_system_jsx.styled)("aside", {
+	base: {
+		position: "relative",
+		padding: "medium",
+		display: "grid",
+		gridTemplateRows: "0fr",
+		transitionProperty: "grid-template-rows",
+		transitionDuration: "slow",
+		transitionTimingFunction: "ease-in-out",
+		justifyItems: "center",
+		border: "1px solid",
+		borderColor: "stroke.default",
+		borderRadius: "xsmall",
+		clear: "both",
+		_open: { gridTemplateRows: "1fr" },
+		_closed: { _print: {
+			overflow: "visible",
+			maxHeight: "500vh"
+		} },
+		"& > div": { minHeight: "surface.3xsmall" }
+	},
+	variants: { overflowHidden: { true: { "& > div": { overflow: "hidden" } } } }
+});
+const StyledContent = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	position: "relative",
+	width: "100%",
+	"& :first-child": { marginBlockStart: "0" },
+	_after: {
+		content: "\"\"",
+		textAlign: "center",
+		position: "absolute",
+		inset: "0",
+		transitionProperty: "opacity",
+		transitionDuration: "slow",
+		transitionTimingFunction: "ease-in-out",
+		gradientFrom: "surface.default/20",
+		gradientTo: "surface.default/95",
+		backgroundGradient: "to-b",
+		opacity: "1",
+		zIndex: "base",
+		pointerEvents: "none"
+	},
+	_print: {
+		overflow: "visible",
+		_after: { display: "none" }
+	},
+	_open: {
+		paddingBlockEnd: "xsmall",
+		_after: { opacity: "0" }
+	}
+} });
+const StyledIconButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.IconButton, { base: {
+	position: "absolute",
+	bottom: "-medium",
+	zIndex: "base",
+	"& svg": {
+		transitionProperty: "transform",
+		transitionTimingFunction: "ease-in-out",
+		transitionDuration: "fast"
+	},
+	_open: { "& svg": { transform: "rotate(180deg)" } },
+	_print: { display: "none" }
+} });
+const FactBox = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOpen = false,...rest }, ref) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const [state, setState] = (0, react.useState)(defaultOpen ? "open" : "closed");
+	const [overflowHidden, setOverflowHidden] = (0, react.useState)(!defaultOpen);
+	const contentId = (0, react.useId)();
+	const inertAttribute = (0, react.useMemo)(() => {
+		return state === "closed" ? { inert: typeof react.default.use === "function" ? true : "" } : {};
+	}, [state]);
+	(0, react.useEffect)(() => {
+		if (open !== void 0) setState(open ? "open" : "closed");
+	}, [open]);
+	const onClick = (0, react.useCallback)(() => {
+		const newState = state === "open" ? "closed" : "open";
+		setState(newState);
+		onOpenChange?.(newState === "open");
+	}, [state, onOpenChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledAside, {
+		"data-state": state,
+		"data-embed-type": "factbox",
+		...rest,
+		ref,
+		overflowHidden,
+		onTransitionStart: (e) => {
+			if (e.target === e.currentTarget && state === "closed") setOverflowHidden(true);
+		},
+		onTransitionEnd: (e) => {
+			if (e.target === e.currentTarget && state === "open") setOverflowHidden(false);
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIconButton, {
+			"data-state": state,
+			onClick,
+			contentEditable: false,
+			"aria-expanded": state === "open",
+			"aria-controls": contentId,
+			"aria-label": t(`factbox.${state === "open" ? "close" : "open"}`),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowDownShortLine, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledContent, {
+			id: contentId,
+			"data-state": state,
+			"aria-hidden": state === "closed",
+			...inertAttribute,
+			children
+		})]
+	});
+});
+var FactBox_default = FactBox;
+
+//#endregion
+exports.FactBox_default = FactBox_default;
+//# sourceMappingURL=FactBox.js.map

package/lib/FactBox/FactBox.js.map

@@ -0,0 +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,cAAc,qCAAO,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,MACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;EACZ,EACF;EACD,WAAW,EACT,WAAW,kBACZ;CACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,SACX,EACF,EACF,EACF;AACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,IACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;CAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,OACV;CACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,IACV;CACF;AACF,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOA,8BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,iBACZ,EACF;CACD,QAAQ,EACN,SAAS,OACV;AACF,EACF,EAAC;AAIF,MAAM,UAAU,sBACd,CAAC,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,MAAM,EAAE,QAAQ;CACvE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,CAAC,OAAO,SAAS,GAAG,oBAA4B,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,qBAAU,YAAY;CAClE,MAAM,YAAY,kBAAO;CAIzB,MAAM,iBAAiB,mBAAQ,MAAM;AACnC,SAAO,UAAU,WAAW,EAAE,cAAcC,cAAM,QAAQ,aAAa,OAAO,GAAI,IAAG,CAAE;CACxF,GAAE,CAAC,KAAM,EAAC;AAEX,sBAAU,MAAM;AACd,MAAI,gBACF,UAAS,OAAO,SAAS,SAAS;CAErC,GAAE,CAAC,IAAK,EAAC;CAEV,MAAM,UAAU,uBAAY,MAAM;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;CACpC,GAAE,CAAC,OAAO,YAAa,EAAC;AAEzB,wBACE,4BAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,mBAAmB,CAAC,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;EAE1B;EACD,iBAAiB,CAAC,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;EAE3B;6BAED,2BAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,GAAG,UAAU,UAAU,SAAS,UAAU,OAAO,EAAE;6BAE/D,2BAACC,oCAAqB;IACL,kBACnB,2BAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;AAEjB,EACF;AAED,sBAAe"}

package/lib/FactBox/index.js

@@ -0,0 +1,8 @@
+const require_FactBox = require('./FactBox.js');
+
+//#region src/FactBox/index.ts
+var FactBox_default$1 = require_FactBox.FactBox_default;
+
+//#endregion
+exports.FactBox_default = FactBox_default$1;
+//# sourceMappingURL=index.js.map

package/lib/FactBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FactBox"],"sources":["../../src/FactBox/index.ts"],"sourcesContent":["/**\n * Copyright (c) 2018-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 FactBox from \"./FactBox\";\n\nexport default FactBox;\n"],"mappings":";;;AAUA,wBAAeA"}

package/lib/FileList/File.js

@@ -0,0 +1,78 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_FileList = require('./FileList.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 react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_styled_system_patterns = require_rolldown_runtime.__toESM(require("@ndla/styled-system/patterns"));
+
+//#region src/FileList/File.tsx
+const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+	textUnderlineOffset: "2px",
+	textDecoration: "underline",
+	_hover: { textDecoration: "none" }
+} });
+const StyledHStack = (0, __ndla_styled_system_jsx.styled)(__ndla_styled_system_jsx.HStack, { base: {
+	position: "relative",
+	paddingBlock: "small",
+	paddingInlineEnd: "medium",
+	paddingInlineStart: "small",
+	width: "100%"
+} });
+const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize,...rest }, ref) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const filename = `${title}-${url.split("/").pop() ?? ""}`;
+	const downloadUrl = `${url}?download=${filename}`;
+	const tooltip = `${t("download")} ${filename}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledHStack, {
+		justify: "space-between",
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_styled_system_jsx.HStack, {
+			gap: "xxsmall",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.DownloadLine, {}),
+				fileExists ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
+					unstyled: true,
+					css: __ndla_styled_system_patterns.linkOverlay.raw(),
+					to: downloadUrl,
+					title: tooltip,
+					children: title
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+					textStyle: "label.medium",
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+					textStyle: "label.large",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						"(",
+						fileType?.toUpperCase(),
+						")"
+					] })
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+			textStyle: "label.large",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: fileSize })
+		})]
+	});
+});
+const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileList.FileListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(File, {
+	title,
+	url,
+	fileExists,
+	fileType,
+	fileSize
+}) });
+
+//#endregion
+exports.File = File;
+exports.FileListElement = FileListElement;
+//# sourceMappingURL=File.js.map

package/lib/FileList/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","Text","FileListItem"],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  url: string;\n  fileExists: boolean;\n  fileType: string;\n  fileSize?: string;\n}\n\nexport interface FileType {\n  title: string;\n  formats: FileFormat[];\n  fileExists?: boolean;\n}\n\nexport interface FileFormat {\n  url: string;\n  fileType: string;\n  tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    textUnderlineOffset: \"2px\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledHStack = styled(HStack, {\n  base: {\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\n  },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n    const downloadUrl = `${url}?download=${filename}`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n        <HStack gap=\"xxsmall\">\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n              {title}\n            </StyledSafeLink>\n          ) : (\n            <Text textStyle=\"label.medium\">{title}</Text>\n          )}\n          <Text textStyle=\"label.large\" asChild consumeCss>\n            <span>({fileType?.toUpperCase()})</span>\n          </Text>\n        </HStack>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </StyledHStack>\n    );\n  },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n  <FileListItem>\n    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n  </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;AAqCA,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,2DACC,2BAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}

package/lib/FileList/FileList.js

@@ -0,0 +1,35 @@
+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 __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/FileList/FileList.tsx
+const FileListWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.ul, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	clear: "both"
+} }, { baseComponent: true });
+const FileListItem = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.li, { base: {
+	listStyle: "none",
+	background: "surface.infoSubtle",
+	borderBlockEnd: "1px solid",
+	borderColor: "stroke.default",
+	display: "flex",
+	justifyContent: "space-between",
+	_hover: { backgroundColor: "surface.infoSubtle.hover" }
+} }, { baseComponent: true });
+const FileListEmbed = ({ children,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileListWrapper, {
+		...rest,
+		"data-embed-type": "file-list",
+		children
+	});
+};
+
+//#endregion
+exports.FileListEmbed = FileListEmbed;
+exports.FileListItem = FileListItem;
+exports.FileListWrapper = FileListWrapper;
+//# sourceMappingURL=FileList.js.map

package/lib/FileList/FileList.js.map

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

package/lib/FileList/PdfFile.js

@@ -0,0 +1,29 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/FileList/PdfFile.tsx
+const StyledIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: { width: "100%" } });
+const StyledListElement = (0, __ndla_styled_system_jsx.styled)("li", { base: { listStyle: "none" } });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall"
+} });
+const PdfFile = ({ title, url }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledListElement, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+		asChild: true,
+		consumeCss: true,
+		textStyle: "title.medium",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: title })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIframe, {
+		title,
+		height: "1050",
+		src: url
+	})] }) });
+};
+
+//#endregion
+exports.PdfFile = PdfFile;
+//# sourceMappingURL=PdfFile.js.map

package/lib/FileList/PdfFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdfFile.js","names":["Figure","Heading"],"sources":["../../src/FileList/PdfFile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n  title: string;\n  url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n  base: {\n    width: \"100%\",\n  },\n});\n\nconst StyledListElement = styled(\"li\", {\n  base: {\n    listStyle: \"none\",\n  },\n});\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n  return (\n    <StyledListElement>\n      <StyledFigure>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h4>{title}</h4>\n        </Heading>\n        <StyledIframe title={title} height=\"1050\" src={url} />\n      </StyledFigure>\n    </StyledListElement>\n  );\n};\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,qCAAO,UAAU,EACpC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,oBAAoB,qCAAO,MAAM,EACrC,MAAM,EACJ,WAAW,OACZ,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAa,UAAU,CAAC,EAAE,OAAO,KAAY,KAAK;AAChD,wBACE,2BAAC,+CACC,4BAAC,2CACC,2BAACC;EAAQ;EAAQ;EAAW,WAAU;4BACpC,2BAAC,kBAAI,QAAW;GACR,kBACV,2BAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG;AAEvB"}