@dnb/eufemia 9.38.0-beta.1 → 9.38.0

package/components/table/style/themes/dnb-table-theme-ui.scss

@@ -6,84 +6,18 @@
 @import '../../../../style/themes/imports.scss';
 
 .dnb-table {
-  // Header part
-  & > tr > th,
-  & > tr > td,
-  & > thead > tr > th,
-  & > tbody > tr > td,
-  &__th,
-  &__td {
-    position: relative;
-
-    font-size: var(--font-size-basis);
-    line-height: var(--line-height-basis);
-    border-spacing: 0;
-
-    word-break: keep-all;
-  }
-  /* stylelint-disable-next-line */
-  & > tr > th,
-  & > thead > tr > th,
-  &__th {
-    padding: var(--spacing-x-large) var(--spacing-small)
-      var(--spacing-x-small);
-
-    font-weight: var(--font-weight-medium);
-    color: var(--color-black);
-
-    vertical-align: bottom;
-
-    &:not([align]) {
-      text-align: inherit;
-    }
-
-    @include IS_FF {
-      // to get the perfect height of pixles, to this:
-      padding-bottom: calc(var(--spacing-x-small) - 0.5px);
-    }
-
-    background-color: var(--color-white);
-  }
-
-  // Body part
-  /* stylelint-disable-next-line */
-  & > tr > td,
-  & > tbody > tr > td,
-  &__td,
-  & > tr > th[scope='row'] {
-    padding: var(--spacing-small);
-    padding-top: calc(var(--spacing-small) * 1.25);
-    padding-bottom: calc(var(--spacing-small) * 1.188); /* 19/16 */
-
-    color: var(--theme-color-black-80, currentColor);
-  }
-
-  // Needs a double & & for specificity
-  & > tbody > tr,
-  & &__tr,
-  & &__tr--even {
-    background-color: var(--color-lavender);
-  }
-
-  // Needs a double & & for specificity
-  & > tbody > tr:not(#{&}__tr--even):nth-of-type(2n),
-  & &__tr:not(#{&}__tr--even):nth-of-type(2n),
-  & &__tr--odd {
-    background-color: var(--color-white);
-  }
-
   // Border
-  & > thead > tr > th::after,
-  & > tbody > tr:last-of-type > td::after,
-  & > thead > &__tr > &__th::after,
-  & > tbody > &__tr:last-of-type > &__td::after {
+  &:not(#{&}--border) > thead > tr > th::after,
+  &:not(#{&}--border) > tbody > tr:last-of-type > td::after,
+  &:not(#{&}--border) > thead > &__tr > &__th::after,
+  &:not(#{&}--border) > tbody > &__tr:last-of-type > &__td::after {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -1px;
+    bottom: -0.0625rem;
 
-    height: 1px;
+    height: 0.0625rem;
     background-color: var(--color-black-8);
   }
 }

package/elements/Table.d.ts

@@ -1,3 +1,7 @@
-export * from "../components/table/Table";
+/**
+ * HTML Element
+ *
+ */
+import Table from '../components/table/Table';
+export * from '../components/table/Table';
 export default Table;
-import Table from "../components/table/Table";

package/elements/Td.d.ts

@@ -1,3 +1,7 @@
-export * from "../components/table/TableTd";
+/**
+ * HTML Element
+ *
+ */
+import Td from '../components/table/TableTd';
+export * from '../components/table/TableTd';
 export default Td;
-import Td from "../components/table/TableTd";

package/elements/Th.d.ts

@@ -1,3 +1,7 @@
-export * from "../components/table/TableTh";
+/**
+ * HTML Element
+ *
+ */
+import Th from '../components/table/TableTh';
+export * from '../components/table/TableTh';
 export default Th;
-import Th from "../components/table/TableTh";

package/elements/Tr.d.ts

@@ -1,3 +1,7 @@
-export * from "../components/table/TableTr";
+/**
+ * HTML Element
+ *
+ */
+import Tr from '../components/table/TableTr';
+export * from '../components/table/TableTr';
 export default Tr;
-import Tr from "../components/table/TableTr";

package/elements/index.d.ts

@@ -22,9 +22,5 @@ import Ol from "./Ol";
 import P from "./P";
 import Paragraph from "./Paragraph";
 import Span from "./Span";
-import Table from "./Table";
-import Td from "./Td";
-import Th from "./Th";
-import Tr from "./Tr";
 import Ul from "./Ul";
-export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Table, Td, Th, Tr, Ul };
+export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Ul };

package/elements/index.js

@@ -22,9 +22,5 @@ import Ol from './Ol';
 import P from './P';
 import Paragraph from './Paragraph';
 import Span from './Span';
-import Table from './Table';
-import Td from './Td';
-import Th from './Th';
-import Tr from './Tr';
 import Ul from './Ul';
-export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Table, Td, Th, Tr, Ul };
+export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Ul };

package/elements/lib.d.ts

@@ -49,9 +49,6 @@ export function getElements(): {
         tagName: string;
     };
     Span: import("react").FC<import("./Span").SpanProps>;
-    Td: typeof Td;
-    Th: typeof Th;
-    Tr: typeof Tr;
     Ul: ({ nested, inside, outside, ...p }?: import("./Ul").UlAllProps) => JSX.Element;
 };
 import Anchor from "./Anchor";
@@ -78,8 +75,5 @@ import Ol from "./Ol";
 import P from "./P";
 import Paragraph from "./Paragraph";
 import Span from "./Span";
-import Td from "./Td";
-import Th from "./Th";
-import Tr from "./Tr";
 import Ul from "./Ul";
-export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Td, Th, Tr, Ul };
+export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Ul };

package/elements/lib.js

@@ -22,11 +22,8 @@ import Ol from './Ol';
 import P from './P';
 import Paragraph from './Paragraph';
 import Span from './Span';
-import Td from './Td';
-import Th from './Th';
-import Tr from './Tr';
 import Ul from './Ul';
-export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Td, Th, Tr, Ul };
+export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Ul };
 export var getElements = function getElements() {
   return {
     Anchor: Anchor,
@@ -53,9 +50,6 @@ export var getElements = function getElements() {
     P: P,
     Paragraph: Paragraph,
     Span: Span,
-    Td: Td,
-    Th: Th,
-    Tr: Tr,
     Ul: Ul
   };
 };

package/es/components/lib.d.ts

@@ -51,10 +51,9 @@ export function getComponents(): {
     StepIndicator: typeof StepIndicator;
     Switch: typeof Switch;
     Table: {
-        (componentProps: import("./table/Table").TableProps & import("react").TableHTMLAttributes<HTMLTableElement> & import("./space/types").SpacingElementProps & {
-            space?: import("./space/types").SpaceTypes | import("./space/types").SpacingElementProps;
-        }): JSX.Element;
+        (componentProps: import("./table/Table").TableAllProps): JSX.Element;
         StickyHelper: () => JSX.Element;
+        ScrollView: typeof import("./table/TableScrollView").default;
     };
     Tabs: typeof Tabs;
     Tag: {

package/es/components/table/Table.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import { SkeletonShow } from '../skeleton/Skeleton';
-import { SpacingProps } from '../../shared/types';
-import { StickyHelper, StickyTableHeaderProps } from './TableStickyHeader';
+import ScrollView from './TableScrollView';
+import { StickyHelper } from './TableStickyHeader';
+import type { StickyTableHeaderProps } from './TableStickyHeader';
+import type { SkeletonShow } from '../skeleton/Skeleton';
+import type { SpacingProps } from '../../shared/types';
 export declare type TableSizes = 'large' | 'medium';
 export declare type TableVariants = 'generic';
 export { StickyHelper };
-export interface TableProps extends StickyTableHeaderProps {
+export { ScrollView };
+export declare type TableProps = {
     /**
      * The content of the component.
      */
@@ -28,18 +31,30 @@ export interface TableProps extends StickyTableHeaderProps {
      * Default: generic.
      */
     variant?: TableVariants;
+    /**
+     * Use `true` to show borders between table data cell
+     * Default: false
+     */
+    border?: boolean;
+    /**
+     * Use `true` to show a outline border around the table
+     * Default: false
+     */
+    outline?: boolean;
     /**
      * Defines if the table should behave with a fixed table layout, using: "table-layout: fixed;"
      * Default: null.
      */
     fixed?: boolean;
-}
+} & StickyTableHeaderProps;
+export declare type TableAllProps = TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps;
 export declare const defaultProps: {
     size: string;
     variant: string;
 };
 declare const Table: {
-    (componentProps: TableProps & React.TableHTMLAttributes<HTMLTableElement> & SpacingProps): JSX.Element;
+    (componentProps: TableAllProps): JSX.Element;
     StickyHelper: () => JSX.Element;
+    ScrollView: typeof ScrollView;
 };
 export default Table;

package/es/components/table/Table.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed"];
+const _excluded = ["className", "children", "size", "skeleton", "variant", "sticky", "stickyOffset", "fixed", "border", "outline"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -14,9 +14,11 @@ import Provider from '../../shared/Provider';
 import { createSpacingClasses } from '../space/SpacingHelper';
 import { createSkeletonClass } from '../skeleton/SkeletonHelper';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
+import ScrollView from './TableScrollView';
 import TableContext from './TableContext';
 import { useStickyHeader, StickyHelper } from './TableStickyHeader';
 export { StickyHelper };
+export { ScrollView };
 export const defaultProps = {
   size: 'large',
   variant: 'generic'
@@ -36,7 +38,9 @@ const Table = componentProps => {
     variant,
     sticky,
     stickyOffset,
-    fixed
+    fixed,
+    border,
+    outline
   } = allProps,
         props = _objectWithoutProperties(allProps, _excluded);
 
@@ -60,7 +64,7 @@ const Table = componentProps => {
       allProps: _objectSpread(_objectSpread({}, context.getTranslation(componentProps).Table), allProps)
     }
   }, React.createElement("table", _extends({
-    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && `dnb-table--sticky`, fixed && `dnb-table--fixed`),
+    className: classnames('dnb-table', spacingClasses, skeletonClasses, className, variant && `dnb-table__variant--${variant}`, size && `dnb-table__size--${size}`, sticky && `dnb-table--sticky`, fixed && `dnb-table--fixed`, border && `dnb-table--border`, outline && `dnb-table--outline`),
     ref: elementRef
   }, props), children)));
 
@@ -71,4 +75,5 @@ const Table = componentProps => {
 };
 
 export default Table;
-Table.StickyHelper = StickyHelper;
+Table.StickyHelper = StickyHelper;
+Table.ScrollView = ScrollView;

package/es/components/table/TableContainer.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { TableProps } from './Table';
+import type { SpacingProps } from '../space/types';
+export declare type TableContainerProps = {
+    /**
+     * The content of the component.
+     */
+    children: [
+        React.ReactElement<TableContainerHeadProps>,
+        React.ReactElement<TableContainerBodyProps>,
+        React.ReactElement<TableContainerFootProps>
+    ];
+};
+export declare type TableContainerAllProps = TableContainerProps & React.TableHTMLAttributes<HTMLTableRowElement> & SpacingProps;
+declare function TableContainer(props: TableContainerAllProps): JSX.Element;
+declare namespace TableContainer {
+    var Body: typeof TableContainerBody;
+    var Head: typeof TableContainerHead;
+    var Foot: typeof TableContainerFoot;
+}
+export default TableContainer;
+export declare type TableContainerBodyProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<TableProps> | Array<React.ReactElement<TableProps>>;
+};
+export declare function TableContainerBody(props: TableContainerBodyProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerHeadProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerHead(props: TableContainerHeadProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare type TableContainerFootProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare function TableContainerFoot(props: TableContainerFootProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/es/components/table/TableContainer.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["children", "className"],
+      _excluded2 = ["children", "className"],
+      _excluded3 = ["children", "className"],
+      _excluded4 = ["children", "className"];
+import React from 'react';
+import classnames from 'classnames';
+import ScrollView from '../../fragments/scroll-view/ScrollView';
+import { createSpacingClasses } from '../space/SpacingUtils';
+import { validateDOMAttributes } from '../../shared/component-helper';
+export default function TableContainer(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  const spacingClasses = createSpacingClasses(props);
+  validateDOMAttributes(props, rest);
+  return React.createElement("section", _extends({
+    className: classnames('dnb-table__container', className, spacingClasses)
+  }, rest), React.createElement(ScrollView, null, children));
+}
+export function TableContainerBody(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded2);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__body', className)
+  }, rest), children);
+}
+export function TableContainerHead(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded3);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__head', className)
+  }, rest), children);
+}
+export function TableContainerFoot(props) {
+  const {
+    children,
+    className
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded4);
+
+  return React.createElement("div", _extends({
+    className: classnames('dnb-table__container__foot', className)
+  }, rest), children);
+}
+TableContainer.Body = TableContainerBody;
+TableContainer.Head = TableContainerHead;
+TableContainer.Foot = TableContainerFoot;

package/es/components/table/TableScrollView.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SpacingProps } from '../../shared/types';
+export declare type TableScrollViewProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<HTMLTableElement>;
+};
+export declare type TableScrollViewAllProps = TableScrollViewProps & Omit<React.TableHTMLAttributes<HTMLDivElement>, 'children'> & SpacingProps;
+export default function TableScrollView(props: TableScrollViewAllProps): JSX.Element;

package/es/components/table/TableScrollView.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["className", "children"];
+import React from 'react';
+import classnames from 'classnames';
+import ScrollView from '../../fragments/scroll-view/ScrollView';
+export default function TableScrollView(props) {
+  const {
+    className,
+    children
+  } = props,
+        rest = _objectWithoutProperties(props, _excluded);
+
+  return React.createElement(ScrollView, _extends({
+    className: classnames('dnb-table__scroll-view', className)
+  }, rest), children);
+}

package/es/components/table/TableStickyHeader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface StickyTableHeaderProps {
+export declare type StickyTableHeaderProps = {
     /**
      * Makes the Table header sticky
      * Default: false
@@ -14,7 +14,7 @@ export interface StickyTableHeaderProps {
      * @deprecated Please use `stickyOffset`
      */
     sticky_offset?: string | number;
-}
+};
 export declare const useStickyHeader: ({ sticky, stickyOffset, sticky_offset, }: StickyTableHeaderProps) => {
     elementRef: React.MutableRefObject<HTMLTableElement>;
 };

package/es/components/table/TableTd.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 export declare type TableTdProps = {
+    /**
+     * if set to `true`, no padding will be added
+     * Default: false
+     */
+    noSpacing?: boolean;
+    /**
+     * Set to `horizontal` for padding on left and right side
+     * Default: false
+     */
+    spacing?: 'horizontal';
     /**
      * The content of the component.
      * Default: null

package/es/components/table/TableTd.js

@@ -1,17 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "noSpacing", "spacing"];
 import React from 'react';
 import classnames from 'classnames';
 export default function Td(componentProps) {
   const {
     className,
-    children
+    children,
+    noSpacing,
+    spacing
   } = componentProps,
         props = _objectWithoutProperties(componentProps, _excluded);
 
   return React.createElement("td", _extends({
     role: "cell",
-    className: classnames('dnb-table__td', className)
+    className: classnames('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && `dnb-table__td--spacing-${spacing}`)
   }, props), children);
 }

package/es/components/table/TableTh.d.ts

@@ -32,5 +32,6 @@ declare function Th(componentProps: TableThProps & React.ThHTMLAttributes<HTMLTa
 declare namespace Th {
     var SortButton: typeof TableSortButton;
     var HelpButton: typeof TableHelpButton;
+    var Horizontal: ({ className, ...rest }: React.ThHTMLAttributes<HTMLDivElement>) => JSX.Element;
 }
 export default Th;

package/es/components/table/TableTh.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"];
+const _excluded = ["className", "children", "sortable", "active", "reversed", "noWrap"],
+      _excluded2 = ["className"];
 import React from 'react';
 import classnames from 'classnames';
 import TableSortButton from './TableSortButton';
@@ -21,5 +22,18 @@ export default function Th(componentProps) {
     className: classnames('dnb-table__th', className, sortable && 'dnb-table--sortable', active && 'dnb-table--active', reversed && 'dnb-table--reversed', noWrap && 'dnb-table--no-wrap')
   }, props), children);
 }
+
+function Horizontal(_ref) {
+  let {
+    className = null
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded2);
+
+  return React.createElement("div", _extends({}, rest, {
+    className: classnames('dnb-table__th__horizontal', className)
+  }));
+}
+
 Th.SortButton = TableSortButton;
-Th.HelpButton = TableHelpButton;
+Th.HelpButton = TableHelpButton;
+Th.Horizontal = Horizontal;

package/es/components/table/TableTr.d.ts

@@ -5,6 +5,11 @@ export declare type TableTrProps = {
      * The variant of the tr
      */
     variant?: 'even' | 'odd';
+    /**
+     * If set to true, the inherited header text will not wrap to new lines
+     * Default: false
+     */
+    noWrap?: boolean;
     /**
      * The content of the component.
      */

package/es/components/table/TableTr.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["variant", "children", "className"];
+const _excluded = ["variant", "noWrap", "children", "className"];
 import React from 'react';
 import classnames from 'classnames';
 import TableContext from './TableContext';
 export default function Tr(componentProps) {
   const {
     variant,
+    noWrap,
     children,
     className: _className
   } = componentProps,
@@ -17,7 +18,7 @@ export default function Tr(componentProps) {
   } = useHandleTrVariant({
     variant
   });
-  const className = classnames('dnb-table__tr', _className, currentVariant && `dnb-table__tr--${currentVariant}`);
+  const className = classnames('dnb-table__tr', _className, currentVariant && `dnb-table__tr--${currentVariant}`, noWrap && 'dnb-table--no-wrap');
   return React.createElement("tr", _extends({
     role: "row",
     className: className

package/es/components/table/style/_table-cell.scss

@@ -0,0 +1,21 @@
+/*
+* Table component
+*
+*/
+
+.dnb-table {
+  & > tr > th,
+  & > tr > td,
+  & > thead > tr > th,
+  & > tbody > tr > td,
+  &__th,
+  &__td {
+    position: relative;
+
+    font-size: var(--font-size-basis);
+    line-height: var(--line-height-basis);
+    border-spacing: 0;
+
+    word-break: keep-all;
+  }
+}

package/es/components/table/style/_table-container.scss

@@ -0,0 +1,61 @@
+/*
+* Table component
+*
+*/
+
+@mixin tableBorder {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  pointer-events: none;
+}
+
+.dnb-table__container {
+  position: relative;
+
+  --border: 0.0625rem solid var(--color-black-8);
+  background-color: var(--color-white);
+
+  &::after {
+    @include tableBorder();
+
+    border: var(--border);
+  }
+
+  &,
+  &::after {
+    border-radius: 0.5rem;
+  }
+
+  &,
+  &__body,
+  &__head,
+  &__foot {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__body {
+    .dnb-table {
+      &:not([class*='space__bottom']) {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__head {
+    padding: 2rem 1rem 0;
+
+    .dnb-spacing & .dnb-h--large:not([class*='space__top']) {
+      margin: 0;
+    }
+  }
+  &__foot {
+    padding: 0.5rem 1rem 2rem;
+  }
+}