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

package/es/FileList/PdfFile.js

@@ -1,50 +1,28 @@
-/**
- * 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.
- *
- */
-
-import { Heading, Figure } from "@ndla/primitives";
+import { Figure, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledIframe = styled("iframe", {
-  base: {
-    width: "100%"
-  }
-});
-const StyledListElement = styled("li", {
-  base: {
-    listStyle: "none"
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall"
-  }
-});
-export const PdfFile = _ref => {
-  let {
-    title,
-    url
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledListElement, {
-    children: /*#__PURE__*/_jsxs(StyledFigure, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.medium",
-        children: /*#__PURE__*/_jsx("h4", {
-          children: title
-        })
-      }), /*#__PURE__*/_jsx(StyledIframe, {
-        title: title,
-        height: "1050",
-        src: url
-      })]
-    })
-  });
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/FileList/PdfFile.tsx
+const StyledIframe = styled("iframe", { base: { width: "100%" } });
+const StyledListElement = styled("li", { base: { listStyle: "none" } });
+const StyledFigure = styled(Figure, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall"
+} });
+const PdfFile = ({ title, url }) => {
+	return /* @__PURE__ */ jsx(StyledListElement, { children: /* @__PURE__ */ jsxs(StyledFigure, { children: [/* @__PURE__ */ jsx(Heading, {
+		asChild: true,
+		consumeCss: true,
+		textStyle: "title.medium",
+		children: /* @__PURE__ */ jsx("h4", { children: title })
+	}), /* @__PURE__ */ jsx(StyledIframe, {
+		title,
+		height: "1050",
+		src: url
+	})] }) });
+};
+
+//#endregion
+export { PdfFile };
+//# sourceMappingURL=PdfFile.js.map

package/es/FileList/PdfFile.js.map

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

package/es/Gloss/Gloss.js

@@ -1,175 +1,142 @@
-/**
- * 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.
- *
- */
-
+import { SpeechControl_default } from "../AudioPlayer/SpeechControl.js";
+import { GlossExample_default } from "./GlossExample.js";
 import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { AccordionItemTrigger } from "@ark-ui/react";
-import { ArrowDownShortLine } from "@ndla/icons";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionRoot, IconButton, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import GlossExample from "./GlossExample";
-import SpeechControl from "../AudioPlayer/SpeechControl";
+import { useTranslation } from "react-i18next";
+import { ArrowDownShortLine } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AccordionItemTrigger as AccordionItemTrigger$1 } from "@ark-ui/react";
 
-// TODO: Figure out padding between bordered and simple variant.
-// The design says that the content above the accordion content should have enough padding to align with the accordion content.
-// When a gloss is bordered there's way too much padding.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+//#region src/Gloss/Gloss.tsx
 const getFilteredExamples = (glossData, exampleIds, exampleLangs) => {
-  if (exampleIds !== undefined || exampleLangs !== undefined) {
-    const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
-    const exampleLangsList = exampleLangs?.split(",") ?? [];
-    const filteredExamples = glossData?.examples?.map((examples, i) => {
-      if (exampleIdsList.includes(i.toString())) {
-        return examples.filter(e => exampleLangsList.includes(e.language));
-      }
-      return [];
-    }) ?? [];
-    const examplesWithoutEmpty = filteredExamples.filter(el => !!el.length);
-    return examplesWithoutEmpty;
-  }
-  return glossData?.examples ?? [];
+	if (exampleIds !== void 0 || exampleLangs !== void 0) {
+		const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
+		const exampleLangsList = exampleLangs?.split(",") ?? [];
+		const filteredExamples = glossData?.examples?.map((examples, i) => {
+			if (exampleIdsList.includes(i.toString())) return examples.filter((e) => exampleLangsList.includes(e.language));
+			return [];
+		}) ?? [];
+		const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);
+		return examplesWithoutEmpty;
+	}
+	return glossData?.examples ?? [];
 };
-const Container = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }
-});
-const TextWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "small"
-  }
-});
-const StyledAccordionItemContent = styled(AccordionItemContent, {
-  base: {
-    paddingInline: "0"
-  }
-});
-const StyledContainer = styled(Container, {
-  base: {
-    marginBlockStart: "3xsmall"
-  }
-});
+const Container = styled("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+} });
+const TextWrapper = styled("div", { base: {
+	display: "flex",
+	gap: "small"
+} });
+const StyledAccordionItemContent = styled(AccordionItemContent, { base: { paddingInline: "0" } });
+const StyledContainer = styled(Container, { base: { marginBlockStart: "3xsmall" } });
 const StyledAccordionItem = styled(AccordionItem, {
-  base: {
-    paddingBlock: "small",
-    paddingInline: "medium"
-  },
-  defaultVariants: {
-    variant: "simple"
-  },
-  variants: {
-    variant: {
-      simple: {},
-      bordered: {
-        border: "1px solid",
-        borderColor: "stroke.subtle",
-        borderRadius: "xsmall"
-      }
-    }
-  }
+	base: {
+		paddingBlock: "small",
+		paddingInline: "medium"
+	},
+	defaultVariants: { variant: "simple" },
+	variants: { variant: {
+		simple: {},
+		bordered: {
+			border: "1px solid",
+			borderColor: "stroke.subtle",
+			borderRadius: "xsmall"
+		}
+	} }
 });
-const Gloss = _ref => {
-  let {
-    title,
-    glossData,
-    audio,
-    exampleIds,
-    exampleLangs,
-    variant
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const filteredExamples = useMemo(() => getFilteredExamples(glossData, exampleIds, exampleLangs), [exampleIds, exampleLangs, glossData]);
-  if (!glossData) return null;
-  return /*#__PURE__*/_jsx(AccordionRoot, {
-    multiple: true,
-    variant: "clean",
-    children: /*#__PURE__*/_jsxs(StyledAccordionItem, {
-      value: "gloss",
-      variant: variant,
-      children: [/*#__PURE__*/_jsxs(Container, {
-        children: [/*#__PURE__*/_jsxs(TextWrapper, {
-          children: [/*#__PURE__*/_jsx(Text, {
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            asChild: true,
-            consumeCss: true,
-            lang: glossData.originalLanguage,
-            children: /*#__PURE__*/_jsx("span", {
-              children: glossData.gloss
-            })
-          }), !!glossData.transcriptions.traditional && /*#__PURE__*/_jsx(Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/_jsx("span", {
-              "aria-label": t("gloss.transcriptions.traditional"),
-              lang: glossData.originalLanguage,
-              children: glossData.transcriptions.traditional
-            }, t("gloss.transcriptions.traditional"))
-          }), !!glossData.transcriptions.pinyin && /*#__PURE__*/_jsx(Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/_jsx("span", {
-              "data-pinyin": "",
-              "aria-label": t("gloss.transcriptions.pinyin"),
-              lang: glossData.originalLanguage,
-              children: glossData.transcriptions.pinyin
-            }, t("gloss.transcriptions.pinyin"))
-          }), !!glossData.wordClass && /*#__PURE__*/_jsx(Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/_jsx("span", {
-              "aria-label": t("gloss.wordClass"),
-              children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
-            })
-          })]
-        }), !!audio?.src && /*#__PURE__*/_jsx(SpeechControl, {
-          src: audio.src,
-          title: audio.title,
-          type: "gloss"
-        })]
-      }), /*#__PURE__*/_jsxs(StyledContainer, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/_jsx("span", {
-            lang: title.language,
-            children: title.title
-          })
-        }), !!filteredExamples.length && /*#__PURE__*/_jsx(AccordionItemTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            variant: "tertiary",
-            "aria-label": t("gloss.showExamples"),
-            title: t("gloss.showExamples"),
-            children: /*#__PURE__*/_jsx(AccordionItemIndicator, {
-              asChild: true,
-              children: /*#__PURE__*/_jsx(ArrowDownShortLine, {
-                size: "medium"
-              })
-            })
-          })
-        })]
-      }), /*#__PURE__*/_jsx(StyledAccordionItemContent, {
-        children: filteredExamples.map((examples, index) => /*#__PURE__*/_jsx(GlossExample, {
-          examples: examples,
-          originalLanguage: glossData.originalLanguage
-        }, `gloss-example-${index}`))
-      })]
-    })
-  });
+const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) => {
+	const { t } = useTranslation();
+	const filteredExamples = useMemo(() => getFilteredExamples(glossData, exampleIds, exampleLangs), [
+		exampleIds,
+		exampleLangs,
+		glossData
+	]);
+	if (!glossData) return null;
+	return /* @__PURE__ */ jsx(AccordionRoot, {
+		multiple: true,
+		variant: "clean",
+		children: /* @__PURE__ */ jsxs(StyledAccordionItem, {
+			value: "gloss",
+			variant,
+			children: [
+				/* @__PURE__ */ jsxs(Container, { children: [/* @__PURE__ */ jsxs(TextWrapper, { children: [
+					/* @__PURE__ */ jsx(Text, {
+						textStyle: "label.medium",
+						fontWeight: "bold",
+						asChild: true,
+						consumeCss: true,
+						lang: glossData.originalLanguage,
+						children: /* @__PURE__ */ jsx("span", { children: glossData.gloss })
+					}),
+					!!glossData.transcriptions.traditional && /* @__PURE__ */ jsx(Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-label": t("gloss.transcriptions.traditional"),
+							lang: glossData.originalLanguage,
+							children: glossData.transcriptions.traditional
+						}, t("gloss.transcriptions.traditional"))
+					}),
+					!!glossData.transcriptions.pinyin && /* @__PURE__ */ jsx(Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ jsx("span", {
+							"data-pinyin": "",
+							"aria-label": t("gloss.transcriptions.pinyin"),
+							lang: glossData.originalLanguage,
+							children: glossData.transcriptions.pinyin
+						}, t("gloss.transcriptions.pinyin"))
+					}),
+					!!glossData.wordClass && /* @__PURE__ */ jsx(Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-label": t("gloss.wordClass"),
+							children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
+						})
+					})
+				] }), !!audio?.src && /* @__PURE__ */ jsx(SpeechControl_default, {
+					src: audio.src,
+					title: audio.title,
+					type: "gloss"
+				})] }),
+				/* @__PURE__ */ jsxs(StyledContainer, { children: [/* @__PURE__ */ jsx(Text, {
+					textStyle: "label.medium",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ jsx("span", {
+						lang: title.language,
+						children: title.title
+					})
+				}), !!filteredExamples.length && /* @__PURE__ */ jsx(AccordionItemTrigger$1, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(IconButton, {
+						variant: "tertiary",
+						"aria-label": t("gloss.showExamples"),
+						title: t("gloss.showExamples"),
+						children: /* @__PURE__ */ jsx(AccordionItemIndicator, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(ArrowDownShortLine, { size: "medium" })
+						})
+					})
+				})] }),
+				/* @__PURE__ */ jsx(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ jsx(GlossExample_default, {
+					examples,
+					originalLanguage: glossData.originalLanguage
+				}, `gloss-example-${index}`)) })
+			]
+		})
+	});
 };
-export default Gloss;
+var Gloss_default = Gloss;
+
+//#endregion
+export { Gloss_default };
+//# sourceMappingURL=Gloss.js.map

package/es/Gloss/Gloss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gloss.js","names":["glossData: IGlossDataDTO | undefined","exampleIds: string | undefined","exampleLangs: string | undefined","SpeechControl","AccordionItemTrigger","GlossExample"],"sources":["../../src/Gloss/Gloss.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 { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport GlossExample from \"./GlossExample\";\nimport SpeechControl from \"../AudioPlayer/SpeechControl\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: {\n    title: string;\n    language: string;\n  };\n  glossData?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nconst Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{title.title}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n\nexport default Gloss;\n"],"mappings":";;;;;;;;;;;AA8BA,MAAM,sBAAsB,CAC1BA,WACAC,YACAC,iBACyB;AACzB,KAAI,yBAA4B,yBAA4B;EAC1D,MAAM,iBAAiB,YAAY,UAAU,EAAE,MAAM,IAAI,IAAI,CAAE;EAC/D,MAAM,mBAAmB,cAAc,MAAM,IAAI,IAAI,CAAE;EAEvD,MAAM,mBACJ,WAAW,UAAU,IAAI,CAAC,UAAU,MAAM;AACxC,OAAI,eAAe,SAAS,EAAE,UAAU,CAAC,CACvC,QAAO,SAAS,OAAO,CAAC,MAAM,iBAAiB,SAAS,EAAE,SAAS,CAAC;AAEtE,UAAO,CAAE;EACV,EAAC,IAAI,CAAE;EACV,MAAM,uBAAuB,iBAAiB,OAAO,CAAC,SAAS,GAAG,OAAO;AACzE,SAAO;CACR;AACD,QAAO,WAAW,YAAY,CAAE;AACjC;AAED,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;AACjB,EACF,EAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAM,6BAA6B,OAAO,sBAAsB,EAC9D,MAAM,EACJ,eAAe,IAChB,EACF,EAAC;AAEF,MAAM,kBAAkB,OAAO,WAAW,EACxC,MAAM,EACJ,kBAAkB,UACnB,EACF,EAAC;AAEF,MAAM,sBAAsB,OAAO,eAAe;CAChD,MAAM;EACJ,cAAc;EACd,eAAe;CAChB;CACD,iBAAiB,EACf,SAAS,SACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,CAAE;EACV,UAAU;GACR,QAAQ;GACR,aAAa;GACb,cAAc;EACf;CACF,EACF;AACF,EAAC;AAkBF,MAAM,QAAQ,CAAC,EAAE,OAAO,WAAW,OAAO,YAAY,cAAc,SAAoC,KAAK;CAC3G,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAE9B,MAAM,mBAAmB,QACvB,MAAM,oBAAoB,WAAW,YAAY,aAAa,EAC9D;EAAC;EAAY;EAAc;CAAU,EACtC;AAED,MAAK,UAAW,QAAO;AAEvB,wBACE,IAAC;EAAc;EAAS,SAAQ;4BAC9B,KAAC;GAAoB,OAAM;GAAiB;;oBAC1C,KAAC,wCACC,KAAC;qBACC,IAAC;MAAK,WAAU;MAAe,YAAW;MAAO;MAAQ;MAAW,MAAM,UAAU;gCAClF,IAAC,oBAAM,UAAU,QAAa;OACzB;OACJ,UAAU,eAAe,+BAC1B,IAAC;MAAK,WAAU;MAAe;MAAQ;gCACrC,IAAC;OAEC,cAAY,EAAE,mCAAmC;OACjD,MAAM,UAAU;iBAEf,UAAU,eAAe;SAJrB,EAAE,mCAAmC,CAKrC;OACF;OAEN,UAAU,eAAe,0BAC1B,IAAC;MAAK,WAAU;MAAe;MAAQ;gCACrC,IAAC;OACC,eAAY;OAEZ,cAAY,EAAE,8BAA8B;OAC5C,MAAM,UAAU;iBAEf,UAAU,eAAe;SAJrB,EAAE,8BAA8B,CAKhC;OACF;OAEN,UAAU,6BACX,IAAC;MAAK,WAAU;MAAe;MAAQ;gCACrC,IAAC;OAAK,cAAY,EAAE,kBAAkB;iBAAG,GAAG,YAAY,UAAU,UAAU,EAAE,CAAC,aAAa;QAAQ;OAC/F;QAEG,IACX,OAAO,uBAAO,IAACC;KAAc,KAAK,MAAM;KAAK,OAAO,MAAM;KAAO,MAAK;MAAU,IACzE;oBACZ,KAAC,8CACC,IAAC;KAAK,WAAU;KAAe;KAAQ;+BACrC,IAAC;MAAK,MAAM,MAAM;gBAAW,MAAM;OAAa;MAC3C,IACJ,iBAAiB,0BAClB,IAACC;KAAqB;+BACpB,IAAC;MAAW,SAAQ;MAAW,cAAY,EAAE,qBAAqB;MAAE,OAAO,EAAE,qBAAqB;gCAChG,IAAC;OAAuB;iCACtB,IAAC,sBAAmB,MAAK,WAAW;QACb;OACd;MACQ,IAET;oBAClB,IAAC,wCACE,iBAAiB,IAAI,CAAC,UAAU,0BAC/B,IAACC;KAEW;KACV,kBAAkB,UAAU;QAFtB,gBAAgB,MAAM,EAG5B,CACF,GACyB;;IACT;GACR;AAEnB;AAED,oBAAe"}

package/es/Gloss/GlossExample.js

@@ -1,64 +1,46 @@
-/**
- * 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.
- *
- */
-
 import { Fragment } from "react";
 import { Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledGlossExample = styled("div", {
-  base: {
-    borderTop: "1px solid",
-    borderColor: "stroke.subtle",
-    paddingBlock: "xsmall",
-    paddingInline: "medium",
-    _first: {
-      background: "surface.brand.1.subtle",
-      borderColor: "stroke.default",
-      "& p": {
-        fontWeight: "bold"
-      }
-    }
-  }
-});
-const PinyinText = styled(Text, {
-  base: {
-    fontStyle: "italic"
-  }
-});
-const GlossExample = _ref => {
-  let {
-    examples,
-    originalLanguage
-  } = _ref;
-  return /*#__PURE__*/_jsx("div", {
-    children: examples.map((examples, index) => /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx(StyledGlossExample, {
-        lang: examples.language,
-        children: /*#__PURE__*/_jsx(Text, {
-          textStyle: "label.medium",
-          lang: examples.language,
-          children: examples.example
-        })
-      }), !!examples.transcriptions.pinyin && /*#__PURE__*/_jsx(StyledGlossExample, {
-        children: /*#__PURE__*/_jsx(PinyinText, {
-          "data-pinyin": "",
-          lang: originalLanguage,
-          textStyle: "label.medium",
-          children: examples.transcriptions?.pinyin
-        })
-      }), !!examples.transcriptions?.traditional && /*#__PURE__*/_jsx(StyledGlossExample, {
-        children: /*#__PURE__*/_jsx(Text, {
-          textStyle: "label.medium",
-          lang: originalLanguage,
-          children: examples.transcriptions.traditional
-        })
-      })]
-    }, index))
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Gloss/GlossExample.tsx
+const StyledGlossExample = styled("div", { base: {
+	borderTop: "1px solid",
+	borderColor: "stroke.subtle",
+	paddingBlock: "xsmall",
+	paddingInline: "medium",
+	_first: {
+		background: "surface.brand.1.subtle",
+		borderColor: "stroke.default",
+		"& p": { fontWeight: "bold" }
+	}
+} });
+const PinyinText = styled(Text, { base: { fontStyle: "italic" } });
+const GlossExample = ({ examples, originalLanguage }) => {
+	return /* @__PURE__ */ jsx("div", { children: examples.map((examples$1, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(StyledGlossExample, {
+			lang: examples$1.language,
+			children: /* @__PURE__ */ jsx(Text, {
+				textStyle: "label.medium",
+				lang: examples$1.language,
+				children: examples$1.example
+			})
+		}),
+		!!examples$1.transcriptions.pinyin && /* @__PURE__ */ jsx(StyledGlossExample, { children: /* @__PURE__ */ jsx(PinyinText, {
+			"data-pinyin": "",
+			lang: originalLanguage,
+			textStyle: "label.medium",
+			children: examples$1.transcriptions?.pinyin
+		}) }),
+		!!examples$1.transcriptions?.traditional && /* @__PURE__ */ jsx(StyledGlossExample, { children: /* @__PURE__ */ jsx(Text, {
+			textStyle: "label.medium",
+			lang: originalLanguage,
+			children: examples$1.transcriptions.traditional
+		}) })
+	] }, index)) });
 };
-export default GlossExample;
+var GlossExample_default = GlossExample;
+
+//#endregion
+export { GlossExample_default };
+//# sourceMappingURL=GlossExample.js.map

package/es/Gloss/GlossExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossExample.js","names":["examples"],"sources":["../../src/Gloss/GlossExample.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 { Fragment } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\n\ninterface Props {\n  examples: IGlossExampleDTO[];\n  originalLanguage: string | undefined;\n}\n\nconst StyledGlossExample = styled(\"div\", {\n  base: {\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    _first: {\n      background: \"surface.brand.1.subtle\",\n      borderColor: \"stroke.default\",\n      \"& p\": {\n        fontWeight: \"bold\",\n      },\n    },\n  },\n});\n\nconst PinyinText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst GlossExample = ({ examples, originalLanguage }: Props) => {\n  return (\n    <div>\n      {examples.map((examples, index) => (\n        <Fragment key={index}>\n          <StyledGlossExample lang={examples.language}>\n            <Text textStyle=\"label.medium\" lang={examples.language}>\n              {examples.example}\n            </Text>\n          </StyledGlossExample>\n          {!!examples.transcriptions.pinyin && (\n            <StyledGlossExample>\n              <PinyinText data-pinyin=\"\" lang={originalLanguage} textStyle=\"label.medium\">\n                {examples.transcriptions?.pinyin}\n              </PinyinText>\n            </StyledGlossExample>\n          )}\n          {!!examples.transcriptions?.traditional && (\n            <StyledGlossExample>\n              <Text textStyle=\"label.medium\" lang={originalLanguage}>\n                {examples.transcriptions.traditional}\n              </Text>\n            </StyledGlossExample>\n          )}\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n\nexport default GlossExample;\n"],"mappings":";;;;;;AAkBA,MAAM,qBAAqB,OAAO,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,OACb;CACF;AACF,EACF,EAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,WAAW,SACZ,EACF,EAAC;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,kBAAyB,KAAK;AAC9D,wBACE,IAAC,mBACE,SAAS,IAAI,CAACA,YAAU,0BACvB,KAAC;kBACC,IAAC;GAAmB,MAAMA,WAAS;6BACjC,IAAC;IAAK,WAAU;IAAe,MAAMA,WAAS;cAC3CA,WAAS;KACL;IACY;IAClBA,WAAS,eAAe,0BACzB,IAAC,gDACC,IAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;IAEpBA,WAAS,gBAAgB,+BAC1B,IAAC,gDACC,IAAC;GAAK,WAAU;GAAe,MAAM;aAClCA,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;AAET;AAED,2BAAe"}