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

package/lib/FileList/PdfFile.js

@@ -1,57 +1,29 @@
-"use strict";
+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"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PdfFile = void 0;
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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 StyledIframe = (0, _jsx2.styled)("iframe", {
-  base: {
-    width: "100%"
-  }
-});
-const StyledListElement = (0, _jsx2.styled)("li", {
-  base: {
-    listStyle: "none"
-  }
-});
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall"
-  }
-});
-const PdfFile = _ref => {
-  let {
-    title,
-    url
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledListElement, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.medium",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
-          children: title
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
-        title: title,
-        height: "1050",
-        src: url
-      })]
-    })
-  });
+//#region src/FileList/PdfFile.tsx
+const StyledIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: { width: "100%" } });
+const StyledListElement = (0, __ndla_styled_system_jsx.styled)("li", { base: { listStyle: "none" } });
+const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall"
+} });
+const PdfFile = ({ title, url }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledListElement, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+		asChild: true,
+		consumeCss: true,
+		textStyle: "title.medium",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: title })
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledIframe, {
+		title,
+		height: "1050",
+		src: url
+	})] }) });
 };
-exports.PdfFile = PdfFile;
+
+//#endregion
+exports.PdfFile = PdfFile;
+//# sourceMappingURL=PdfFile.js.map

package/lib/FileList/PdfFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdfFile.js","names":["Figure","Heading"],"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,qCAAO,UAAU,EACpC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,oBAAoB,qCAAO,MAAM,EACrC,MAAM,EACJ,WAAW,OACZ,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAa,UAAU,CAAC,EAAE,OAAO,KAAY,KAAK;AAChD,wBACE,2BAAC,+CACC,4BAAC,2CACC,2BAACC;EAAQ;EAAQ;EAAW,WAAU;4BACpC,2BAAC,kBAAI,QAAW;GACR,kBACV,2BAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG;AAEvB"}

package/lib/Gloss/Gloss.js

@@ -1,181 +1,143 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_SpeechControl = require('../AudioPlayer/SpeechControl.js');
+const require_GlossExample = require('./GlossExample.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 __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _react2 = require("@ark-ui/react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _GlossExample = _interopRequireDefault(require("./GlossExample"));
-var _SpeechControl = _interopRequireDefault(require("../AudioPlayer/SpeechControl"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-
-// 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.
+//#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 = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }
-});
-const TextWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    gap: "small"
-  }
-});
-const StyledAccordionItemContent = (0, _jsx2.styled)(_primitives.AccordionItemContent, {
-  base: {
-    paddingInline: "0"
-  }
+const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+} });
+const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "small"
+} });
+const StyledAccordionItemContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.AccordionItemContent, { base: { paddingInline: "0" } });
+const StyledContainer = (0, __ndla_styled_system_jsx.styled)(Container, { base: { marginBlockStart: "3xsmall" } });
+const StyledAccordionItem = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.AccordionItem, {
+	base: {
+		paddingBlock: "small",
+		paddingInline: "medium"
+	},
+	defaultVariants: { variant: "simple" },
+	variants: { variant: {
+		simple: {},
+		bordered: {
+			border: "1px solid",
+			borderColor: "stroke.subtle",
+			borderRadius: "xsmall"
+		}
+	} }
 });
-const StyledContainer = (0, _jsx2.styled)(Container, {
-  base: {
-    marginBlockStart: "3xsmall"
-  }
-});
-const StyledAccordionItem = (0, _jsx2.styled)(_primitives.AccordionItem, {
-  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
-  } = (0, _reactI18next.useTranslation)();
-  const filteredExamples = (0, _react.useMemo)(() => getFilteredExamples(glossData, exampleIds, exampleLangs), [exampleIds, exampleLangs, glossData]);
-  if (!glossData) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionRoot, {
-    multiple: true,
-    variant: "clean",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledAccordionItem, {
-      value: "gloss",
-      variant: variant,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextWrapper, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            asChild: true,
-            consumeCss: true,
-            lang: glossData.originalLanguage,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: glossData.gloss
-            })
-          }), !!glossData.transcriptions.traditional && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "aria-label": t("gloss.transcriptions.traditional"),
-              lang: glossData.originalLanguage,
-              children: glossData.transcriptions.traditional
-            }, t("gloss.transcriptions.traditional"))
-          }), !!glossData.transcriptions.pinyin && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "data-pinyin": "",
-              "aria-label": t("gloss.transcriptions.pinyin"),
-              lang: glossData.originalLanguage,
-              children: glossData.transcriptions.pinyin
-            }, t("gloss.transcriptions.pinyin"))
-          }), !!glossData.wordClass && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "aria-label": t("gloss.wordClass"),
-              children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
-            })
-          })]
-        }), !!audio?.src && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeechControl.default, {
-          src: audio.src,
-          title: audio.title,
-          type: "gloss"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            lang: title.language,
-            children: title.title
-          })
-        }), !!filteredExamples.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.AccordionItemTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
-            variant: "tertiary",
-            "aria-label": t("gloss.showExamples"),
-            title: t("gloss.showExamples"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionItemIndicator, {
-              asChild: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowDownShortLine, {
-                size: "medium"
-              })
-            })
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAccordionItemContent, {
-        children: filteredExamples.map((examples, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlossExample.default, {
-          examples: examples,
-          originalLanguage: glossData.originalLanguage
-        }, `gloss-example-${index}`))
-      })]
-    })
-  });
+const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const filteredExamples = (0, react.useMemo)(() => getFilteredExamples(glossData, exampleIds, exampleLangs), [
+		exampleIds,
+		exampleLangs,
+		glossData
+	]);
+	if (!glossData) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionRoot, {
+		multiple: true,
+		variant: "clean",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledAccordionItem, {
+			value: "gloss",
+			variant,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextWrapper, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						fontWeight: "bold",
+						asChild: true,
+						consumeCss: true,
+						lang: glossData.originalLanguage,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: glossData.gloss })
+					}),
+					!!glossData.transcriptions.traditional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-label": t("gloss.transcriptions.traditional"),
+							lang: glossData.originalLanguage,
+							children: glossData.transcriptions.traditional
+						}, t("gloss.transcriptions.traditional"))
+					}),
+					!!glossData.transcriptions.pinyin && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-pinyin": "",
+							"aria-label": t("gloss.transcriptions.pinyin"),
+							lang: glossData.originalLanguage,
+							children: glossData.transcriptions.pinyin
+						}, t("gloss.transcriptions.pinyin"))
+					}),
+					!!glossData.wordClass && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-label": t("gloss.wordClass"),
+							children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
+						})
+					})
+				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl_default, {
+					src: audio.src,
+					title: audio.title,
+					type: "gloss"
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+					textStyle: "label.medium",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						lang: title.language,
+						children: title.title
+					})
+				}), !!filteredExamples.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.AccordionItemTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.IconButton, {
+						variant: "tertiary",
+						"aria-label": t("gloss.showExamples"),
+						title: t("gloss.showExamples"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionItemIndicator, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowDownShortLine, { size: "medium" })
+						})
+					})
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossExample.GlossExample_default, {
+					examples,
+					originalLanguage: glossData.originalLanguage
+				}, `gloss-example-${index}`)) })
+			]
+		})
+	});
 };
-var _default = exports.default = Gloss;
+var Gloss_default = Gloss;
+
+//#endregion
+exports.Gloss_default = Gloss_default;
+//# sourceMappingURL=Gloss.js.map

package/lib/Gloss/Gloss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gloss.js","names":["glossData: IGlossDataDTO | undefined","exampleIds: string | undefined","exampleLangs: string | undefined","AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","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":"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"}

package/lib/Gloss/GlossExample.js

@@ -1,70 +1,47 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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 StyledGlossExample = (0, _jsx2.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 = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    fontStyle: "italic"
-  }
-});
-const GlossExample = _ref => {
-  let {
-    examples,
-    originalLanguage
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: examples.map((examples, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGlossExample, {
-        lang: examples.language,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "label.medium",
-          lang: examples.language,
-          children: examples.example
-        })
-      }), !!examples.transcriptions.pinyin && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGlossExample, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PinyinText, {
-          "data-pinyin": "",
-          lang: originalLanguage,
-          textStyle: "label.medium",
-          children: examples.transcriptions?.pinyin
-        })
-      }), !!examples.transcriptions?.traditional && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGlossExample, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "label.medium",
-          lang: originalLanguage,
-          children: examples.transcriptions.traditional
-        })
-      })]
-    }, index))
-  });
+//#region src/Gloss/GlossExample.tsx
+const StyledGlossExample = (0, __ndla_styled_system_jsx.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 = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { fontStyle: "italic" } });
+const GlossExample = ({ examples, originalLanguage }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: examples.map((examples$1, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGlossExample, {
+			lang: examples$1.language,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				textStyle: "label.medium",
+				lang: examples$1.language,
+				children: examples$1.example
+			})
+		}),
+		!!examples$1.transcriptions.pinyin && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGlossExample, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinyinText, {
+			"data-pinyin": "",
+			lang: originalLanguage,
+			textStyle: "label.medium",
+			children: examples$1.transcriptions?.pinyin
+		}) }),
+		!!examples$1.transcriptions?.traditional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGlossExample, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+			textStyle: "label.medium",
+			lang: originalLanguage,
+			children: examples$1.transcriptions.traditional
+		}) })
+	] }, index)) });
 };
-var _default = exports.default = GlossExample;
+var GlossExample_default = GlossExample;
+
+//#endregion
+exports.GlossExample_default = GlossExample_default;
+//# sourceMappingURL=GlossExample.js.map

package/lib/Gloss/GlossExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossExample.js","names":["Text","examples","Fragment"],"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,qCAAO,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,qCAAOA,wBAAM,EAC9B,MAAM,EACJ,WAAW,SACZ,EACF,EAAC;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,kBAAyB,KAAK;AAC9D,wBACE,2BAAC,mBACE,SAAS,IAAI,CAACC,YAAU,0BACvB,4BAACC;kBACC,2BAAC;GAAmB,MAAMD,WAAS;6BACjC,2BAACD;IAAK,WAAU;IAAe,MAAMC,WAAS;cAC3CA,WAAS;KACL;IACY;IAClBA,WAAS,eAAe,0BACzB,2BAAC,gDACC,2BAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;IAEpBA,WAAS,gBAAgB,+BAC1B,2BAAC,gDACC,2BAACD;GAAK,WAAU;GAAe,MAAM;aAClCC,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;AAET;AAED,2BAAe"}