@dnb/eufemia 10.62.3 → 10.63.0

package/cjs/components/pagination/PaginationBar.d.ts

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { LocaleProps } from '../../shared/types';
+import { LocaleProps, SpaceTypeAll } from '../../shared/types';
 import type { SkeletonShow } from '../Skeleton';
 export type PaginationBarProps = {
     /**
@@ -31,6 +31,7 @@ export type PaginationBarProps = {
      */
     children?: React.ReactNode | (() => React.ReactNode);
     skeleton: SkeletonShow;
+    space?: SpaceTypeAll;
 };
 export type PaginationBarAllProps = PaginationBarProps & LocaleProps & React.HTMLProps<HTMLElement>;
 declare const PaginationBar: {

package/cjs/components/pagination/PaginationBar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResizeObserver = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _componentHelper = require("../../shared/component-helper");
 var _PaginationCalculation = require("./PaginationCalculation");
 var _PaginationContext = _interopRequireDefault(require("./PaginationContext"));
@@ -13,6 +14,7 @@ var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _Button = _interopRequireDefault(require("../button/Button"));
 var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
 var _properties = _interopRequireDefault(require("../../style/themes/theme-ui/properties"));
+var _SpacingUtils = require("../space/SpacingUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,7 +29,8 @@ const defaultProps = {
   next_title: null,
   more_pages: null,
   contentRef: null,
-  children: null
+  children: null,
+  space: null
 };
 const PaginationBar = localProps => {
   const context = (0, _react.useContext)(_PaginationContext.default);
@@ -36,8 +39,12 @@ const PaginationBar = localProps => {
     currentPage,
     pageCount,
     disabled,
-    skeleton
+    skeleton,
+    space
   } = props;
+  const spacingClasses = (0, _SpacingUtils.createSpacingClasses)({
+    space
+  });
   const focusPage = () => {
     const {
       onPageUpdate,
@@ -115,7 +122,7 @@ const PaginationBar = localProps => {
   const pageNumberGroups = (0, _PaginationCalculation.calculatePagination)(pageCount, currentPage, currentScreenSize === 'small');
   return _react.default.createElement("div", {
     ref: paginationBarRef,
-    className: 'dnb-pagination__bar' + (pageCount >= 8 ? " dnb-pagination--many-pages" : "")
+    className: (0, _classnames.default)('dnb-pagination__bar', spacingClasses, pageCount >= 8 && 'dnb-pagination--many-pages')
   }, _react.default.createElement("div", {
     className: "dnb-pagination__bar__wrapper"
   }, _react.default.createElement("div", {

package/cjs/components/pagination/PaginationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationBar.js","names":["_react","_interopRequireWildcard","require","_componentHelper","_PaginationCalculation","_PaginationContext","_interopRequireDefault","_Context","_Button","_IconPrimary","_properties","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","defaultProps","button_title","prev_title","next_title","more_pages","contentRef","children","PaginationBar","localProps","context","useContext","PaginationContext","props","extendPropsWithContext","pagination","currentPage","pageCount","disabled","skeleton","focusPage","onPageUpdate","elem","current","focus","e","keepPageHeight","pageHeight","offsetHeight","style","height","minHeight","setPage","event","setState","setContextState","updatePageContent","dispatchCustomElementEvent","pageNumber","setPrevPage","setNextPage","clickHandler","_ref","getTranslation","Context","Pagination","prevIsDisabled","nextIsDisabled","paginationBarRef","useRef","currentScreenSize","useResizeObserver","pageNumberGroups","calculatePagination","createElement","ref","className","variant","icon","icon_position","text","on_click","title","map","replace","slice","numbersList","idx","Fragment","role","getDotsAriaLabel","size","element","currentSize","setSize","useState","resizeObserver","useEffect","_resizeObserver$curre","handleSizeChange","width","getSizeInPx","ResizeObserver","entries","contentRect","observe","clientWidth","_resizeObserver$curre2","disconnect","exports","styleSize","styleProperties","includes","parseFloat","_supportsSpacingProps","_default"],"sources":["../../../../src/components/pagination/PaginationBar.tsx"],"sourcesContent":["/**\n * Web Pagination Component\n *\n */\n\nimport React, { useContext, useRef, useEffect, useState } from 'react'\nimport classnames from 'classnames'\nimport {\n  dispatchCustomElementEvent,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport {\n  calculatePagination,\n  getDotsAriaLabel,\n} from './PaginationCalculation'\nimport PaginationContext from './PaginationContext'\nimport Context from '../../shared/Context'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport styleProperties from '../../style/themes/theme-ui/properties'\nimport { LocaleProps } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\n\nexport type PaginationBarProps = {\n  /**\n   * The title used in every button shown in the bar. Defaults to Side %s.\n   */\n  button_title?: string\n\n  /**\n   *  The title used in the previous page button. Defaults to Forrige side.\n   */\n  prev_title?: string\n\n  /**\n   *  The title used in the next page button. Defaults to Neste side.\n   */\n  next_title?: string\n\n  /**\n   * The title used in the dots. Relevant for screen readers. Defaults to %s flere sider.\n   */\n  more_pages?: string\n\n  /**\n   * Reference to the parent component. Used to contain height between updates.\n   */\n  contentRef?: React.RefObject<HTMLElement>\n\n  /**\n   *  the given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.\n   */\n  children?: React.ReactNode | (() => React.ReactNode)\n\n  skeleton: SkeletonShow\n}\n\nexport type PaginationBarAllProps = PaginationBarProps &\n  LocaleProps &\n  React.HTMLProps<HTMLElement>\n\ntype PaginationBarContext = {\n  currentPage: number\n  pageCount: number\n  disabled: boolean\n  onPageUpdate: (cb: () => void) => void\n  setState: (state: { currentPage: number }) => void\n  updatePageContent: (currentPage: number) => void\n}\n\nconst defaultProps = {\n  button_title: null,\n  prev_title: null,\n  next_title: null,\n  more_pages: null,\n  contentRef: null,\n  children: null,\n}\n\nconst PaginationBar = (localProps: PaginationBarAllProps) => {\n  const context = useContext(PaginationContext)\n\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.pagination\n  ) as PaginationBarProps & PaginationBarContext\n\n  const { currentPage, pageCount, disabled, skeleton } = props\n\n  // because of accessibility\n  const focusPage = () => {\n    const { onPageUpdate, contentRef } = props\n\n    onPageUpdate(() => {\n      try {\n        const elem = contentRef.current\n        elem.focus()\n      } catch (e) {\n        //\n      }\n    })\n  }\n\n  const keepPageHeight = () => {\n    try {\n      const elem = props.contentRef.current\n      const pageHeight = elem.offsetHeight\n      elem.style.height = `${pageHeight / 16}rem`\n      elem.style.minHeight = elem.style.height // because of the \"min-height: inherit;\" in &__indicator\n    } catch (e) {\n      //\n    }\n\n    const { onPageUpdate } = props\n\n    onPageUpdate(() => {\n      try {\n        const elem = props.contentRef.current\n        elem.style.height = 'auto'\n        elem.style.minHeight = elem.style.height\n      } catch (e) {\n        //\n      }\n    })\n  }\n\n  const setPage = (currentPage: number, event = null) => {\n    keepPageHeight()\n\n    const { setState: setContextState, updatePageContent } = props\n    setContextState({\n      currentPage,\n    })\n    updatePageContent(currentPage)\n\n    dispatchCustomElementEvent(props, 'on_change', {\n      pageNumber: currentPage,\n      ...props,\n      event,\n    })\n  }\n\n  const setPrevPage = () => {\n    setPage(props.currentPage - 1)\n  }\n  const setNextPage = () => {\n    setPage(props.currentPage + 1)\n  }\n\n  const clickHandler = ({ pageNumber, event }) => {\n    setPage(pageNumber, event)\n    focusPage()\n  }\n\n  const { getTranslation } = useContext(Context)\n  const { button_title, prev_title, next_title, more_pages } =\n    extendPropsWithContext(\n      props,\n      defaultProps,\n      getTranslation(props as LocaleProps).Pagination\n    )\n\n  const prevIsDisabled = currentPage > -1 ? currentPage === 1 : true\n  const nextIsDisabled =\n    currentPage > -1 ? currentPage === pageCount || pageCount === 0 : true\n\n  const paginationBarRef = useRef(null)\n  const currentScreenSize = useResizeObserver(paginationBarRef)\n\n  const pageNumberGroups = calculatePagination(\n    pageCount,\n    currentPage,\n    currentScreenSize === 'small'\n  )\n\n  return (\n    <div\n      ref={paginationBarRef}\n      className={classnames(\n        'dnb-pagination__bar',\n        pageCount >= 8 && 'dnb-pagination--many-pages'\n      )}\n    >\n      <div className=\"dnb-pagination__bar__wrapper\">\n        <div className=\"dnb-pagination__bar__skip\">\n          <Button\n            key=\"left-arrow\"\n            disabled={disabled || prevIsDisabled}\n            skeleton={skeleton}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            text={prev_title}\n            on_click={setPrevPage}\n            title={prevIsDisabled ? null : prev_title}\n          />\n\n          <Button\n            key=\"right-arrow\"\n            disabled={disabled || nextIsDisabled}\n            skeleton={skeleton}\n            variant=\"tertiary\"\n            icon=\"chevron_right\"\n            icon_position=\"right\"\n            text={next_title}\n            on_click={setNextPage}\n            title={nextIsDisabled ? null : next_title}\n          />\n        </div>\n\n        <div className=\"dnb-pagination__bar__inner\">\n          {(pageNumberGroups?.[0] || []).map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              className=\"dnb-pagination__button\"\n              text={String(pageNumber)}\n              aria-label={button_title.replace('%s', String(pageNumber))}\n              variant={\n                pageNumber === currentPage ? 'primary' : 'secondary'\n              }\n              disabled={disabled}\n              skeleton={skeleton}\n              aria-current={pageNumber === currentPage ? 'page' : null}\n              on_click={(event) => clickHandler({ pageNumber, event })}\n            />\n          ))}\n\n          {pageNumberGroups.slice(1).map((numbersList, idx) => (\n            <React.Fragment key={idx}>\n              <IconPrimary\n                role=\"separator\"\n                aria-orientation=\"vertical\"\n                aria-hidden={false}\n                title={getDotsAriaLabel({\n                  more_pages,\n                  numbersList,\n                  pageNumberGroups,\n                })}\n                className=\"dnb-pagination__dots\"\n                icon=\"more\"\n                size=\"medium\"\n              />\n\n              {numbersList.map((pageNumber) => {\n                return (\n                  <Button\n                    key={(pageNumber || 0) + idx}\n                    className={classnames(\n                      'dnb-pagination__button',\n                      String(pageNumber).length > 3\n                        ? 'dnb-pagination__button--large-number'\n                        : null\n                    )}\n                    text={String(pageNumber)}\n                    aria-label={button_title.replace(\n                      '%s',\n                      String(pageNumber)\n                    )}\n                    variant={\n                      pageNumber === currentPage ? 'primary' : 'secondary'\n                    }\n                    disabled={disabled}\n                    skeleton={skeleton}\n                    aria-current={\n                      pageNumber === currentPage ? 'page' : null\n                    }\n                    on_click={(event) =>\n                      clickHandler({ pageNumber, event })\n                    }\n                  />\n                )\n              })}\n            </React.Fragment>\n          ))}\n        </div>\n      </div>\n\n      <span className=\"dnb-sr-only\" aria-live=\"assertive\">\n        {button_title.replace('%s', String(currentPage))}\n      </span>\n    </div>\n  )\n}\n\nexport const useResizeObserver = (element) => {\n  const [currentSize, setSize] = useState('large')\n  const resizeObserver = useRef(null)\n\n  useEffect(() => {\n    try {\n      const handleSizeChange = (width) => {\n        if (width <= getSizeInPx('small') && currentSize !== 'small') {\n          setSize('small')\n        } else if (\n          width <= getSizeInPx('medium') &&\n          currentSize !== 'medium'\n        ) {\n          setSize('medium')\n        } else if (\n          width <= getSizeInPx('large') &&\n          currentSize !== 'large'\n        ) {\n          setSize('large')\n        } else if (\n          width <= getSizeInPx('x-large') &&\n          currentSize !== 'x-large'\n        ) {\n          setSize('x-large')\n        } else if (\n          width <= getSizeInPx('xx-large') &&\n          currentSize !== 'xx-large'\n        ) {\n          setSize('xx-large')\n        }\n      }\n      resizeObserver.current = new ResizeObserver((entries) => {\n        handleSizeChange(entries[0].contentRect.width)\n      })\n\n      resizeObserver.current?.observe(element.current)\n      handleSizeChange(element.current.clientWidth)\n    } catch (e) {\n      //\n    }\n\n    return () => {\n      resizeObserver.current?.disconnect()\n    }\n  }, [element]) // eslint-disable-line\n\n  return currentSize\n}\n\nconst getSizeInPx = (size) => {\n  const styleSize = styleProperties[`--layout-${size}`]\n\n  if (styleSize.includes('em')) {\n    return parseFloat(styleSize.replace(/(rem|em)$/, '')) * 16\n  }\n\n  return parseFloat(styleSize.replace(/(px)$/, ''))\n}\n\nPaginationBar._supportsSpacingProps = true\n\nexport default PaginationBar\n"],"mappings":"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"}
+{"version":3,"file":"PaginationBar.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_componentHelper","_PaginationCalculation","_PaginationContext","_Context","_Button","_IconPrimary","_properties","_SpacingUtils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","defaultProps","button_title","prev_title","next_title","more_pages","contentRef","children","space","PaginationBar","localProps","context","useContext","PaginationContext","props","extendPropsWithContext","pagination","currentPage","pageCount","disabled","skeleton","spacingClasses","createSpacingClasses","focusPage","onPageUpdate","elem","current","focus","e","keepPageHeight","pageHeight","offsetHeight","style","height","minHeight","setPage","event","setState","setContextState","updatePageContent","dispatchCustomElementEvent","pageNumber","setPrevPage","setNextPage","clickHandler","_ref","getTranslation","Context","Pagination","prevIsDisabled","nextIsDisabled","paginationBarRef","useRef","currentScreenSize","useResizeObserver","pageNumberGroups","calculatePagination","createElement","ref","className","classnames","variant","icon","icon_position","text","on_click","title","map","replace","slice","numbersList","idx","Fragment","role","getDotsAriaLabel","size","element","currentSize","setSize","useState","resizeObserver","useEffect","_resizeObserver$curre","handleSizeChange","width","getSizeInPx","ResizeObserver","entries","contentRect","observe","clientWidth","_resizeObserver$curre2","disconnect","exports","styleSize","styleProperties","includes","parseFloat","_supportsSpacingProps","_default"],"sources":["../../../../src/components/pagination/PaginationBar.tsx"],"sourcesContent":["/**\n * Web Pagination Component\n *\n */\n\nimport React, { useContext, useRef, useEffect, useState } from 'react'\nimport classnames from 'classnames'\nimport {\n  dispatchCustomElementEvent,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport {\n  calculatePagination,\n  getDotsAriaLabel,\n} from './PaginationCalculation'\nimport PaginationContext from './PaginationContext'\nimport Context from '../../shared/Context'\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport styleProperties from '../../style/themes/theme-ui/properties'\nimport { LocaleProps, SpaceTypeAll } from '../../shared/types'\nimport type { SkeletonShow } from '../Skeleton'\nimport { createSpacingClasses } from '../space/SpacingUtils'\n\nexport type PaginationBarProps = {\n  /**\n   * The title used in every button shown in the bar. Defaults to Side %s.\n   */\n  button_title?: string\n\n  /**\n   *  The title used in the previous page button. Defaults to Forrige side.\n   */\n  prev_title?: string\n\n  /**\n   *  The title used in the next page button. Defaults to Neste side.\n   */\n  next_title?: string\n\n  /**\n   * The title used in the dots. Relevant for screen readers. Defaults to %s flere sider.\n   */\n  more_pages?: string\n\n  /**\n   * Reference to the parent component. Used to contain height between updates.\n   */\n  contentRef?: React.RefObject<HTMLElement>\n\n  /**\n   *  the given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.\n   */\n  children?: React.ReactNode | (() => React.ReactNode)\n\n  skeleton: SkeletonShow\n\n  space?: SpaceTypeAll\n}\n\nexport type PaginationBarAllProps = PaginationBarProps &\n  LocaleProps &\n  React.HTMLProps<HTMLElement>\n\ntype PaginationBarContext = {\n  currentPage: number\n  pageCount: number\n  disabled: boolean\n  onPageUpdate: (cb: () => void) => void\n  setState: (state: { currentPage: number }) => void\n  updatePageContent: (currentPage: number) => void\n}\n\nconst defaultProps = {\n  button_title: null,\n  prev_title: null,\n  next_title: null,\n  more_pages: null,\n  contentRef: null,\n  children: null,\n  space: null,\n}\n\nconst PaginationBar = (localProps: PaginationBarAllProps) => {\n  const context = useContext(PaginationContext)\n\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.pagination\n  ) as PaginationBarProps & PaginationBarContext\n\n  const { currentPage, pageCount, disabled, skeleton, space } = props\n\n  const spacingClasses = createSpacingClasses({ space })\n\n  // because of accessibility\n  const focusPage = () => {\n    const { onPageUpdate, contentRef } = props\n\n    onPageUpdate(() => {\n      try {\n        const elem = contentRef.current\n        elem.focus()\n      } catch (e) {\n        //\n      }\n    })\n  }\n\n  const keepPageHeight = () => {\n    try {\n      const elem = props.contentRef.current\n      const pageHeight = elem.offsetHeight\n      elem.style.height = `${pageHeight / 16}rem`\n      elem.style.minHeight = elem.style.height // because of the \"min-height: inherit;\" in &__indicator\n    } catch (e) {\n      //\n    }\n\n    const { onPageUpdate } = props\n\n    onPageUpdate(() => {\n      try {\n        const elem = props.contentRef.current\n        elem.style.height = 'auto'\n        elem.style.minHeight = elem.style.height\n      } catch (e) {\n        //\n      }\n    })\n  }\n\n  const setPage = (currentPage: number, event = null) => {\n    keepPageHeight()\n\n    const { setState: setContextState, updatePageContent } = props\n    setContextState({\n      currentPage,\n    })\n    updatePageContent(currentPage)\n\n    dispatchCustomElementEvent(props, 'on_change', {\n      pageNumber: currentPage,\n      ...props,\n      event,\n    })\n  }\n\n  const setPrevPage = () => {\n    setPage(props.currentPage - 1)\n  }\n  const setNextPage = () => {\n    setPage(props.currentPage + 1)\n  }\n\n  const clickHandler = ({ pageNumber, event }) => {\n    setPage(pageNumber, event)\n    focusPage()\n  }\n\n  const { getTranslation } = useContext(Context)\n  const { button_title, prev_title, next_title, more_pages } =\n    extendPropsWithContext(\n      props,\n      defaultProps,\n      getTranslation(props as LocaleProps).Pagination\n    )\n\n  const prevIsDisabled = currentPage > -1 ? currentPage === 1 : true\n  const nextIsDisabled =\n    currentPage > -1 ? currentPage === pageCount || pageCount === 0 : true\n\n  const paginationBarRef = useRef(null)\n  const currentScreenSize = useResizeObserver(paginationBarRef)\n\n  const pageNumberGroups = calculatePagination(\n    pageCount,\n    currentPage,\n    currentScreenSize === 'small'\n  )\n\n  return (\n    <div\n      ref={paginationBarRef}\n      className={classnames(\n        'dnb-pagination__bar',\n        pageCount >= 8 && 'dnb-pagination--many-pages',\n        spacingClasses\n      )}\n    >\n      <div className=\"dnb-pagination__bar__wrapper\">\n        <div className=\"dnb-pagination__bar__skip\">\n          <Button\n            key=\"left-arrow\"\n            disabled={disabled || prevIsDisabled}\n            skeleton={skeleton}\n            variant=\"tertiary\"\n            icon=\"chevron_left\"\n            icon_position=\"left\"\n            text={prev_title}\n            on_click={setPrevPage}\n            title={prevIsDisabled ? null : prev_title}\n          />\n\n          <Button\n            key=\"right-arrow\"\n            disabled={disabled || nextIsDisabled}\n            skeleton={skeleton}\n            variant=\"tertiary\"\n            icon=\"chevron_right\"\n            icon_position=\"right\"\n            text={next_title}\n            on_click={setNextPage}\n            title={nextIsDisabled ? null : next_title}\n          />\n        </div>\n\n        <div className=\"dnb-pagination__bar__inner\">\n          {(pageNumberGroups?.[0] || []).map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              className=\"dnb-pagination__button\"\n              text={String(pageNumber)}\n              aria-label={button_title.replace('%s', String(pageNumber))}\n              variant={\n                pageNumber === currentPage ? 'primary' : 'secondary'\n              }\n              disabled={disabled}\n              skeleton={skeleton}\n              aria-current={pageNumber === currentPage ? 'page' : null}\n              on_click={(event) => clickHandler({ pageNumber, event })}\n            />\n          ))}\n\n          {pageNumberGroups.slice(1).map((numbersList, idx) => (\n            <React.Fragment key={idx}>\n              <IconPrimary\n                role=\"separator\"\n                aria-orientation=\"vertical\"\n                aria-hidden={false}\n                title={getDotsAriaLabel({\n                  more_pages,\n                  numbersList,\n                  pageNumberGroups,\n                })}\n                className=\"dnb-pagination__dots\"\n                icon=\"more\"\n                size=\"medium\"\n              />\n\n              {numbersList.map((pageNumber) => {\n                return (\n                  <Button\n                    key={(pageNumber || 0) + idx}\n                    className={classnames(\n                      'dnb-pagination__button',\n                      String(pageNumber).length > 3\n                        ? 'dnb-pagination__button--large-number'\n                        : null\n                    )}\n                    text={String(pageNumber)}\n                    aria-label={button_title.replace(\n                      '%s',\n                      String(pageNumber)\n                    )}\n                    variant={\n                      pageNumber === currentPage ? 'primary' : 'secondary'\n                    }\n                    disabled={disabled}\n                    skeleton={skeleton}\n                    aria-current={\n                      pageNumber === currentPage ? 'page' : null\n                    }\n                    on_click={(event) =>\n                      clickHandler({ pageNumber, event })\n                    }\n                  />\n                )\n              })}\n            </React.Fragment>\n          ))}\n        </div>\n      </div>\n\n      <span className=\"dnb-sr-only\" aria-live=\"assertive\">\n        {button_title.replace('%s', String(currentPage))}\n      </span>\n    </div>\n  )\n}\n\nexport const useResizeObserver = (element) => {\n  const [currentSize, setSize] = useState('large')\n  const resizeObserver = useRef(null)\n\n  useEffect(() => {\n    try {\n      const handleSizeChange = (width) => {\n        if (width <= getSizeInPx('small') && currentSize !== 'small') {\n          setSize('small')\n        } else if (\n          width <= getSizeInPx('medium') &&\n          currentSize !== 'medium'\n        ) {\n          setSize('medium')\n        } else if (\n          width <= getSizeInPx('large') &&\n          currentSize !== 'large'\n        ) {\n          setSize('large')\n        } else if (\n          width <= getSizeInPx('x-large') &&\n          currentSize !== 'x-large'\n        ) {\n          setSize('x-large')\n        } else if (\n          width <= getSizeInPx('xx-large') &&\n          currentSize !== 'xx-large'\n        ) {\n          setSize('xx-large')\n        }\n      }\n      resizeObserver.current = new ResizeObserver((entries) => {\n        handleSizeChange(entries[0].contentRect.width)\n      })\n\n      resizeObserver.current?.observe(element.current)\n      handleSizeChange(element.current.clientWidth)\n    } catch (e) {\n      //\n    }\n\n    return () => {\n      resizeObserver.current?.disconnect()\n    }\n  }, [element]) // eslint-disable-line\n\n  return currentSize\n}\n\nconst getSizeInPx = (size) => {\n  const styleSize = styleProperties[`--layout-${size}`]\n\n  if (styleSize.includes('em')) {\n    return parseFloat(styleSize.replace(/(rem|em)$/, '')) * 16\n  }\n\n  return parseFloat(styleSize.replace(/(px)$/, ''))\n}\n\nPaginationBar._supportsSpacingProps = true\n\nexport default PaginationBar\n"],"mappings":"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"}

package/cjs/components/radio/style/dnb-radio.css

@@ -214,15 +214,15 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio-group fieldset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-radio-group fieldset:not([class*=space__right]) {
-  margin-right: 0;
-}
 .dnb-radio-group fieldset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
 .dnb-radio-group fieldset:not([class*=space__left]) {
   margin-left: 0;
 }
+.dnb-radio-group fieldset:not([class*=space__right]) {
+  margin-right: 0;
+}
 .dnb-radio-group--column .dnb-radio {
   display: flex;
   margin-right: 0;

package/cjs/components/radio/style/dnb-radio.min.css

@@ -1 +1 @@
-:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-row-gap:0.5rem;--radio-group-column-gap:1rem;display:inline-flex}.dnb-radio-group,.dnb-radio-group__fieldset,.dnb-radio-group__shell{flex-grow:1}.dnb-radio-group fieldset{border:none;padding:0}.dnb-radio-group fieldset:not([class*=space__top]){margin-top:0}.dnb-radio-group fieldset:not([class*=space__right]){margin-right:0}.dnb-radio-group fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-radio-group fieldset:not([class*=space__left]){margin-left:0}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{-moz-column-gap:var(--radio-group-column-gap);column-gap:var(--radio-group-column-gap);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-row-gap)}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}
+:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-dot--medium:0.75rem;--radio-dot--large:1.125rem;--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.09375rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-border-width--disabled:0.125rem;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-background--disabled:#fff;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-border-width--hover:0.125rem;--radio-border-width-on--hover:0.125rem;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-border-width--focus:0.125rem;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-border--error-hover:red;--radio-color-background-off--error-hover:#fff0f5;--radio-color-background-on--error-hover:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;--radio-focus-ring-width--error:var(--focus-ring-width);--radio-bounding--medium:1.75,1.5;--radio-bounding--large:1.25,1.12;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:var(--radio-dot--medium);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--radio-dot--medium)}.dnb-radio--large .dnb-radio__dot{height:var(--radio-dot--large);width:var(--radio-dot--large)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--radio-bounding--medium));width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);transform:scale(var(--radio-bounding--large));width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-row-gap:0.5rem;--radio-group-column-gap:1rem;display:inline-flex}.dnb-radio-group,.dnb-radio-group__fieldset,.dnb-radio-group__shell{flex-grow:1}.dnb-radio-group fieldset{border:none;padding:0}.dnb-radio-group fieldset:not([class*=space__top]){margin-top:0}.dnb-radio-group fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-radio-group fieldset:not([class*=space__left]){margin-left:0}.dnb-radio-group fieldset:not([class*=space__right]){margin-right:0}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{-moz-column-gap:var(--radio-group-column-gap);column-gap:var(--radio-group-column-gap);display:flex;flex-wrap:wrap;row-gap:var(--radio-group-row-gap)}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio__input:checked~.dnb-radio__button,.dnb-radio__input[data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background-on);border-color:var(--radio-color-border-on)}.dnb-radio__input:checked~.dnb-radio__dot,.dnb-radio__input[data-checked=true]~.dnb-radio__dot{opacity:1;transform:scale(1)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__dot{opacity:0;transform:scale(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--radio-color-background-off);border-color:var(--radio-color-border-off)}.dnb-radio__input[disabled]~.dnb-radio__button{border-width:var(--radio-border-width--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__button,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__button{background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-on--disabled)}.dnb-radio__input[disabled]:checked~.dnb-radio__dot,.dnb-radio__input[disabled][data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--disabled)}.dnb-radio__input[disabled]:not(:checked):not([data-checked=true])~.dnb-radio__button:not(.dnb-skeleton){background-color:var(--radio-color-background--disabled);border-color:var(--radio-color-border-off--disabled)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton{border-color:var(--skeleton-color)}.dnb-radio__input[disabled]~.dnb-radio__button.dnb-skeleton:before{border-radius:0}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__button,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__button{border-color:var(--radio-color-border-on--active)}.dnb-radio__input:not([disabled]):checked:active~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot{background-color:var(--radio-color-dot-on--active)}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button{background-color:var(--radio-color-background-off--active);border-color:var(--radio-color-border-off--active)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--hover);border-width:var(--radio-border-width-on--hover)}.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--hover);border-width:var(--radio-border-width--hover)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__button,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__button{background-color:var(--radio-color-background-on--focus)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus~.dnb-radio__dot,html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus~.dnb-radio__dot{background-color:var(--radio-color-dot-on--focus,var(--focus-ring-color))}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--radio-color-background-off--focus)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__button{border:none}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)~.dnb-radio__focus{--border-color:var(--radio-color-border-on--error);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover~.dnb-radio__focus{--border-color:var(--radio-color-border--error-hover);--border-width:var(--radio-focus-ring-width--error);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true]~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__dot,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__dot{background-color:var(--radio-color-dot-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-radio__button,.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover~.dnb-radio__button{background-color:var(--radio-color-background-on--error-hover)}.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button{background-color:var(--radio-color-background-off--error-hover)}

package/cjs/components/space/style/dnb-space.css

@@ -549,16 +549,16 @@
 .dnb-space__left--xx-large-x2.dnb-space__left--x-large {
   margin-left: calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large));
 }
-.dnb-space__reset:not([class*=dnb-space__top]) {
+.dnb-space__reset:not([class*=space__top]) {
   margin-top: 0;
 }
-.dnb-space__reset:not([class*=dnb-space__bottom]) {
+.dnb-space__reset:not([class*=space__bottom]) {
   margin-bottom: 0;
 }
-.dnb-space__reset:not([class*=dnb-space__left]) {
+.dnb-space__reset:not([class*=space__left]) {
   margin-left: 0;
 }
-.dnb-space__reset:not([class*=dnb-space__right]) {
+.dnb-space__reset:not([class*=space__right]) {
   margin-right: 0;
 }
 .dnb-space[style*="--space-t-"] {

package/cjs/components/space/style/dnb-space.min.css

@@ -1 +1 @@
-.dnb-core-style .dnb-space__top--zero{margin-top:0}.dnb-core-style .dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-core-style .dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-core-style .dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-core-style .dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-core-style .dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-core-style .dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--zero{margin-right:0}.dnb-core-style .dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-core-style .dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-core-style .dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-core-style .dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-core-style .dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-core-style .dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--zero{margin-bottom:0}.dnb-core-style .dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-core-style .dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-core-style .dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-core-style .dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-core-style .dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--zero{margin-left:0}.dnb-core-style .dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-core-style .dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-core-style .dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-core-style .dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-core-style .dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-core-style .dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space--no-collapse{display:flow-root}.dnb-space--stretch{width:100%}.dnb-space--inline{display:inline-block}.dnb-space__top--zero{margin-top:0}.dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-space__top--xx-large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__top--xx-large.dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__top--xx-large.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--zero{margin-right:0}.dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-space__right--xx-large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__right--xx-large.dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__right--xx-large.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--zero{margin-bottom:0}.dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-space__bottom--xx-large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__bottom--xx-large.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--zero{margin-left:0}.dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-space__left--xx-large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__left--xx-large.dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__left--xx-large.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__reset:not([class*=dnb-space__top]){margin-top:0}.dnb-space__reset:not([class*=dnb-space__bottom]){margin-bottom:0}.dnb-space__reset:not([class*=dnb-space__left]){margin-left:0}.dnb-space__reset:not([class*=dnb-space__right]){margin-right:0}.dnb-space[style*="--space-t-"]{padding-top:var(--padding-top,0)}.dnb-space[style*="--space-r-"]{padding-right:var(--padding-right,0)}.dnb-space[style*="--space-b-"]{padding-bottom:var(--padding-bottom,0)}.dnb-space[style*="--space-l-"]{padding-left:var(--padding-left,0)}@media screen and (max-width:60em){.dnb-space{--padding-right:var(--space-r-s);--padding-left:var(--space-l-s);--padding-top:var(--space-t-s);--padding-bottom:var(--space-b-s)}}@media screen and (max-width:60em) and (min-width:40.00625em){.dnb-space{--padding-right:var(--space-r-m);--padding-left:var(--space-l-m);--padding-top:var(--space-t-m);--padding-bottom:var(--space-b-m)}}@media screen and (min-width:60.00625em){.dnb-space{--padding-right:var(--space-r-l);--padding-left:var(--space-l-l);--padding-top:var(--space-t-l);--padding-bottom:var(--space-b-l)}}span.dnb-space--no-collapse>span{display:block}
+.dnb-core-style .dnb-space__top--zero{margin-top:0}.dnb-core-style .dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-core-style .dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-core-style .dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-core-style .dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-core-style .dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-core-style .dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__top--xx-large.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--large.dnb-core-style .dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__top--xx-large-x2.dnb-core-style .dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--zero{margin-right:0}.dnb-core-style .dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-core-style .dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-core-style .dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-core-style .dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-core-style .dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-core-style .dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__right--xx-large.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--large.dnb-core-style .dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__right--xx-large-x2.dnb-core-style .dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--zero{margin-bottom:0}.dnb-core-style .dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-core-style .dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-core-style .dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-core-style .dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-core-style .dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__bottom--xx-large.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--large.dnb-core-style .dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__bottom--xx-large-x2.dnb-core-style .dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--zero{margin-left:0}.dnb-core-style .dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-core-style .dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-core-style .dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-core-style .dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-core-style .dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-core-style .dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-core-style .dnb-space__left--xx-large.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--large.dnb-core-style .dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-core-style .dnb-space__left--xx-large-x2.dnb-core-style .dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space--no-collapse{display:flow-root}.dnb-space--stretch{width:100%}.dnb-space--inline{display:inline-block}.dnb-space__top--zero{margin-top:0}.dnb-space__top--xx-small{margin-top:var(--spacing-xx-small)}.dnb-space__top--x-small{margin-top:var(--spacing-x-small)}.dnb-space__top--small{margin-top:var(--spacing-small)}.dnb-space__top--medium{margin-top:var(--spacing-medium)}.dnb-space__top--large{margin-top:var(--spacing-large)}.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--x-large{margin-top:var(--spacing-x-large)}.dnb-space__top--xx-large{margin-top:var(--spacing-xx-large)}.dnb-space__top--xx-large.dnb-space__top--x-small{margin-top:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__top--xx-large.dnb-space__top--medium{margin-top:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__top--xx-large.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__top--xx-large.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2{margin-top:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--small{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--medium{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large{margin-top:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--large.dnb-space__top--x-small{margin-top:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__top--xx-large-x2.dnb-space__top--x-large{margin-top:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--zero{margin-right:0}.dnb-space__right--xx-small{margin-right:var(--spacing-xx-small)}.dnb-space__right--x-small{margin-right:var(--spacing-x-small)}.dnb-space__right--small{margin-right:var(--spacing-small)}.dnb-space__right--medium{margin-right:var(--spacing-medium)}.dnb-space__right--large{margin-right:var(--spacing-large)}.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--x-large{margin-right:var(--spacing-x-large)}.dnb-space__right--xx-large{margin-right:var(--spacing-xx-large)}.dnb-space__right--xx-large.dnb-space__right--x-small{margin-right:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__right--xx-large.dnb-space__right--medium{margin-right:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__right--xx-large.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__right--xx-large.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2{margin-right:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--small{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--medium{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large{margin-right:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--large.dnb-space__right--x-small{margin-right:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__right--xx-large-x2.dnb-space__right--x-large{margin-right:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--zero{margin-bottom:0}.dnb-space__bottom--xx-small{margin-bottom:var(--spacing-xx-small)}.dnb-space__bottom--x-small{margin-bottom:var(--spacing-x-small)}.dnb-space__bottom--small{margin-bottom:var(--spacing-small)}.dnb-space__bottom--medium{margin-bottom:var(--spacing-medium)}.dnb-space__bottom--large{margin-bottom:var(--spacing-large)}.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--x-large{margin-bottom:var(--spacing-x-large)}.dnb-space__bottom--xx-large{margin-bottom:var(--spacing-xx-large)}.dnb-space__bottom--xx-large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__bottom--xx-large.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__bottom--xx-large.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--small{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--medium{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large{margin-bottom:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--large.dnb-space__bottom--x-small{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__bottom--xx-large-x2.dnb-space__bottom--x-large{margin-bottom:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--zero{margin-left:0}.dnb-space__left--xx-small{margin-left:var(--spacing-xx-small)}.dnb-space__left--x-small{margin-left:var(--spacing-x-small)}.dnb-space__left--small{margin-left:var(--spacing-small)}.dnb-space__left--medium{margin-left:var(--spacing-medium)}.dnb-space__left--large{margin-left:var(--spacing-large)}.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--x-large{margin-left:var(--spacing-x-large)}.dnb-space__left--xx-large{margin-left:var(--spacing-xx-large)}.dnb-space__left--xx-large.dnb-space__left--x-small{margin-left:calc(var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-medium))}.dnb-space__left--xx-large.dnb-space__left--medium{margin-left:calc(var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-x-small))}.dnb-space__left--xx-large.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-small))}.dnb-space__left--xx-large.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2{margin-left:calc(var(--spacing-x-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--small{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--medium{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large{margin-left:calc(var(--spacing-x-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--large.dnb-space__left--x-small{margin-left:calc(var(--spacing-xx-large) + var(--spacing-x-large) + var(--spacing-x-large))}.dnb-space__left--xx-large-x2.dnb-space__left--x-large{margin-left:calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-x-large))}.dnb-space__reset:not([class*=space__top]){margin-top:0}.dnb-space__reset:not([class*=space__bottom]){margin-bottom:0}.dnb-space__reset:not([class*=space__left]){margin-left:0}.dnb-space__reset:not([class*=space__right]){margin-right:0}.dnb-space[style*="--space-t-"]{padding-top:var(--padding-top,0)}.dnb-space[style*="--space-r-"]{padding-right:var(--padding-right,0)}.dnb-space[style*="--space-b-"]{padding-bottom:var(--padding-bottom,0)}.dnb-space[style*="--space-l-"]{padding-left:var(--padding-left,0)}@media screen and (max-width:60em){.dnb-space{--padding-right:var(--space-r-s);--padding-left:var(--space-l-s);--padding-top:var(--space-t-s);--padding-bottom:var(--space-b-s)}}@media screen and (max-width:60em) and (min-width:40.00625em){.dnb-space{--padding-right:var(--space-r-m);--padding-left:var(--space-l-m);--padding-top:var(--space-t-m);--padding-bottom:var(--space-b-m)}}@media screen and (min-width:60.00625em){.dnb-space{--padding-right:var(--space-r-l);--padding-left:var(--space-l-l);--padding-top:var(--space-t-l);--padding-bottom:var(--space-b-l)}}span.dnb-space--no-collapse>span{display:block}

package/cjs/components/space/style/dnb-space.scss

@@ -6,6 +6,7 @@
  */
 
 @import '../../../style/core/utilities.scss';
+@import './space-mixins.scss';
 
 @mixin direction($direction) {
   // 0rem
@@ -174,18 +175,7 @@
     @include direction(left);
   }
   &__reset {
-    &:not([class*='dnb-space__top']) {
-      margin-top: 0;
-    }
-    &:not([class*='dnb-space__bottom']) {
-      margin-bottom: 0;
-    }
-    &:not([class*='dnb-space__left']) {
-      margin-left: 0;
-    }
-    &:not([class*='dnb-space__right']) {
-      margin-right: 0;
-    }
+    @include spaceReset();
   }
 
   // innerSpace

package/cjs/components/space/style/space-mixins.scss

@@ -0,0 +1,21 @@
+@mixin spaceVerticalReset() {
+  &:not([class*='space__top']) {
+    margin-top: 0;
+  }
+  &:not([class*='space__bottom']) {
+    margin-bottom: 0;
+  }
+}
+@mixin spaceHorizontalReset() {
+  &:not([class*='space__left']) {
+    margin-left: 0;
+  }
+  &:not([class*='space__right']) {
+    margin-right: 0;
+  }
+}
+
+@mixin spaceReset() {
+  @include spaceVerticalReset();
+  @include spaceHorizontalReset();
+}

package/cjs/components/tabs/Tabs.d.ts

@@ -79,7 +79,7 @@ export interface TabsProps
    * If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.
    */
   nav_button_edge?: boolean;
-  use_hash?: boolean;
+  onOpenTabNavigationFn?: (...args: any[]) => any;
   /**
    * If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.
    */

package/cjs/components/tabs/Tabs.js

@@ -358,9 +358,9 @@ class Tabs extends _react.default.PureComponent {
         event,
         selected_key
       }));
-      if (_this.props.use_hash && typeof window !== 'undefined') {
+      if (_this.props.onOpenTabNavigationFn && typeof window !== 'undefined') {
         try {
-          window.history.replaceState(undefined, undefined, `#${selected_key}`);
+          _this.props.onOpenTabNavigationFn(selected_key);
         } catch (e) {
           (0, _componentHelper.warn)('Tabs Error:', e);
         }
@@ -551,14 +551,6 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
     this._id = _props.id || (0, _componentHelper.makeUniqueId)();
     const data = Tabs.getData(_props);
     let _selected_key = Tabs.getSelectedKeyOrFallback(_props.selected_key, data);
-    if (_props.use_hash && typeof window !== 'undefined') {
-      try {
-        const useHashKey = String(window.location.hash).replace('#', '');
-        if (useHashKey && String(useHashKey).length > 0) {
-          _selected_key = Tabs.getSelectedKeyOrFallback(useHashKey, data);
-        }
-      } catch (e) {}
-    }
     const lastPosition = this.getLastPosition();
     this.state = {
       data,
@@ -867,7 +859,7 @@ _defineProperty(Tabs, "defaultProps", {
   tabs_spacing: null,
   no_border: false,
   nav_button_edge: false,
-  use_hash: false,
+  onOpenTabNavigationFn: null,
   prerender: false,
   prevent_rerender: false,
   scroll: null,
@@ -907,7 +899,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   no_border: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   breakout: _propTypes.default.bool,
   nav_button_edge: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  use_hash: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  onOpenTabNavigationFn: _propTypes.default.func,
   prerender: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   prevent_rerender: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   scroll: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),