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

package/lib/LinkBlock/LinkBlock.js

@@ -0,0 +1,75 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_relativeUrl = require('../utils/relativeUrl.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+const __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"));
+
+//#region src/LinkBlock/LinkBlock.tsx
+const InfoWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall"
+} });
+const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.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 = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	gap: "xxsmall"
+} });
+const StyledCalendarEd = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.CalendarLine, { base: { color: "icon.strong" } });
+const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
+	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
+	const formattedDate = (0, react.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__ */ (0, react_jsx_runtime.jsxs)(StyledSafeLink, {
+		to: href,
+		"data-embed-type": "link-block",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			asChild: true,
+			consumeCss: true,
+			textStyle: "title.medium",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				"data-heading": true,
+				children: (0, html_react_parser.default)(title)
+			})
+		}), !!date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDateContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightLine, { "data-forward": true })]
+	});
+};
+var LinkBlock_default = LinkBlock;
+
+//#endregion
+exports.LinkBlock_default = LinkBlock_default;
+//# sourceMappingURL=LinkBlock.js.map

package/lib/LinkBlock/LinkBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","Heading","ArrowRightLine"],"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,qCAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOA,0BAAU,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,qCAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOC,2BAAc,EAC5C,MAAM,EACJ,OAAO,cACR,EACF,EAAC;AAOF,MAAM,YAAY,CAAC,EAAE,OAAO,iBAAiB,MAAM,KAAK,MAAa,KAAK;CACxE,MAAM,OAAO,2CAAuB,KAAK,KAAK;CAC9C,MAAM,gBAAgB,mBAAQ,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,4BAAC;EAAe,IAAI;EAAM,mBAAgB;6BACxC,4BAAC,0CACC,2BAACC;GAAQ;GAAQ;GAAW,WAAU;6BACpC,2BAAC;IAAG;cAAc,+BAAM,MAAM;KAAM;IAC5B,IACP,wBACD,4BAAC,kDACC,2BAAC,qBAAmB,EACnB,iBACmB,IAEZ,kBACd,2BAACC,+BAAe,uBAAe;GAChB;AAEpB;AAED,wBAAe"}

package/lib/LinkBlock/LinkBlockSection.js

@@ -0,0 +1,24 @@
+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"));
+
+//#region src/LinkBlock/LinkBlockSection.tsx
+const StyledList = (0, __ndla_styled_system_jsx.styled)("ul", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	listStyle: "none"
+} });
+const LinkBlockSection = ({ children,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...rest,
+		"data-embed-type": "link-block-list",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, { children: react.Children.map(children, (child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: child })) })
+	});
+};
+var LinkBlockSection_default = LinkBlockSection;
+
+//#endregion
+exports.LinkBlockSection_default = LinkBlockSection_default;
+//# sourceMappingURL=LinkBlockSection.js.map

package/lib/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,qCAAO,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,2BAAC;EAAI,GAAI;EAAM,mBAAgB;4BAC7B,2BAAC,wBACE,eAAS,IAAI,UAAU,CAAC,0BACvB,2BAAC,kBAAI,QAAW,CAChB,GACS;GACT;AAET;AAED,+BAAe"}

package/lib/Pitch/Pitch.js

@@ -0,0 +1,63 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_relativeUrl = require('../utils/relativeUrl.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 html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+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/Pitch/Pitch.tsx
+const StyledCardHeading = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardHeading, { base: { paddingBlockStart: "medium" } });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { paddingBlockEnd: "medium" } });
+const StyledCardRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardRoot, { base: {
+	border: "0",
+	display: "flex",
+	flexDirection: "column",
+	gap: "small"
+} });
+const StyledCardImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardImage, { base: {
+	aspectRatio: "16/9",
+	height: "unset"
+} });
+const Pitch = ({ title, url, metaImage, path, description }) => {
+	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardRoot, {
+		variant: "subtle",
+		"data-embed-type": "pitch",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardHeading, {
+				textStyle: "heading.small",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+					to: href,
+					unstyled: true,
+					css: __ndla_styled_system_patterns.linkOverlay.raw(),
+					children: (0, html_react_parser.default)(title)
+				})
+			}),
+			!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+				textStyle: "body.xlarge",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (0, html_react_parser.default)(description) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardImage, {
+				variant: "rounded",
+				src: metaImage.url,
+				alt: metaImage.alt,
+				sizes: "480px",
+				fallbackWidth: 300,
+				width: 550,
+				height: 310
+			})
+		] })
+	});
+};
+
+//#endregion
+exports.Pitch = Pitch;
+//# sourceMappingURL=Pitch.js.map

package/lib/Pitch/Pitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","SafeLink"],"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,qCAAOA,+BAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOC,4BAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAOC,6BAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,2CAAuB,KAAK,KAAK;AAE9C,wBACE,2BAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;4BAC/D,4BAAC;mBACC,2BAAC;IAAkB,WAAU;IAAgB;IAAQ;8BACnD,2BAACC;KAAS,IAAI;KAAM;KAAS,KAAK,0CAAY,KAAK;eAChD,+BAAM,MAAM;MACJ;KACO;KACjB,+BACD,2BAAC;IAAW,WAAU;IAAc;IAAQ;8BAC1C,2BAAC,mBAAK,+BAAM,YAAY,GAAO;KACpB;mBAEf,2BAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS;AAEpB"}

package/lib/RelatedArticleList/RelatedArticleList.js

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

package/lib/RelatedArticleList/RelatedArticleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","ExternalLinkLine","Text","Button","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n  type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({\n  title,\n  introduction,\n  to,\n  linkInfo = \"\",\n  target = \"\",\n  type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <ContentTypeBadge contentType={type} />\n        <CardHeading asChild consumeCss>\n          <span>\n            <SafeLink\n              unstyled\n              to={to}\n              target={target}\n              rel={linkInfo ? \"noopener noreferrer\" : undefined}\n              css={linkOverlay.raw()}\n            >\n              <StyledSpan>\n                {title}\n                {target === \"_blank\" && <ExternalLinkLine />}\n              </StyledSpan>\n            </SafeLink>\n          </span>\n        </CardHeading>\n        <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n        <Text color=\"text.subtle\" textStyle=\"label.small\">\n          {linkInfo}\n        </Text>\n      </CardContent>\n    </CardRoot>\n  );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    width: \"100%\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"medium\",\n    tabletDown: {\n      gridTemplateColumns: \"1fr\",\n    },\n  },\n});\n\nconst StyledSection = styled(\"section\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"medium\",\n    clear: \"both\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    marginBlockStart: \"xsmall\",\n  },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n  children?: ReactElement[];\n  articleCount?: number;\n  headingLevel?: HeadingLevel;\n  headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n  children = [],\n  articleCount,\n  headingLevel: HeadingElement = \"h2\",\n  headingButtons,\n  ...rest\n}: Props) => {\n  const [expanded, setExpanded] = useState(false);\n  const { t } = useTranslation();\n  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n  const childrenToShow = useMemo(\n    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n    [childCount, children, expanded],\n  );\n\n  return (\n    <StyledSection {...rest} data-embed-type=\"related-content-list\">\n      <HeadingWrapper>\n        <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n          <HeadingElement>{t(\"related.title\")}</HeadingElement>\n        </Heading>\n        {headingButtons}\n      </HeadingWrapper>\n      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n      {childCount > 2 ? (\n        <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n          {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n        </StyledButton>\n      ) : null}\n    </StyledSection>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,qCAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAa,iBAAiB,CAAC,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,iCAAa,kBACA,KAAK;AACzB,wBACE,2BAACC;EAAS,mBAAgB;4BACxB,4BAACC;mBACC,2BAACC,6CAAiB,aAAa,OAAQ;mBACvC,2BAACC;IAAY;IAAQ;8BACnB,2BAAC,oCACC,2BAACC;KACC;KACI;KACI;KACR,KAAK,WAAW;KAChB,KAAK,0CAAY,KAAK;+BAEtB,4BAAC,yBACE,OACA,WAAW,4BAAY,2BAACC,kCAAmB,IACjC;MACJ,GACN;KACK;mBACd,2BAACC,0BAAK,yBAAyB,EAAE,QAAQ,aAAc,IAAI;mBAC3D,2BAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;AAEd;AAED,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,MACtB;AACF,EACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,0BAAQ,EAClC,MAAM,EACJ,kBAAkB,SACnB,EACF,EAAC;AASF,MAAa,qBAAqB,CAAC,EACjC,WAAW,CAAE,GACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,MACG,KAAK;CACX,MAAM,CAAC,UAAU,YAAY,GAAG,oBAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,aAAa,mBAAQ,MAAM,gBAAgB,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,YAAa,EAAC;CACpG,MAAM,iBAAiB,mBACrB,MAAO,aAAa,MAAM,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;CAAS,EACjC;AAED,wBACE,4BAAC;EAAc,GAAI;EAAM,mBAAgB;;mBACvC,4BAAC,6CACC,2BAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;8BAC7D,2BAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;mBACjB,2BAAC,6BAAiB,iBAAiC;GAClD,aAAa,oBACZ,2BAAC;IAAa,SAAQ;IAAY,SAAS,MAAM,YAAY,CAAC,OAAO,EAAE;cACpE,GAAG,cAAc,WAAW,SAAS,OAAO,EAAE;KAClC,GACb;;GACU;AAEnB"}

package/lib/RelatedArticleList/index.js

@@ -0,0 +1,8 @@
+const require_RelatedArticleList = require('./RelatedArticleList.js');
+
+//#region src/RelatedArticleList/index.ts
+var RelatedArticleList_default = require_RelatedArticleList.RelatedArticleList;
+
+//#endregion
+exports.RelatedArticleList_default = RelatedArticleList_default;
+//# sourceMappingURL=index.js.map

package/lib/RelatedArticleList/index.js.map

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

package/lib/ResourceBox/ResourceBox.js

@@ -0,0 +1,75 @@
+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 __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_core = require_rolldown_runtime.__toESM(require("@ndla/core"));
+
+//#region src/ResourceBox/ResourceBox.tsx
+const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	padding: "medium",
+	borderRadius: "xsmall",
+	border: "1px solid",
+	borderColor: "stroke.default",
+	boxShadow: "full",
+	marginBlockEnd: "medium",
+	gap: "medium",
+	tabletWideDown: { padding: "xsmall" },
+	tabletDown: {
+		flexDirection: "column",
+		gap: "0",
+		padding: "0"
+	}
+} });
+const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "flex-start",
+	gap: "xsmall",
+	flex: "1",
+	tabletDown: { padding: "xsmall" }
+} });
+const StyledImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Image, { base: {
+	objectFit: "cover",
+	borderRadius: "xsmall",
+	width: "fit-content",
+	aspectRatio: "1/1",
+	tabletDown: {
+		width: "100%",
+		borderRadius: "0"
+	}
+} });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { flex: "1" } });
+const ResourceBox = ({ image, title, caption, url, buttonText }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, { children: [image ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
+		src: image.src,
+		alt: image.alt,
+		sizes: `(min-width: ${__ndla_core.breakpoints.desktop}) 150px, (max-width: ${__ndla_core.breakpoints.tablet} ) 400px, 200px`,
+		variant: "rounded"
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			textStyle: "label.large",
+			fontWeight: "bold",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+			textStyle: "body.medium",
+			children: caption
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_safelink.SafeLinkButton, {
+			to: url,
+			target: "_blank",
+			variant: "secondary",
+			children: [buttonText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ShareBoxLine, {})]
+		})
+	] })] });
+};
+var ResourceBox_default = ResourceBox;
+
+//#endregion
+exports.ResourceBox_default = ResourceBox_default;
+//# sourceMappingURL=ResourceBox.js.map

package/lib/ResourceBox/ResourceBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceBox.js","names":["Image","Text","breakpoints","Heading","SafeLinkButton","ShareBoxLine"],"sources":["../../src/ResourceBox/ResourceBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-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 { breakpoints } from \"@ndla/core\";\nimport { ShareBoxLine } from \"@ndla/icons\";\nimport { Heading, Image, Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    padding: \"medium\",\n    borderRadius: \"xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"medium\",\n    gap: \"medium\",\n    tabletWideDown: {\n      padding: \"xsmall\",\n    },\n    tabletDown: {\n      flexDirection: \"column\",\n      gap: \"0\",\n      padding: \"0\",\n    },\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"xsmall\",\n    flex: \"1\",\n    tabletDown: {\n      padding: \"xsmall\",\n    },\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    objectFit: \"cover\",\n    borderRadius: \"xsmall\",\n    width: \"fit-content\",\n    aspectRatio: \"1/1\",\n    tabletDown: {\n      width: \"100%\",\n      borderRadius: \"0\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    flex: \"1\",\n  },\n});\n\ninterface ImageMeta {\n  src: string | undefined;\n  alt: string;\n}\n\ninterface Props {\n  image?: ImageMeta;\n  title: string;\n  caption: string;\n  url: string;\n  buttonText: string;\n}\n\nexport const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {\n  return (\n    <Container>\n      {image ? (\n        <StyledImage\n          src={image.src}\n          alt={image.alt}\n          sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}\n          variant=\"rounded\"\n        />\n      ) : null}\n      <ContentWrapper>\n        <Heading textStyle=\"label.large\" fontWeight=\"bold\" asChild consumeCss>\n          <h3>{title}</h3>\n        </Heading>\n        <StyledText textStyle=\"body.medium\">{caption}</StyledText>\n        <SafeLinkButton to={url} target=\"_blank\" variant=\"secondary\">\n          {buttonText}\n          <ShareBoxLine />\n        </SafeLinkButton>\n      </ContentWrapper>\n    </Container>\n  );\n};\n\nexport default ResourceBox;\n"],"mappings":";;;;;;;;;AAcA,MAAM,YAAY,qCAAO,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,SAAS;CACT,cAAc;CACd,QAAQ;CACR,aAAa;CACb,WAAW;CACX,gBAAgB;CAChB,KAAK;CACL,gBAAgB,EACd,SAAS,SACV;CACD,YAAY;EACV,eAAe;EACf,KAAK;EACL,SAAS;CACV;AACF,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,MAAM;CACN,YAAY,EACV,SAAS,SACV;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAOA,yBAAO,EAChC,MAAM;CACJ,WAAW;CACX,cAAc;CACd,OAAO;CACP,aAAa;CACb,YAAY;EACV,OAAO;EACP,cAAc;CACf;AACF,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,MAAM,IACP,EACF,EAAC;AAeF,MAAa,cAAc,CAAC,EAAE,OAAO,OAAO,SAAS,KAAK,YAAmB,KAAK;AAChF,wBACE,4BAAC,wBACE,wBACC,2BAAC;EACC,KAAK,MAAM;EACX,KAAK,MAAM;EACX,QAAQ,cAAcC,wBAAY,QAAQ,uBAAuBA,wBAAY,OAAO;EACpF,SAAQ;GACR,GACA,sBACJ,4BAAC;kBACC,2BAACC;GAAQ,WAAU;GAAc,YAAW;GAAO;GAAQ;6BACzD,2BAAC,kBAAI,QAAW;IACR;kBACV,2BAAC;GAAW,WAAU;aAAe;IAAqB;kBAC1D,4BAACC;GAAe,IAAI;GAAK,QAAO;GAAS,SAAQ;cAC9C,4BACD,2BAACC,8BAAe;IACD;KACF,IACP;AAEf;AAED,0BAAe"}

package/lib/TagSelector/TagSelector.js

@@ -0,0 +1,108 @@
+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_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_util = require_rolldown_runtime.__toESM(require("@ndla/util"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/TagSelector/TagSelector.tsx
+const TagSelectorRoot = ({ allowCustomValue = true, multiple = true, selectionBehavior = "clear", editable, addOnPaste = false, onValueChange, children, value, translations,...rest }) => {
+	const ids = {
+		root: (0, react.useId)(),
+		input: (0, react.useId)(),
+		control: (0, react.useId)()
+	};
+	const controlRef = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => {
+		if (!controlRef.current) controlRef.current = document.getElementById(ids.control);
+	}, [ids.control]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxRoot, {
+		ids,
+		asChild: true,
+		allowCustomValue,
+		multiple,
+		selectionBehavior,
+		onValueChange,
+		translations,
+		onPointerDownOutside: (event) => {
+			if ((0, __ndla_util.contains)(controlRef.current, event.detail.originalEvent.target)) event.preventDefault();
+		},
+		value,
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagSelectorTagsInputRoot, {
+			ids,
+			value,
+			editable,
+			onValueChange,
+			addOnPaste,
+			translations,
+			children
+		})
+	});
+};
+const TagSelectorTagsInputRoot = (0, react.forwardRef)((props, ref) => {
+	const comboboxApi = (0, __ark_ui_react.useComboboxContext)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputRoot, {
+		ref,
+		onInputValueChange: (details) => comboboxApi.setInputValue(details.inputValue),
+		...props
+	});
+});
+const TagSelectorLabel = __ndla_primitives.ComboboxLabel;
+const TagSelectorItemInput = __ndla_primitives.TagsInputItemInput;
+const TagSelectorTrigger = __ndla_primitives.ComboboxTrigger;
+const TagSelectorControl = (0, react.forwardRef)(({ children,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxControl, {
+		ref,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputControl, {
+			...props,
+			children
+		})
+	});
+});
+const TagSelectorClearTrigger = __ndla_primitives.ComboboxClearTrigger;
+const TagSelectorInputBase = (0, react.forwardRef)(({ children,...props }, ref) => {
+	const tagsApi = (0, __ark_ui_react.useTagsInputContext)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxInput, {
+		ref,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputInput, {
+			onKeyDown: (event) => {
+				if (event.key === "Enter") tagsApi.addValue(tagsApi.inputValue);
+			},
+			...props,
+			children
+		})
+	});
+});
+const TagSelectorInput = (0, react.forwardRef)(({ children,...props }, ref) => {
+	const tagsApi = (0, __ark_ui_react.useTagsInputContext)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [tagsApi.value.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.TagsInputItem, {
+		index,
+		value,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.TagsInputItemPreview, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputItemText, { children: value }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputItemDeleteTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.CloseLine, {}) })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputItemInput, {})]
+	}, value)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.ComboboxInput, {
+		ref,
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.TagsInputInput, {
+			onKeyDown: (event) => {
+				if (event.key === "Enter") tagsApi.addValue(tagsApi.inputValue);
+			},
+			...props,
+			children
+		})
+	})] });
+});
+
+//#endregion
+exports.TagSelectorClearTrigger = TagSelectorClearTrigger;
+exports.TagSelectorControl = TagSelectorControl;
+exports.TagSelectorInput = TagSelectorInput;
+exports.TagSelectorInputBase = TagSelectorInputBase;
+exports.TagSelectorItemInput = TagSelectorItemInput;
+exports.TagSelectorLabel = TagSelectorLabel;
+exports.TagSelectorRoot = TagSelectorRoot;
+exports.TagSelectorTrigger = TagSelectorTrigger;
+//# sourceMappingURL=TagSelector.js.map

package/lib/TagSelector/TagSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagSelector.js","names":["ComboboxRoot","TagsInputRoot","ComboboxLabel","TagsInputItemInput","ComboboxTrigger","ComboboxControl","TagsInputControl","ComboboxClearTrigger","ComboboxInput","TagsInputInput","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","CloseLine"],"sources":["../../src/TagSelector/TagSelector.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { type CollectionItem, useTagsInputContext, useComboboxContext } from \"@ark-ui/react\";\nimport { CloseLine } from \"@ndla/icons\";\nimport {\n  ComboboxClearTrigger,\n  ComboboxControl,\n  type ComboboxControlProps,\n  ComboboxInput,\n  type ComboboxInputProps,\n  ComboboxLabel,\n  ComboboxRoot,\n  type ComboboxRootProps,\n  ComboboxTrigger,\n  TagsInputControl,\n  type TagsInputControlProps,\n  TagsInputInput,\n  type TagsInputInputProps,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputRoot,\n  type TagsInputRootProps,\n  TagsInputItemInput,\n} from \"@ndla/primitives\";\nimport { contains } from \"@ndla/util\";\n\nexport type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;\n\nexport const TagSelectorRoot = <T extends CollectionItem>({\n  allowCustomValue = true,\n  multiple = true,\n  selectionBehavior = \"clear\",\n  editable,\n  addOnPaste = false,\n  onValueChange,\n  children,\n  value,\n  translations,\n  ...rest\n}: TagSelectorRootProps<T>) => {\n  const ids = {\n    root: useId(),\n    input: useId(),\n    control: useId(),\n  };\n\n  const controlRef = useRef<HTMLDivElement | undefined>(undefined);\n\n  useEffect(() => {\n    if (!controlRef.current) {\n      controlRef.current = document.getElementById(ids.control) as HTMLDivElement | undefined;\n    }\n  }, [ids.control]);\n\n  return (\n    <ComboboxRoot\n      ids={ids}\n      asChild\n      allowCustomValue={allowCustomValue}\n      multiple={multiple}\n      selectionBehavior={selectionBehavior}\n      onValueChange={onValueChange}\n      translations={translations}\n      onPointerDownOutside={(event) => {\n        if (contains(controlRef.current, event.detail.originalEvent.target)) {\n          event.preventDefault();\n        }\n      }}\n      value={value}\n      {...rest}\n    >\n      <TagSelectorTagsInputRoot\n        ids={ids}\n        value={value}\n        editable={editable}\n        onValueChange={onValueChange}\n        addOnPaste={addOnPaste}\n        translations={translations}\n      >\n        {children}\n      </TagSelectorTagsInputRoot>\n    </ComboboxRoot>\n  );\n};\n\nconst TagSelectorTagsInputRoot = forwardRef<HTMLDivElement, TagsInputRootProps>((props, ref) => {\n  const comboboxApi = useComboboxContext();\n  return (\n    <TagsInputRoot\n      ref={ref}\n      onInputValueChange={(details) => comboboxApi.setInputValue(details.inputValue)}\n      {...props}\n    />\n  );\n});\n\nexport type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;\n\nexport const TagSelectorLabel = ComboboxLabel;\n\nexport const TagSelectorItemInput = TagsInputItemInput;\n\nexport const TagSelectorTrigger = ComboboxTrigger;\n\nexport const TagSelectorControl = forwardRef<HTMLDivElement, TagSelectorControlProps>(({ children, ...props }, ref) => {\n  return (\n    <ComboboxControl ref={ref} asChild>\n      <TagsInputControl {...props}>{children}</TagsInputControl>\n    </ComboboxControl>\n  );\n});\n\nexport const TagSelectorClearTrigger = ComboboxClearTrigger;\n\nexport type TagSelectorInputProps = ComboboxInputProps & TagsInputInputProps;\n\n// If you need to modify the TagsInputItem, you can use this.\nexport const TagSelectorInputBase = forwardRef<HTMLInputElement, TagSelectorInputProps>(\n  ({ children, ...props }, ref) => {\n    const tagsApi = useTagsInputContext();\n\n    return (\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    );\n  },\n);\n\nexport const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputProps>(({ children, ...props }, ref) => {\n  const tagsApi = useTagsInputContext();\n\n  return (\n    <>\n      {tagsApi.value.map((value, index) => (\n        <TagsInputItem index={index} value={value} key={value}>\n          <TagsInputItemPreview>\n            <TagsInputItemText>{value}</TagsInputItemText>\n            <TagsInputItemDeleteTrigger>\n              <CloseLine />\n            </TagsInputItemDeleteTrigger>\n          </TagsInputItemPreview>\n          <TagsInputItemInput />\n        </TagsInputItem>\n      ))}\n      <ComboboxInput ref={ref} asChild>\n        <TagsInputInput\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              tagsApi.addValue(tagsApi.inputValue);\n            }\n          }}\n          {...props}\n        >\n          {children}\n        </TagsInputInput>\n      </ComboboxInput>\n    </>\n  );\n});\n"],"mappings":";;;;;;;;;AAqCA,MAAa,kBAAkB,CAA2B,EACxD,mBAAmB,MACnB,WAAW,MACX,oBAAoB,SACpB,UACA,aAAa,OACb,eACA,UACA,OACA,aACA,GAAG,MACqB,KAAK;CAC7B,MAAM,MAAM;EACV,MAAM,kBAAO;EACb,OAAO,kBAAO;EACd,SAAS,kBAAO;CACjB;CAED,MAAM,aAAa,yBAA6C;AAEhE,sBAAU,MAAM;AACd,OAAK,WAAW,QACd,YAAW,UAAU,SAAS,eAAe,IAAI,QAAQ;CAE5D,GAAE,CAAC,IAAI,OAAQ,EAAC;AAEjB,wBACE,2BAACA;EACM;EACL;EACkB;EACR;EACS;EACJ;EACD;EACd,sBAAsB,CAAC,UAAU;AAC/B,OAAI,0BAAS,WAAW,SAAS,MAAM,OAAO,cAAc,OAAO,CACjE,OAAM,gBAAgB;EAEzB;EACM;EACP,GAAI;4BAEJ,2BAAC;GACM;GACE;GACG;GACK;GACH;GACE;GAEb;IACwB;GACd;AAElB;AAED,MAAM,2BAA2B,sBAA+C,CAAC,OAAO,QAAQ;CAC9F,MAAM,cAAc,wCAAoB;AACxC,wBACE,2BAACC;EACM;EACL,oBAAoB,CAAC,YAAY,YAAY,cAAc,QAAQ,WAAW;EAC9E,GAAI;GACJ;AAEL,EAAC;AAIF,MAAa,mBAAmBC;AAEhC,MAAa,uBAAuBC;AAEpC,MAAa,qBAAqBC;AAElC,MAAa,qBAAqB,sBAAoD,CAAC,EAAE,SAAU,GAAG,OAAO,EAAE,QAAQ;AACrH,wBACE,2BAACC;EAAqB;EAAK;4BACzB,2BAACC;GAAiB,GAAI;GAAQ;IAA4B;GAC1C;AAErB,EAAC;AAEF,MAAa,0BAA0BC;AAKvC,MAAa,uBAAuB,sBAClC,CAAC,EAAE,SAAU,GAAG,OAAO,EAAE,QAAQ;CAC/B,MAAM,UAAU,yCAAqB;AAErC,wBACE,2BAACC;EAAmB;EAAK;4BACvB,2BAACC;GACC,WAAW,CAAC,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;GAEvC;GACD,GAAI;GAEH;IACc;GACH;AAEnB,EACF;AAED,MAAa,mBAAmB,sBAAoD,CAAC,EAAE,SAAU,GAAG,OAAO,EAAE,QAAQ;CACnH,MAAM,UAAU,yCAAqB;AAErC,wBACE,qEACG,QAAQ,MAAM,IAAI,CAAC,OAAO,0BACzB,4BAACC;EAAqB;EAAc;6BAClC,4BAACC,qEACC,2BAACC,iDAAmB,QAA0B,kBAC9C,2BAACC,0EACC,2BAACC,2BAAY,GACc,IACR,kBACvB,2BAACX,yCAAqB;IAPwB,MAQhC,CAChB,kBACF,2BAACK;EAAmB;EAAK;4BACvB,2BAACC;GACC,WAAW,CAAC,UAAU;AACpB,QAAI,MAAM,QAAQ,QAChB,SAAQ,SAAS,QAAQ,WAAW;GAEvC;GACD,GAAI;GAEH;IACc;GACH,IACf;AAEN,EAAC"}

package/lib/ZendeskButton/ZendeskButton.js

@@ -0,0 +1,42 @@
+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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/ZendeskButton/ZendeskButton.tsx
+const ZendeskButton = (0, react.forwardRef)(({ locale, variant = "secondary", widgetKey, children,...rest }, ref) => {
+	const [loading, setLoading] = (0, react.useState)(false);
+	const handleClick = () => {
+		if (window && !window.zE) {
+			setLoading(true);
+			const script = document.createElement("script");
+			script.id = "ze-snippet";
+			script.type = "text/javascript";
+			script.async = true;
+			script.onload = () => {
+				if (window.zE) {
+					window.zE("webWidget", "setLocale", locale);
+					window.zE("webWidget:on", "close", () => {
+						setLoading(false);
+					});
+					window.zE("webWidget", "open");
+				}
+			};
+			script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;
+			document.body.appendChild(script);
+		} else if (window?.zE) window.zE("webWidget", "open");
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Button, {
+		onClick: handleClick,
+		variant,
+		id: "zendeskButton",
+		disabled: loading,
+		...rest,
+		ref,
+		children
+	});
+});
+
+//#endregion
+exports.ZendeskButton = ZendeskButton;
+//# sourceMappingURL=ZendeskButton.js.map

package/lib/ZendeskButton/ZendeskButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZendeskButton.js","names":["Button"],"sources":["../../src/ZendeskButton/ZendeskButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { forwardRef, useState } from \"react\";\nimport { Button, type ButtonProps } from \"@ndla/primitives\";\n\n// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.\n\nexport interface ZendeskButtonProps extends ButtonProps {\n  widgetKey: string;\n  locale: string;\n}\n\ndeclare global {\n  interface Window {\n    zE: (modifier: string, action: string, callback?: (() => void) | string) => void;\n  }\n}\n\nexport const ZendeskButton = forwardRef<HTMLButtonElement, ZendeskButtonProps>(\n  ({ locale, variant = \"secondary\", widgetKey, children, ...rest }, ref) => {\n    const [loading, setLoading] = useState(false);\n    const handleClick = () => {\n      if (window && !window.zE) {\n        setLoading(true);\n        // Asynchronously load zendesk scripts for better performance\n        const script = document.createElement(\"script\");\n        script.id = \"ze-snippet\";\n        script.type = \"text/javascript\";\n        script.async = true;\n        script.onload = () => {\n          if (window.zE) {\n            window.zE(\"webWidget\", \"setLocale\", locale);\n            window.zE(\"webWidget:on\", \"close\", () => {\n              setLoading(false);\n            });\n            window.zE(\"webWidget\", \"open\");\n          }\n        };\n        script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;\n        document.body.appendChild(script);\n      } else if (window?.zE) {\n        window.zE(\"webWidget\", \"open\");\n      }\n    };\n\n    return (\n      <Button onClick={handleClick} variant={variant} id=\"zendeskButton\" disabled={loading} {...rest} ref={ref}>\n        {children}\n      </Button>\n    );\n  },\n);\n"],"mappings":";;;;;;AAwBA,MAAa,gBAAgB,sBAC3B,CAAC,EAAE,QAAQ,UAAU,aAAa,WAAW,SAAU,GAAG,MAAM,EAAE,QAAQ;CACxE,MAAM,CAAC,SAAS,WAAW,GAAG,oBAAS,MAAM;CAC7C,MAAM,cAAc,MAAM;AACxB,MAAI,WAAW,OAAO,IAAI;AACxB,cAAW,KAAK;GAEhB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,UAAO,KAAK;AACZ,UAAO,OAAO;AACd,UAAO,QAAQ;AACf,UAAO,SAAS,MAAM;AACpB,QAAI,OAAO,IAAI;AACb,YAAO,GAAG,aAAa,aAAa,OAAO;AAC3C,YAAO,GAAG,gBAAgB,SAAS,MAAM;AACvC,iBAAW,MAAM;KAClB,EAAC;AACF,YAAO,GAAG,aAAa,OAAO;IAC/B;GACF;AACD,UAAO,OAAO,iDAAiD,UAAU;AACzE,YAAS,KAAK,YAAY,OAAO;EAClC,WAAU,QAAQ,GACjB,QAAO,GAAG,aAAa,OAAO;CAEjC;AAED,wBACE,2BAACA;EAAO,SAAS;EAAsB;EAAS,IAAG;EAAgB,UAAU;EAAS,GAAI;EAAW;EAClG;GACM;AAEZ,EACF"}

package/lib/_virtual/rolldown_runtime.js

@@ -0,0 +1,42 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+
+Object.defineProperty(exports, '__export', {
+  enumerable: true,
+  get: function () {
+    return __export;
+  }
+});
+Object.defineProperty(exports, '__toESM', {
+  enumerable: true,
+  get: function () {
+    return __toESM;
+  }
+});