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

package/es/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,54 @@
+import "react";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { SafeLink } from "@ndla/safelink";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ErrorMessage/ErrorMessage.tsx
+const StyledErrorMessage = styled("article", { base: {
+	textAlign: "center",
+	"& a": { color: "text.strong" },
+	"& h1": { marginTop: "0" }
+} });
+const IllustrationWrapper = styled("div", { base: {
+	display: "flex",
+	justifyContent: "center",
+	marginBottom: "medium",
+	tablet: { marginTop: "xxlarge" }
+} });
+const Description = styled(Text, { base: {
+	marginBottom: "medium",
+	tablet: { marginBottom: "xxlarge" }
+} });
+const CustomElementWrapper = styled("div", { base: { marginBlock: "xxlarge" } });
+const MessageWrapper = styled("div", { base: { marginTop: "3xsmall" } });
+const ErrorMessage = ({ children, messages, illustration, illustrationElement, customElement }) => /* @__PURE__ */ jsxs(StyledErrorMessage, { children: [
+	!!illustration && /* @__PURE__ */ jsx(IllustrationWrapper, { children: /* @__PURE__ */ jsx("img", {
+		src: illustration.url,
+		alt: illustration.altText
+	}) }),
+	!!illustrationElement && /* @__PURE__ */ jsx(IllustrationWrapper, { children: illustrationElement }),
+	/* @__PURE__ */ jsx("h1", { children: messages.title }),
+	!!messages.description && /* @__PURE__ */ jsx(Description, { children: messages.description }),
+	!!customElement && /* @__PURE__ */ jsx(CustomElementWrapper, { children: customElement }),
+	!!messages.linksTitle && /* @__PURE__ */ jsx("h2", { children: messages.linksTitle }),
+	!!messages.back && /* @__PURE__ */ jsx(SafeLink, {
+		to: `/#${encodeURI(messages.back)}`,
+		onClick: () => window.history.back(),
+		children: messages.back
+	}),
+	!!messages.goToFrontPage && /* @__PURE__ */ jsx(MessageWrapper, { children: /* @__PURE__ */ jsx(SafeLink, {
+		to: "/",
+		children: messages.goToFrontPage
+	}) }),
+	!!messages.logInFailed && /* @__PURE__ */ jsx(MessageWrapper, { children: /* @__PURE__ */ jsx(SafeLink, {
+		to: "/minndla",
+		children: messages.logInFailed
+	}) }),
+	children
+] });
+var ErrorMessage_default = ErrorMessage;
+
+//#endregion
+export { ErrorMessage_default };
+//# sourceMappingURL=ErrorMessage.js.map

package/es/ErrorMessage/ErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.tsx"],"sourcesContent":["/**\n * Copyright (c) 2019-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 ReactNode } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\n// TODO: This has not been redesignet yet. This is just a rewrite of the previous design in panda\n\nconst StyledErrorMessage = styled(\"article\", {\n  base: {\n    textAlign: \"center\",\n    \"& a\": {\n      color: \"text.strong\",\n    },\n    \"& h1\": {\n      marginTop: \"0\",\n    },\n  },\n});\n\nconst IllustrationWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    marginBottom: \"medium\",\n    tablet: {\n      marginTop: \"xxlarge\",\n    },\n  },\n});\n\nconst Description = styled(Text, {\n  base: {\n    marginBottom: \"medium\",\n    tablet: {\n      marginBottom: \"xxlarge\",\n    },\n  },\n});\n\nconst CustomElementWrapper = styled(\"div\", {\n  base: {\n    marginBlock: \"xxlarge\",\n  },\n});\n\nconst MessageWrapper = styled(\"div\", {\n  base: {\n    marginTop: \"3xsmall\",\n  },\n});\n\ninterface Props {\n  messages: {\n    title: string;\n    description?: string;\n    linksTitle?: string;\n    back?: string;\n    goToFrontPage?: string;\n    logInFailed?: string;\n  };\n  illustration?: {\n    url: string;\n    altText: string;\n  };\n  illustrationElement?: ReactNode;\n  customElement?: ReactNode;\n  children?: ReactNode;\n}\nexport const ErrorMessage = ({ children, messages, illustration, illustrationElement, customElement }: Props) => (\n  <StyledErrorMessage>\n    {!!illustration && (\n      <IllustrationWrapper>\n        <img src={illustration.url} alt={illustration.altText} />\n      </IllustrationWrapper>\n    )}\n    {!!illustrationElement && <IllustrationWrapper>{illustrationElement}</IllustrationWrapper>}\n    <h1>{messages.title}</h1>\n    {!!messages.description && <Description>{messages.description}</Description>}\n    {!!customElement && <CustomElementWrapper>{customElement}</CustomElementWrapper>}\n    {!!messages.linksTitle && <h2>{messages.linksTitle}</h2>}\n    {!!messages.back && (\n      <SafeLink to={`/#${encodeURI(messages.back)}`} onClick={() => window.history.back()}>\n        {messages.back}\n      </SafeLink>\n    )}\n    {!!messages.goToFrontPage && (\n      <MessageWrapper>\n        <SafeLink to=\"/\">{messages.goToFrontPage}</SafeLink>\n      </MessageWrapper>\n    )}\n    {!!messages.logInFailed && (\n      <MessageWrapper>\n        <SafeLink to=\"/minndla\">{messages.logInFailed}</SafeLink>\n      </MessageWrapper>\n    )}\n    {children}\n  </StyledErrorMessage>\n);\n\nexport default ErrorMessage;\n"],"mappings":";;;;;;;AAeA,MAAM,qBAAqB,OAAO,WAAW,EAC3C,MAAM;CACJ,WAAW;CACX,OAAO,EACL,OAAO,cACR;CACD,QAAQ,EACN,WAAW,IACZ;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,cAAc;CACd,QAAQ,EACN,WAAW,UACZ;AACF,EACF,EAAC;AAEF,MAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CACJ,cAAc;CACd,QAAQ,EACN,cAAc,UACf;AACF,EACF,EAAC;AAEF,MAAM,uBAAuB,OAAO,OAAO,EACzC,MAAM,EACJ,aAAa,UACd,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM,EACJ,WAAW,UACZ,EACF,EAAC;AAmBF,MAAa,eAAe,CAAC,EAAE,UAAU,UAAU,cAAc,qBAAqB,eAAsB,qBAC1G,KAAC;GACI,gCACD,IAAC,iDACC,IAAC;EAAI,KAAK,aAAa;EAAK,KAAK,aAAa;GAAW,GACrC;GAErB,uCAAuB,IAAC,iCAAqB,sBAA0C;iBAC1F,IAAC,kBAAI,SAAS,QAAW;GACtB,SAAS,+BAAe,IAAC,yBAAa,SAAS,cAA0B;GACzE,iCAAiB,IAAC,kCAAsB,gBAAqC;GAC7E,SAAS,8BAAc,IAAC,kBAAI,SAAS,aAAgB;GACrD,SAAS,wBACV,IAAC;EAAS,KAAK,IAAI,UAAU,SAAS,KAAK,CAAC;EAAG,SAAS,MAAM,OAAO,QAAQ,MAAM;YAChF,SAAS;GACD;GAEV,SAAS,iCACV,IAAC,4CACC,IAAC;EAAS,IAAG;YAAK,SAAS;GAAyB,GACrC;GAEhB,SAAS,+BACV,IAAC,4CACC,IAAC;EAAS,IAAG;YAAY,SAAS;GAAuB,GAC1C;CAElB;IACkB;AAGvB,2BAAe"}

package/es/ErrorMessage/index.js

@@ -0,0 +1,8 @@
+import { ErrorMessage_default } from "./ErrorMessage.js";
+
+//#region src/ErrorMessage/index.ts
+var ErrorMessage_default$1 = ErrorMessage_default;
+
+//#endregion
+export { ErrorMessage_default$1 as ErrorMessage_default };
+//# sourceMappingURL=index.js.map

package/es/ErrorMessage/index.js.map

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

package/es/FactBox/FactBox.js

@@ -0,0 +1,121 @@
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { ArrowDownShortLine } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/FactBox/FactBox.tsx
+const StyledAside = styled("aside", {
+	base: {
+		position: "relative",
+		padding: "medium",
+		display: "grid",
+		gridTemplateRows: "0fr",
+		transitionProperty: "grid-template-rows",
+		transitionDuration: "slow",
+		transitionTimingFunction: "ease-in-out",
+		justifyItems: "center",
+		border: "1px solid",
+		borderColor: "stroke.default",
+		borderRadius: "xsmall",
+		clear: "both",
+		_open: { gridTemplateRows: "1fr" },
+		_closed: { _print: {
+			overflow: "visible",
+			maxHeight: "500vh"
+		} },
+		"& > div": { minHeight: "surface.3xsmall" }
+	},
+	variants: { overflowHidden: { true: { "& > div": { overflow: "hidden" } } } }
+});
+const StyledContent = styled("div", { base: {
+	position: "relative",
+	width: "100%",
+	"& :first-child": { marginBlockStart: "0" },
+	_after: {
+		content: "\"\"",
+		textAlign: "center",
+		position: "absolute",
+		inset: "0",
+		transitionProperty: "opacity",
+		transitionDuration: "slow",
+		transitionTimingFunction: "ease-in-out",
+		gradientFrom: "surface.default/20",
+		gradientTo: "surface.default/95",
+		backgroundGradient: "to-b",
+		opacity: "1",
+		zIndex: "base",
+		pointerEvents: "none"
+	},
+	_print: {
+		overflow: "visible",
+		_after: { display: "none" }
+	},
+	_open: {
+		paddingBlockEnd: "xsmall",
+		_after: { opacity: "0" }
+	}
+} });
+const StyledIconButton = styled(IconButton, { base: {
+	position: "absolute",
+	bottom: "-medium",
+	zIndex: "base",
+	"& svg": {
+		transitionProperty: "transform",
+		transitionTimingFunction: "ease-in-out",
+		transitionDuration: "fast"
+	},
+	_open: { "& svg": { transform: "rotate(180deg)" } },
+	_print: { display: "none" }
+} });
+const FactBox = forwardRef(({ children, open, onOpenChange, defaultOpen = false,...rest }, ref) => {
+	const { t } = useTranslation();
+	const [state, setState] = useState(defaultOpen ? "open" : "closed");
+	const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);
+	const contentId = useId();
+	const inertAttribute = useMemo(() => {
+		return state === "closed" ? { inert: typeof React.use === "function" ? true : "" } : {};
+	}, [state]);
+	useEffect(() => {
+		if (open !== void 0) setState(open ? "open" : "closed");
+	}, [open]);
+	const onClick = useCallback(() => {
+		const newState = state === "open" ? "closed" : "open";
+		setState(newState);
+		onOpenChange?.(newState === "open");
+	}, [state, onOpenChange]);
+	return /* @__PURE__ */ jsxs(StyledAside, {
+		"data-state": state,
+		"data-embed-type": "factbox",
+		...rest,
+		ref,
+		overflowHidden,
+		onTransitionStart: (e) => {
+			if (e.target === e.currentTarget && state === "closed") setOverflowHidden(true);
+		},
+		onTransitionEnd: (e) => {
+			if (e.target === e.currentTarget && state === "open") setOverflowHidden(false);
+		},
+		children: [/* @__PURE__ */ jsx(StyledIconButton, {
+			"data-state": state,
+			onClick,
+			contentEditable: false,
+			"aria-expanded": state === "open",
+			"aria-controls": contentId,
+			"aria-label": t(`factbox.${state === "open" ? "close" : "open"}`),
+			children: /* @__PURE__ */ jsx(ArrowDownShortLine, {})
+		}), /* @__PURE__ */ jsx(StyledContent, {
+			id: contentId,
+			"data-state": state,
+			"aria-hidden": state === "closed",
+			...inertAttribute,
+			children
+		})]
+	});
+});
+var FactBox_default = FactBox;
+
+//#endregion
+export { FactBox_default };
+//# sourceMappingURL=FactBox.js.map

package/es/FactBox/FactBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FactBox.js","names":[],"sources":["../../src/FactBox/FactBox.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 React, {\n  type ComponentProps,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n  children?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n  base: {\n    position: \"relative\",\n    padding: \"medium\",\n    display: \"grid\",\n    gridTemplateRows: \"0fr\",\n    transitionProperty: \"grid-template-rows\",\n    transitionDuration: \"slow\",\n    transitionTimingFunction: \"ease-in-out\",\n    justifyItems: \"center\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    clear: \"both\",\n    _open: {\n      gridTemplateRows: \"1fr\",\n    },\n    _closed: {\n      _print: {\n        overflow: \"visible\",\n        maxHeight: \"500vh\",\n      },\n    },\n    \"& > div\": {\n      minHeight: \"surface.3xsmall\",\n    },\n  },\n  variants: {\n    overflowHidden: {\n      true: {\n        \"& > div\": {\n          overflow: \"hidden\",\n        },\n      },\n    },\n  },\n});\n\nconst StyledContent = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    width: \"100%\",\n    // Reset the top margin of the very first child.\n    \"& :first-child\": {\n      marginBlockStart: \"0\",\n    },\n    _after: {\n      content: '\"\"',\n      textAlign: \"center\",\n      position: \"absolute\",\n      inset: \"0\",\n      transitionProperty: \"opacity\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in-out\",\n      gradientFrom: \"surface.default/20\",\n      gradientTo: \"surface.default/95\",\n      backgroundGradient: \"to-b\",\n      opacity: \"1\",\n      zIndex: \"base\",\n      pointerEvents: \"none\",\n    },\n    _print: {\n      overflow: \"visible\",\n      _after: {\n        display: \"none\",\n      },\n    },\n    _open: {\n      paddingBlockEnd: \"xsmall\",\n      _after: {\n        opacity: \"0\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    bottom: \"-medium\",\n    zIndex: \"base\",\n    \"& svg\": {\n      transitionProperty: \"transform\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _open: {\n      \"& svg\": {\n        transform: \"rotate(180deg)\",\n      },\n    },\n    _print: {\n      display: \"none\",\n    },\n  },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nconst FactBox = forwardRef<HTMLElement, Props>(\n  ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n    const contentId = useId();\n    // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n    // When running in React 18, we need to use an empty string instead of true.\n    // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n    const inertAttribute = useMemo(() => {\n      return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n    }, [state]) as { inert?: boolean };\n\n    useEffect(() => {\n      if (open !== undefined) {\n        setState(open ? \"open\" : \"closed\");\n      }\n    }, [open]);\n\n    const onClick = useCallback(() => {\n      const newState = state === \"open\" ? \"closed\" : \"open\";\n      setState(newState);\n      onOpenChange?.(newState === \"open\");\n    }, [state, onOpenChange]);\n\n    return (\n      <StyledAside\n        data-state={state}\n        data-embed-type=\"factbox\"\n        {...rest}\n        ref={ref}\n        overflowHidden={overflowHidden}\n        onTransitionStart={(e) => {\n          if (e.target === e.currentTarget && state === \"closed\") {\n            setOverflowHidden(true);\n          }\n        }}\n        onTransitionEnd={(e) => {\n          if (e.target === e.currentTarget && state === \"open\") {\n            setOverflowHidden(false);\n          }\n        }}\n      >\n        <StyledIconButton\n          data-state={state}\n          onClick={onClick}\n          contentEditable={false}\n          aria-expanded={state === \"open\"}\n          aria-controls={contentId}\n          aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n        >\n          <ArrowDownShortLine />\n        </StyledIconButton>\n        <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n          {children}\n        </StyledContent>\n      </StyledAside>\n    );\n  },\n);\n\nexport default FactBox;\n"],"mappings":";;;;;;;;AA8BA,MAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,MACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;EACZ,EACF;EACD,WAAW,EACT,WAAW,kBACZ;CACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,SACX,EACF,EACF,EACF;AACF,EAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,IACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;CAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,OACV;CACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,IACV;CACF;AACF,EACF,EAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,iBACZ,EACF;CACD,QAAQ,EACN,SAAS,OACV;AACF,EACF,EAAC;AAIF,MAAM,UAAU,WACd,CAAC,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,MAAM,EAAE,QAAQ;CACvE,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,CAAC,OAAO,SAAS,GAAG,SAA4B,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,UAAU,YAAY;CAClE,MAAM,YAAY,OAAO;CAIzB,MAAM,iBAAiB,QAAQ,MAAM;AACnC,SAAO,UAAU,WAAW,EAAE,cAAc,MAAM,QAAQ,aAAa,OAAO,GAAI,IAAG,CAAE;CACxF,GAAE,CAAC,KAAM,EAAC;AAEX,WAAU,MAAM;AACd,MAAI,gBACF,UAAS,OAAO,SAAS,SAAS;CAErC,GAAE,CAAC,IAAK,EAAC;CAEV,MAAM,UAAU,YAAY,MAAM;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;CACpC,GAAE,CAAC,OAAO,YAAa,EAAC;AAEzB,wBACE,KAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,mBAAmB,CAAC,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;EAE1B;EACD,iBAAiB,CAAC,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;EAE3B;6BAED,IAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,GAAG,UAAU,UAAU,SAAS,UAAU,OAAO,EAAE;6BAE/D,IAAC,uBAAqB;IACL,kBACnB,IAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;AAEjB,EACF;AAED,sBAAe"}

package/es/FactBox/index.js

@@ -0,0 +1,8 @@
+import { FactBox_default } from "./FactBox.js";
+
+//#region src/FactBox/index.ts
+var FactBox_default$1 = FactBox_default;
+
+//#endregion
+export { FactBox_default$1 as FactBox_default };
+//# sourceMappingURL=index.js.map

package/es/FactBox/index.js.map

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

package/es/FileList/File.js

@@ -0,0 +1,76 @@
+import { FileListItem } from "./FileList.js";
+import { forwardRef } from "react";
+import { Text } from "@ndla/primitives";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { DownloadLine } from "@ndla/icons";
+import { SafeLink } from "@ndla/safelink";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+
+//#region src/FileList/File.tsx
+const StyledSafeLink = styled(SafeLink, { base: {
+	textUnderlineOffset: "2px",
+	textDecoration: "underline",
+	_hover: { textDecoration: "none" }
+} });
+const StyledHStack = styled(HStack, { base: {
+	position: "relative",
+	paddingBlock: "small",
+	paddingInlineEnd: "medium",
+	paddingInlineStart: "small",
+	width: "100%"
+} });
+const File = forwardRef(({ title, url, fileExists, fileType, fileSize,...rest }, ref) => {
+	const { t } = useTranslation();
+	const filename = `${title}-${url.split("/").pop() ?? ""}`;
+	const downloadUrl = `${url}?download=${filename}`;
+	const tooltip = `${t("download")} ${filename}`;
+	return /* @__PURE__ */ jsxs(StyledHStack, {
+		justify: "space-between",
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			gap: "xxsmall",
+			children: [
+				/* @__PURE__ */ jsx(DownloadLine, {}),
+				fileExists ? /* @__PURE__ */ jsx(StyledSafeLink, {
+					unstyled: true,
+					css: linkOverlay.raw(),
+					to: downloadUrl,
+					title: tooltip,
+					children: title
+				}) : /* @__PURE__ */ jsx(Text, {
+					textStyle: "label.medium",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					textStyle: "label.large",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ jsxs("span", { children: [
+						"(",
+						fileType?.toUpperCase(),
+						")"
+					] })
+				})
+			]
+		}), /* @__PURE__ */ jsx(Text, {
+			textStyle: "label.large",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ jsx("span", { children: fileSize })
+		})]
+	});
+});
+const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ jsx(FileListItem, { children: /* @__PURE__ */ jsx(File, {
+	title,
+	url,
+	fileExists,
+	fileType,
+	fileSize
+}) });
+
+//#endregion
+export { File, FileListElement };
+//# sourceMappingURL=File.js.map

package/es/FileList/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","names":[],"sources":["../../src/FileList/File.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 { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n  title: string;\n  url: string;\n  fileExists: boolean;\n  fileType: string;\n  fileSize?: string;\n}\n\nexport interface FileType {\n  title: string;\n  formats: FileFormat[];\n  fileExists?: boolean;\n}\n\nexport interface FileFormat {\n  url: string;\n  fileType: string;\n  tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    textUnderlineOffset: \"2px\",\n    textDecoration: \"underline\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n});\n\nconst StyledHStack = styled(HStack, {\n  base: {\n    position: \"relative\",\n    paddingBlock: \"small\",\n    paddingInlineEnd: \"medium\",\n    paddingInlineStart: \"small\",\n    width: \"100%\",\n  },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n    const downloadUrl = `${url}?download=${filename}`;\n    const tooltip = `${t(\"download\")} ${filename}`;\n\n    return (\n      <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n        <HStack gap=\"xxsmall\">\n          <DownloadLine />\n          {fileExists ? (\n            <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n              {title}\n            </StyledSafeLink>\n          ) : (\n            <Text textStyle=\"label.medium\">{title}</Text>\n          )}\n          <Text textStyle=\"label.large\" asChild consumeCss>\n            <span>({fileType?.toUpperCase()})</span>\n          </Text>\n        </HStack>\n        <Text textStyle=\"label.large\" asChild consumeCss>\n          <span>{fileSize}</span>\n        </Text>\n      </StyledHStack>\n    );\n  },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n  <FileListItem>\n    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n  </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,WAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,KAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,KAAC;GAAO,KAAI;;oBACV,IAAC,iBAAe;IACf,6BACC,IAAC;KAAe;KAAS,KAAK,YAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,IAAC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,IAAC;KAAK,WAAU;KAAc;KAAQ;+BACpC,KAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,IAAC;GAAK,WAAU;GAAc;GAAQ;6BACpC,IAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,IAAC,0CACC,IAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}

package/es/FileList/FileList.js

@@ -0,0 +1,32 @@
+import "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react";
+
+//#region src/FileList/FileList.tsx
+const FileListWrapper = styled(ark.ul, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	clear: "both"
+} }, { baseComponent: true });
+const FileListItem = styled(ark.li, { base: {
+	listStyle: "none",
+	background: "surface.infoSubtle",
+	borderBlockEnd: "1px solid",
+	borderColor: "stroke.default",
+	display: "flex",
+	justifyContent: "space-between",
+	_hover: { backgroundColor: "surface.infoSubtle.hover" }
+} }, { baseComponent: true });
+const FileListEmbed = ({ children,...rest }) => {
+	return /* @__PURE__ */ jsx(FileListWrapper, {
+		...rest,
+		"data-embed-type": "file-list",
+		children
+	});
+};
+
+//#endregion
+export { FileListEmbed, FileListItem, FileListWrapper };
+//# sourceMappingURL=FileList.js.map

package/es/FileList/FileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.js","names":[],"sources":["../../src/FileList/FileList.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 { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n  ark.ul,\n  {\n    base: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"xsmall\",\n      clear: \"both\",\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n  ark.li,\n  {\n    base: {\n      listStyle: \"none\",\n      background: \"surface.infoSubtle\",\n      borderBlockEnd: \"1px solid\",\n      borderColor: \"stroke.default\",\n      display: \"flex\",\n      justifyContent: \"space-between\",\n\n      _hover: {\n        backgroundColor: \"surface.infoSubtle.hover\",\n      },\n    },\n  },\n  { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n  return (\n    <FileListWrapper {...rest} data-embed-type=\"file-list\">\n      {children}\n    </FileListWrapper>\n  );\n};\n"],"mappings":";;;;;;AAcA,MAAa,kBAAkB,OAC7B,IAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,eAAe,OAC1B,IAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,2BAClB;AACF,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,gBAAgB,CAAC,EAAE,SAAU,GAAG,MAAa,KAAK;AAC7D,wBACE,IAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe;AAErB"}

package/es/FileList/PdfFile.js

@@ -0,0 +1,28 @@
+import { Figure, Heading } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+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

@@ -0,0 +1,142 @@
+import { SpeechControl_default } from "../AudioPlayer/SpeechControl.js";
+import { GlossExample_default } from "./GlossExample.js";
+import { useMemo } from "react";
+import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionRoot, IconButton, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+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";
+
+//#region src/Gloss/Gloss.tsx
+const getFilteredExamples = (glossData, exampleIds, exampleLangs) => {
+	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 StyledAccordionItem = styled(AccordionItem, {
+	base: {
+		paddingBlock: "small",
+		paddingInline: "medium"
+	},
+	defaultVariants: { variant: "simple" },
+	variants: { variant: {
+		simple: {},
+		bordered: {
+			border: "1px solid",
+			borderColor: "stroke.subtle",
+			borderRadius: "xsmall"
+		}
+	} }
+});
+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}`)) })
+			]
+		})
+	});
+};
+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":"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"}

package/es/Gloss/GlossExample.js

@@ -0,0 +1,46 @@
+import { Fragment } from "react";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+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)) });
+};
+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"}