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

package/es/model/WordClass.js

@@ -0,0 +1,53 @@
+import { __export } from "../_virtual/rolldown_runtime.js";
+
+//#region src/model/WordClass.ts
+var WordClass_exports = {};
+__export(WordClass_exports, { wordClass: () => wordClass });
+/**
+* Copyright (c) 2023-present, NDLA.
+*
+* This source code is licensed under the GPLv3 license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const wordClass = {
+	adjective: "adjective",
+	adverb: "adverb",
+	properNoun: "proper-noun",
+	auxiliary: "auxiliary",
+	complement: "complement",
+	conjunction: "conjunction",
+	coverb: "coverb",
+	determiner: "determiner",
+	interjection: "interjection",
+	quantifier: "quantifier",
+	marker: "marker",
+	modalVerb: "modal-verb",
+	measureWord: "measure-word",
+	noun: "noun",
+	"noun-zh": "noun-zh",
+	nounPhrase: "noun-phrase",
+	onomatopoeia: "onomatopoeia",
+	particle: "particle",
+	demonstrative: "demonstrative",
+	personalPronoun: "personal-pronoun",
+	preposition: "preposition",
+	pronoun: "pronoun",
+	questionWord: "question-word",
+	locationWord: "location-word",
+	suffix: "suffix",
+	numeral: "numeral",
+	timeWord: "time word",
+	timeExpression: "time-expression",
+	stativeVerb: "stative-verb",
+	subordinatingConjunction: "subordinating-conjunction",
+	exclamationWord: "exclamation-word",
+	expression: "expression",
+	verb: "verb",
+	verbComplement: "verb-complement",
+	verbObject: "verb-object"
+};
+
+//#endregion
+export { WordClass_exports };
+//# sourceMappingURL=WordClass.js.map

package/es/model/WordClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WordClass.js","names":[],"sources":["../../src/model/WordClass.ts"],"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\nexport const wordClass = {\n  adjective: \"adjective\",\n  adverb: \"adverb\",\n  properNoun: \"proper-noun\",\n  auxiliary: \"auxiliary\",\n  complement: \"complement\",\n  conjunction: \"conjunction\",\n  coverb: \"coverb\",\n  determiner: \"determiner\",\n  interjection: \"interjection\",\n  quantifier: \"quantifier\",\n  marker: \"marker\",\n  modalVerb: \"modal-verb\",\n  measureWord: \"measure-word\",\n  noun: \"noun\",\n  \"noun-zh\": \"noun-zh\",\n  nounPhrase: \"noun-phrase\",\n  onomatopoeia: \"onomatopoeia\",\n  particle: \"particle\",\n  demonstrative: \"demonstrative\",\n  personalPronoun: \"personal-pronoun\",\n  preposition: \"preposition\",\n  pronoun: \"pronoun\",\n  questionWord: \"question-word\",\n  locationWord: \"location-word\",\n  suffix: \"suffix\",\n  numeral: \"numeral\",\n  timeWord: \"time word\",\n  timeExpression: \"time-expression\",\n  stativeVerb: \"stative-verb\",\n  subordinatingConjunction: \"subordinating-conjunction\",\n  exclamationWord: \"exclamation-word\",\n  expression: \"expression\",\n  verb: \"verb\",\n  verbComplement: \"verb-complement\",\n  verbObject: \"verb-object\",\n};\n"],"mappings":";;;;;;;;;;;;AAQA,MAAa,YAAY;CACvB,WAAW;CACX,QAAQ;CACR,YAAY;CACZ,WAAW;CACX,YAAY;CACZ,aAAa;CACb,QAAQ;CACR,YAAY;CACZ,cAAc;CACd,YAAY;CACZ,QAAQ;CACR,WAAW;CACX,aAAa;CACb,MAAM;CACN,WAAW;CACX,YAAY;CACZ,cAAc;CACd,UAAU;CACV,eAAe;CACf,iBAAiB;CACjB,aAAa;CACb,SAAS;CACT,cAAc;CACd,cAAc;CACd,QAAQ;CACR,SAAS;CACT,UAAU;CACV,gBAAgB;CAChB,aAAa;CACb,0BAA0B;CAC1B,iBAAiB;CACjB,YAAY;CACZ,MAAM;CACN,gBAAgB;CAChB,YAAY;AACb"}

package/es/model/index.js

@@ -0,0 +1,19 @@
+import { contentTypeMapping, contentTypes, resourceEmbedTypeMapping } from "./ContentType.js";
+import { SubjectCategories_exports } from "./SubjectCategories.js";
+import { SubjectTypes_exports } from "./SubjectTypes.js";
+import { WordClass_exports } from "./WordClass.js";
+
+//#region src/model/index.ts
+const model = {
+	contentTypes,
+	subjectCategories: SubjectCategories_exports,
+	subjectTypes: SubjectTypes_exports,
+	contentTypeMapping,
+	resourceEmbedTypeMapping,
+	wordClass: WordClass_exports
+};
+var model_default = model;
+
+//#endregion
+export { model_default };
+//# sourceMappingURL=index.js.map

package/es/model/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/model/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 { contentTypes, contentTypeMapping, resourceEmbedTypeMapping } from \"./ContentType\";\nimport * as subjectCategories from \"./SubjectCategories\";\nimport * as subjectTypes from \"./SubjectTypes\";\nimport * as wordClass from \"./WordClass\";\n\nconst model = {\n  contentTypes,\n  subjectCategories,\n  subjectTypes,\n  contentTypeMapping,\n  resourceEmbedTypeMapping,\n  wordClass,\n};\n\nexport default model;\n"],"mappings":";;;;;;AAaA,MAAM,QAAQ;CACZ;CACA;CACA;CACA;CACA;CACA;AACD;AAED,oBAAe"}

package/es/utils/licenseAttributes.js

@@ -0,0 +1,16 @@
+import { getLicenseByAbbreviation, isCreativeCommonsLicense } from "@ndla/licenses";
+
+//#region src/utils/licenseAttributes.ts
+const licenseAttributes = (license, lang, url) => {
+	const licenseAbbr = getLicenseByAbbreviation(license ? license : "", lang);
+	const licenseProps = isCreativeCommonsLicense(licenseAbbr.rights) ? {
+		"xmlns:cc": "https://creativecommons.org/ns#",
+		"xmlns:dct": "http://purl.org/dc/terms/",
+		about: url ?? void 0
+	} : {};
+	return licenseProps;
+};
+
+//#endregion
+export { licenseAttributes };
+//# sourceMappingURL=licenseAttributes.js.map

package/es/utils/licenseAttributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"licenseAttributes.js","names":["license: string | undefined","lang: string | undefined","url: string | undefined"],"sources":["../../src/utils/licenseAttributes.ts"],"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 { getLicenseByAbbreviation, isCreativeCommonsLicense } from \"@ndla/licenses\";\n\nexport const licenseAttributes = (license: string | undefined, lang: string | undefined, url: string | undefined) => {\n  const licenseAbbr = getLicenseByAbbreviation(license ? license : \"\", lang);\n\n  const licenseProps = isCreativeCommonsLicense(licenseAbbr.rights)\n    ? {\n        \"xmlns:cc\": \"https://creativecommons.org/ns#\",\n        \"xmlns:dct\": \"http://purl.org/dc/terms/\",\n        about: url ?? undefined,\n      }\n    : {};\n\n  return licenseProps;\n};\n"],"mappings":";;;AAUA,MAAa,oBAAoB,CAACA,SAA6BC,MAA0BC,QAA4B;CACnH,MAAM,cAAc,yBAAyB,UAAU,UAAU,IAAI,KAAK;CAE1E,MAAM,eAAe,yBAAyB,YAAY,OAAO,GAC7D;EACE,YAAY;EACZ,aAAa;EACb,OAAO;CACR,IACD,CAAE;AAEN,QAAO;AACR"}

package/es/utils/relativeUrl.js

@@ -0,0 +1,26 @@
+import { supportedTranslationLanguages } from "../i18n/i18n.js";
+
+//#region src/utils/relativeUrl.ts
+const ENV_REGEX = /(staging|test)\.?/;
+const LANGUAGE_REGEX = new RegExp(`^\\/((?:${supportedTranslationLanguages.join("|")})(?:$|\\/))`, "");
+const NDLA_URL = /(.*\.)?ndla.no.*/;
+const REPLACE_WWW = /^www\./;
+const getPossiblyRelativeUrl = (url, path) => {
+	if (!path) return url;
+	if (url.startsWith("mailto:")) return url;
+	if (!NDLA_URL.test(url) || !NDLA_URL.test(path)) return url;
+	const urlObj = new URL(url.replace(ENV_REGEX, ""));
+	const pathObj = new URL(path.replace(ENV_REGEX, ""));
+	if (urlObj.hostname.replace(REPLACE_WWW, "") === pathObj.hostname.replace(REPLACE_WWW, "")) {
+		const search = urlObj.search;
+		const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
+		const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
+		if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) return `${urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "")}${search}`;
+		return `${urlObj.pathname}${search}`;
+	}
+	return url;
+};
+
+//#endregion
+export { getPossiblyRelativeUrl };
+//# sourceMappingURL=relativeUrl.js.map

package/es/utils/relativeUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relativeUrl.js","names":["url: string","path?: string"],"sources":["../../src/utils/relativeUrl.ts"],"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 { supportedTranslationLanguages } from \"../i18n/i18n\";\n\nconst ENV_REGEX = /(staging|test)\\.?/;\nconst LANGUAGE_REGEX = new RegExp(`^\\\\/((?:${supportedTranslationLanguages.join(\"|\")})(?:$|\\\\/))`, \"\");\n\nconst NDLA_URL = /(.*\\.)?ndla.no.*/;\nconst REPLACE_WWW = /^www\\./;\n\nexport const getPossiblyRelativeUrl = (url: string, path?: string) => {\n  if (!path) return url;\n  // If url is a mailto link, return url as is.\n  if (url.startsWith(\"mailto:\")) return url;\n  // If not on NDLA, or if url is not a NDLA url, return url as is\n  if (!NDLA_URL.test(url) || !NDLA_URL.test(path)) return url;\n  //Remove environment info\n  const urlObj = new URL(url.replace(ENV_REGEX, \"\"));\n  const pathObj = new URL(path.replace(ENV_REGEX, \"\"));\n  // If the host is the same, return the relative path\n  if (urlObj.hostname.replace(REPLACE_WWW, \"\") === pathObj.hostname.replace(REPLACE_WWW, \"\")) {\n    // Replace the language part of the url with the language part of the path\n    // Keep the search params if they exist\n    const search = urlObj.search;\n    // If the path language part does not exist, remove it.\n    const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);\n    const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);\n    if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {\n      return `${urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || \"\")}${search}`;\n    }\n\n    return `${urlObj.pathname}${search}`;\n  }\n  return url;\n};\n"],"mappings":";;;AAUA,MAAM,YAAY;AAClB,MAAM,iBAAiB,IAAI,QAAQ,UAAU,8BAA8B,KAAK,IAAI,CAAC,cAAc;AAEnG,MAAM,WAAW;AACjB,MAAM,cAAc;AAEpB,MAAa,yBAAyB,CAACA,KAAaC,SAAkB;AACpE,MAAK,KAAM,QAAO;AAElB,KAAI,IAAI,WAAW,UAAU,CAAE,QAAO;AAEtC,MAAK,SAAS,KAAK,IAAI,KAAK,SAAS,KAAK,KAAK,CAAE,QAAO;CAExD,MAAM,SAAS,IAAI,IAAI,IAAI,QAAQ,WAAW,GAAG;CACjD,MAAM,UAAU,IAAI,IAAI,KAAK,QAAQ,WAAW,GAAG;AAEnD,KAAI,OAAO,SAAS,QAAQ,aAAa,GAAG,KAAK,QAAQ,SAAS,QAAQ,aAAa,GAAG,EAAE;EAG1F,MAAM,SAAS,OAAO;EAEtB,MAAM,WAAW,OAAO,SAAS,MAAM,eAAe;EACtD,MAAM,YAAY,QAAQ,SAAS,MAAM,eAAe;AACxD,MAAI,WAAW,MAAM,WAAW,OAAO,YAAY,GACjD,SAAQ,EAAE,OAAO,SAAS,QAAQ,SAAS,IAAI,YAAY,MAAM,GAAG,CAAC,EAAE,OAAO;AAGhF,UAAQ,EAAE,OAAO,SAAS,EAAE,OAAO;CACpC;AACD,QAAO;AACR"}

package/lib/Article/Article.js

@@ -0,0 +1,134 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
+const require_ArticleByline = require('./ArticleByline.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_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+const __ndla_styled_system_css = require_rolldown_runtime.__toESM(require("@ndla/styled-system/css"));
+
+//#region src/Article/Article.tsx
+const StyledArticleContent = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.section, {}, { baseComponent: true });
+const ArticleContent = (0, react.forwardRef)(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArticleContent, {
+	className: (0, __ndla_styled_system_css.cx)("ndla-article", className),
+	...props,
+	ref
+}));
+const StyledArticleWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.article, { base: {
+	background: "background.default",
+	display: "flex",
+	flexDirection: "column",
+	color: "text.default",
+	alignItems: "center",
+	width: "100%",
+	overflowWrap: "break-word",
+	position: "relative",
+	"& mjx-stretchy-v > mjx-ext > mjx-c": { transform: "scaleY(100) translateY(0.075em)" },
+	_after: {
+		content: "",
+		display: "table",
+		clear: "both"
+	}
+} }, { baseComponent: true });
+const ArticleWrapper = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledArticleWrapper, {
+	"data-ndla-article": "",
+	ref,
+	...props
+}));
+const ArticleHGroup = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.hgroup, { base: {
+	display: "flex",
+	width: "100%",
+	flexDirection: "column",
+	alignItems: "flex-start",
+	"& h1": { overflowWrap: "anywhere" }
+} }, { baseComponent: true });
+const ArticleHeader = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.header, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	alignItems: "flex-start",
+	width: "100%",
+	paddingBlockStart: "xxlarge",
+	overflowWrap: "anywhere"
+} }, { baseComponent: true });
+const ArticleFooter = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.footer, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xxlarge",
+	width: "100%",
+	"& > :is(:last-child)": { paddingBlockEnd: "5xlarge" }
+} }, { baseComponent: true });
+const StyledStack = (0, __ndla_styled_system_jsx.styled)(__ndla_styled_system_jsx.Stack, { base: {
+	width: "100%",
+	minHeight: "xxlarge"
+} });
+const StyledWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "small",
+	flexWrap: "wrap",
+	alignItems: "center"
+} });
+const ArticleTitle = ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, disclaimer }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleHeader, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleHGroup, { children: [(!!contentType || !!heartButton) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledStack, {
+			justify: "space-between",
+			align: "center",
+			direction: "row",
+			gap: "small",
+			children: [!!contentType && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentTypeBadge.ContentTypeBadge, {
+				contentType,
+				children: contentTypeLabel
+			}), heartButton]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			textStyle: "heading.medium",
+			id,
+			lang,
+			property: "dct:title",
+			children: title
+		})] }),
+		!!introduction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+			lang,
+			textStyle: "body.xlarge",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: introduction })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledWrapper, { children: [competenceGoals, disclaimer] })
+	] });
+};
+const Article = ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, disclaimer }) => {
+	const { title, introduction, published, content, footNotes, copyright } = article;
+	const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticleTitle, {
+			id,
+			contentType,
+			heartButton,
+			title,
+			introduction,
+			competenceGoals,
+			lang,
+			contentTypeLabel,
+			disclaimer
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticleContent, { children: content }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ArticleFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArticleByline.ArticleByline, {
+			footnotes: footNotes,
+			authors,
+			suppliers: copyright?.rightsholders,
+			published,
+			licenseBox
+		}), children] })
+	] });
+};
+
+//#endregion
+exports.Article = Article;
+exports.ArticleContent = ArticleContent;
+exports.ArticleFooter = ArticleFooter;
+exports.ArticleHGroup = ArticleHGroup;
+exports.ArticleHeader = ArticleHeader;
+exports.ArticleTitle = ArticleTitle;
+exports.ArticleWrapper = ArticleWrapper;
+//# sourceMappingURL=Article.js.map

package/lib/Article/Article.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Article.js","names":["ark","Stack","ContentTypeBadge","Heading","Text","ArticleByline"],"sources":["../../src/Article/Article.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { Heading, Text } from \"@ndla/primitives\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { Stack, styled } from \"@ndla/styled-system/jsx\";\nimport type { JsxStyleProps } from \"@ndla/styled-system/types\";\nimport { ArticleByline } from \"./ArticleByline\";\nimport { ContentTypeBadge, type ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport type { Article as ArticleType } from \"../types\";\n\nconst StyledArticleContent = styled(ark.section, {}, { baseComponent: true });\n\nexport const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<\"div\"> & JsxStyleProps>(\n  ({ className, ...props }, ref) => (\n    <StyledArticleContent className={cx(\"ndla-article\", className)} {...props} ref={ref} />\n  ),\n);\n\nconst StyledArticleWrapper = styled(\n  ark.article,\n  {\n    base: {\n      background: \"background.default\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      color: \"text.default\",\n      alignItems: \"center\",\n      width: \"100%\",\n      overflowWrap: \"break-word\",\n      position: \"relative\",\n      \"& mjx-stretchy-v > mjx-ext > mjx-c\": {\n        transform: \"scaleY(100) translateY(0.075em)\",\n      },\n      _after: {\n        content: \"\",\n        display: \"table\",\n        clear: \"both\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleWrapper = forwardRef<HTMLElement, ComponentPropsWithRef<\"article\"> & JsxStyleProps>(\n  (props, ref) => <StyledArticleWrapper data-ndla-article=\"\" ref={ref} {...props} />,\n);\n\nexport const ArticleHGroup = styled(\n  ark.hgroup,\n  {\n    base: {\n      display: \"flex\",\n      width: \"100%\",\n      flexDirection: \"column\",\n      alignItems: \"flex-start\",\n      \"& h1\": {\n        overflowWrap: \"anywhere\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleHeader = styled(\n  ark.header,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"medium\",\n      alignItems: \"flex-start\",\n      width: \"100%\",\n      paddingBlockStart: \"xxlarge\",\n      overflowWrap: \"anywhere\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const ArticleFooter = styled(\n  ark.footer,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xxlarge\",\n      width: \"100%\",\n      \"& > :is(:last-child)\": {\n        paddingBlockEnd: \"5xlarge\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nconst StyledStack = styled(Stack, {\n  base: {\n    width: \"100%\",\n    minHeight: \"xxlarge\",\n  },\n});\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n});\n\ninterface ArticleTitleProps {\n  heartButton?: ReactNode;\n  contentType?: ContentType;\n  contentTypeLabel?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  title?: ReactNode;\n  introduction?: ReactNode;\n  disclaimer?: ReactNode;\n}\n\nexport const ArticleTitle = ({\n  contentType,\n  heartButton,\n  title,\n  lang,\n  id,\n  introduction,\n  contentTypeLabel,\n  competenceGoals,\n  disclaimer,\n}: ArticleTitleProps) => {\n  return (\n    <ArticleHeader>\n      <ArticleHGroup>\n        {(!!contentType || !!heartButton) && (\n          <StyledStack justify=\"space-between\" align=\"center\" direction=\"row\" gap=\"small\">\n            {!!contentType && <ContentTypeBadge contentType={contentType}>{contentTypeLabel}</ContentTypeBadge>}\n            {heartButton}\n          </StyledStack>\n        )}\n        <Heading textStyle=\"heading.medium\" id={id} lang={lang} property=\"dct:title\">\n          {title}\n        </Heading>\n      </ArticleHGroup>\n      {!!introduction && (\n        <Text lang={lang} textStyle=\"body.xlarge\" asChild consumeCss>\n          <div>{introduction}</div>\n        </Text>\n      )}\n      <StyledWrapper>\n        {competenceGoals}\n        {disclaimer}\n      </StyledWrapper>\n    </ArticleHeader>\n  );\n};\n\ninterface Props {\n  heartButton?: ReactNode;\n  article: ArticleType;\n  licenseBox?: ReactNode;\n  contentType?: ContentType;\n  contentTypeLabel?: ReactNode;\n  children?: ReactNode;\n  competenceGoals?: ReactNode;\n  id: string;\n  lang?: string;\n  disclaimer?: ReactNode;\n}\n\nexport const Article = ({\n  article,\n  contentType,\n  licenseBox,\n  children,\n  competenceGoals,\n  contentTypeLabel,\n  id,\n  heartButton,\n  lang,\n  disclaimer,\n}: Props) => {\n  const { title, introduction, published, content, footNotes, copyright } = article;\n\n  const authors =\n    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;\n\n  return (\n    <ArticleWrapper>\n      <ArticleTitle\n        id={id}\n        contentType={contentType}\n        heartButton={heartButton}\n        title={title}\n        introduction={introduction}\n        competenceGoals={competenceGoals}\n        lang={lang}\n        contentTypeLabel={contentTypeLabel}\n        disclaimer={disclaimer}\n      />\n      <ArticleContent>{content}</ArticleContent>\n      <ArticleFooter>\n        <ArticleByline\n          footnotes={footNotes}\n          authors={authors}\n          suppliers={copyright?.rightsholders}\n          published={published}\n          licenseBox={licenseBox}\n        />\n        {children}\n      </ArticleFooter>\n    </ArticleWrapper>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,uBAAuB,qCAAOA,mBAAI,SAAS,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAE7E,MAAa,iBAAiB,sBAC5B,CAAC,EAAE,UAAW,GAAG,OAAO,EAAE,wBACxB,2BAAC;CAAqB,WAAW,iCAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,qCAC3BA,mBAAI,SACJ,EACE,MAAM;CACJ,YAAY;CACZ,SAAS;CACT,eAAe;CACf,OAAO;CACP,YAAY;CACZ,OAAO;CACP,cAAc;CACd,UAAU;CACV,sCAAsC,EACpC,WAAW,kCACZ;CACD,QAAQ;EACN,SAAS;EACT,SAAS;EACT,OAAO;CACR;AACF,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,iBAAiB,sBAC5B,CAAC,OAAO,wBAAQ,2BAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CACnF;AAED,MAAa,gBAAgB,qCAC3BA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,OAAO;CACP,eAAe;CACf,YAAY;CACZ,QAAQ,EACN,cAAc,WACf;AACF,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,gBAAgB,qCAC3BA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,OAAO;CACP,mBAAmB;CACnB,cAAc;AACf,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,gBAAgB,qCAC3BA,mBAAI,QACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACP,wBAAwB,EACtB,iBAAiB,UAClB;AACF,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAM,cAAc,qCAAOC,gCAAO,EAChC,MAAM;CACJ,OAAO;CACP,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,UAAU;CACV,YAAY;AACb,EACF,EAAC;AAcF,MAAa,eAAe,CAAC,EAC3B,aACA,aACA,OACA,MACA,IACA,cACA,kBACA,iBACA,YACkB,KAAK;AACvB,wBACE,4BAAC;kBACC,4BAAC,+BACK,iBAAiB,gCACnB,4BAAC;GAAY,SAAQ;GAAgB,OAAM;GAAS,WAAU;GAAM,KAAI;gBACnE,+BAAe,2BAACC;IAA8B;cAAc;KAAoC,EAClG;IACW,kBAEhB,2BAACC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;IACb,gCACD,2BAACC;GAAW;GAAM,WAAU;GAAc;GAAQ;6BAChD,2BAAC,mBAAK,eAAmB;IACpB;kBAET,4BAAC,4BACE,iBACA,cACa;KACF;AAEnB;AAeD,MAAa,UAAU,CAAC,EACtB,SACA,aACA,YACA,UACA,iBACA,kBACA,IACA,aACA,MACA,YACM,KAAK;CACX,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS,WAAW,WAAW,GAAG;CAE1E,MAAM,UACJ,WAAW,SAAS,UAAU,WAAW,cAAc,SAAS,UAAU,WAAW,WAAW;AAElG,wBACE,4BAAC;kBACC,2BAAC;GACK;GACS;GACA;GACN;GACO;GACG;GACX;GACY;GACN;IACZ;kBACF,2BAAC,4BAAgB,UAAyB;kBAC1C,4BAAC,4CACC,2BAACC;GACC,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD;AAEpB"}

package/lib/Article/ArticleByline.js

@@ -0,0 +1,135 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_ArticleFootNotes = require('./ArticleFootNotes.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const react_router_dom = require_rolldown_runtime.__toESM(require("react-router-dom"));
+
+//#region src/Article/ArticleByline.tsx
+const Wrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	marginBlockStart: "medium",
+	paddingBlockStart: "xsmall",
+	borderTop: "1px solid",
+	borderColor: "stroke.subtle"
+} });
+const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", {
+	base: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "3xsmall",
+		width: "100%",
+		justifyContent: "space-between",
+		paddingBlock: "xsmall",
+		textStyle: "body.medium",
+		"& [data-contributors=\"false\"]": { marginInlineStart: "auto" }
+	},
+	variants: { learningpath: {
+		true: {},
+		false: { tabletWide: { flexDirection: "row" } }
+	} }
+});
+const renderContributors = (contributors, t) => {
+	const contributorsArray = contributors.map((contributor, index) => {
+		if (index < 1) return contributor.name;
+		const sep = index === contributors.length - 1 ? ` ${t("article.conjunction")} ` : ", ";
+		return `${sep}${contributor.name}`;
+	});
+	return contributorsArray.join("");
+};
+const getSuppliersText = (suppliers, t) => {
+	if (suppliers.length === 0) return "";
+	return suppliers.length > 1 ? t("article.multipleSuppliersLabel", {
+		names: renderContributors(suppliers, t),
+		interpolation: { escapeValue: false }
+	}) : t("article.supplierLabel", {
+		name: renderContributors(suppliers, t),
+		interpolation: { escapeValue: false }
+	});
+};
+const StyledAccordionRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.AccordionRoot, { base: { paddingBlockStart: "xxlarge" } });
+const refRegexp = /note\d/;
+const footnotesAccordionId = "footnotes";
+const ArticleByline = ({ authors = [], suppliers = [], footnotes, licenseBox, published, displayByline = true, bylineType = "article", bylineSuffix }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const { pathname } = (0, react_router_dom.useLocation)();
+	const [openAccordions, setOpenAccordions] = (0, react.useState)([]);
+	const accordionItemValue = "rulesForUse";
+	const onHashChange = (0, react.useCallback)((e) => {
+		const hash = e.newURL.split("#")[1];
+		if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {
+			setOpenAccordions([...openAccordions, footnotesAccordionId]);
+			const el = document.getElementById(`#${hash}`);
+			el?.click();
+			el?.focus();
+		}
+	}, [openAccordions]);
+	(0, react.useEffect)(() => {
+		setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));
+	}, [pathname]);
+	(0, react.useEffect)(() => {
+		window.addEventListener("hashchange", onHashChange);
+		return () => window.removeEventListener("hashchange", onHashChange);
+	}, [onHashChange]);
+	const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
+	const authorLabel = {
+		article: "article.authorsLabel",
+		learningPath: "article.authorsLabelLearningpath",
+		external: "article.authorsLabelExternal"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, { children: [!!displayByline && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextWrapper, {
+		learningpath: bylineType === "learningPath",
+		children: [
+			!!showPrimaryContributors && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [authors.length > 0 && `${t(authorLabel[bylineType], {
+				names: renderContributors(authors, t),
+				interpolation: { escapeValue: false }
+			})}. `, getSuppliersText(suppliers, t)] }),
+			published ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-contributors": showPrimaryContributors,
+				children: [
+					t(`${bylineType}.lastUpdated`),
+					" ",
+					published
+				]
+			}) : null,
+			bylineSuffix
+		]
+	}), (!!licenseBox || !!footnotes?.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledAccordionRoot, {
+		multiple: true,
+		value: openAccordions,
+		onValueChange: (details) => setOpenAccordions(details.value),
+		children: [!!licenseBox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticleBylineAccordionItem, {
+			value: accordionItemValue,
+			accordionTitle: t("article.useContent"),
+			children: licenseBox
+		}), !!footnotes?.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticleBylineAccordionItem, {
+			value: footnotesAccordionId,
+			accordionTitle: t("article.footnotes"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ArticleFootNotes.ArticleFootNotes, { footNotes: footnotes })
+		})]
+	})] });
+};
+const ArticleBylineAccordionItem = (0, react.forwardRef)(({ value, accordionTitle, children,...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.AccordionItem, {
+		value,
+		ref,
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			asChild: true,
+			consumeCss: true,
+			textStyle: "label.medium",
+			fontWeight: "bold",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.AccordionItemTrigger, { children: [accordionTitle, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionItemIndicator, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowDownShortLine, {})
+			})] }) })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionItemContent, { children })]
+	});
+});
+
+//#endregion
+exports.ArticleByline = ArticleByline;
+exports.ArticleBylineAccordionItem = ArticleBylineAccordionItem;
+//# sourceMappingURL=ArticleByline.js.map

package/lib/Article/ArticleByline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleByline.js","names":["contributors: SupplierProps[] | AuthorProps[]","t: TFunction","suppliers: SupplierProps[]","AccordionRoot","e: HashChangeEvent","authorLabel: Record<string, string>","ArticleFootNotes","AccordionItem","Heading","AccordionItemTrigger","AccordionItemIndicator","ArrowDownShortLine","AccordionItemContent"],"sources":["../../src/Article/ArticleByline.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-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 { TFunction } from \"i18next\";\nimport { type ReactNode, forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useLocation } from \"react-router-dom\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { ArticleFootNotes } from \"./ArticleFootNotes\";\nimport type { FootNote } from \"../types\";\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.\n    marginBlockStart: \"medium\",\n    paddingBlockStart: \"xsmall\",\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"body.medium\",\n    '& [data-contributors=\"false\"]': {\n      marginInlineStart: \"auto\",\n    },\n  },\n  variants: {\n    learningpath: {\n      true: {},\n      false: {\n        tabletWide: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n});\n\ntype AuthorProps = {\n  name: string;\n};\n\ntype SupplierProps = {\n  name: string;\n};\n\ntype Props = {\n  authors?: AuthorProps[];\n  suppliers?: SupplierProps[];\n  published?: string;\n  licenseBox?: ReactNode;\n  footnotes?: FootNote[];\n  displayByline?: boolean;\n  bylineType?: \"article\" | \"learningPath\" | \"external\";\n  bylineSuffix?: ReactNode;\n};\n\nconst renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {\n  const contributorsArray = contributors.map((contributor, index) => {\n    if (index < 1) return contributor.name;\n    const sep = index === contributors.length - 1 ? ` ${t(\"article.conjunction\")} ` : \", \";\n    return `${sep}${contributor.name}`;\n  });\n  return contributorsArray.join(\"\");\n};\n\nconst getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {\n  if (suppliers.length === 0) {\n    return \"\";\n  }\n  return suppliers.length > 1\n    ? t(\"article.multipleSuppliersLabel\", {\n        names: renderContributors(suppliers, t),\n        interpolation: { escapeValue: false },\n      })\n    : t(\"article.supplierLabel\", {\n        name: renderContributors(suppliers, t),\n        interpolation: { escapeValue: false },\n      });\n};\n\nconst StyledAccordionRoot = styled(AccordionRoot, {\n  base: {\n    paddingBlockStart: \"xxlarge\",\n  },\n});\n\nconst refRegexp = /note\\d/;\nconst footnotesAccordionId = \"footnotes\";\n\nexport const ArticleByline = ({\n  authors = [],\n  suppliers = [],\n  footnotes,\n  licenseBox,\n  published,\n  displayByline = true,\n  bylineType = \"article\",\n  bylineSuffix,\n}: Props) => {\n  const { t } = useTranslation();\n  const { pathname } = useLocation();\n  const [openAccordions, setOpenAccordions] = useState<string[]>([]);\n  const accordionItemValue = \"rulesForUse\";\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {\n        setOpenAccordions([...openAccordions, footnotesAccordionId]);\n        const el = document.getElementById(`#${hash}`);\n        el?.click();\n        el?.focus();\n      }\n    },\n    [openAccordions],\n  );\n\n  useEffect(() => {\n    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));\n  }, [pathname]);\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\n\n  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;\n\n  const authorLabel: Record<string, string> = {\n    article: \"article.authorsLabel\",\n    learningPath: \"article.authorsLabelLearningpath\",\n    external: \"article.authorsLabelExternal\",\n  };\n\n  return (\n    <Wrapper>\n      {!!displayByline && (\n        <TextWrapper learningpath={bylineType === \"learningPath\"}>\n          {!!showPrimaryContributors && (\n            <span>\n              {authors.length > 0 &&\n                `${t(authorLabel[bylineType], {\n                  names: renderContributors(authors, t),\n                  interpolation: { escapeValue: false },\n                })}. `}\n              {getSuppliersText(suppliers, t)}\n            </span>\n          )}\n          {published ? (\n            <div data-contributors={showPrimaryContributors}>\n              {t(`${bylineType}.lastUpdated`)} {published}\n            </div>\n          ) : null}\n          {bylineSuffix}\n        </TextWrapper>\n      )}\n      {(!!licenseBox || !!footnotes?.length) && (\n        <StyledAccordionRoot\n          multiple\n          value={openAccordions}\n          onValueChange={(details) => setOpenAccordions(details.value)}\n        >\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && (\n            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n              <ArticleFootNotes footNotes={footnotes} />\n            </ArticleBylineAccordionItem>\n          )}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}

package/lib/Article/ArticleFootNotes.js

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Article/ArticleFootNotes.tsx
+const citeDetailString = (description) => description ? `${description}. ` : "";
+const StyledCite = (0, __ndla_styled_system_jsx.styled)("cite", { base: {
+	display: "flex",
+	alignItems: "center",
+	gap: "xsmall"
+} });
+const FootNote = ({ footNote }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+	id: `note${footNote.ref}`,
+	asChild: true,
+	consumeCss: true,
+	textStyle: "body.medium",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledCite, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href: `#ref${footNote.ref}`,
+			target: "_self",
+			children: footNote.ref
+		}),
+		`«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(footNote.publisher)}${footNote.year}. `,
+		footNote.url ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+			href: footNote.url,
+			children: [footNote.url, "."]
+		}) : null
+	] })
+}) });
+const FootnoteList = (0, __ndla_styled_system_jsx.styled)("ol", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	listStyle: "none"
+} });
+const ArticleFootNotes = ({ footNotes }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FootnoteList, { children: footNotes.map((footNote) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FootNote, { footNote }, footNote.ref)) });
+
+//#endregion
+exports.ArticleFootNotes = ArticleFootNotes;
+//# sourceMappingURL=ArticleFootNotes.js.map

package/lib/Article/ArticleFootNotes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleFootNotes.js","names":["description: string | undefined","Text"],"sources":["../../src/Article/ArticleFootNotes.tsx"],"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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootNote as FootNoteType } from \"../types\";\n\nconst citeDetailString = (description: string | undefined) => (description ? `${description}. ` : \"\");\n\ntype FootNoteProps = {\n  footNote: FootNoteType;\n};\n\nconst StyledCite = styled(\"cite\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nconst FootNote = ({ footNote }: FootNoteProps) => (\n  <li>\n    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle=\"body.medium\">\n      <StyledCite>\n        <a href={`#ref${footNote.ref}`} target=\"_self\">\n          {footNote.ref}\n        </a>\n        {`«${footNote.title}». ${footNote.authors.join(\" \")}. ${citeDetailString(footNote.edition)}${citeDetailString(\n          footNote.publisher,\n        )}${footNote.year}. `}\n        {footNote.url ? (\n          <a href={footNote.url}>\n            {footNote.url}\n            {\".\"}\n          </a>\n        ) : null}\n      </StyledCite>\n    </Text>\n  </li>\n);\n\ntype ArticleFootNotesProps = {\n  footNotes: Array<FootNoteType>;\n};\n\nconst FootnoteList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    listStyle: \"none\",\n  },\n});\n\nexport const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (\n  <FootnoteList>\n    {footNotes.map((footNote) => (\n      <FootNote key={footNote.ref} footNote={footNote} />\n    ))}\n  </FootnoteList>\n);\n"],"mappings":";;;;;;AAYA,MAAM,mBAAmB,CAACA,gBAAqC,eAAe,EAAE,YAAY,MAAM;AAMlG,MAAM,aAAa,qCAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,WAAW,CAAC,EAAE,UAAyB,qBAC3C,2BAAC,kCACC,2BAACC;CAAK,KAAK,MAAM,SAAS,IAAI;CAAG;CAAQ;CAAW,WAAU;2BAC5D,4BAAC;kBACC,2BAAC;GAAE,OAAO,MAAM,SAAS,IAAI;GAAG,QAAO;aACpC,SAAS;IACR;GACF,GAAG,SAAS,MAAM,KAAK,SAAS,QAAQ,KAAK,IAAI,CAAC,IAAI,iBAAiB,SAAS,QAAQ,CAAC,EAAE,iBAC3F,SAAS,UACV,CAAC,EAAE,SAAS,KAAK;EACjB,SAAS,sBACR,4BAAC;GAAE,MAAM,SAAS;cACf,SAAS,KACT;IACC,GACF;KACO;EACR,GACJ;AAOP,MAAM,eAAe,qCAAO,MAAM,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;AACZ,EACF,EAAC;AAEF,MAAa,mBAAmB,CAAC,EAAE,WAAkC,qBACnE,2BAAC,0BACE,UAAU,IAAI,CAAC,6BACd,2BAAC,YAAsC,YAAxB,SAAS,IAA2B,CACnD,GACW"}