@ndla/ui 56.0.6-alpha.0 → 56.0.8-alpha.0

package/dist/panda.buildinfo.json

@@ -2,19 +2,21 @@
   "schemaVersion": "0.44.0",
   "styles": {
     "atomic": [
+      "paddingInline]___[value:8%",
+      "paddingBlockStart]___[value:xsmall",
+      "paddingBlockStart]___[value:medium]___[cond:tablet",
+      "paddingBlockStart]___[value:xxlarge]___[cond:desktop",
+      "paddingBlockEnd]___[value:xsmall",
+      "paddingBlockEnd]___[value:medium]___[cond:tablet",
+      "paddingBlockEnd]___[value:xxlarge]___[cond:desktop",
+      "background]___[value:surface.default",
       "display]___[value:flex",
       "flexDirection]___[value:column",
       "color]___[value:text.default",
-      "gap]___[value:xxlarge",
-      "background]___[value:surface.default",
-      "paddingBlock]___[value:xsmall",
-      "paddingInline]___[value:8%",
       "alignItems]___[value:center",
       "width]___[value:100%",
       "overflowWrap]___[value:break-word",
       "position]___[value:relative",
-      "paddingBlock]___[value:medium]___[cond:tablet",
-      "paddingBlock]___[value:xxlarge]___[cond:desktop",
       "transform]___[value:scaleY(100) translateY(0.075em)]___[cond:& mjx-stretchy-v > mjx-ext > mjx-c",
       "content]___[value:]___[cond:_after",
       "display]___[value:table]___[cond:_after",
@@ -28,13 +30,14 @@
       "top]___[value:medium]___[cond:tablet",
       "top]___[value:xxlarge]___[cond:desktop",
       "gap]___[value:medium",
+      "gap]___[value:xxlarge",
       "marginBlockStart]___[value:medium",
-      "paddingBlockStart]___[value:xsmall",
       "borderTop]___[value:1px solid",
       "borderColor]___[value:stroke.subtle",
       "flexDirection]___[value:column-reverse",
       "gap]___[value:3xsmall",
       "justifyContent]___[value:space-between",
+      "paddingBlock]___[value:xsmall",
       "textStyle]___[value:body.medium",
       "flexDirection]___[value:row]___[cond:tabletWide",
       "paddingBlockStart]___[value:xxlarge",
@@ -168,7 +171,6 @@
       "opacity]___[value:0.7]___[cond:& .token.namespace",
       "display]___[value:inline",
       "display]___[value:inline]___[cond:& p",
-      "maxWidth]___[value:744px",
       "minWidth]___[value:surface.xxsmall",
       "padding]___[value:medium",
       "alignItems]___[value:unset]___[cond:tablet",

package/dist/styles.css

@@ -85,28 +85,28 @@
 }
 }
 
-  .d_flex {
-    display: flex;
+  .px_8\% {
+    padding-inline: 8%;
 }
 
-  .c_text\.default {
-    color: var(--colors-text-default);
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
+  .pbe_xsmall {
+    padding-block-end: var(--spacing-xsmall);
 }
 
   .bg_surface\.default {
     background: var(--colors-surface-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
+  .d_flex {
+    display: flex;
 }
 
-  .px_8\% {
-    padding-inline: 8%;
+  .c_text\.default {
+    color: var(--colors-text-default);
 }
 
   .w_100\% {
@@ -133,12 +133,12 @@
     gap: var(--spacing-medium);
 }
 
-  .mbs_medium {
-    margin-block-start: var(--spacing-medium);
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
 }
 
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
+  .mbs_medium {
+    margin-block-start: var(--spacing-medium);
 }
 
   .bd-t_1px_solid {
@@ -149,6 +149,10 @@
     gap: var(--spacing-3xsmall);
 }
 
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
   .pbs_xxlarge {
     padding-block-start: var(--spacing-xxlarge);
 }
@@ -362,10 +366,6 @@
     display: inline;
 }
 
-  .max-w_744px {
-    max-width: 744px;
-}
-
   .min-w_surface\.xxsmall {
     min-width: var(--sizes-surface-xxsmall);
 }
@@ -1424,8 +1424,11 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:py_medium {
-      padding-block: var(--spacing-medium);
+    .tablet\:pbs_medium {
+      padding-block-start: var(--spacing-medium);
+}
+    .tablet\:pbe_medium {
+      padding-block-end: var(--spacing-medium);
 }
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
@@ -1520,8 +1523,11 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
-    .desktop\:py_xxlarge {
-      padding-block: var(--spacing-xxlarge);
+    .desktop\:pbs_xxlarge {
+      padding-block-start: var(--spacing-xxlarge);
+}
+    .desktop\:pbe_xxlarge {
+      padding-block-end: var(--spacing-xxlarge);
 }
     .desktop\:w_260px {
       width: 260px;

package/es/Article/Article.js

@@ -11,10 +11,57 @@ import { ark } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import ArticleByline from "./ArticleByline";
+import { ArticleByline } from "./ArticleByline";
 import { ContentTypeBadgeNew } from "..";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledArticleContent = styled(ark.section, {}, {
+const articlePadding = {
+  paddingInline: "8%"
+};
+const paddingBlockEnd = {
+  paddingBlockEnd: "xsmall",
+  tablet: {
+    paddingBlockEnd: "medium"
+  },
+  desktop: {
+    paddingBlockEnd: "xxlarge"
+  }
+};
+const paddingBlockStart = {
+  paddingBlockStart: "xsmall",
+  tablet: {
+    paddingBlockStart: "medium"
+  },
+  desktop: {
+    paddingBlockStart: "xxlarge"
+  }
+};
+export const ArticlePadding = styled(ark.div, {
+  base: articlePadding,
+  variants: {
+    padStart: {
+      true: paddingBlockStart
+    },
+    padEnd: {
+      true: paddingBlockEnd
+    }
+  }
+}, {
+  baseComponent: true
+});
+const StyledArticleContent = styled(ark.section, {
+  base: {
+    background: "surface.default"
+  },
+  variants: {
+    padded: {
+      true: {
+        ...articlePadding,
+        ...paddingBlockStart,
+        ...paddingBlockEnd
+      }
+    }
+  }
+}, {
   baseComponent: true
 });
 export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -28,25 +75,15 @@ export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref
   });
 });
-const StyledArticleWrapper = styled("article", {
+const StyledArticleWrapper = styled(ark.article, {
   base: {
     display: "flex",
     flexDirection: "column",
     color: "text.default",
-    gap: "xxlarge",
-    background: "surface.default",
-    paddingBlock: "xsmall",
-    paddingInline: "8%",
     alignItems: "center",
     width: "100%",
     overflowWrap: "break-word",
     position: "relative",
-    tablet: {
-      paddingBlock: "medium"
-    },
-    desktop: {
-      paddingBlock: "xxlarge"
-    },
     "& mjx-stretchy-v > mjx-ext > mjx-c": {
       transform: "scaleY(100) translateY(0.075em)"
     },
@@ -56,13 +93,15 @@ const StyledArticleWrapper = styled("article", {
       clear: "both"
     }
   }
+}, {
+  baseComponent: true
 });
 export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
   "data-ndla-article": "",
   ref: ref,
   ...props
 }));
-export const ArticleHGroup = styled("hgroup", {
+export const ArticleHGroup = styled(ark.hgroup, {
   base: {
     display: "flex",
     width: "100%",
@@ -73,8 +112,10 @@ export const ArticleHGroup = styled("hgroup", {
       overflowWrap: "anywhere"
     }
   }
+}, {
+  baseComponent: true
 });
-export const ArticleActionWrapper = styled("div", {
+export const ArticleActionWrapper = styled(ark.div, {
   base: {
     position: "absolute",
     right: "8%",
@@ -86,23 +127,47 @@ export const ArticleActionWrapper = styled("div", {
       top: "xxlarge"
     }
   }
+}, {
+  baseComponent: true
 });
-export const ArticleHeader = styled("header", {
+export const ArticleHeader = styled(ark.header, {
   base: {
     display: "flex",
     flexDirection: "column",
+    background: "surface.default",
     gap: "medium",
     alignItems: "flex-start",
     width: "100%"
+  },
+  variants: {
+    padded: {
+      true: {
+        ...articlePadding,
+        ...paddingBlockStart
+      }
+    }
   }
+}, {
+  baseComponent: true
 });
-export const ArticleFooter = styled("footer", {
+export const ArticleFooter = styled(ark.footer, {
   base: {
     display: "flex",
     flexDirection: "column",
+    background: "surface.default",
     gap: "xxlarge",
     width: "100%"
+  },
+  variants: {
+    padded: {
+      true: {
+        ...articlePadding,
+        ...paddingBlockEnd
+      }
+    }
   }
+}, {
+  baseComponent: true
 });
 export const ArticleTitle = _ref2 => {
   let {
@@ -115,6 +180,7 @@ export const ArticleTitle = _ref2 => {
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
+    padded: true,
     children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
       children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
         contentType: contentType
@@ -167,8 +233,10 @@ export const Article = _ref3 => {
       competenceGoals: competenceGoals,
       lang: lang
     }), /*#__PURE__*/_jsx(ArticleContent, {
+      padded: true,
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {
+      padded: true,
       children: [/*#__PURE__*/_jsx(ArticleByline, {
         footnotes: footNotes,
         authors: authors,

package/es/Article/ArticleByline.js

@@ -6,14 +6,14 @@
  *
  */
 
-import { useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { ArrowDownShortLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import ArticleFootNotes from "./ArticleFootNotes";
+import { ArticleFootNotes } from "./ArticleFootNotes";
 import { LicenseLink } from "../LicenseByline/LicenseLink";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div", {
@@ -86,7 +86,7 @@ const StyledAccordionRoot = styled(AccordionRoot, {
 });
 const refRegexp = /note\d/;
 const footnotesAccordionId = "footnotes";
-const ArticleByline = _ref => {
+export const ArticleByline = _ref => {
   let {
     authors = [],
     suppliers = [],
@@ -145,46 +145,46 @@ const ArticleByline = _ref => {
       multiple: true,
       value: openAccordions,
       onValueChange: details => setOpenAccordions(details.value),
-      children: [licenseBox && /*#__PURE__*/_jsxs(AccordionItem, {
+      children: [!!licenseBox && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
         value: accordionItemValue,
-        children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
-          children: [/*#__PURE__*/_jsx(Heading, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            children: /*#__PURE__*/_jsx("h2", {
-              children: t("article.useContent")
-            })
-          }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
-            asChild: true,
-            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-          })]
-        }), /*#__PURE__*/_jsx(AccordionItemContent, {
-          children: licenseBox
-        })]
-      }), !!footnotes?.length && /*#__PURE__*/_jsxs(AccordionItem, {
+        accordionTitle: t("article.useContent"),
+        children: licenseBox
+      }), !!footnotes?.length && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
         value: footnotesAccordionId,
-        children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
-          children: [/*#__PURE__*/_jsx(Heading, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            children: /*#__PURE__*/_jsx("h2", {
-              children: t("article.footnotes")
-            })
-          }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
-            asChild: true,
-            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-          })]
-        }), /*#__PURE__*/_jsx(AccordionItemContent, {
-          children: /*#__PURE__*/_jsx(ArticleFootNotes, {
-            footNotes: footnotes
-          })
-        })]
+        accordionTitle: t("article.footnotes"),
+        children: /*#__PURE__*/_jsx(ArticleFootNotes, {
+          footNotes: footnotes
+        })
       })]
     })]
   });
 };
-export default ArticleByline;
+export const ArticleBylineAccordionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    value,
+    accordionTitle,
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(AccordionItem, {
+    value: value,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
+      children: [/*#__PURE__*/_jsx(Heading, {
+        asChild: true,
+        consumeCss: true,
+        textStyle: "label.medium",
+        fontWeight: "bold",
+        children: /*#__PURE__*/_jsx("h2", {
+          children: accordionTitle
+        })
+      }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
+        asChild: true,
+        children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
+      })]
+    }), /*#__PURE__*/_jsx(AccordionItemContent, {
+      children: children
+    })]
+  });
+});

package/es/Article/ArticleFootNotes.js

@@ -48,7 +48,7 @@ const FootnoteList = styled("ol", {
     listStyle: "none"
   }
 });
-const ArticleFootNotes = _ref2 => {
+export const ArticleFootNotes = _ref2 => {
   let {
     footNotes
   } = _ref2;
@@ -57,5 +57,4 @@ const ArticleFootNotes = _ref2 => {
       footNote: footNote
     }, footNote.ref))
   });
-};
-export default ArticleFootNotes;
+};

package/es/Article/index.js

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

package/es/ContactBlock/ContactBlock.js

@@ -32,7 +32,6 @@ export const contactBlockBackgrounds = Object.keys(BackgroundVariant);
 const StyledWrapper = styled("div", {
   base: {
     display: "flex",
-    maxWidth: "744px",
     minWidth: "surface.xxsmall",
     padding: "medium",
     alignItems: "center",

package/es/Grid/Grid.js

@@ -13,7 +13,6 @@ const GridContainer = styled("div", {
     display: "grid",
     justifyContent: "center",
     borderRadius: "xsmall",
-    padding: "xsmall",
     gridRowGap: "large",
     gridColumnGap: "medium",
     width: "100%",
@@ -63,6 +62,7 @@ const GridContainer = styled("div", {
     },
     border: {
       lightBlue: {
+        padding: "xsmall",
         border: "1px solid",
         borderColor: "surface.brand.2"
       }

package/es/index.js

@@ -11,7 +11,7 @@
 
 export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
-export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle } from "./Article";
+export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle, ArticlePadding } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";

package/es/styles.css

@@ -85,28 +85,28 @@
 }
 }
 
-  .d_flex {
-    display: flex;
+  .px_8\% {
+    padding-inline: 8%;
 }
 
-  .c_text\.default {
-    color: var(--colors-text-default);
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
+  .pbe_xsmall {
+    padding-block-end: var(--spacing-xsmall);
 }
 
   .bg_surface\.default {
     background: var(--colors-surface-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
+  .d_flex {
+    display: flex;
 }
 
-  .px_8\% {
-    padding-inline: 8%;
+  .c_text\.default {
+    color: var(--colors-text-default);
 }
 
   .w_100\% {
@@ -133,12 +133,12 @@
     gap: var(--spacing-medium);
 }
 
-  .mbs_medium {
-    margin-block-start: var(--spacing-medium);
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
 }
 
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
+  .mbs_medium {
+    margin-block-start: var(--spacing-medium);
 }
 
   .bd-t_1px_solid {
@@ -149,6 +149,10 @@
     gap: var(--spacing-3xsmall);
 }
 
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
   .pbs_xxlarge {
     padding-block-start: var(--spacing-xxlarge);
 }
@@ -362,10 +366,6 @@
     display: inline;
 }
 
-  .max-w_744px {
-    max-width: 744px;
-}
-
   .min-w_surface\.xxsmall {
     min-width: var(--sizes-surface-xxsmall);
 }
@@ -1424,8 +1424,11 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:py_medium {
-      padding-block: var(--spacing-medium);
+    .tablet\:pbs_medium {
+      padding-block-start: var(--spacing-medium);
+}
+    .tablet\:pbe_medium {
+      padding-block-end: var(--spacing-medium);
 }
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
@@ -1520,8 +1523,11 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
-    .desktop\:py_xxlarge {
-      padding-block: var(--spacing-xxlarge);
+    .desktop\:pbs_xxlarge {
+      padding-block-start: var(--spacing-xxlarge);
+}
+    .desktop\:pbe_xxlarge {
+      padding-block-end: var(--spacing-xxlarge);
 }
     .desktop\:w_260px {
       width: 260px;

package/lib/Article/Article.d.ts

@@ -8,18 +8,38 @@
 import { ReactNode } from "react";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
+export declare const ArticlePadding: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {
+    padStart?: boolean | undefined;
+    padEnd?: boolean | undefined;
+}>;
 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>>;
+} & import("@ndla/styled-system/types").WithCss & {
+    padded?: boolean | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
 export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
 } & {
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss, "ref"> & import("react").RefAttributes<HTMLElement>>;
-export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<"hgroup", {}>;
-export declare const ArticleActionWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
-export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<"header", {}>;
-export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<"footer", {}>;
+export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ArticleActionWrapper: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {
+    padded?: boolean | undefined;
+}>;
+export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {
+    padded?: boolean | undefined;
+}>;
 interface ArticleTitleProps {
     heartButton?: ReactNode;
     contentType?: ContentType;