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

package/es/FactBox/FactBox.js

@@ -1,177 +1,121 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ArrowDownShortLine } from "@ndla/icons";
 import { IconButton } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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%",
-    // Reset the top margin of the very first child.
-    "& :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"
-      }
-    }
-  }
+	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 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 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;
 
-// TODO: Consider moving the open trigger depending on whether the content is open or closed.
-
-const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    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();
-  // 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.
-  // When running in React 18, we need to use an empty string instead of true.
-  // TODO: Remove this hack once we upgrade to React 19 as a peer dep.
-  const inertAttribute = useMemo(() => {
-    return state === "closed" ? {
-      inert: typeof React.use === "function" ? true : ""
-    } : {};
-  }, [state]);
-  useEffect(() => {
-    if (open !== undefined) {
-      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: ref,
-    overflowHidden: 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: 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: children
-    })]
-  });
-});
-export 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

@@ -1,10 +1,8 @@
-/**
- * Copyright (c) 2018-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 { FactBox_default } from "./FactBox.js";
 
-import FactBox from "./FactBox";
-export default FactBox;
+//#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

@@ -1,101 +1,76 @@
-/**
- * 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 { 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 { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { HStack, styled } from "@ndla/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { linkOverlay } from "@ndla/styled-system/patterns";
-import { FileListItem } from ".";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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%"
-  }
-});
-export const File = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    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: 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
-      })
-    })]
-  });
+
+//#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 })
+		})]
+	});
 });
-export const FileListElement = _ref2 => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize
-  } = _ref2;
-  return /*#__PURE__*/_jsx(FileListItem, {
-    children: /*#__PURE__*/_jsx(File, {
-      title: title,
-      url: url,
-      fileExists: fileExists,
-      fileType: fileType,
-      fileSize: 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

@@ -1,47 +1,32 @@
-/**
- * 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 { ark } from "@ark-ui/react";
+import "react";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const FileListWrapper = styled(ark.ul, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    clear: "both"
-  }
-}, {
-  baseComponent: true
-});
-export 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
-});
-export const FileListEmbed = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(FileListWrapper, {
-    ...rest,
-    "data-embed-type": "file-list",
-    children: children
-  });
-};
+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"}