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

package/lib/FactBox/FactBox.js

@@ -1,184 +1,122 @@
-"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_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"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+//#region src/FactBox/FactBox.tsx
+const StyledAside = (0, __ndla_styled_system_jsx.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" } } } }
 });
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- *
- */
-
-const StyledAside = (0, _jsx2.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 = (0, _jsx2.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"
-      }
-    }
-  }
-});
-const StyledIconButton = (0, _jsx2.styled)(_primitives.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 = (0, __ndla_styled_system_jsx.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 = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.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 = (0, react.forwardRef)(({ children, open, onOpenChange, defaultOpen = false,...rest }, ref) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const [state, setState] = (0, react.useState)(defaultOpen ? "open" : "closed");
+	const [overflowHidden, setOverflowHidden] = (0, react.useState)(!defaultOpen);
+	const contentId = (0, react.useId)();
+	const inertAttribute = (0, react.useMemo)(() => {
+		return state === "closed" ? { inert: typeof react.default.use === "function" ? true : "" } : {};
+	}, [state]);
+	(0, react.useEffect)(() => {
+		if (open !== void 0) setState(open ? "open" : "closed");
+	}, [open]);
+	const onClick = (0, react.useCallback)(() => {
+		const newState = state === "open" ? "closed" : "open";
+		setState(newState);
+		onOpenChange?.(newState === "open");
+	}, [state, onOpenChange]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowDownShortLine, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    children,
-    open,
-    onOpenChange,
-    defaultOpen = false,
-    ...rest
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [state, setState] = (0, _react.useState)(defaultOpen ? "open" : "closed");
-  const [overflowHidden, setOverflowHidden] = (0, _react.useState)(!defaultOpen);
-  const contentId = (0, _react.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 = (0, _react.useMemo)(() => {
-    return state === "closed" ? {
-      inert: typeof _react.default.use === "function" ? true : ""
-    } : {};
-  }, [state]);
-  (0, _react.useEffect)(() => {
-    if (open !== undefined) {
-      setState(open ? "open" : "closed");
-    }
-  }, [open]);
-  const onClick = (0, _react.useCallback)(() => {
-    const newState = state === "open" ? "closed" : "open";
-    setState(newState);
-    onOpenChange?.(newState === "open");
-  }, [state, onOpenChange]);
-  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_icons.ArrowDownShortLine, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledContent, {
-      id: contentId,
-      "data-state": state,
-      "aria-hidden": state === "closed",
-      ...inertAttribute,
-      children: children
-    })]
-  });
-});
-var _default = exports.default = FactBox;
+//#endregion
+exports.FactBox_default = FactBox_default;
+//# sourceMappingURL=FactBox.js.map

package/lib/FactBox/FactBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"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,qCAAO,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,qCAAO,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,qCAAOA,8BAAY,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,sBACd,CAAC,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,MAAM,EAAE,QAAQ;CACvE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,CAAC,OAAO,SAAS,GAAG,oBAA4B,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,kBAAkB,GAAG,qBAAU,YAAY;CAClE,MAAM,YAAY,kBAAO;CAIzB,MAAM,iBAAiB,mBAAQ,MAAM;AACnC,SAAO,UAAU,WAAW,EAAE,cAAcC,cAAM,QAAQ,aAAa,OAAO,GAAI,IAAG,CAAE;CACxF,GAAE,CAAC,KAAM,EAAC;AAEX,sBAAU,MAAM;AACd,MAAI,gBACF,UAAS,OAAO,SAAS,SAAS;CAErC,GAAE,CAAC,IAAK,EAAC;CAEV,MAAM,UAAU,uBAAY,MAAM;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;CACpC,GAAE,CAAC,OAAO,YAAa,EAAC;AAEzB,wBACE,4BAAC;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,2BAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,GAAG,UAAU,UAAU,SAAS,UAAU,OAAO,EAAE;6BAE/D,2BAACC,oCAAqB;IACL,kBACnB,2BAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;AAEjB,EACF;AAED,sBAAe"}

package/lib/FactBox/index.js

@@ -1,16 +1,8 @@
-"use strict";
+const require_FactBox = require('./FactBox.js');
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _FactBox = _interopRequireDefault(require("./FactBox"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-var _default = exports.default = _FactBox.default;
+//#region src/FactBox/index.ts
+var FactBox_default$1 = require_FactBox.FactBox_default;
+
+//#endregion
+exports.FactBox_default = FactBox_default$1;
+//# sourceMappingURL=index.js.map

package/lib/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/lib/FileList/File.js

@@ -1,108 +1,78 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_FileList = require('./FileList.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 __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_styled_system_patterns = require_rolldown_runtime.__toESM(require("@ndla/styled-system/patterns"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+//#region src/FileList/File.tsx
+const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+	textUnderlineOffset: "2px",
+	textDecoration: "underline",
+	_hover: { textDecoration: "none" }
+} });
+const StyledHStack = (0, __ndla_styled_system_jsx.styled)(__ndla_styled_system_jsx.HStack, { base: {
+	position: "relative",
+	paddingBlock: "small",
+	paddingInlineEnd: "medium",
+	paddingInlineStart: "small",
+	width: "100%"
+} });
+const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize,...rest }, ref) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const filename = `${title}-${url.split("/").pop() ?? ""}`;
+	const downloadUrl = `${url}?download=${filename}`;
+	const tooltip = `${t("download")} ${filename}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledHStack, {
+		justify: "space-between",
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_styled_system_jsx.HStack, {
+			gap: "xxsmall",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.DownloadLine, {}),
+				fileExists ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
+					unstyled: true,
+					css: __ndla_styled_system_patterns.linkOverlay.raw(),
+					to: downloadUrl,
+					title: tooltip,
+					children: title
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+					textStyle: "label.medium",
+					children: title
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+					textStyle: "label.large",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+						"(",
+						fileType?.toUpperCase(),
+						")"
+					] })
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+			textStyle: "label.large",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: fileSize })
+		})]
+	});
 });
-exports.FileListElement = exports.File = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _patterns = require("@ndla/styled-system/patterns");
-var _ = require(".");
-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 FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileList.FileListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(File, {
+	title,
+	url,
+	fileExists,
+	fileType,
+	fileSize
+}) });
 
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
-  base: {
-    textUnderlineOffset: "2px",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    }
-  }
-});
-const StyledHStack = (0, _jsx2.styled)(_jsx2.HStack, {
-  base: {
-    position: "relative",
-    paddingBlock: "small",
-    paddingInlineEnd: "medium",
-    paddingInlineStart: "small",
-    width: "100%"
-  }
-});
-const File = exports.File = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize,
-    ...rest
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const filename = `${title}-${url.split("/").pop() ?? ""}`;
-  const downloadUrl = `${url}?download=${filename}`;
-  const tooltip = `${t("download")} ${filename}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
-    justify: "space-between",
-    ref: ref,
-    ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsx2.HStack, {
-      gap: "xxsmall",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownloadLine, {}), fileExists ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
-        unstyled: true,
-        css: _patterns.linkOverlay.raw(),
-        to: downloadUrl,
-        title: tooltip,
-        children: title
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        textStyle: "label.medium",
-        children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        textStyle: "label.large",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          children: ["(", fileType?.toUpperCase(), ")"]
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-      textStyle: "label.large",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: fileSize
-      })
-    })]
-  });
-});
-const FileListElement = _ref2 => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FileListItem, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(File, {
-      title: title,
-      url: url,
-      fileExists: fileExists,
-      fileType: fileType,
-      fileSize: fileSize
-    })
-  });
-};
-exports.FileListElement = FileListElement;
+//#endregion
+exports.File = File;
+exports.FileListElement = FileListElement;
+//# sourceMappingURL=File.js.map

package/lib/FileList/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","Text","FileListItem"],"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,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;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,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,2DACC,2BAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}

package/lib/FileList/FileList.js

@@ -1,54 +1,35 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+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"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileListWrapper = exports.FileListItem = exports.FileListEmbed = void 0;
-var _react = require("@ark-ui/react");
-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 FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)(_react.ark.ul, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    clear: "both"
-  }
-}, {
-  baseComponent: true
-});
-const FileListItem = exports.FileListItem = (0, _jsx2.styled)(_react.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 = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FileListWrapper, {
-    ...rest,
-    "data-embed-type": "file-list",
-    children: children
-  });
+//#region src/FileList/FileList.tsx
+const FileListWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.ul, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	clear: "both"
+} }, { baseComponent: true });
+const FileListItem = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.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__ */ (0, react_jsx_runtime.jsx)(FileListWrapper, {
+		...rest,
+		"data-embed-type": "file-list",
+		children
+	});
 };
-exports.FileListEmbed = FileListEmbed;
+
+//#endregion
+exports.FileListEmbed = FileListEmbed;
+exports.FileListItem = FileListItem;
+exports.FileListWrapper = FileListWrapper;
+//# sourceMappingURL=FileList.js.map

package/lib/FileList/FileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileList.js","names":["ark"],"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,qCAC7BA,mBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;AACR,EACF,GACD,EAAE,eAAe,KAAM,EACxB;AAED,MAAa,eAAe,qCAC1BA,mBAAI,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,2BAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe;AAErB"}