@dnb/eufemia 10.62.3 → 10.63.0

package/components/pagination/PaginationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationBar.js","names":["React","useContext","useRef","useEffect","useState","dispatchCustomElementEvent","extendPropsWithContext","calculatePagination","getDotsAriaLabel","PaginationContext","Context","Button","IconPrimary","styleProperties","defaultProps","button_title","prev_title","next_title","more_pages","contentRef","children","PaginationBar","localProps","context","props","pagination","currentPage","pageCount","disabled","skeleton","focusPage","onPageUpdate","elem","current","focus","e","keepPageHeight","pageHeight","offsetHeight","style","height","minHeight","setPage","event","arguments","length","undefined","setState","setContextState","updatePageContent","_objectSpread","pageNumber","setPrevPage","setNextPage","clickHandler","_ref","getTranslation","Pagination","prevIsDisabled","nextIsDisabled","paginationBarRef","currentScreenSize","useResizeObserver","pageNumberGroups","createElement","ref","className","key","variant","icon","icon_position","text","on_click","title","map","String","replace","slice","numbersList","idx","Fragment","role","size","element","currentSize","setSize","resizeObserver","_resizeObserver$curre","handleSizeChange","width","getSizeInPx","ResizeObserver","entries","contentRect","observe","clientWidth","_resizeObserver$curre2","disconnect","styleSize","includes","parseFloat","_supportsSpacingProps"],"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","useContext","useRef","useEffect","useState","classnames","dispatchCustomElementEvent","extendPropsWithContext","calculatePagination","getDotsAriaLabel","PaginationContext","Context","Button","IconPrimary","styleProperties","createSpacingClasses","defaultProps","button_title","prev_title","next_title","more_pages","contentRef","children","space","PaginationBar","localProps","context","props","pagination","currentPage","pageCount","disabled","skeleton","spacingClasses","focusPage","onPageUpdate","elem","current","focus","e","keepPageHeight","pageHeight","offsetHeight","style","height","minHeight","setPage","event","arguments","length","undefined","setState","setContextState","updatePageContent","_objectSpread","pageNumber","setPrevPage","setNextPage","clickHandler","_ref","getTranslation","Pagination","prevIsDisabled","nextIsDisabled","paginationBarRef","currentScreenSize","useResizeObserver","pageNumberGroups","createElement","ref","className","key","variant","icon","icon_position","text","on_click","title","map","String","replace","slice","numbersList","idx","Fragment","role","size","element","currentSize","setSize","resizeObserver","_resizeObserver$curre","handleSizeChange","width","getSizeInPx","ResizeObserver","entries","contentRect","observe","clientWidth","_resizeObserver$curre2","disconnect","styleSize","includes","parseFloat","_supportsSpacingProps"],"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/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/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/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/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/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/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/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/components/tabs/Tabs.js

@@ -349,9 +349,9 @@ export default class Tabs extends React.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) {
           warn('Tabs Error:', e);
         }
@@ -542,14 +542,6 @@ Tip: Check out other solutions like <Tabs.Content id="unique">Your content, outs
     this._id = _props.id || 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,
@@ -857,7 +849,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,
@@ -897,7 +889,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   no_border: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   breakout: PropTypes.bool,
   nav_button_edge: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  use_hash: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  onOpenTabNavigationFn: PropTypes.func,
   prerender: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   prevent_rerender: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   scroll: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),