@ndla/ui 56.0.3-alpha.0 → 56.0.5-alpha.0

package/lib/FileList/FileList.js

@@ -3,63 +3,60 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
+exports.FileListWrapper = exports.FileListItem = exports.FileListEmbed = void 0;
 var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
-var _typography = require("@ndla/typography");
+var _primitives = require("@ndla/primitives");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
+/**
  * 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 FileListSection = /*#__PURE__*/(0, _base.default)("section", {
-  target: "e1o67ylf2",
-  label: "FileListSection"
-})("margin:", _core.spacing.large, " 0;padding:0 0 ", _core.spacing.normal, " ", _core.spacing.normal, ";border-left:2px solid ", _core.colors.brand.greyLightest, ";font-family:", _core.fonts.sans, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQnNDIiwiZmlsZSI6IkZpbGVMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tIFwiQG5kbGEvdHlwb2dyYXBoeVwiO1xuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8XCJzZWN0aW9uXCI+IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEZpbGVMaXN0U2VjdGlvbiA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbiAgcGFkZGluZzogMCAwICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBib3JkZXItbGVmdDogMnB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuYDtcblxuY29uc3QgRmlsZUxpc3RIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcueHNtYWxsfSAwO1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuYDtcblxuY29uc3QgRmlsZXNMaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwO1xuYDtcblxuY29uc3QgRmlsZUxpc3QgPSAoeyBjaGlsZHJlbiwgaGVhZGluZ0J1dHRvbnMsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxGaWxlTGlzdFNlY3Rpb24gey4uLnJlc3R9PlxuICAgICAgPEZpbGVMaXN0SGVhZGVyV3JhcHBlcj5cbiAgICAgICAgPEhlYWRpbmcgZWxlbWVudD1cImgzXCIgaGVhZGluZ1N0eWxlPVwibGlzdC10aXRsZVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7dChcImZpbGVzXCIpfVxuICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgIDxkaXY+e2hlYWRpbmdCdXR0b25zfTwvZGl2PlxuICAgICAgPC9GaWxlTGlzdEhlYWRlcldyYXBwZXI+XG4gICAgICA8RmlsZXNMaXN0PntjaGlsZHJlbn08L0ZpbGVzTGlzdD5cbiAgICA8L0ZpbGVMaXN0U2VjdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpbGVMaXN0O1xuIl19 */"));
-const FileListHeaderWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1o67ylf1",
-  label: "FileListHeaderWrapper"
-})("display:flex;justify-content:space-between;align-items:center;margin:0 0 ", _core.spacing.xsmall, " 0;padding-bottom:", _core.spacing.xsmall, ";border-bottom:2px solid ", _core.colors.brand.greyLight, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QndDIiwiZmlsZSI6IkZpbGVMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tIFwiQG5kbGEvdHlwb2dyYXBoeVwiO1xuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8XCJzZWN0aW9uXCI+IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEZpbGVMaXN0U2VjdGlvbiA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbiAgcGFkZGluZzogMCAwICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBib3JkZXItbGVmdDogMnB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuYDtcblxuY29uc3QgRmlsZUxpc3RIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcueHNtYWxsfSAwO1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuYDtcblxuY29uc3QgRmlsZXNMaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwO1xuYDtcblxuY29uc3QgRmlsZUxpc3QgPSAoeyBjaGlsZHJlbiwgaGVhZGluZ0J1dHRvbnMsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxGaWxlTGlzdFNlY3Rpb24gey4uLnJlc3R9PlxuICAgICAgPEZpbGVMaXN0SGVhZGVyV3JhcHBlcj5cbiAgICAgICAgPEhlYWRpbmcgZWxlbWVudD1cImgzXCIgaGVhZGluZ1N0eWxlPVwibGlzdC10aXRsZVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7dChcImZpbGVzXCIpfVxuICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgIDxkaXY+e2hlYWRpbmdCdXR0b25zfTwvZGl2PlxuICAgICAgPC9GaWxlTGlzdEhlYWRlcldyYXBwZXI+XG4gICAgICA8RmlsZXNMaXN0PntjaGlsZHJlbn08L0ZpbGVzTGlzdD5cbiAgICA8L0ZpbGVMaXN0U2VjdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpbGVMaXN0O1xuIl19 */"));
-const FilesList = /*#__PURE__*/(0, _base.default)("ul", {
-  target: "e1o67ylf0",
-  label: "FilesList"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1hcx8jb",
-  styles: "padding:0"
-} : {
-  name: "1hcx8jb",
-  styles: "padding:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGVMaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQzJCIiwiZmlsZSI6IkZpbGVMaXN0LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSAyMDIzLXByZXNlbnQsIE5ETEEuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgR1BMdjMgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50UHJvcHMsIFJlYWN0Tm9kZSB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tIFwicmVhY3QtaTE4bmV4dFwiO1xuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5pbXBvcnQgeyBjb2xvcnMsIGZvbnRzLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tIFwiQG5kbGEvdHlwb2dyYXBoeVwiO1xuaW50ZXJmYWNlIFByb3BzIGV4dGVuZHMgQ29tcG9uZW50UHJvcHM8XCJzZWN0aW9uXCI+IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaGVhZGluZ0J1dHRvbnM/OiBSZWFjdE5vZGU7XG59XG5cbmNvbnN0IEZpbGVMaXN0U2VjdGlvbiA9IHN0eWxlZC5zZWN0aW9uYFxuICBtYXJnaW46ICR7c3BhY2luZy5sYXJnZX0gMDtcbiAgcGFkZGluZzogMCAwICR7c3BhY2luZy5ub3JtYWx9ICR7c3BhY2luZy5ub3JtYWx9O1xuICBib3JkZXItbGVmdDogMnB4IHNvbGlkICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVzdH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuYDtcblxuY29uc3QgRmlsZUxpc3RIZWFkZXJXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtYXJnaW46IDAgMCAke3NwYWNpbmcueHNtYWxsfSAwO1xuICBwYWRkaW5nLWJvdHRvbTogJHtzcGFjaW5nLnhzbWFsbH07XG4gIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAke2NvbG9ycy5icmFuZC5ncmV5TGlnaHR9O1xuYDtcblxuY29uc3QgRmlsZXNMaXN0ID0gc3R5bGVkLnVsYFxuICBwYWRkaW5nOiAwO1xuYDtcblxuY29uc3QgRmlsZUxpc3QgPSAoeyBjaGlsZHJlbiwgaGVhZGluZ0J1dHRvbnMsIC4uLnJlc3QgfTogUHJvcHMpID0+IHtcbiAgY29uc3QgeyB0IH0gPSB1c2VUcmFuc2xhdGlvbigpO1xuICByZXR1cm4gKFxuICAgIDxGaWxlTGlzdFNlY3Rpb24gey4uLnJlc3R9PlxuICAgICAgPEZpbGVMaXN0SGVhZGVyV3JhcHBlcj5cbiAgICAgICAgPEhlYWRpbmcgZWxlbWVudD1cImgzXCIgaGVhZGluZ1N0eWxlPVwibGlzdC10aXRsZVwiIG1hcmdpbj1cIm5vbmVcIj5cbiAgICAgICAgICB7dChcImZpbGVzXCIpfVxuICAgICAgICA8L0hlYWRpbmc+XG4gICAgICAgIDxkaXY+e2hlYWRpbmdCdXR0b25zfTwvZGl2PlxuICAgICAgPC9GaWxlTGlzdEhlYWRlcldyYXBwZXI+XG4gICAgICA8RmlsZXNMaXN0PntjaGlsZHJlbn08L0ZpbGVzTGlzdD5cbiAgICA8L0ZpbGVMaXN0U2VjdGlvbj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpbGVMaXN0O1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall"
+  }
+});
+const FileListItem = exports.FileListItem = (0, _jsx2.styled)("li", {
+  base: {
+    background: "surface.infoSubtle",
+    borderBlockEnd: "1px solid",
+    borderColor: "stroke.default",
+    display: "flex",
+    justifyContent: "space-between",
+    _hover: {
+      backgroundColor: "surface.infoSubtle.hover"
+    }
+  }
 });
-const FileList = _ref => {
+const FileListEmbed = _ref => {
   let {
     children,
-    headingButtons,
     ...rest
   } = _ref;
   const {
     t
   } = (0, _reactI18next.useTranslation)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FileListSection, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FileListWrapper, {
     ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(FileListHeaderWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Heading, {
-        element: "h3",
-        headingStyle: "list-title",
-        margin: "none",
+    "data-embed-type": "file-list",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
+      fontWeight: "bold",
+      textStyle: "heading.small",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
         children: t("files")
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: headingButtons
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilesList, {
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
       children: children
     })]
   });
 };
-var _default = exports.default = FileList;
+exports.FileListEmbed = FileListEmbed;

package/lib/FileList/PdfFile.d.ts

@@ -9,5 +9,5 @@ interface Props {
     title: string;
     url: string;
 }
-declare const PdfFile: ({ title, url }: Props) => import("react/jsx-runtime").JSX.Element;
-export default PdfFile;
+export declare const PdfFile: ({ title, url }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/FileList/PdfFile.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.PdfFile = void 0;
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -32,19 +32,21 @@ const PdfFile = _ref => {
     title,
     url
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-      asChild: true,
-      consumeCss: true,
-      textStyle: "title.medium",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
-        children: title
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
-      title: title,
-      height: "1050",
-      src: url
-    })]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
+        asChild: true,
+        consumeCss: true,
+        textStyle: "title.medium",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
+          children: title
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
+        title: title,
+        height: "1050",
+        src: url
+      })]
+    })
   });
 };
-var _default = exports.default = PdfFile;
+exports.PdfFile = PdfFile;

package/lib/FileList/index.d.ts

@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import FileList from "./FileList";
-export { default as File } from "./File";
-export { default as PdfFile } from "./PdfFile";
-export { default as Format } from "./Format";
-export default FileList;
+export { FileListEmbed, FileListItem } from "./FileList";
+export { File, FileListElement } from "./File";
+export { PdfFile } from "./PdfFile";

package/lib/FileList/index.js

@@ -6,32 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "File", {
   enumerable: true,
   get: function () {
-    return _File.default;
+    return _File.File;
   }
 });
-Object.defineProperty(exports, "Format", {
+Object.defineProperty(exports, "FileListElement", {
   enumerable: true,
   get: function () {
-    return _Format.default;
+    return _File.FileListElement;
+  }
+});
+Object.defineProperty(exports, "FileListEmbed", {
+  enumerable: true,
+  get: function () {
+    return _FileList.FileListEmbed;
+  }
+});
+Object.defineProperty(exports, "FileListItem", {
+  enumerable: true,
+  get: function () {
+    return _FileList.FileListItem;
   }
 });
 Object.defineProperty(exports, "PdfFile", {
   enumerable: true,
   get: function () {
-    return _PdfFile.default;
+    return _PdfFile.PdfFile;
   }
 });
-exports.default = void 0;
-var _FileList = _interopRequireDefault(require("./FileList"));
-var _File = _interopRequireDefault(require("./File"));
-var _PdfFile = _interopRequireDefault(require("./PdfFile"));
-var _Format = _interopRequireDefault(require("./Format"));
-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 = _FileList.default;
+var _FileList = require("./FileList");
+var _File = require("./File");
+var _PdfFile = require("./PdfFile");

package/lib/Grid/Grid.d.ts

@@ -5,14 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { HTMLAttributes, ReactNode } from "react";
+import { ReactNode } from "react";
 export interface GridProps {
-    columns: "2" | "4" | "2x2";
+    columns: "2" | "3" | "4" | "2x2";
     border?: "none" | "lightBlue";
-    background?: "transparent" | "white";
-    size?: boolean;
+    background?: "transparent" | "white" | "gray";
     children?: ReactNode[];
 }
-declare const Grid: ({ columns, border, children, background, size, ...rest }: GridProps) => import("react/jsx-runtime").JSX.Element;
-export declare const GridParallaxItem: ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export default Grid;
+export declare const Grid: ({ columns, border, children, background }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Grid/Grid.js

@@ -3,70 +3,92 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.GridParallaxItem = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _core = require("@ndla/core");
+exports.Grid = void 0;
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
+/**
  * 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 GridContainer = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1c0s8mo1",
-  label: "GridContainer"
-})("display:grid;justify-content:center;border-radius:", _core.misc.borderRadius, ";grid-template-columns:1fr;grid-gap:", _core.spacing.normal, ";padding:", _core.spacing.normal, ";margin-bottom:", _core.spacing.normal, ";clear:both;", _core.mq.range({
-  until: _core.breakpoints.tabletWide
-}), "{&[data-columns=\"2x2\"],&[data-columns=\"3\"],&[data-columns=\"4\"]{grid-template-columns:repeat(2, minmax(0, 1fr));}}", _core.mq.range({
-  until: _core.breakpoints.desktop
-}), "{>div:nth-child(3):last-child{display:flex;flex-flow:column;justify-content:center;align-items:center;grid-column:span 2;}}", _core.mq.range({
-  from: _core.breakpoints.tabletWide
-}), "{grid-template-columns:repeat(2, minmax(0, 1fr));&[data-columns=\"3\"]{grid-template-columns:repeat(3, minmax(0, 1fr));}&[data-columns=\"4\"]{grid-template-columns:repeat(4, minmax(0, 1fr));}}&[data-frontpage=\"true\"]{grid-gap:", _core.spacing.large, ";}&[data-border=\"lightBlue\"]{border:1px solid ", _core.colors.brand.lighter, ";}&[data-background=\"white\"]{background-color:", _core.colors.white, ";}p{word-break:break-word;margin-top:0px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CZ0MiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IEhUTUxBdHRyaWJ1dGVzLCBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgbWlzYywgbXEsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIEdyaWRQcm9wcyB7XG4gIGNvbHVtbnM6IFwiMlwiIHwgXCI0XCIgfCBcIjJ4MlwiO1xuICBib3JkZXI/OiBcIm5vbmVcIiB8IFwibGlnaHRCbHVlXCI7XG4gIGJhY2tncm91bmQ/OiBcInRyYW5zcGFyZW50XCIgfCBcIndoaXRlXCI7XG4gIHNpemU/OiBib29sZWFuO1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVtdO1xufVxuXG5jb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgZ3JpZC1nYXA6ICR7c3BhY2luZy5ub3JtYWx9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIGNsZWFyOiBib3RoO1xuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgICZbZGF0YS1jb2x1bW5zPVwiMngyXCJdLFxuICAgICZbZGF0YS1jb2x1bW5zPVwiM1wiXSxcbiAgICAmW2RhdGEtY29sdW1ucz1cIjRcIl0ge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMiwgbWlubWF4KDAsIDFmcikpO1xuICAgIH1cbiAgfVxuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgID4gZGl2Om50aC1jaGlsZCgzKTpsYXN0LWNoaWxkIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWZsb3c6IGNvbHVtbjtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGdyaWQtY29sdW1uOiBzcGFuIDI7XG4gICAgfVxuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCBtaW5tYXgoMCwgMWZyKSk7XG5cbiAgICAmW2RhdGEtY29sdW1ucz1cIjNcIl0ge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMywgbWlubWF4KDAsIDFmcikpO1xuICAgIH1cblxuICAgICZbZGF0YS1jb2x1bW5zPVwiNFwiXSB7XG4gICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCg0LCBtaW5tYXgoMCwgMWZyKSk7XG4gICAgfVxuICB9XG5cbiAgJltkYXRhLWZyb250cGFnZT1cInRydWVcIl0ge1xuICAgIGdyaWQtZ2FwOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5cbiAgJltkYXRhLWJvcmRlcj1cImxpZ2h0Qmx1ZVwiXSB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHRlcn07XG4gIH1cbiAgJltkYXRhLWJhY2tncm91bmQ9XCJ3aGl0ZVwiXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICB9XG5cbiAgcCB7XG4gICAgd29yZC1icmVhazogYnJlYWstd29yZDtcbiAgICBtYXJnaW4tdG9wOiAwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IEdyaWQgPSAoeyBjb2x1bW5zLCBib3JkZXIsIGNoaWxkcmVuLCBiYWNrZ3JvdW5kLCBzaXplLCAuLi5yZXN0IH06IEdyaWRQcm9wcykgPT4ge1xuICBjb25zdCBhbW91bnRPZkNvbHVtbnMgPSBjaGlsZHJlbj8ubGVuZ3RoID09PSAzID8gXCIzXCIgOiBjb2x1bW5zO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRDb250YWluZXJcbiAgICAgIGRhdGEtZnJvbnRwYWdlPXtzaXplfVxuICAgICAgZGF0YS1ib3JkZXI9e2JvcmRlcn1cbiAgICAgIGRhdGEtY29sdW1ucz17YW1vdW50T2ZDb2x1bW5zfVxuICAgICAgZGF0YS1iYWNrZ3JvdW5kPXtiYWNrZ3JvdW5kfVxuICAgICAgey4uLnJlc3R9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvR3JpZENvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmNvbnN0IFN0eWxlZEdyaWRQYXJhbGxheEl0ZW0gPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gID4gZGl2IHtcbiAgICB0b3A6IHZhcigtLW1hc3RoZWFkLWhlaWdodCwgMHB4KTtcbiAgICBwb3NpdGlvbjogc3RpY2t5O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFBhcmFsbGF4SXRlbSA9ICh7IGNoaWxkcmVuLCAuLi5yZXN0IH06IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8U3R5bGVkR3JpZFBhcmFsbGF4SXRlbSB7Li4ucmVzdH0+XG4gICAgPGRpdj57Y2hpbGRyZW59PC9kaXY+XG4gIDwvU3R5bGVkR3JpZFBhcmFsbGF4SXRlbT5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEdyaWQ7XG4iXX0= */"));
+
+const GridContainer = (0, _jsx2.styled)("div", {
+  base: {
+    display: "grid",
+    justifyContent: "center",
+    borderRadius: "xsmall",
+    padding: "xsmall",
+    gridRowGap: "large",
+    gridColumnGap: "medium",
+    width: "100%",
+    backgroundColor: "background.subtle",
+    maxWidth: "surface.4xlarge",
+    minWidth: "surface.xxsmall",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    tabletDown: {
+      gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
+    },
+    tabletToDesktop: {
+      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+      "& > div:nth-child(3):last-child": {
+        display: "flex",
+        flexFlow: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gridColumn: "span 2"
+      }
+    }
+  },
+  variants: {
+    columns: {
+      "2": {},
+      "2x2": {},
+      "3": {
+        desktop: {
+          gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
+        }
+      },
+      "4": {
+        desktop: {
+          gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
+        }
+      }
+    },
+    background: {
+      white: {
+        backgroundColor: "surface.default"
+      },
+      transparent: {
+        backgroundColor: "transparent"
+      },
+      gray: {
+        backgroundColor: "background.subtle"
+      }
+    },
+    border: {
+      lightBlue: {
+        border: "1px solid",
+        borderColor: "surface.brand.2"
+      }
+    }
+  }
+});
 const Grid = _ref => {
   let {
     columns,
     border,
     children,
-    background,
-    size,
-    ...rest
+    background = "gray"
   } = _ref;
   const amountOfColumns = children?.length === 3 ? "3" : columns;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridContainer, {
-    "data-frontpage": size,
-    "data-border": border,
-    "data-columns": amountOfColumns,
-    "data-background": background,
-    ...rest,
+    "data-embed-type": "grid",
+    border: border === "none" ? undefined : border,
+    columns: amountOfColumns,
+    background: background,
     children: children
   });
 };
-const StyledGridParallaxItem = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e1c0s8mo0",
-  label: "StyledGridParallaxItem"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1s7sltv",
-  styles: "position:relative;>div{top:var(--masthead-height, 0px);position:sticky;}"
-} : {
-  name: "1s7sltv",
-  styles: "position:relative;>div{top:var(--masthead-height, 0px);position:sticky;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdyaWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZGeUMiLCJmaWxlIjoiR3JpZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IEhUTUxBdHRyaWJ1dGVzLCBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgbWlzYywgbXEsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuXG5leHBvcnQgaW50ZXJmYWNlIEdyaWRQcm9wcyB7XG4gIGNvbHVtbnM6IFwiMlwiIHwgXCI0XCIgfCBcIjJ4MlwiO1xuICBib3JkZXI/OiBcIm5vbmVcIiB8IFwibGlnaHRCbHVlXCI7XG4gIGJhY2tncm91bmQ/OiBcInRyYW5zcGFyZW50XCIgfCBcIndoaXRlXCI7XG4gIHNpemU/OiBib29sZWFuO1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVtdO1xufVxuXG5jb25zdCBHcmlkQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZ3JpZDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGJvcmRlci1yYWRpdXM6ICR7bWlzYy5ib3JkZXJSYWRpdXN9O1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IDFmcjtcbiAgZ3JpZC1nYXA6ICR7c3BhY2luZy5ub3JtYWx9O1xuICBwYWRkaW5nOiAke3NwYWNpbmcubm9ybWFsfTtcbiAgbWFyZ2luLWJvdHRvbTogJHtzcGFjaW5nLm5vcm1hbH07XG4gIGNsZWFyOiBib3RoO1xuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgICZbZGF0YS1jb2x1bW5zPVwiMngyXCJdLFxuICAgICZbZGF0YS1jb2x1bW5zPVwiM1wiXSxcbiAgICAmW2RhdGEtY29sdW1ucz1cIjRcIl0ge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMiwgbWlubWF4KDAsIDFmcikpO1xuICAgIH1cbiAgfVxuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMuZGVza3RvcCB9KX0ge1xuICAgID4gZGl2Om50aC1jaGlsZCgzKTpsYXN0LWNoaWxkIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWZsb3c6IGNvbHVtbjtcbiAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIGdyaWQtY29sdW1uOiBzcGFuIDI7XG4gICAgfVxuICB9XG5cbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCgyLCBtaW5tYXgoMCwgMWZyKSk7XG5cbiAgICAmW2RhdGEtY29sdW1ucz1cIjNcIl0ge1xuICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoMywgbWlubWF4KDAsIDFmcikpO1xuICAgIH1cblxuICAgICZbZGF0YS1jb2x1bW5zPVwiNFwiXSB7XG4gICAgICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdCg0LCBtaW5tYXgoMCwgMWZyKSk7XG4gICAgfVxuICB9XG5cbiAgJltkYXRhLWZyb250cGFnZT1cInRydWVcIl0ge1xuICAgIGdyaWQtZ2FwOiAke3NwYWNpbmcubGFyZ2V9O1xuICB9XG5cbiAgJltkYXRhLWJvcmRlcj1cImxpZ2h0Qmx1ZVwiXSB7XG4gICAgYm9yZGVyOiAxcHggc29saWQgJHtjb2xvcnMuYnJhbmQubGlnaHRlcn07XG4gIH1cbiAgJltkYXRhLWJhY2tncm91bmQ9XCJ3aGl0ZVwiXSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtjb2xvcnMud2hpdGV9O1xuICB9XG5cbiAgcCB7XG4gICAgd29yZC1icmVhazogYnJlYWstd29yZDtcbiAgICBtYXJnaW4tdG9wOiAwcHg7XG4gIH1cbmA7XG5cbmNvbnN0IEdyaWQgPSAoeyBjb2x1bW5zLCBib3JkZXIsIGNoaWxkcmVuLCBiYWNrZ3JvdW5kLCBzaXplLCAuLi5yZXN0IH06IEdyaWRQcm9wcykgPT4ge1xuICBjb25zdCBhbW91bnRPZkNvbHVtbnMgPSBjaGlsZHJlbj8ubGVuZ3RoID09PSAzID8gXCIzXCIgOiBjb2x1bW5zO1xuXG4gIHJldHVybiAoXG4gICAgPEdyaWRDb250YWluZXJcbiAgICAgIGRhdGEtZnJvbnRwYWdlPXtzaXplfVxuICAgICAgZGF0YS1ib3JkZXI9e2JvcmRlcn1cbiAgICAgIGRhdGEtY29sdW1ucz17YW1vdW50T2ZDb2x1bW5zfVxuICAgICAgZGF0YS1iYWNrZ3JvdW5kPXtiYWNrZ3JvdW5kfVxuICAgICAgey4uLnJlc3R9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvR3JpZENvbnRhaW5lcj5cbiAgKTtcbn07XG5cbmNvbnN0IFN0eWxlZEdyaWRQYXJhbGxheEl0ZW0gPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gID4gZGl2IHtcbiAgICB0b3A6IHZhcigtLW1hc3RoZWFkLWhlaWdodCwgMHB4KTtcbiAgICBwb3NpdGlvbjogc3RpY2t5O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgR3JpZFBhcmFsbGF4SXRlbSA9ICh7IGNoaWxkcmVuLCAuLi5yZXN0IH06IEhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PikgPT4gKFxuICA8U3R5bGVkR3JpZFBhcmFsbGF4SXRlbSB7Li4ucmVzdH0+XG4gICAgPGRpdj57Y2hpbGRyZW59PC9kaXY+XG4gIDwvU3R5bGVkR3JpZFBhcmFsbGF4SXRlbT5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IEdyaWQ7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const GridParallaxItem = _ref2 => {
-  let {
-    children,
-    ...rest
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridParallaxItem, {
-    ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: children
-    })
-  });
-};
-exports.GridParallaxItem = GridParallaxItem;
-var _default = exports.default = Grid;
+exports.Grid = Grid;

package/lib/Grid/GridParallaxItem.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2024-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 { HTMLAttributes } from "react";
+export declare const GridParallaxItem: ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/lib/Grid/GridParallaxItem.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridParallaxItem = void 0;
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Copyright (c) 2024-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 StyledGridParallaxItem = (0, _jsx2.styled)("div", {
+  base: {
+    position: "relative",
+    "& > div": {
+      top: "var(--masthead-height, 0px)",
+      position: "sticky"
+    }
+  }
+});
+const GridParallaxItem = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridParallaxItem, {
+    ...rest,
+    "data-embed-type": "grid-parallax",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: children
+    })
+  });
+};
+exports.GridParallaxItem = GridParallaxItem;

package/lib/Grid/index.d.ts

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export { default as Grid, GridParallaxItem } from "./Grid";
+export { Grid } from "./Grid";
+export { GridParallaxItem } from "./GridParallaxItem";
 export type { GridProps as GridType } from "./Grid";

package/lib/Grid/index.js

@@ -6,15 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Grid", {
   enumerable: true,
   get: function () {
-    return _Grid.default;
+    return _Grid.Grid;
   }
 });
 Object.defineProperty(exports, "GridParallaxItem", {
   enumerable: true,
   get: function () {
-    return _Grid.GridParallaxItem;
+    return _GridParallaxItem.GridParallaxItem;
   }
 });
-var _Grid = _interopRequireWildcard(require("./Grid"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _Grid = require("./Grid");
+var _GridParallaxItem = require("./GridParallaxItem");

package/lib/KeyFigure/KeyFigure.js

@@ -4,48 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _core = require("@ndla/core");
+var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
+/**
  * 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 ContentWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e14we9tj3",
-  label: "ContentWrapper"
-})("display:flex;flex-direction:column;justify-content:center;align-items:center;padding:", _core.spacing.small, ";align-items:center;", _core.mq.range({
-  from: _core.breakpoints.tabletWide
-}), "{padding:", _core.spacing.xsmall, " ", _core.spacing.nsmall, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleUZpZ3VyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWWlDIiwiZmlsZSI6IktleUZpZ3VyZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBwYXJzZSBmcm9tIFwiaHRtbC1yZWFjdC1wYXJzZXJcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgZm9udHMsIG1xLCBzcGFjaW5nIH0gZnJvbSBcIkBuZGxhL2NvcmVcIjtcblxuY29uc3QgQ29udGVudFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICBwYWRkaW5nOiAke3NwYWNpbmcueHNtYWxsfSAke3NwYWNpbmcubnNtYWxsfTtcbiAgfVxuYDtcblxuY29uc3QgU3R5bGVkSW1hZ2UgPSBzdHlsZWQuaW1nYFxuICBoZWlnaHQ6IDE1MHB4O1xuICB3aWR0aDogMTUwcHg7XG5gO1xuXG5jb25zdCBUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG4gIGZvbnQtd2VpZ2h0OiAke2ZvbnRzLndlaWdodC5ib2xkfTtcbiAgb3ZlcmZsb3ctd3JhcDogYnJlYWstd29yZDtcbiAgJHtmb250cy5zaXplcyhcIjM4cHhcIiwgXCI0OHB4XCIpfTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgICR7Zm9udHMuc2l6ZXMoXCIzMHB4XCIsIFwiMzZweFwiKX07XG4gIH1cbmA7XG5cbmNvbnN0IFN1YlRpdGxlV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIG92ZXJmbG93LXdyYXA6IFwiYnJlYWstd29yZFwiO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICR7Zm9udHMuc2l6ZXMoXCIxOHB4XCIsIFwiMjlweFwiKX07XG4gIGNvbG9yOiAke2NvbG9ycy50ZXh0LnByaW1hcnl9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQubm9ybWFsfTtcbiAgZm9udC1mYW1pbHk6ICR7Zm9udHMuc2Fuc307XG5cbiAgJHttcS5yYW5nZSh7IHVudGlsOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgcGFkZGluZy10b3A6ICR7c3BhY2luZy54eHNtYWxsfTtcbiAgfVxuYDtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgaW1hZ2U/OiB7XG4gICAgc3JjPzogc3RyaW5nO1xuICAgIGFsdD86IHN0cmluZztcbiAgfTtcbiAgdGl0bGU6IHN0cmluZztcbiAgc3VidGl0bGU6IHN0cmluZztcbn1cblxuY29uc3QgS2V5RmlndXJlID0gKHsgaW1hZ2UsIHRpdGxlLCBzdWJ0aXRsZSB9OiBQcm9wcykgPT4ge1xuICByZXR1cm4gKFxuICAgIDxDb250ZW50V3JhcHBlcj5cbiAgICAgIDxTdHlsZWRJbWFnZSBzcmM9e2Ake2ltYWdlPy5zcmN9P3dpZHRoPTE1MGB9IHdpZHRoPXsxNTB9IGhlaWdodD17MTUwfSBhbHQ9e2ltYWdlPy5hbHR9IC8+XG4gICAgICA8VGl0bGVXcmFwcGVyPntwYXJzZSh0aXRsZSl9PC9UaXRsZVdyYXBwZXI+XG4gICAgICA8U3ViVGl0bGVXcmFwcGVyPntwYXJzZShzdWJ0aXRsZSl9PC9TdWJUaXRsZVdyYXBwZXI+XG4gICAgPC9Db250ZW50V3JhcHBlcj5cbiAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEtleUZpZ3VyZTtcbiJdfQ== */"));
-const StyledImage = /*#__PURE__*/(0, _base.default)("img", {
-  target: "e14we9tj2",
-  label: "StyledImage"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1oc9zrw",
-  styles: "height:150px;width:150px"
-} : {
-  name: "1oc9zrw",
-  styles: "height:150px;width:150px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleUZpZ3VyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0I4QiIsImZpbGUiOiJLZXlGaWd1cmUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgcGFyc2UgZnJvbSBcImh0bWwtcmVhY3QtcGFyc2VyXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH0gJHtzcGFjaW5nLm5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkLmltZ2BcbiAgaGVpZ2h0OiAxNTBweDtcbiAgd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoXCIzOHB4XCIsIFwiNDhweFwiKX07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcblxuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAke2ZvbnRzLnNpemVzKFwiMzBweFwiLCBcIjM2cHhcIil9O1xuICB9XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiBcImJyZWFrLXdvcmRcIjtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAke2ZvbnRzLnNpemVzKFwiMThweFwiLCBcIjI5cHhcIil9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlPzoge1xuICAgIHNyYz86IHN0cmluZztcbiAgICBhbHQ/OiBzdHJpbmc7XG4gIH07XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YnRpdGxlOiBzdHJpbmc7XG59XG5cbmNvbnN0IEtleUZpZ3VyZSA9ICh7IGltYWdlLCB0aXRsZSwgc3VidGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtgJHtpbWFnZT8uc3JjfT93aWR0aD0xNTBgfSB3aWR0aD17MTUwfSBoZWlnaHQ9ezE1MH0gYWx0PXtpbWFnZT8uYWx0fSAvPlxuICAgICAgPFRpdGxlV3JhcHBlcj57cGFyc2UodGl0bGUpfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57cGFyc2Uoc3VidGl0bGUpfTwvU3ViVGl0bGVXcmFwcGVyPlxuICAgIDwvQ29udGVudFdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBLZXlGaWd1cmU7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+
+const ContentWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+const StyledImage = (0, _jsx2.styled)("img", {
+  base: {
+    height: "surface.3xsmall",
+    width: "surface.3xsmall"
+  }
+});
+const TitleWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    textStyle: "heading.large",
+    textAlign: "center"
+  }
+});
+const SubTitleWrapper = (0, _jsx2.styled)("div", {
+  base: {
+    textStyle: "title.medium",
+    textAlign: "center"
+  }
 });
-const TitleWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e14we9tj1",
-  label: "TitleWrapper"
-})("color:", _core.colors.text.primary, ";font-family:", _core.fonts.sans, ";font-weight:", _core.fonts.weight.bold, ";overflow-wrap:break-word;", _core.fonts.sizes("38px", "48px"), ";text-align:center;", _core.mq.range({
-  until: _core.breakpoints.tabletWide
-}), "{", _core.fonts.sizes("30px", "36px"), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleUZpZ3VyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkIrQiIsImZpbGUiOiJLZXlGaWd1cmUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgcGFyc2UgZnJvbSBcImh0bWwtcmVhY3QtcGFyc2VyXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH0gJHtzcGFjaW5nLm5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkLmltZ2BcbiAgaGVpZ2h0OiAxNTBweDtcbiAgd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoXCIzOHB4XCIsIFwiNDhweFwiKX07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcblxuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAke2ZvbnRzLnNpemVzKFwiMzBweFwiLCBcIjM2cHhcIil9O1xuICB9XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiBcImJyZWFrLXdvcmRcIjtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAke2ZvbnRzLnNpemVzKFwiMThweFwiLCBcIjI5cHhcIil9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlPzoge1xuICAgIHNyYz86IHN0cmluZztcbiAgICBhbHQ/OiBzdHJpbmc7XG4gIH07XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YnRpdGxlOiBzdHJpbmc7XG59XG5cbmNvbnN0IEtleUZpZ3VyZSA9ICh7IGltYWdlLCB0aXRsZSwgc3VidGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtgJHtpbWFnZT8uc3JjfT93aWR0aD0xNTBgfSB3aWR0aD17MTUwfSBoZWlnaHQ9ezE1MH0gYWx0PXtpbWFnZT8uYWx0fSAvPlxuICAgICAgPFRpdGxlV3JhcHBlcj57cGFyc2UodGl0bGUpfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57cGFyc2Uoc3VidGl0bGUpfTwvU3ViVGl0bGVXcmFwcGVyPlxuICAgIDwvQ29udGVudFdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBLZXlGaWd1cmU7XG4iXX0= */"));
-const SubTitleWrapper = /*#__PURE__*/(0, _base.default)("div", {
-  target: "e14we9tj0",
-  label: "SubTitleWrapper"
-})("overflow-wrap:\"break-word\";text-align:center;", _core.fonts.sizes("18px", "29px"), ";color:", _core.colors.text.primary, ";font-weight:", _core.fonts.weight.normal, ";font-family:", _core.fonts.sans, ";", _core.mq.range({
-  until: _core.breakpoints.tabletWide
-}), "{padding-top:", _core.spacing.xxsmall, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIktleUZpZ3VyZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMENrQyIsImZpbGUiOiJLZXlGaWd1cmUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjMtcHJlc2VudCwgTkRMQS5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBHUEx2MyBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqL1xuXG5pbXBvcnQgcGFyc2UgZnJvbSBcImh0bWwtcmVhY3QtcGFyc2VyXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IGJyZWFrcG9pbnRzLCBjb2xvcnMsIGZvbnRzLCBtcSwgc3BhY2luZyB9IGZyb20gXCJAbmRsYS9jb3JlXCI7XG5cbmNvbnN0IENvbnRlbnRXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICR7bXEucmFuZ2UoeyBmcm9tOiBicmVha3BvaW50cy50YWJsZXRXaWRlIH0pfSB7XG4gICAgcGFkZGluZzogJHtzcGFjaW5nLnhzbWFsbH0gJHtzcGFjaW5nLm5zbWFsbH07XG4gIH1cbmA7XG5cbmNvbnN0IFN0eWxlZEltYWdlID0gc3R5bGVkLmltZ2BcbiAgaGVpZ2h0OiAxNTBweDtcbiAgd2lkdGg6IDE1MHB4O1xuYDtcblxuY29uc3QgVGl0bGVXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgY29sb3I6ICR7Y29sb3JzLnRleHQucHJpbWFyeX07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuICBmb250LXdlaWdodDogJHtmb250cy53ZWlnaHQuYm9sZH07XG4gIG92ZXJmbG93LXdyYXA6IGJyZWFrLXdvcmQ7XG4gICR7Zm9udHMuc2l6ZXMoXCIzOHB4XCIsIFwiNDhweFwiKX07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcblxuICAke21xLnJhbmdlKHsgdW50aWw6IGJyZWFrcG9pbnRzLnRhYmxldFdpZGUgfSl9IHtcbiAgICAke2ZvbnRzLnNpemVzKFwiMzBweFwiLCBcIjM2cHhcIil9O1xuICB9XG5gO1xuXG5jb25zdCBTdWJUaXRsZVdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuICBvdmVyZmxvdy13cmFwOiBcImJyZWFrLXdvcmRcIjtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAke2ZvbnRzLnNpemVzKFwiMThweFwiLCBcIjI5cHhcIil9O1xuICBjb2xvcjogJHtjb2xvcnMudGV4dC5wcmltYXJ5fTtcbiAgZm9udC13ZWlnaHQ6ICR7Zm9udHMud2VpZ2h0Lm5vcm1hbH07XG4gIGZvbnQtZmFtaWx5OiAke2ZvbnRzLnNhbnN9O1xuXG4gICR7bXEucmFuZ2UoeyB1bnRpbDogYnJlYWtwb2ludHMudGFibGV0V2lkZSB9KX0ge1xuICAgIHBhZGRpbmctdG9wOiAke3NwYWNpbmcueHhzbWFsbH07XG4gIH1cbmA7XG5cbmludGVyZmFjZSBQcm9wcyB7XG4gIGltYWdlPzoge1xuICAgIHNyYz86IHN0cmluZztcbiAgICBhbHQ/OiBzdHJpbmc7XG4gIH07XG4gIHRpdGxlOiBzdHJpbmc7XG4gIHN1YnRpdGxlOiBzdHJpbmc7XG59XG5cbmNvbnN0IEtleUZpZ3VyZSA9ICh7IGltYWdlLCB0aXRsZSwgc3VidGl0bGUgfTogUHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Q29udGVudFdyYXBwZXI+XG4gICAgICA8U3R5bGVkSW1hZ2Ugc3JjPXtgJHtpbWFnZT8uc3JjfT93aWR0aD0xNTBgfSB3aWR0aD17MTUwfSBoZWlnaHQ9ezE1MH0gYWx0PXtpbWFnZT8uYWx0fSAvPlxuICAgICAgPFRpdGxlV3JhcHBlcj57cGFyc2UodGl0bGUpfTwvVGl0bGVXcmFwcGVyPlxuICAgICAgPFN1YlRpdGxlV3JhcHBlcj57cGFyc2Uoc3VidGl0bGUpfTwvU3ViVGl0bGVXcmFwcGVyPlxuICAgIDwvQ29udGVudFdyYXBwZXI+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBLZXlGaWd1cmU7XG4iXX0= */"));
 const KeyFigure = _ref => {
   let {
     image,
@@ -53,7 +49,8 @@ const KeyFigure = _ref => {
     subtitle
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
+    "data-embed-type": "key-figure",
+    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
       src: `${image?.src}?width=150`,
       width: 150,
       height: 150,

package/lib/LinkBlock/LinkBlockSection.js

@@ -30,6 +30,7 @@ const LinkBlockSection = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
     ...rest,
+    "data-embed-type": "link-block-list",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       children: _react.Children.map(children, child => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         children: child

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -86,7 +86,7 @@ const StyledSection = (0, _jsx2.styled)("section", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "xsmall"
+    gap: "medium"
   }
 });
 const StyledButton = (0, _jsx2.styled)(_primitives.Button, {

package/lib/index.d.ts

@@ -12,13 +12,10 @@ export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
-export { default as FileList, File, PdfFile, Format } from "./FileList";
+export { FileListEmbed, File, PdfFile, FileListItem, FileListElement } from "./FileList";
 export { default as FactBox } from "./FactBox";
 export type { ContentTypeHeroProps } from "./ContentTypeHero";
 export { ContentTypeHero } from "./ContentTypeHero";
-export { FooterBlock } from "./Footer";
-export { default as resourceTypeColor } from "./utils/resourceTypeColor";
-export { MessageBox } from "./Messages";
 export { ResourceBox } from "./ResourceBox";
 export { default as AudioPlayer } from "./AudioPlayer";
 export { default as constants } from "./model";