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

package/es/Grid/Grid.js

@@ -0,0 +1,66 @@
+import "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Grid/Grid.tsx
+const GridContainer = styled("div", {
+	base: {
+		display: "grid",
+		justifyContent: "center",
+		borderRadius: "xsmall",
+		gridRowGap: "large",
+		gridColumnGap: "medium",
+		width: "100%",
+		backgroundColor: "background.subtle",
+		minWidth: "surface.xxsmall",
+		gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+		"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
+			height: "100%",
+			"& > :last-child": { marginTop: "auto" }
+		},
+		tabletDown: { gridTemplateColumns: "repeat(1, minmax(0, 1fr))" },
+		tabletToDesktop: {
+			gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+			"& > div:nth-child(3):last-child": {
+				display: "flex",
+				flexFlow: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				gridColumn: "span 2"
+			}
+		}
+	},
+	variants: {
+		columns: {
+			"2": {},
+			"2x2": {},
+			"3": { desktop: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" } },
+			"4": { desktop: { gridTemplateColumns: "repeat(4, minmax(0, 1fr))" } }
+		},
+		background: {
+			white: { backgroundColor: "surface.default" },
+			transparent: { backgroundColor: "transparent" },
+			gray: { backgroundColor: "background.subtle" }
+		},
+		border: { lightBlue: {
+			padding: "xsmall",
+			border: "1px solid",
+			borderColor: "surface.brand.2"
+		} }
+	}
+});
+const Grid = ({ columns, border, children, background = "gray",...rest }) => {
+	const amountOfColumns = children?.length === 3 ? "3" : columns;
+	return /* @__PURE__ */ jsx(GridContainer, {
+		"data-embed-type": "grid",
+		border: border === "none" ? void 0 : border,
+		columns: amountOfColumns,
+		background,
+		...rest,
+		children
+	});
+};
+
+//#endregion
+export { Grid };
+//# sourceMappingURL=Grid.js.map

package/es/Grid/Grid.js.map

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

package/es/Grid/GridParallaxItem.js

@@ -0,0 +1,21 @@
+import "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Grid/GridParallaxItem.tsx
+const StyledGridParallaxItem = styled("div", { base: {
+	position: "relative",
+	"& > div": {
+		top: "var(--masthead-height, 0px)",
+		position: "sticky"
+	}
+} });
+const GridParallaxItem = ({ children,...rest }) => /* @__PURE__ */ jsx(StyledGridParallaxItem, {
+	...rest,
+	"data-embed-type": "grid-parallax",
+	children: /* @__PURE__ */ jsx("div", { children })
+});
+
+//#endregion
+export { GridParallaxItem };
+//# sourceMappingURL=GridParallaxItem.js.map

package/es/Grid/GridParallaxItem.js.map

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

package/es/KeyFigure/KeyFigure.js

@@ -0,0 +1,46 @@
+import { styled } from "@ndla/styled-system/jsx";
+import parse from "html-react-parser";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/KeyFigure/KeyFigure.tsx
+const ContentWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "xsmall",
+	"&:not(:has(> img))": { paddingBlock: "xxlarge" }
+} });
+const StyledImage = styled("img", { base: {
+	height: "surface.3xsmall",
+	width: "surface.3xsmall",
+	borderRadius: "xsmall"
+} });
+const TitleWrapper = styled("div", { base: {
+	textStyle: "heading.large",
+	textAlign: "center"
+} });
+const SubTitleWrapper = styled("div", { base: {
+	textStyle: "title.medium",
+	textAlign: "center"
+} });
+const KeyFigure = ({ image, title, subtitle }) => {
+	return /* @__PURE__ */ jsxs(ContentWrapper, {
+		"data-embed-type": "key-figure",
+		children: [
+			!!image && /* @__PURE__ */ jsx(StyledImage, {
+				src: `${image?.src}?width=150`,
+				width: 150,
+				height: 150,
+				alt: image?.alt
+			}),
+			/* @__PURE__ */ jsx(TitleWrapper, { children: parse(title) }),
+			/* @__PURE__ */ jsx(SubTitleWrapper, { children: parse(subtitle) })
+		]
+	});
+};
+var KeyFigure_default = KeyFigure;
+
+//#endregion
+export { KeyFigure_default };
+//# sourceMappingURL=KeyFigure.js.map

package/es/KeyFigure/KeyFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.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 { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nconst KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n\nexport default KeyFigure;\n"],"mappings":";;;;;AAWA,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,UACf;AACF,EACF,EAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;AACf,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAWF,MAAM,YAAY,CAAC,EAAE,OAAO,OAAO,UAAiB,KAAK;AACvD,wBACE,KAAC;EAAe,mBAAgB;;KAC3B,yBAAS,IAAC;IAAY,MAAM,EAAE,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;mBACrG,IAAC,0BAAc,MAAM,MAAM,GAAgB;mBAC3C,IAAC,6BAAiB,MAAM,SAAS,GAAmB;;GACrC;AAEpB;AAED,wBAAe"}

package/es/LicenseByline/EmbedByline.js

@@ -0,0 +1,132 @@
+import { LicenseLink } from "./LicenseLink.js";
+import { useState } from "react";
+import { Button, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { AlertLine } from "@ndla/icons";
+import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LicenseByline/EmbedByline.tsx
+const BylineWrapper = styled("figcaption", { base: {
+	display: "flex",
+	flexDirection: "column",
+	paddingBlock: "xsmall",
+	textStyle: "label.medium",
+	color: "text.subtle"
+} });
+const ErrorBylineWrapper = styled(BylineWrapper, { base: {
+	border: "1px solid",
+	borderColor: "stroke.error",
+	borderRadius: "xsmall",
+	background: "surface.dangerSubtle",
+	paddingInline: "medium",
+	paddingBlock: "medium"
+} });
+const StyledText = styled(Text, { base: { fontStyle: "italic" } });
+const ContentWrapper = styled("div", { base: {
+	display: "flex",
+	gap: "xsmall",
+	alignItems: "center",
+	textStyle: "label.medium"
+} });
+const BaseDescription = styled("div", { base: {
+	display: "inline-flex",
+	whiteSpace: "pre-wrap"
+} });
+const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright,...props }) => {
+	const { t } = useTranslation();
+	if (props.error) {
+		const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
+		return /* @__PURE__ */ jsx(ErrorBylineWrapper, { children: /* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsx(AlertLine, {}), /* @__PURE__ */ jsx(BaseDescription, { children: /* @__PURE__ */ jsx("span", { children: t("embed.embedError", { type: typeString }) }) })] }) });
+	}
+	const { copyright } = props;
+	const hideByline = hideCopyright && !description;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!hideByline && /* @__PURE__ */ jsx(BylineWrapper, { children: /* @__PURE__ */ jsxs("div", { children: [
+		!!hideCopyright && description,
+		!hideCopyright && /* @__PURE__ */ jsx(LicenseContainerContent, {
+			type,
+			copyright,
+			children: description
+		}),
+		children
+	] }) }), visibleAlt ? /* @__PURE__ */ jsx(StyledText, {
+		color: "text.subtle",
+		textStyle: "label.medium",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ jsx("span", { children: `Alt: ${visibleAlt}` })
+	}) : null] });
+};
+const StyledDescription = styled(BaseDescription, { base: { mobileWideDown: {
+	display: "grid",
+	gridTemplateColumns: "1fr auto",
+	alignItems: "center",
+	overflow: "hidden",
+	_open: { display: "inline" }
+} } });
+const TextContent = styled("span", { base: { mobileWideDown: {
+	whiteSpace: "nowrap",
+	maxHeight: "large",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	transitionProperty: "max-height",
+	transitionDuration: "slow",
+	transitionTimingFunction: "ease-in",
+	marginInlineEnd: "4xsmall",
+	_open: {
+		whiteSpace: "pre-wrap",
+		maxHeight: "none"
+	}
+} } });
+const StyledButton = styled(Button, { base: { mobileWide: { display: "none" } } });
+const LicenseDescription = ({ children, isOpen, setIsOpen }) => {
+	const open = isOpen ? { "data-open": "" } : {};
+	const { t } = useTranslation();
+	const handleToggle = () => {
+		setIsOpen(!isOpen);
+	};
+	return /* @__PURE__ */ jsx(ContentWrapper, { children: /* @__PURE__ */ jsxs(StyledDescription, {
+		...open,
+		children: [/* @__PURE__ */ jsx(TextContent, {
+			...open,
+			children
+		}), /* @__PURE__ */ jsx(StyledButton, {
+			variant: "link",
+			size: "small",
+			onClick: handleToggle,
+			children: isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`
+		})]
+	}) });
+};
+const LicenseContainerContent = ({ children, copyright, type }) => {
+	const { t, i18n } = useTranslation();
+	const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : void 0;
+	const authors = getLicenseCredits(copyright);
+	const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+	const [isOpen, setIsOpen] = useState(false);
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		children,
+		` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`,
+		/* @__PURE__ */ jsx("span", { children: captionAuthors.map((author) => author.name).join(", ") }),
+		license ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" / ", /* @__PURE__ */ jsx(LicenseLink, {
+			license,
+			hideLink: !isOpen && !!children
+		})] }) : null
+	] });
+	if (children) return /* @__PURE__ */ jsx(LicenseDescription, {
+		isOpen,
+		setIsOpen,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		textStyle: "label.medium",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ jsx("span", { children: content })
+	});
+};
+
+//#endregion
+export { EmbedByline, LicenseContainerContent };
+//# sourceMappingURL=EmbedByline.js.map

package/es/LicenseByline/EmbedByline.js.map

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

package/es/LicenseByline/LicenseLink.js

@@ -0,0 +1,31 @@
+import { forwardRef } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { SafeLink } from "@ndla/safelink";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/LicenseByline/LicenseLink.tsx
+const StyledSafeLink = styled(SafeLink, { base: {
+	color: "text.link",
+	textDecoration: "underline",
+	whiteSpace: "nowrap",
+	_hover: { textDecoration: "none" },
+	_focusWithin: { textDecoration: "none" },
+	mobileWideDown: { _disabled: { display: "none" } }
+} });
+const LicenseLink = forwardRef(({ license, hideLink,...rest }, ref) => {
+	const disabled = hideLink ? { "data-disabled": "" } : {};
+	if (license.abbreviation === "unknown") return null;
+	if (license.url?.length) return /* @__PURE__ */ jsx(StyledSafeLink, {
+		to: license.url,
+		rel: "license",
+		...disabled,
+		...rest,
+		ref,
+		children: license.abbreviation
+	});
+	return /* @__PURE__ */ jsx("span", { children: license.abbreviation });
+});
+
+//#endregion
+export { LicenseLink };
+//# sourceMappingURL=LicenseLink.js.map

package/es/LicenseByline/LicenseLink.js.map

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

package/es/LinkBlock/LinkBlock.js

@@ -0,0 +1,74 @@
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl.js";
+import { useMemo } from "react";
+import { Heading } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import parse from "html-react-parser";
+import { ArrowRightLine, CalendarLine } from "@ndla/icons";
+import { SafeLink } from "@ndla/safelink";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/LinkBlock/LinkBlock.tsx
+const InfoWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall"
+} });
+const StyledSafeLink = styled(SafeLink, { base: {
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	background: "surface.default",
+	padding: "medium",
+	border: "1px solid",
+	borderColor: "stroke.subtle",
+	borderRadius: "xsmall",
+	"& h3": { textDecoration: "underline" },
+	"& [data-forward]": {
+		transitionProperty: "width, height",
+		transitionTimingFunction: "ease-in-out",
+		transitionDuration: "fast"
+	},
+	_hover: {
+		"& h3": { textDecoration: "none" },
+		"& [data-forward]": {
+			width: "large",
+			height: "large"
+		}
+	}
+} });
+const StyledDateContainer = styled("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	gap: "xxsmall"
+} });
+const StyledCalendarEd = styled(CalendarLine, { base: { color: "icon.strong" } });
+const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
+	const href = getPossiblyRelativeUrl(url, path);
+	const formattedDate = useMemo(() => {
+		if (!date) return null;
+		return new Intl.DateTimeFormat(articleLanguage, {
+			timeZone: "CET",
+			day: "2-digit",
+			month: "long",
+			year: "numeric"
+		}).format(new Date(date));
+	}, [date, articleLanguage]);
+	return /* @__PURE__ */ jsxs(StyledSafeLink, {
+		to: href,
+		"data-embed-type": "link-block",
+		children: [/* @__PURE__ */ jsxs(InfoWrapper, { children: [/* @__PURE__ */ jsx(Heading, {
+			asChild: true,
+			consumeCss: true,
+			textStyle: "title.medium",
+			children: /* @__PURE__ */ jsx("h3", {
+				"data-heading": true,
+				children: parse(title)
+			})
+		}), !!date && /* @__PURE__ */ jsxs(StyledDateContainer, { children: [/* @__PURE__ */ jsx(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ jsx(ArrowRightLine, { "data-forward": true })]
+	});
+};
+var LinkBlock_default = LinkBlock;
+
+//#endregion
+export { LinkBlock_default };
+//# sourceMappingURL=LinkBlock.js.map

package/es/LinkBlock/LinkBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkBlock.js","names":[],"sources":["../../src/LinkBlock/LinkBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,YACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,OACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;EACT;CACF;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,mBAAmB,OAAO,cAAc,EAC5C,MAAM,EACJ,OAAO,cACR,EACF,EAAC;AAOF,MAAM,YAAY,CAAC,EAAE,OAAO,iBAAiB,MAAM,KAAK,MAAa,KAAK;CACxE,MAAM,OAAO,uBAAuB,KAAK,KAAK;CAC9C,MAAM,gBAAgB,QAAQ,MAAM;AAClC,OAAK,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;EACP,GAAE,OAAO,IAAI,KAAK,MAAM;CAC1B,GAAE,CAAC,MAAM,eAAgB,EAAC;AAC3B,wBACE,KAAC;EAAe,IAAI;EAAM,mBAAgB;6BACxC,KAAC,0CACC,IAAC;GAAQ;GAAQ;GAAW,WAAU;6BACpC,IAAC;IAAG;cAAc,MAAM,MAAM;KAAM;IAC5B,IACP,wBACD,KAAC,kDACC,IAAC,qBAAmB,EACnB,iBACmB,IAEZ,kBACd,IAAC,kBAAe,uBAAe;GAChB;AAEpB;AAED,wBAAe"}

package/es/LinkBlock/LinkBlockSection.js

@@ -0,0 +1,23 @@
+import { Children } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/LinkBlock/LinkBlockSection.tsx
+const StyledList = styled("ul", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	listStyle: "none"
+} });
+const LinkBlockSection = ({ children,...rest }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		"data-embed-type": "link-block-list",
+		children: /* @__PURE__ */ jsx(StyledList, { children: Children.map(children, (child) => /* @__PURE__ */ jsx("li", { children: child })) })
+	});
+};
+var LinkBlockSection_default = LinkBlockSection;
+
+//#endregion
+export { LinkBlockSection_default };
+//# sourceMappingURL=LinkBlockSection.js.map

package/es/LinkBlock/LinkBlockSection.js.map

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

package/es/Pitch/Pitch.js

@@ -0,0 +1,62 @@
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl.js";
+import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import parse from "html-react-parser";
+import { SafeLink } from "@ndla/safelink";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+
+//#region src/Pitch/Pitch.tsx
+const StyledCardHeading = styled(CardHeading, { base: { paddingBlockStart: "medium" } });
+const StyledText = styled(Text, { base: { paddingBlockEnd: "medium" } });
+const StyledCardRoot = styled(CardRoot, { base: {
+	border: "0",
+	display: "flex",
+	flexDirection: "column",
+	gap: "small"
+} });
+const StyledCardImage = styled(CardImage, { base: {
+	aspectRatio: "16/9",
+	height: "unset"
+} });
+const Pitch = ({ title, url, metaImage, path, description }) => {
+	const href = getPossiblyRelativeUrl(url, path);
+	return /* @__PURE__ */ jsx(StyledCardRoot, {
+		variant: "subtle",
+		"data-embed-type": "pitch",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx(StyledCardHeading, {
+				textStyle: "heading.small",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx(SafeLink, {
+					to: href,
+					unstyled: true,
+					css: linkOverlay.raw(),
+					children: parse(title)
+				})
+			}),
+			!!description && /* @__PURE__ */ jsx(StyledText, {
+				textStyle: "body.xlarge",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx("div", { children: parse(description) })
+			}),
+			/* @__PURE__ */ jsx(StyledCardImage, {
+				variant: "rounded",
+				src: metaImage.url,
+				alt: metaImage.alt,
+				sizes: "480px",
+				fallbackWidth: 300,
+				width: 550,
+				height: 310
+			})
+		] })
+	});
+};
+
+//#endregion
+export { Pitch };
+//# sourceMappingURL=Pitch.js.map

package/es/Pitch/Pitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pitch.js","names":[],"sources":["../../src/Pitch/Pitch.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 parse from \"html-react-parser\";\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n  title: string;\n  url: string;\n  description?: string;\n  metaImage: {\n    url: string;\n    alt: string;\n  };\n  path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n  base: {\n    paddingBlockStart: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n  base: {\n    border: \"0\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledCardImage = styled(CardImage, {\n  base: {\n    aspectRatio: \"16/9\",\n    height: \"unset\",\n  },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n\n  return (\n    <StyledCardRoot variant=\"subtle\" data-embed-type=\"pitch\" asChild consumeCss>\n      <div>\n        <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n          <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n            {parse(title)}\n          </SafeLink>\n        </StyledCardHeading>\n        {!!description && (\n          <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n            <div>{parse(description)}</div>\n          </StyledText>\n        )}\n        <StyledCardImage\n          variant=\"rounded\"\n          src={metaImage.url}\n          alt={metaImage.alt}\n          sizes=\"480px\"\n          fallbackWidth={300}\n          width={550}\n          height={310}\n        />\n      </div>\n    </StyledCardRoot>\n  );\n};\n"],"mappings":";;;;;;;;;AA0BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,OAAO,WAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,uBAAuB,KAAK,KAAK;AAE9C,wBACE,IAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;4BAC/D,KAAC;mBACC,IAAC;IAAkB,WAAU;IAAgB;IAAQ;8BACnD,IAAC;KAAS,IAAI;KAAM;KAAS,KAAK,YAAY,KAAK;eAChD,MAAM,MAAM;MACJ;KACO;KACjB,+BACD,IAAC;IAAW,WAAU;IAAc;IAAQ;8BAC1C,IAAC,mBAAK,MAAM,YAAY,GAAO;KACpB;mBAEf,IAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS;AAEpB"}

package/es/RelatedArticleList/RelatedArticleList.js

@@ -0,0 +1,97 @@
+import { contentTypes } from "../model/ContentType.js";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge.js";
+import { Children, useMemo, useState } from "react";
+import { Button, CardContent, CardHeading, CardRoot, Heading, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { ExternalLinkLine } from "@ndla/icons";
+import { SafeLink } from "@ndla/safelink";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+
+//#region src/RelatedArticleList/RelatedArticleList.tsx
+const StyledSpan = styled("span", { base: {
+	display: "flex",
+	gap: "3xsmall"
+} });
+const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = contentTypes.SUBJECT_MATERIAL }) => {
+	return /* @__PURE__ */ jsx(CardRoot, {
+		"data-embed-type": "related-article",
+		children: /* @__PURE__ */ jsxs(CardContent, { children: [
+			/* @__PURE__ */ jsx(ContentTypeBadge, { contentType: type }),
+			/* @__PURE__ */ jsx(CardHeading, {
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SafeLink, {
+					unstyled: true,
+					to,
+					target,
+					rel: linkInfo ? "noopener noreferrer" : void 0,
+					css: linkOverlay.raw(),
+					children: /* @__PURE__ */ jsxs(StyledSpan, { children: [title, target === "_blank" && /* @__PURE__ */ jsx(ExternalLinkLine, {})] })
+				}) })
+			}),
+			/* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: introduction } }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "text.subtle",
+				textStyle: "label.small",
+				children: linkInfo
+			})
+		] })
+	});
+};
+const HeadingWrapper = styled("div", { base: {
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	alignSelf: "flex-start"
+} });
+const ArticlesWrapper = styled("div", { base: {
+	display: "grid",
+	width: "100%",
+	gridTemplateColumns: "repeat(2, 1fr)",
+	gap: "medium",
+	tabletDown: { gridTemplateColumns: "1fr" }
+} });
+const StyledSection = styled("section", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "medium",
+	clear: "both"
+} });
+const StyledButton = styled(Button, { base: { marginBlockStart: "xsmall" } });
+const RelatedArticleList = ({ children = [], articleCount, headingLevel: HeadingElement = "h2", headingButtons,...rest }) => {
+	const [expanded, setExpanded] = useState(false);
+	const { t } = useTranslation();
+	const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
+	const childrenToShow = useMemo(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [
+		childCount,
+		children,
+		expanded
+	]);
+	return /* @__PURE__ */ jsxs(StyledSection, {
+		...rest,
+		"data-embed-type": "related-content-list",
+		children: [
+			/* @__PURE__ */ jsxs(HeadingWrapper, { children: [/* @__PURE__ */ jsx(Heading, {
+				asChild: true,
+				consumeCss: true,
+				textStyle: "title.large",
+				fontWeight: "bold",
+				children: /* @__PURE__ */ jsx(HeadingElement, { children: t("related.title") })
+			}), headingButtons] }),
+			/* @__PURE__ */ jsx(ArticlesWrapper, { children: childrenToShow }),
+			childCount > 2 ? /* @__PURE__ */ jsx(StyledButton, {
+				variant: "secondary",
+				onClick: () => setExpanded((p) => !p),
+				children: t(`related.show${expanded ? "Less" : "More"}`)
+			}) : null
+		]
+	});
+};
+
+//#endregion
+export { RelatedArticle, RelatedArticleList };
+//# sourceMappingURL=RelatedArticleList.js.map