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

package/lib/Article/Article.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticleWrapper = exports.ArticleHeader = exports.ArticleFooter = exports.ArticleContent = exports.Article = void 0;
+exports.ArticleWrapper = exports.ArticleHeader = exports.ArticleFooter = exports.Article = void 0;
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _ArticleByline = _interopRequireDefault(require("./ArticleByline"));
+var _ArticleContent = require("./ArticleContent");
 var _ = require("..");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -18,11 +19,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const ArticleContent = exports.ArticleContent = (0, _jsx2.styled)("section", {
-  base: {
-    width: "100%"
-  }
-});
 const ArticleWrapper = exports.ArticleWrapper = (0, _jsx2.styled)("article", {
   base: {
     display: "flex",
@@ -138,7 +134,7 @@ const Article = _ref => {
           children: introduction
         })
       }), competenceGoals]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleContent.ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleByline.default, {

package/lib/Article/ArticleContent.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;

package/lib/Article/ArticleContent.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ArticleContent = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+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 StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {}, {
+  baseComponent: true
+});
+const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledArticleContent, {
+    className: (0, _css.cx)("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});

package/lib/Article/index.d.ts

@@ -7,6 +7,7 @@
  */
 import ArticleByline from "./ArticleByline";
 import ArticleFootNotes from "./ArticleFootNotes";
-export { Article, ArticleContent, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
+export { Article, ArticleWrapper, ArticleHeader, ArticleFooter } from "./Article";
+export { ArticleContent } from "./ArticleContent";
 export { ArticleByline, ArticleFootNotes };
 export { ArticleParagraph } from "./ArticleParagraph";

package/lib/Article/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "ArticleByline", {
 Object.defineProperty(exports, "ArticleContent", {
   enumerable: true,
   get: function () {
-    return _Article.ArticleContent;
+    return _ArticleContent.ArticleContent;
   }
 });
 Object.defineProperty(exports, "ArticleFootNotes", {
@@ -54,5 +54,6 @@ Object.defineProperty(exports, "ArticleWrapper", {
 var _ArticleByline = _interopRequireDefault(require("./ArticleByline"));
 var _ArticleFootNotes = _interopRequireDefault(require("./ArticleFootNotes"));
 var _Article = require("./Article");
+var _ArticleContent = require("./ArticleContent");
 var _ArticleParagraph = require("./ArticleParagraph");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/Embed/ImageEmbed.js

@@ -35,10 +35,11 @@ const errorSvgSrc = exports.errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Cs
 const getFigureProps = (size, float) => {
   const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
   const replacedSize = size?.replace("-hide-byline", "") ?? "full";
+  const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
   return {
     float: actualFloat,
     // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.
-    size: replacedSize === "full" && float ? "medium" : replacedSize
+    size: actualSize === "full" && float ? "medium" : actualSize
   };
 };
 const getSizes = (size, align) => {

package/lib/ErrorMessage/ErrorMessage.js

@@ -30,6 +30,8 @@ const StyledErrorMessage = (0, _jsx2.styled)("article", {
 });
 const IllustrationWrapper = (0, _jsx2.styled)("div", {
   base: {
+    display: "flex",
+    justifyContent: "center",
     marginBottom: "medium",
     tablet: {
       marginTop: "xxlarge"

package/lib/FileList/File.d.ts

@@ -5,11 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-interface Props {
+import { ComponentPropsWithRef } from "react";
+export interface FileProps extends ComponentPropsWithRef<"div"> {
     title: string;
     url: string;
     fileExists: boolean;
     fileType: string;
+    fileSize?: string;
 }
 export interface FileType {
     title: string;
@@ -21,5 +23,5 @@ export interface FileFormat {
     fileType: string;
     tooltip: string;
 }
-declare const File: ({ title, url, fileExists, fileType }: Props) => import("react/jsx-runtime").JSX.Element;
-export default File;
+export declare const File: import("react").ForwardRefExoticComponent<Omit<FileProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const FileListElement: ({ title, url, fileExists, fileType, fileSize }: FileProps) => import("react/jsx-runtime").JSX.Element;

package/lib/FileList/File.js

@@ -3,13 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
+exports.FileListElement = exports.File = void 0;
+var _react = require("react");
 var _reactI18next = require("react-i18next");
-var _core = require("@ndla/core");
-var _Format = _interopRequireDefault(require("./Format"));
+var _common = require("@ndla/icons/common");
+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");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -18,34 +21,86 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const StyledFileItem = /*#__PURE__*/(0, _base.default)("li", {
-  target: "ei1p2nz0",
-  label: "StyledFileItem"
-})("background:", _core.colors.brand.greyLighter, ";display:flex;align-items:center;flex-wrap:wrap;margin-bottom:", _core.spacing.xsmall, ";padding:", _core.spacing.small, ";", _core.mq.range({
-  from: _core.breakpoints.tablet
-}), "{padding:", _core.spacing.small, " ", _core.spacing.normal, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZpbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQStCZ0MiLCJmaWxlIjoiRmlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAyMy1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSBcInJlYWN0LWkxOG5leHRcIjtcbmltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgYnJlYWtwb2ludHMsIGNvbG9ycywgbXEsIHNwYWNpbmcgfSBmcm9tIFwiQG5kbGEvY29yZVwiO1xuaW1wb3J0IEZvcm1hdCBmcm9tIFwiLi9Gb3JtYXRcIjtcblxuaW50ZXJmYWNlIFByb3BzIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgdXJsOiBzdHJpbmc7XG4gIGZpbGVFeGlzdHM6IGJvb2xlYW47XG4gIGZpbGVUeXBlOiBzdHJpbmc7XG59XG5leHBvcnQgaW50ZXJmYWNlIEZpbGVUeXBlIHtcbiAgdGl0bGU6IHN0cmluZztcbiAgZm9ybWF0czogRmlsZUZvcm1hdFtdO1xuICBmaWxlRXhpc3RzPzogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBGaWxlRm9ybWF0IHtcbiAgdXJsOiBzdHJpbmc7XG4gIGZpbGVUeXBlOiBzdHJpbmc7XG4gIHRvb2x0aXA6IHN0cmluZztcbn1cblxuY29uc3QgU3R5bGVkRmlsZUl0ZW0gPSBzdHlsZWQubGlgXG4gIGJhY2tncm91bmQ6ICR7Y29sb3JzLmJyYW5kLmdyZXlMaWdodGVyfTtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC13cmFwOiB3cmFwO1xuICBtYXJnaW4tYm90dG9tOiAke3NwYWNpbmcueHNtYWxsfTtcbiAgcGFkZGluZzogJHtzcGFjaW5nLnNtYWxsfTtcbiAgJHttcS5yYW5nZSh7IGZyb206IGJyZWFrcG9pbnRzLnRhYmxldCB9KX0ge1xuICAgIHBhZGRpbmc6ICR7c3BhY2luZy5zbWFsbH0gJHtzcGFjaW5nLm5vcm1hbH07XG4gIH1cbmA7XG5cbmNvbnN0IEZpbGUgPSAoeyB0aXRsZSwgdXJsLCBmaWxlRXhpc3RzLCBmaWxlVHlwZSB9OiBQcm9wcykgPT4ge1xuICBjb25zdCB7IHQgfSA9IHVzZVRyYW5zbGF0aW9uKCk7XG4gIGNvbnN0IHRvb2x0aXAgPSBgJHt0KFwiZG93bmxvYWRcIil9ICR7dXJsLnNwbGl0KFwiL1wiKS5wb3AoKX1gO1xuXG4gIHJldHVybiAoXG4gICAgPFN0eWxlZEZpbGVJdGVtPlxuICAgICAgPEZvcm1hdCBmb3JtYXQ9e3sgdXJsLCBmaWxlVHlwZSwgdG9vbHRpcCB9fSBpc1ByaW1hcnkgdGl0bGU9e3RpdGxlfSBpc0RlYWRMaW5rPXshZmlsZUV4aXN0c30gLz5cbiAgICA8L1N0eWxlZEZpbGVJdGVtPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRmlsZTtcbiJdfQ== */"));
-const File = _ref => {
+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
+    fileType,
+    fileSize,
+    ...rest
   } = _ref;
   const {
     t
   } = (0, _reactI18next.useTranslation)();
   const tooltip = `${t("download")} ${url.split("/").pop()}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFileItem, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Format.default, {
-      format: {
-        url,
-        fileType,
-        tooltip
-      },
-      isPrimary: true,
+  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)(_common.DownloadLine, {}), fileExists ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+        unstyled: true,
+        css: _patterns.linkOverlay.raw(),
+        to: url,
+        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,
-      isDeadLink: !fileExists
+      url: url,
+      fileExists: fileExists,
+      fileType: fileType,
+      fileSize: fileSize
     })
   });
 };
-var _default = exports.default = File;
+exports.FileListElement = FileListElement;

package/lib/FileList/FileList.d.ts

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentProps, ReactNode } from "react";
-interface Props extends ComponentProps<"section"> {
-    children: ReactNode;
-    headingButtons?: ReactNode;
+import { ComponentPropsWithoutRef } from "react";
+interface Props extends ComponentPropsWithoutRef<"div"> {
 }
-declare const FileList: ({ children, headingButtons, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
-export default FileList;
+export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
+export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<"li", {}>;
+export declare const FileListEmbed: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

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;