@ndla/ui 56.0.116-alpha.0 → 56.0.118-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.53.3",
+  "schemaVersion": "0.53.6",
   "styles": {
     "atomic": [
       "background]___[value:background.default",

package/es/Embed/CodeEmbed.js

@@ -23,6 +23,7 @@ const StyledFigCaption = styled("figcaption", {
 });
 const StyledFigure = styled(Figure, {
   base: {
+    clear: "both",
     // We apply margin here to allow for the float and size props on figure to work as intended.
     "& > *:not(:where(:first-child))": {
       marginBlockStart: "xsmall"

package/es/FactBox/FactBox.js

@@ -36,8 +36,16 @@ const StyledAside = styled("aside", {
       }
     },
     "& > div": {
-      minHeight: "surface.3xsmall",
-      overflow: "hidden"
+      minHeight: "surface.3xsmall"
+    }
+  },
+  variants: {
+    overflowHidden: {
+      true: {
+        "& > div": {
+          overflow: "hidden"
+        }
+      }
     }
   }
 });
@@ -45,7 +53,6 @@ const StyledContent = styled("div", {
   base: {
     position: "relative",
     width: "100%",
-    overflow: "hidden",
     // Reset the top margin of the very first child.
     "& :first-child": {
       marginBlockStart: "0"
@@ -114,6 +121,7 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     t
   } = useTranslation();
   const [state, setState] = useState(defaultOpen ? "open" : "closed");
+  const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);
   const contentId = useId();
   // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
   // When running in React 18, we need to use an empty string instead of true.
@@ -138,6 +146,17 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     "data-embed-type": "factbox",
     ...rest,
     ref: ref,
+    overflowHidden: overflowHidden,
+    onTransitionStart: e => {
+      if (e.target === e.currentTarget && state === "closed") {
+        setOverflowHidden(true);
+      }
+    },
+    onTransitionEnd: e => {
+      if (e.target === e.currentTarget && state === "open") {
+        setOverflowHidden(false);
+      }
+    },
     children: [/*#__PURE__*/_jsx(StyledIconButton, {
       "data-state": state,
       onClick: onClick,

package/es/FileList/FileList.js

@@ -9,12 +9,15 @@
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const FileListWrapper = styled("ul", {
+export const FileListWrapper = styled(ark.ul, {
   base: {
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall"
+    gap: "xsmall",
+    clear: "both"
   }
+}, {
+  baseComponent: true
 });
 export const FileListItem = styled(ark.li, {
   base: {

package/lib/ContentTypeBadge/ContentTypeBadge.js

@@ -9,8 +9,7 @@ var _reactI18next = require("react-i18next");
 var _primitives = require("@ndla/primitives");
 var contentTypes = _interopRequireWildcard(require("../model/ContentType"));
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
+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) 2024-present, NDLA.
  *

package/lib/ContentTypeHero/ContentTypeHero.js

@@ -8,8 +8,7 @@ var _react = require("react");
 var _primitives = require("@ndla/primitives");
 var contentTypes = _interopRequireWildcard(require("../model/ContentType"));
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
+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) 2024-present, NDLA.
  *

package/lib/Embed/CodeEmbed.js

@@ -30,6 +30,7 @@ const StyledFigCaption = (0, _jsx2.styled)("figcaption", {
 });
 const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
   base: {
+    clear: "both",
     // We apply margin here to allow for the float and size props on figure to work as intended.
     "& > *:not(:where(:first-child))": {
       marginBlockStart: "xsmall"

package/lib/Embed/index.js

@@ -147,5 +147,4 @@ var _CodeEmbed = _interopRequireDefault(require("./CodeEmbed"));
 var _EmbedWrapper = require("./EmbedWrapper");
 var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
+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); }

package/lib/FactBox/FactBox.js

@@ -10,8 +10,7 @@ var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
+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.
  *
@@ -44,8 +43,16 @@ const StyledAside = (0, _jsx2.styled)("aside", {
       }
     },
     "& > div": {
-      minHeight: "surface.3xsmall",
-      overflow: "hidden"
+      minHeight: "surface.3xsmall"
+    }
+  },
+  variants: {
+    overflowHidden: {
+      true: {
+        "& > div": {
+          overflow: "hidden"
+        }
+      }
     }
   }
 });
@@ -53,7 +60,6 @@ const StyledContent = (0, _jsx2.styled)("div", {
   base: {
     position: "relative",
     width: "100%",
-    overflow: "hidden",
     // Reset the top margin of the very first child.
     "& :first-child": {
       marginBlockStart: "0"
@@ -122,6 +128,7 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     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.
@@ -146,6 +153,17 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     "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,

package/lib/FileList/FileList.d.ts

@@ -8,7 +8,7 @@
 import { type ComponentPropsWithoutRef } from "react";
 interface Props extends ComponentPropsWithoutRef<"ul"> {
 }
-export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<"ul", {}>;
+export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const FileListEmbed: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/FileList/FileList.js

@@ -15,12 +15,15 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)("ul", {
+const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)(_react.ark.ul, {
   base: {
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall"
+    gap: "xsmall",
+    clear: "both"
   }
+}, {
+  baseComponent: true
 });
 const FileListItem = exports.FileListItem = (0, _jsx2.styled)(_react.ark.li, {
   base: {

package/lib/index.js

@@ -597,5 +597,4 @@ var _TargetBlankIcon = require("./TargetBlankIcon");
 var _ZendeskButton = require("./ZendeskButton/ZendeskButton");
 var _licenseAttributes = require("./utils/licenseAttributes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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; }
+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); }

package/lib/model/index.js

@@ -8,8 +8,7 @@ var _ContentType = require("./ContentType");
 var subjectCategories = _interopRequireWildcard(require("./SubjectCategories"));
 var subjectTypes = _interopRequireWildcard(require("./SubjectTypes"));
 var wordClass = _interopRequireWildcard(require("./WordClass"));
-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; }
+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) 2017-present, NDLA.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.116-alpha.0",
+  "version": "56.0.118-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,12 +32,12 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/core": "^5.0.3",
-    "@ndla/icons": "^8.0.55-alpha.0",
+    "@ndla/core": "^6.0.0-alpha.0",
+    "@ndla/icons": "^8.0.56-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.85-alpha.0",
-    "@ndla/safelink": "^7.0.86-alpha.0",
-    "@ndla/styled-system": "^0.0.33",
+    "@ndla/primitives": "^1.0.86-alpha.0",
+    "@ndla/safelink": "^7.0.87-alpha.0",
+    "@ndla/styled-system": "^0.0.34",
     "@ndla/util": "^5.0.7-alpha.0",
     "html-react-parser": "^5.1.19"
   },
@@ -49,13 +49,13 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.52",
-    "@ndla/types-backend": "^1.0.39",
-    "@ndla/types-embed": "^5.0.13-alpha.0",
-    "@pandacss/dev": "^0.53.3"
+    "@ndla/preset-panda": "^0.0.53",
+    "@ndla/types-backend": "^1.0.40",
+    "@ndla/types-embed": "^5.0.14-alpha.0",
+    "@pandacss/dev": "^0.53.6"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ac2a16e51c97c27274fd0fa2af0503a98e0d6038"
+  "gitHead": "c22b13dd82bf7fa206f87a6f48922b41d8eaec6a"
 }

package/src/Embed/CodeEmbed.tsx

@@ -30,6 +30,7 @@ const StyledFigCaption = styled("figcaption", {
 
 const StyledFigure = styled(Figure, {
   base: {
+    clear: "both",
     // We apply margin here to allow for the float and size props on figure to work as intended.
     "& > *:not(:where(:first-child))": {
       marginBlockStart: "xsmall",

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -108,6 +108,7 @@ const filmResourceMeta: RelatedContentMetaData = {
       baseName: "Dokumentaren «Influenser»",
       name: "Dokumentaren «Influenser»",
       language: "nb",
+      contextids: [],
       contentUri: "urn:article:27911",
       path: "/subject:187c1484-84a5-474d-bf63-0c7915809a7d/topic:d792acc0-d332-48cf-9116-0db520e34f19/topic:3510fff0-fe20-4742-8e25-09262df2ac45/resource:e21cb6a7-0072-4066-894b-d5f6bb4f7ead",
       paths: [
@@ -273,6 +274,7 @@ const learningResourceMeta: RelatedContentMetaData = {
     },
     resource: {
       id: "urn:resource:5d81f622-1fc5-49c8-943d-690e23450e09",
+      contextids: [],
       baseName: "Teknikker for idéutvikling",
       language: "nb",
       name: "Teknikker for idéutvikling",

package/src/FactBox/FactBox.tsx

@@ -53,7 +53,15 @@ const StyledAside = styled("aside", {
     },
     "& > div": {
       minHeight: "surface.3xsmall",
-      overflow: "hidden",
+    },
+  },
+  variants: {
+    overflowHidden: {
+      true: {
+        "& > div": {
+          overflow: "hidden",
+        },
+      },
     },
   },
 });
@@ -62,7 +70,6 @@ const StyledContent = styled("div", {
   base: {
     position: "relative",
     width: "100%",
-    overflow: "hidden",
     // Reset the top margin of the very first child.
     "& :first-child": {
       marginBlockStart: "0",
@@ -124,6 +131,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
   ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {
     const { t } = useTranslation();
     const [state, setState] = useState<"open" | "closed">(defaultOpen ? "open" : "closed");
+    const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);
     const contentId = useId();
     // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
     // When running in React 18, we need to use an empty string instead of true.
@@ -145,7 +153,23 @@ const FactBox = forwardRef<HTMLElement, Props>(
     }, [state, onOpenChange]);
 
     return (
-      <StyledAside data-state={state} data-embed-type="factbox" {...rest} ref={ref}>
+      <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);
+          }
+        }}
+      >
         <StyledIconButton
           data-state={state}
           onClick={onClick}

package/src/FileList/FileList.tsx

@@ -12,13 +12,18 @@ import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends ComponentPropsWithoutRef<"ul"> {}
 
-export const FileListWrapper = styled("ul", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
+export const FileListWrapper = styled(
+  ark.ul,
+  {
+    base: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      clear: "both",
+    },
   },
-});
+  { baseComponent: true },
+);
 
 export const FileListItem = styled(
   ark.li,

package/src/all.scss

@@ -1,2 +0,0 @@
-@import "~@ndla/core/scss/core";
-@import "~@ndla/core/scss/utilities";