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

package/es/Article/Article.js

@@ -1,199 +1,127 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge.js";
+import { ArticleByline } from "./ArticleByline.js";
 import { forwardRef } from "react";
-import { ark } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
-import { cx } from "@ndla/styled-system/css";
 import { Stack, styled } from "@ndla/styled-system/jsx";
-import { ArticleByline } from "./ArticleByline";
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledArticleContent = styled(ark.section, {}, {
-  baseComponent: true
-});
-export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledArticleContent, {
-    className: cx("ndla-article", className),
-    ...props,
-    ref: ref
-  });
-});
-const StyledArticleWrapper = styled(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
-});
-export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
-  "data-ndla-article": "",
-  ref: ref,
-  ...props
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react";
+import { cx } from "@ndla/styled-system/css";
+
+//#region src/Article/Article.tsx
+const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
+const ArticleContent = forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(StyledArticleContent, {
+	className: cx("ndla-article", className),
+	...props,
+	ref
+}));
+const StyledArticleWrapper = styled(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 = forwardRef((props, ref) => /* @__PURE__ */ jsx(StyledArticleWrapper, {
+	"data-ndla-article": "",
+	ref,
+	...props
 }));
-export const ArticleHGroup = styled(ark.hgroup, {
-  base: {
-    display: "flex",
-    width: "100%",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    "& h1": {
-      overflowWrap: "anywhere"
-    }
-  }
-}, {
-  baseComponent: true
-});
-export const ArticleHeader = styled(ark.header, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    alignItems: "flex-start",
-    width: "100%",
-    paddingBlockStart: "xxlarge",
-    overflowWrap: "anywhere"
-  }
-}, {
-  baseComponent: true
-});
-export const ArticleFooter = styled(ark.footer, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xxlarge",
-    width: "100%",
-    "& > :is(:last-child)": {
-      paddingBlockEnd: "5xlarge"
-    }
-  }
-}, {
-  baseComponent: true
-});
-const StyledStack = styled(Stack, {
-  base: {
-    width: "100%",
-    minHeight: "xxlarge"
-  }
-});
-const StyledWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "small",
-    flexWrap: "wrap",
-    alignItems: "center"
-  }
-});
-export const ArticleTitle = _ref2 => {
-  let {
-    contentType,
-    heartButton,
-    title,
-    lang,
-    id,
-    introduction,
-    contentTypeLabel,
-    competenceGoals,
-    disclaimer
-  } = _ref2;
-  return /*#__PURE__*/_jsxs(ArticleHeader, {
-    children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
-      children: [(!!contentType || !!heartButton) && /*#__PURE__*/_jsxs(StyledStack, {
-        justify: "space-between",
-        align: "center",
-        direction: "row",
-        gap: "small",
-        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadge, {
-          contentType: contentType,
-          children: contentTypeLabel
-        }), heartButton]
-      }), /*#__PURE__*/_jsx(Heading, {
-        textStyle: "heading.medium",
-        id: id,
-        lang: lang,
-        property: "dct:title",
-        children: title
-      })]
-    }), !!introduction && /*#__PURE__*/_jsx(Text, {
-      lang: lang,
-      textStyle: "body.xlarge",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/_jsx("div", {
-        children: introduction
-      })
-    }), /*#__PURE__*/_jsxs(StyledWrapper, {
-      children: [competenceGoals, disclaimer]
-    })]
-  });
+const ArticleHGroup = styled(ark.hgroup, { base: {
+	display: "flex",
+	width: "100%",
+	flexDirection: "column",
+	alignItems: "flex-start",
+	"& h1": { overflowWrap: "anywhere" }
+} }, { baseComponent: true });
+const ArticleHeader = styled(ark.header, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	alignItems: "flex-start",
+	width: "100%",
+	paddingBlockStart: "xxlarge",
+	overflowWrap: "anywhere"
+} }, { baseComponent: true });
+const ArticleFooter = styled(ark.footer, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xxlarge",
+	width: "100%",
+	"& > :is(:last-child)": { paddingBlockEnd: "5xlarge" }
+} }, { baseComponent: true });
+const StyledStack = styled(Stack, { base: {
+	width: "100%",
+	minHeight: "xxlarge"
+} });
+const StyledWrapper = styled("div", { base: {
+	display: "flex",
+	gap: "small",
+	flexWrap: "wrap",
+	alignItems: "center"
+} });
+const ArticleTitle = ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, disclaimer }) => {
+	return /* @__PURE__ */ jsxs(ArticleHeader, { children: [
+		/* @__PURE__ */ jsxs(ArticleHGroup, { children: [(!!contentType || !!heartButton) && /* @__PURE__ */ jsxs(StyledStack, {
+			justify: "space-between",
+			align: "center",
+			direction: "row",
+			gap: "small",
+			children: [!!contentType && /* @__PURE__ */ jsx(ContentTypeBadge, {
+				contentType,
+				children: contentTypeLabel
+			}), heartButton]
+		}), /* @__PURE__ */ jsx(Heading, {
+			textStyle: "heading.medium",
+			id,
+			lang,
+			property: "dct:title",
+			children: title
+		})] }),
+		!!introduction && /* @__PURE__ */ jsx(Text, {
+			lang,
+			textStyle: "body.xlarge",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ jsx("div", { children: introduction })
+		}),
+		/* @__PURE__ */ jsxs(StyledWrapper, { children: [competenceGoals, disclaimer] })
+	] });
 };
-export const Article = _ref3 => {
-  let {
-    article,
-    contentType,
-    licenseBox,
-    children,
-    competenceGoals,
-    contentTypeLabel,
-    id,
-    heartButton,
-    lang,
-    disclaimer
-  } = _ref3;
-  const {
-    title,
-    introduction,
-    published,
-    content,
-    footNotes,
-    copyright
-  } = article;
-  const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
-  return /*#__PURE__*/_jsxs(ArticleWrapper, {
-    children: [/*#__PURE__*/_jsx(ArticleTitle, {
-      id: id,
-      contentType: contentType,
-      heartButton: heartButton,
-      title: title,
-      introduction: introduction,
-      competenceGoals: competenceGoals,
-      lang: lang,
-      contentTypeLabel: contentTypeLabel,
-      disclaimer: disclaimer
-    }), /*#__PURE__*/_jsx(ArticleContent, {
-      children: content
-    }), /*#__PURE__*/_jsxs(ArticleFooter, {
-      children: [/*#__PURE__*/_jsx(ArticleByline, {
-        footnotes: footNotes,
-        authors: authors,
-        suppliers: copyright?.rightsholders,
-        published: published,
-        licenseBox: licenseBox
-      }), children]
-    })]
-  });
-};
+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__ */ jsxs(ArticleWrapper, { children: [
+		/* @__PURE__ */ jsx(ArticleTitle, {
+			id,
+			contentType,
+			heartButton,
+			title,
+			introduction,
+			competenceGoals,
+			lang,
+			contentTypeLabel,
+			disclaimer
+		}),
+		/* @__PURE__ */ jsx(ArticleContent, { children: content }),
+		/* @__PURE__ */ jsxs(ArticleFooter, { children: [/* @__PURE__ */ jsx(ArticleByline, {
+			footnotes: footNotes,
+			authors,
+			suppliers: copyright?.rightsholders,
+			published,
+			licenseBox
+		}), children] })
+	] });
+};
+
+//#endregion
+export { Article, ArticleContent, ArticleFooter, ArticleHGroup, ArticleHeader, ArticleTitle, ArticleWrapper };
+//# sourceMappingURL=Article.js.map

package/es/Article/Article.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Article.js","names":[],"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,OAAO,IAAI,SAAS,CAAE,GAAE,EAAE,eAAe,KAAM,EAAC;AAE7E,MAAa,iBAAiB,WAC5B,CAAC,EAAE,UAAW,GAAG,OAAO,EAAE,wBACxB,IAAC;CAAqB,WAAW,GAAG,gBAAgB,UAAU;CAAE,GAAI;CAAY;EAAO,CAE1F;AAED,MAAM,uBAAuB,OAC3B,IAAI,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,WAC5B,CAAC,OAAO,wBAAQ,IAAC;CAAqB,qBAAkB;CAAQ;CAAK,GAAI;EAAS,CACnF;AAED,MAAa,gBAAgB,OAC3B,IAAI,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,OAC3B,IAAI,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,OAC3B,IAAI,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,OAAO,OAAO,EAChC,MAAM;CACJ,OAAO;CACP,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,gBAAgB,OAAO,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,KAAC;kBACC,KAAC,+BACK,iBAAiB,gCACnB,KAAC;GAAY,SAAQ;GAAgB,OAAM;GAAS,WAAU;GAAM,KAAI;gBACnE,+BAAe,IAAC;IAA8B;cAAc;KAAoC,EAClG;IACW,kBAEhB,IAAC;GAAQ,WAAU;GAAqB;GAAU;GAAM,UAAS;aAC9D;IACO,IACI;IACb,gCACD,IAAC;GAAW;GAAM,WAAU;GAAc;GAAQ;6BAChD,IAAC,mBAAK,eAAmB;IACpB;kBAET,KAAC,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,KAAC;kBACC,IAAC;GACK;GACS;GACA;GACN;GACO;GACG;GACX;GACY;GACN;IACZ;kBACF,IAAC,4BAAgB,UAAyB;kBAC1C,KAAC,4CACC,IAAC;GACC,WAAW;GACF;GACT,WAAW,WAAW;GACX;GACC;IACZ,EACD,YACa;KACD;AAEpB"}

package/es/Article/ArticleByline.js

@@ -1,182 +1,133 @@
-/**
- * Copyright (c) 2020-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { ArticleFootNotes } from "./ArticleFootNotes.js";
 import { forwardRef, useCallback, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router-dom";
-import { ArrowDownShortLine } from "@ndla/icons";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { ArticleFootNotes } from "./ArticleFootNotes";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const Wrapper = styled("div", {
-  base: {
-    // 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.
-    marginBlockStart: "medium",
-    paddingBlockStart: "xsmall",
-    borderTop: "1px solid",
-    borderColor: "stroke.subtle"
-  }
-});
+import { useTranslation } from "react-i18next";
+import { ArrowDownShortLine } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocation } from "react-router-dom";
+
+//#region src/Article/ArticleByline.tsx
+const Wrapper = styled("div", { base: {
+	marginBlockStart: "medium",
+	paddingBlockStart: "xsmall",
+	borderTop: "1px solid",
+	borderColor: "stroke.subtle"
+} });
 const TextWrapper = 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"
-        }
-      }
-    }
-  }
+	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 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
-    }
-  });
+	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 = styled(AccordionRoot, {
-  base: {
-    paddingBlockStart: "xxlarge"
-  }
-});
+const StyledAccordionRoot = styled(AccordionRoot, { base: { paddingBlockStart: "xxlarge" } });
 const refRegexp = /note\d/;
 const footnotesAccordionId = "footnotes";
-export const ArticleByline = _ref => {
-  let {
-    authors = [],
-    suppliers = [],
-    footnotes,
-    licenseBox,
-    published,
-    displayByline = true,
-    bylineType = "article",
-    bylineSuffix
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const {
-    pathname
-  } = useLocation();
-  const [openAccordions, setOpenAccordions] = useState([]);
-  const accordionItemValue = "rulesForUse";
-  const onHashChange = 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]);
-  useEffect(() => {
-    setOpenAccordions(prev => prev.filter(state => state !== accordionItemValue));
-  }, [pathname]);
-  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__*/_jsxs(Wrapper, {
-    children: [!!displayByline && /*#__PURE__*/_jsxs(TextWrapper, {
-      learningpath: bylineType === "learningPath",
-      children: [!!showPrimaryContributors && /*#__PURE__*/_jsxs("span", {
-        children: [authors.length > 0 && `${t(authorLabel[bylineType], {
-          names: renderContributors(authors, t),
-          interpolation: {
-            escapeValue: false
-          }
-        })}. `, getSuppliersText(suppliers, t)]
-      }), published ? /*#__PURE__*/_jsxs("div", {
-        "data-contributors": showPrimaryContributors,
-        children: [t(`${bylineType}.lastUpdated`), " ", published]
-      }) : null, bylineSuffix]
-    }), (!!licenseBox || !!footnotes?.length) && /*#__PURE__*/_jsxs(StyledAccordionRoot, {
-      multiple: true,
-      value: openAccordions,
-      onValueChange: details => setOpenAccordions(details.value),
-      children: [!!licenseBox && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
-        value: accordionItemValue,
-        accordionTitle: t("article.useContent"),
-        children: licenseBox
-      }), !!footnotes?.length && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
-        value: footnotesAccordionId,
-        accordionTitle: t("article.footnotes"),
-        children: /*#__PURE__*/_jsx(ArticleFootNotes, {
-          footNotes: footnotes
-        })
-      })]
-    })]
-  });
+const ArticleByline = ({ authors = [], suppliers = [], footnotes, licenseBox, published, displayByline = true, bylineType = "article", bylineSuffix }) => {
+	const { t } = useTranslation();
+	const { pathname } = useLocation();
+	const [openAccordions, setOpenAccordions] = useState([]);
+	const accordionItemValue = "rulesForUse";
+	const onHashChange = 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]);
+	useEffect(() => {
+		setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));
+	}, [pathname]);
+	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__ */ jsxs(Wrapper, { children: [!!displayByline && /* @__PURE__ */ jsxs(TextWrapper, {
+		learningpath: bylineType === "learningPath",
+		children: [
+			!!showPrimaryContributors && /* @__PURE__ */ jsxs("span", { children: [authors.length > 0 && `${t(authorLabel[bylineType], {
+				names: renderContributors(authors, t),
+				interpolation: { escapeValue: false }
+			})}. `, getSuppliersText(suppliers, t)] }),
+			published ? /* @__PURE__ */ jsxs("div", {
+				"data-contributors": showPrimaryContributors,
+				children: [
+					t(`${bylineType}.lastUpdated`),
+					" ",
+					published
+				]
+			}) : null,
+			bylineSuffix
+		]
+	}), (!!licenseBox || !!footnotes?.length) && /* @__PURE__ */ jsxs(StyledAccordionRoot, {
+		multiple: true,
+		value: openAccordions,
+		onValueChange: (details) => setOpenAccordions(details.value),
+		children: [!!licenseBox && /* @__PURE__ */ jsx(ArticleBylineAccordionItem, {
+			value: accordionItemValue,
+			accordionTitle: t("article.useContent"),
+			children: licenseBox
+		}), !!footnotes?.length && /* @__PURE__ */ jsx(ArticleBylineAccordionItem, {
+			value: footnotesAccordionId,
+			accordionTitle: t("article.footnotes"),
+			children: /* @__PURE__ */ jsx(ArticleFootNotes, { footNotes: footnotes })
+		})]
+	})] });
 };
-export const ArticleBylineAccordionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    value,
-    accordionTitle,
-    children,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/_jsxs(AccordionItem, {
-    value: value,
-    ref: ref,
-    ...props,
-    children: [/*#__PURE__*/_jsx(Heading, {
-      asChild: true,
-      consumeCss: true,
-      textStyle: "label.medium",
-      fontWeight: "bold",
-      children: /*#__PURE__*/_jsx("h2", {
-        children: /*#__PURE__*/_jsxs(AccordionItemTrigger, {
-          children: [accordionTitle, /*#__PURE__*/_jsx(AccordionItemIndicator, {
-            asChild: true,
-            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-          })]
-        })
-      })
-    }), /*#__PURE__*/_jsx(AccordionItemContent, {
-      children: children
-    })]
-  });
-});
+const ArticleBylineAccordionItem = forwardRef(({ value, accordionTitle, children,...props }, ref) => {
+	return /* @__PURE__ */ jsxs(AccordionItem, {
+		value,
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(Heading, {
+			asChild: true,
+			consumeCss: true,
+			textStyle: "label.medium",
+			fontWeight: "bold",
+			children: /* @__PURE__ */ jsx("h2", { children: /* @__PURE__ */ jsxs(AccordionItemTrigger, { children: [accordionTitle, /* @__PURE__ */ jsx(AccordionItemIndicator, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ArrowDownShortLine, {})
+			})] }) })
+		}), /* @__PURE__ */ jsx(AccordionItemContent, { children })]
+	});
+});
+
+//#endregion
+export { ArticleByline, ArticleBylineAccordionItem };
+//# sourceMappingURL=ArticleByline.js.map