@dnb/eufemia 10.8.0 → 10.9.0

package/cjs/components/modal/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","names":["_react","_interopRequireDefault","require","_classnames","_keycode","_bodyScrollLock","_componentHelper","_ModalContext","_helpers","_helpers2","_Theme","_shared","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ModalContent","React","PureComponent","constructor","props","triggeredBy","triggeredByEvent","color","modalRoots","getListOfModalRoots","firstLevel","_this$props","_ii","InteractionInvalidation","setBypassSelector","root_id","bypass_invalidation_selectors","Boolean","activate","modal","_iiLocal","_scrollRef","current","document","addEventListener","onKeyDownHandler","animation_duration","timeoutDuration","parseFloat","clearTimeout","_androidFocusTimeout","setTimeout","_document$activeEleme","_document$activeEleme2","activeElement","tagName","scrollIntoView","e","event","stopPropagation","closeModalContent","_overlayClickRef","currentTarget","prevent_overlay_close","isTrue","ifIsLatest","keycode","mostCurrent","getModalRoot","preventDefault","setState","_contentRef","content_ref","createRef","scroll_ref","_id","id","componentDidMount","no_animation","addToIndex","removeScrollPossibility","setFocus","setAndroidFocusHelper","dispatchCustomElementEvent","process","env","NODE_ENV","lockBody","_lockTimeout","componentWillUnmount","_focusTimeout","removeLocks","removeFromIndex","_this$_ii","revert","revertScrollPossibility","warn","removeAndroidFocusHelper","state","removeEventListener","window","isAndroid","_androidFocusHelper","focus_selector","elem","focusElement","querySelector","focus","noH1Elem","disableBodyScroll","enableBodyScroll","clearAllBodyScrollLocks","_ref","_event$persist","params","persist","close","render","_this$context","_this$props2","hide","title","labelled_by","close_title","dialog_title","hide_close_button","close_button_attributes","no_animation_on_mobile","fullscreen","container_placement","content_class","overlay_class","content_id","children","dialog_role","rest","contentId","makeUniqueId","useDialogRole","IS_MAC","IS_SAFARI","IS_IOS","role","contentParams","combineLabelledBy","combineDescribedBy","className","classnames","getThemeClasses","context","theme","onMouseDown","onContentMouseDownHandler","onClick","onContentClickHandler","content","createElement","Provider","setBackgroundColor","onCloseClickHandler","preventClick","contentRef","scrollRef","style","exports","Context"],"sources":["../../../../src/components/modal/ModalContent.tsx"],"sourcesContent":["/**\n * Web Modal Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  disableBodyScroll,\n  enableBodyScroll,\n  clearAllBodyScrollLocks,\n} from './bodyScrollLock'\nimport {\n  warn,\n  isTrue,\n  makeUniqueId,\n  InteractionInvalidation,\n  combineLabelledBy,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport ModalContext from './ModalContext'\nimport { IS_IOS, IS_SAFARI, IS_MAC, isAndroid } from '../../shared/helpers'\nimport { ModalContentProps } from './types'\nimport {\n  getListOfModalRoots,\n  getModalRoot,\n  addToIndex,\n  removeFromIndex,\n} from './helpers'\nimport { getThemeClasses } from '../../shared/Theme'\nimport { Context } from '../../shared'\nimport { ContextProps } from '../../shared/Context'\n\ninterface ModalContentState {\n  triggeredBy: string\n  triggeredByEvent: Event\n  color: string\n}\n\ndeclare global {\n  interface Window {\n    __modalStack: any[]\n  }\n}\n\ninterface CSSPropertiesWithVars extends React.CSSProperties {\n  '--modal-background-color': string\n}\n\nexport default class ModalContent extends React.PureComponent<\n  ModalContentProps,\n  ModalContentState\n> {\n  state = { triggeredBy: null, triggeredByEvent: null, color: null }\n\n  _contentRef: React.RefObject<HTMLElement>\n  _scrollRef: React.RefObject<HTMLElement>\n  _overlayClickRef: { current: null | HTMLElement }\n  _id: string\n  _lockTimeout: NodeJS.Timeout\n  _focusTimeout: NodeJS.Timeout\n  _androidFocusTimeout: NodeJS.Timeout\n  _ii: InteractionInvalidation\n  _iiLocal: InteractionInvalidation\n\n  static contextType = Context\n\n  context!: ContextProps\n\n  constructor(props: ModalContentProps) {\n    super(props)\n    this._contentRef = this.props.content_ref || React.createRef()\n    this._scrollRef = this.props.scroll_ref || React.createRef()\n    this._overlayClickRef = React.createRef()\n\n    // NB: The \"\"._id\" is used in the __modalStack as \"last._id\"\n    this._id = props.id\n  }\n\n  componentDidMount() {\n    const {\n      id = null,\n      no_animation = false,\n      animation_duration = null,\n    } = this.props\n\n    const timeoutDuration: number =\n      typeof animation_duration === 'string'\n        ? parseFloat(animation_duration)\n        : animation_duration\n\n    // Add it to the index at first\n    // we use it later with getListOfModalRoots\n    addToIndex(this)\n\n    // Because of nested modals/drawers, we run this regardless\n    // has to be run at first – so the scrollbar gets removed\n    this.removeScrollPossibility() // forces browser to re-paint\n\n    this.setFocus()\n    this.setAndroidFocusHelper()\n\n    dispatchCustomElementEvent(this, 'on_open', {\n      id,\n    })\n\n    if (isTrue(no_animation) || process.env.NODE_ENV === 'test') {\n      this.lockBody() // forces browser to re-paint\n    } else {\n      this._lockTimeout = setTimeout(this.lockBody, timeoutDuration * 1.2) // a little over --modal-animation-duration\n    }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this._focusTimeout)\n    clearTimeout(this._lockTimeout)\n    this.removeLocks()\n  }\n\n  lockBody = () => {\n    const modalRoots = getListOfModalRoots()\n    const firstLevel = modalRoots[0]\n\n    if (firstLevel === this) {\n      this._ii = new InteractionInvalidation()\n      this._ii.setBypassSelector(\n        [\n          // Bypass modal content\n          '.dnb-modal__content *',\n          `#dnb-modal-${this.props.root_id || 'root'}`,\n          `#dnb-modal-${this.props.root_id || 'root'} *`,\n\n          // TODO: Eventually in future, make it possible to bypass invalidation from outside\n          // '.dnb-modal--bypass_invalidation',\n          // '.dnb-modal--bypass_invalidation_deep *',\n\n          ...(this.props?.bypass_invalidation_selectors || []),\n        ].filter(Boolean)\n      )\n      this._ii.activate()\n    } else {\n      modalRoots.forEach((modal) => {\n        if (\n          modal !== this &&\n          typeof modal._iiLocal === 'undefined' &&\n          typeof modal._scrollRef !== 'undefined'\n        ) {\n          modal._iiLocal = new InteractionInvalidation()\n          modal._iiLocal.activate(modal._scrollRef.current)\n        }\n      })\n    }\n\n    if (typeof document !== 'undefined') {\n      /** To ensure, we have always a working keydown, we call it both on the element and document */\n      document.addEventListener('keydown', this.onKeyDownHandler)\n    }\n  }\n\n  removeLocks() {\n    const modalRoots = getListOfModalRoots()\n    const firstLevel = modalRoots[0]\n\n    removeFromIndex(this)\n\n    if (firstLevel === this) {\n      this._ii?.revert()\n      this.revertScrollPossibility()\n    } else {\n      try {\n        const modal = modalRoots[modalRoots.length - 2]\n        if (modal !== this && modal._iiLocal) {\n          modal._iiLocal.revert()\n          delete modal._iiLocal\n        }\n      } catch (e) {\n        warn(e)\n      }\n    }\n\n    this.removeAndroidFocusHelper()\n\n    const id = this.props.id\n    const { triggeredBy, triggeredByEvent } = this.state\n    dispatchCustomElementEvent(this, 'on_close', {\n      id,\n      event: triggeredByEvent,\n      triggeredBy: triggeredBy || 'unmount',\n    })\n\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('keydown', this.onKeyDownHandler)\n    }\n  }\n\n  setAndroidFocusHelper() {\n    if (typeof window !== 'undefined' && isAndroid()) {\n      window.addEventListener('resize', this._androidFocusHelper)\n    }\n  }\n\n  removeAndroidFocusHelper() {\n    window.removeEventListener('resize', this._androidFocusHelper)\n    clearTimeout(this._androidFocusTimeout)\n  }\n\n  _androidFocusHelper = () => {\n    const { animation_duration = null } = this.props\n    const timeoutDuration: number =\n      typeof animation_duration === 'string'\n        ? parseFloat(animation_duration)\n        : animation_duration\n\n    clearTimeout(this._androidFocusTimeout)\n    this._androidFocusTimeout = setTimeout(() => {\n      try {\n        if (\n          document.activeElement?.tagName == 'INPUT' ||\n          document.activeElement?.tagName == 'TEXTAREA'\n        ) {\n          document.activeElement.scrollIntoView()\n        }\n      } catch (e) {\n        //\n      }\n    }, timeoutDuration / 2) // Older Android needs a delay here\n  }\n\n  setFocus() {\n    const {\n      focus_selector = null,\n      no_animation = null,\n      animation_duration = null,\n    } = this.props\n    const elem = this._contentRef.current\n    const timeoutDuration: number =\n      typeof animation_duration === 'string'\n        ? parseFloat(animation_duration)\n        : animation_duration\n\n    if (elem) {\n      clearTimeout(this._focusTimeout)\n      this._focusTimeout = setTimeout(\n        () => {\n          try {\n            let focusElement = elem\n\n            // Try to use the \"first-focus\" method first\n            if (typeof focus_selector === 'string') {\n              focusElement = elem.querySelector(focus_selector)\n            }\n\n            focusElement.focus()\n\n            const noH1Elem = elem.querySelector('h1, h2, h3')\n            if (noH1Elem?.tagName !== 'H1') {\n              warn('A Dialog or Drawer needs a h1 as its first element!')\n            }\n          } catch (e) {\n            warn(e)\n          }\n        },\n        isTrue(no_animation) ? 0 : timeoutDuration || 0\n      ) // with this delay, the user can press esc without an focus action first\n    }\n  }\n\n  removeScrollPossibility() {\n    if (this._scrollRef.current) {\n      disableBodyScroll(this._scrollRef.current)\n    }\n  }\n\n  revertScrollPossibility() {\n    enableBodyScroll(this._scrollRef.current)\n    clearAllBodyScrollLocks()\n  }\n\n  preventClick = (event) => {\n    if (event) {\n      event.stopPropagation()\n    }\n  }\n\n  onCloseClickHandler = (event: React.SyntheticEvent) => {\n    this.closeModalContent(event, { triggeredBy: 'button' })\n  }\n\n  onContentMouseDownHandler = (event: React.SyntheticEvent) => {\n    this._overlayClickRef.current =\n      event.target === event.currentTarget\n        ? (event.target as HTMLElement)\n        : null\n  }\n\n  onContentClickHandler = (event: React.SyntheticEvent) => {\n    /**\n     * Prevent false-positive Modal close,\n     * when e.g. selecting text inside and moving the mouse outside,\n     * we would still get this event fired. There we check if the current click,\n     * has the same target as where the click got initiated.\n     */\n    if (this._overlayClickRef.current !== event.target) {\n      return // stop here\n    }\n    this._overlayClickRef.current = null\n\n    const { prevent_overlay_close } = this.props\n\n    if (!isTrue(prevent_overlay_close)) {\n      this.closeModalContent(event, {\n        triggeredBy: 'overlay',\n        ifIsLatest: false,\n      })\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'esc': {\n        const mostCurrent = getModalRoot(-1)\n\n        if (mostCurrent === this) {\n          event.preventDefault()\n          this.closeModalContent(event, {\n            triggeredBy: 'keyboard',\n          })\n        }\n\n        break\n      }\n    }\n  }\n\n  closeModalContent(event, { triggeredBy, ...params }) {\n    event?.persist?.()\n    this.setState({ triggeredBy, triggeredByEvent: event }, () => {\n      this.props.close(event, {\n        triggeredBy,\n        ...params,\n      })\n    })\n  }\n\n  setBackgroundColor = (color: string) => {\n    this.setState({ color })\n  }\n\n  render() {\n    const {\n      hide,\n      title,\n      labelled_by,\n      id: _id, // eslint-disable-line\n      close_title = 'Lukk',\n      dialog_title = 'Vindu',\n      hide_close_button = false,\n      close_button_attributes,\n      no_animation = false,\n      no_animation_on_mobile = false,\n      fullscreen = 'auto',\n      container_placement = 'right',\n      close,\n      content_class,\n      overlay_class,\n      content_id,\n      children, // eslint-disable-line\n      dialog_role = null,\n      ...rest\n    } = this.props\n    const { color } = this.state\n\n    const contentId = content_id || makeUniqueId('modal-')\n\n    const useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS)\n    let role = dialog_role || 'dialog'\n    if (!useDialogRole && role === 'dialog') {\n      role = 'region'\n    }\n\n    const contentParams = {\n      /**\n       * Do not use role=\"dialog\" on Safari\n       *\n       * VoiceOver has troubles with role=\"dialog\" and \"Modal in Modal\",\n       * the result is, only the first Modal gets focus (set by Safari)\n       *\n       * Tests have shown: Both VoiceOver are working fine with the:\n       * \"aria-labelledby\" and \"aria-describedby\" approach\n       *\n       */\n      role,\n      'aria-modal': useDialogRole ? true : undefined,\n\n      /**\n       * ARIA references\n       */\n      'aria-labelledby': combineLabelledBy(\n        this.props,\n        title ? contentId + '-title' : null,\n        labelled_by\n      ),\n      'aria-describedby': combineDescribedBy(\n        this.props,\n        contentId + '-content'\n      ),\n\n      /**\n       * If no labelled_by and no title is given,\n       * set a fallback \"dialog_title\"\n       */\n      'aria-label': !title && !labelled_by ? dialog_title : undefined,\n\n      className: classnames(\n        'dnb-modal__content',\n        isTrue(fullscreen)\n          ? 'dnb-modal__content--fullscreen'\n          : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen',\n        container_placement\n          ? `dnb-modal__content--${container_placement || 'right'}`\n          : null,\n        getThemeClasses(this.context?.theme),\n        content_class\n      ),\n      onMouseDown: this.onContentMouseDownHandler,\n      onClick: this.onContentClickHandler,\n    }\n\n    const content =\n      typeof children === 'function'\n        ? children({ ...rest, close })\n        : children\n\n    return (\n      <ModalContext.Provider\n        value={{\n          id: this.props.id,\n          title,\n          hide_close_button,\n          close_button_attributes,\n          close_title,\n          hide,\n          setBackgroundColor: this.setBackgroundColor,\n          onCloseClickHandler: this.onCloseClickHandler,\n          preventClick: this.preventClick,\n          onKeyDownHandler: this.onKeyDownHandler,\n          contentRef: this._contentRef,\n          scrollRef: this._scrollRef,\n          contentId,\n          close,\n        }}\n      >\n        <div\n          id={contentId}\n          /** Sets the color on scroll overflow (at the bottom) */\n          style={\n            (color\n              ? { '--modal-background-color': `var(--color-${color})` }\n              : null) as CSSPropertiesWithVars\n          }\n          {...contentParams}\n        >\n          {content}\n        </div>\n\n        <span\n          className={classnames(\n            'dnb-modal__overlay',\n            hide && 'dnb-modal__overlay--hide',\n            isTrue(no_animation) && 'dnb-modal__overlay--no-animation',\n            isTrue(no_animation_on_mobile) &&\n              'dnb-modal__overlay--no-animation-on-mobile',\n            overlay_class\n          )}\n          aria-hidden={true}\n        />\n      </ModalContext.Provider>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ModalContent.js","names":["_react","_interopRequireDefault","require","_classnames","_keycode","_bodyScrollLock","_componentHelper","_ModalContext","_helpers","_helpers2","_Theme","_shared","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","ModalContent","React","PureComponent","constructor","props","triggeredBy","triggeredByEvent","color","modalRoots","getListOfModalRoots","firstLevel","_this$props","_ii","InteractionInvalidation","setBypassSelector","root_id","bypass_invalidation_selectors","Boolean","activate","modal","_iiLocal","_scrollRef","current","document","addEventListener","onKeyDownHandler","animation_duration","timeoutDuration","parseFloat","clearTimeout","_androidFocusTimeout","setTimeout","_document$activeEleme","_document$activeEleme2","activeElement","tagName","scrollIntoView","e","event","stopPropagation","closeModalContent","_overlayClickRef","currentTarget","prevent_overlay_close","isTrue","ifIsLatest","keycode","mostCurrent","getModalRoot","preventDefault","setState","_contentRef","content_ref","createRef","scroll_ref","_id","id","componentDidMount","no_animation","addToIndex","removeScrollPossibility","setFocus","setAndroidFocusHelper","dispatchCustomElementEvent","process","env","NODE_ENV","lockBody","_lockTimeout","componentWillUnmount","_focusTimeout","removeLocks","removeFromIndex","_this$_ii","revert","revertScrollPossibility","warn","removeAndroidFocusHelper","state","removeEventListener","window","isAndroid","_androidFocusHelper","focus_selector","elem","_focusElement","_focusElement$focus","_focusElement2","_focusElement2$select","focusElement","querySelector","focus","select","noH1Elem","disableBodyScroll","enableBodyScroll","clearAllBodyScrollLocks","_ref","_event$persist","params","persist","close","render","_this$context","_this$props2","hide","title","labelled_by","close_title","dialog_title","hide_close_button","close_button_attributes","no_animation_on_mobile","fullscreen","container_placement","content_class","overlay_class","content_id","children","dialog_role","rest","contentId","makeUniqueId","useDialogRole","IS_MAC","IS_SAFARI","IS_IOS","role","contentParams","combineLabelledBy","combineDescribedBy","className","classnames","getThemeClasses","context","theme","onMouseDown","onContentMouseDownHandler","onClick","onContentClickHandler","content","createElement","Provider","setBackgroundColor","onCloseClickHandler","preventClick","contentRef","scrollRef","style","exports","Context"],"sources":["../../../../src/components/modal/ModalContent.tsx"],"sourcesContent":["/**\n * Web Modal Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n  disableBodyScroll,\n  enableBodyScroll,\n  clearAllBodyScrollLocks,\n} from './bodyScrollLock'\nimport {\n  warn,\n  isTrue,\n  makeUniqueId,\n  InteractionInvalidation,\n  combineLabelledBy,\n  combineDescribedBy,\n  dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport ModalContext from './ModalContext'\nimport { IS_IOS, IS_SAFARI, IS_MAC, isAndroid } from '../../shared/helpers'\nimport { ModalContentProps } from './types'\nimport {\n  getListOfModalRoots,\n  getModalRoot,\n  addToIndex,\n  removeFromIndex,\n} from './helpers'\nimport { getThemeClasses } from '../../shared/Theme'\nimport { Context } from '../../shared'\nimport { ContextProps } from '../../shared/Context'\n\ninterface ModalContentState {\n  triggeredBy: string\n  triggeredByEvent: Event\n  color: string\n}\n\ndeclare global {\n  interface Window {\n    __modalStack: any[]\n  }\n}\n\ninterface CSSPropertiesWithVars extends React.CSSProperties {\n  '--modal-background-color': string\n}\n\nexport default class ModalContent extends React.PureComponent<\n  ModalContentProps,\n  ModalContentState\n> {\n  state = { triggeredBy: null, triggeredByEvent: null, color: null }\n\n  _contentRef: React.RefObject<HTMLElement>\n  _scrollRef: React.RefObject<HTMLElement>\n  _overlayClickRef: { current: null | HTMLElement }\n  _id: string\n  _lockTimeout: NodeJS.Timeout\n  _focusTimeout: NodeJS.Timeout\n  _androidFocusTimeout: NodeJS.Timeout\n  _ii: InteractionInvalidation\n  _iiLocal: InteractionInvalidation\n\n  static contextType = Context\n\n  context!: ContextProps\n\n  constructor(props: ModalContentProps) {\n    super(props)\n    this._contentRef = this.props.content_ref || React.createRef()\n    this._scrollRef = this.props.scroll_ref || React.createRef()\n    this._overlayClickRef = React.createRef()\n\n    // NB: The \"\"._id\" is used in the __modalStack as \"last._id\"\n    this._id = props.id\n  }\n\n  componentDidMount() {\n    const {\n      id = null,\n      no_animation = false,\n      animation_duration = null,\n    } = this.props\n\n    const timeoutDuration: number =\n      typeof animation_duration === 'string'\n        ? parseFloat(animation_duration)\n        : animation_duration\n\n    // Add it to the index at first\n    // we use it later with getListOfModalRoots\n    addToIndex(this)\n\n    // Because of nested modals/drawers, we run this regardless\n    // has to be run at first – so the scrollbar gets removed\n    this.removeScrollPossibility() // forces browser to re-paint\n\n    this.setFocus()\n    this.setAndroidFocusHelper()\n\n    dispatchCustomElementEvent(this, 'on_open', {\n      id,\n    })\n\n    if (isTrue(no_animation) || process.env.NODE_ENV === 'test') {\n      this.lockBody() // forces browser to re-paint\n    } else {\n      this._lockTimeout = setTimeout(this.lockBody, timeoutDuration * 1.2) // a little over --modal-animation-duration\n    }\n  }\n\n  componentWillUnmount() {\n    clearTimeout(this._focusTimeout)\n    clearTimeout(this._lockTimeout)\n    this.removeLocks()\n  }\n\n  lockBody = () => {\n    const modalRoots = getListOfModalRoots()\n    const firstLevel = modalRoots[0]\n\n    if (firstLevel === this) {\n      this._ii = new InteractionInvalidation()\n      this._ii.setBypassSelector(\n        [\n          // Bypass modal content\n          '.dnb-modal__content *',\n          `#dnb-modal-${this.props.root_id || 'root'}`,\n          `#dnb-modal-${this.props.root_id || 'root'} *`,\n\n          // TODO: Eventually in future, make it possible to bypass invalidation from outside\n          // '.dnb-modal--bypass_invalidation',\n          // '.dnb-modal--bypass_invalidation_deep *',\n\n          ...(this.props?.bypass_invalidation_selectors || []),\n        ].filter(Boolean)\n      )\n      this._ii.activate()\n    } else {\n      modalRoots.forEach((modal) => {\n        if (\n          modal !== this &&\n          typeof modal._iiLocal === 'undefined' &&\n          typeof modal._scrollRef !== 'undefined'\n        ) {\n          modal._iiLocal = new InteractionInvalidation()\n          modal._iiLocal.activate(modal._scrollRef.current)\n        }\n      })\n    }\n\n    if (typeof document !== 'undefined') {\n      /** To ensure, we have always a working keydown, we call it both on the element and document */\n      document.addEventListener('keydown', this.onKeyDownHandler)\n    }\n  }\n\n  removeLocks() {\n    const modalRoots = getListOfModalRoots()\n    const firstLevel = modalRoots[0]\n\n    removeFromIndex(this)\n\n    if (firstLevel === this) {\n      this._ii?.revert()\n      this.revertScrollPossibility()\n    } else {\n      try {\n        const modal = modalRoots[modalRoots.length - 2]\n        if (modal !== this && modal._iiLocal) {\n          modal._iiLocal.revert()\n          delete modal._iiLocal\n        }\n      } catch (e) {\n        warn(e)\n      }\n    }\n\n    this.removeAndroidFocusHelper()\n\n    const id = this.props.id\n    const { triggeredBy, triggeredByEvent } = this.state\n    dispatchCustomElementEvent(this, 'on_close', {\n      id,\n      event: triggeredByEvent,\n      triggeredBy: triggeredBy || 'unmount',\n    })\n\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('keydown', this.onKeyDownHandler)\n    }\n  }\n\n  setAndroidFocusHelper() {\n    if (typeof window !== 'undefined' && isAndroid()) {\n      window.addEventListener('resize', this._androidFocusHelper)\n    }\n  }\n\n  removeAndroidFocusHelper() {\n    window.removeEventListener('resize', this._androidFocusHelper)\n    clearTimeout(this._androidFocusTimeout)\n  }\n\n  _androidFocusHelper = () => {\n    const { animation_duration = null } = this.props\n    const timeoutDuration: number =\n      typeof animation_duration === 'string'\n        ? parseFloat(animation_duration)\n        : animation_duration\n\n    clearTimeout(this._androidFocusTimeout)\n    this._androidFocusTimeout = setTimeout(() => {\n      try {\n        if (\n          document.activeElement?.tagName == 'INPUT' ||\n          document.activeElement?.tagName == 'TEXTAREA'\n        ) {\n          document.activeElement.scrollIntoView()\n        }\n      } catch (e) {\n        //\n      }\n    }, timeoutDuration / 2) // Older Android needs a delay here\n  }\n\n  setFocus() {\n    const {\n      focus_selector = null,\n      no_animation = null,\n      animation_duration = null,\n    } = this.props\n    const elem = this._contentRef.current\n    const timeoutDuration: number =\n      typeof animation_duration === 'string'\n        ? parseFloat(animation_duration)\n        : animation_duration\n\n    if (elem) {\n      clearTimeout(this._focusTimeout)\n      this._focusTimeout = setTimeout(\n        () => {\n          try {\n            let focusElement = elem as HTMLInputElement\n\n            // Try to use the \"first-focus\" method first\n            if (typeof focus_selector === 'string') {\n              focusElement = elem.querySelector(focus_selector)\n            }\n\n            focusElement?.focus?.()\n            focusElement?.select?.()\n\n            const noH1Elem = elem.querySelector('h1, h2, h3')\n            if (noH1Elem?.tagName !== 'H1') {\n              warn('A Dialog or Drawer needs a h1 as its first element!')\n            }\n          } catch (e) {\n            warn(e)\n          }\n        },\n        isTrue(no_animation) ? 0 : timeoutDuration || 0\n      ) // with this delay, the user can press esc without an focus action first\n    }\n  }\n\n  removeScrollPossibility() {\n    if (this._scrollRef.current) {\n      disableBodyScroll(this._scrollRef.current)\n    }\n  }\n\n  revertScrollPossibility() {\n    enableBodyScroll(this._scrollRef.current)\n    clearAllBodyScrollLocks()\n  }\n\n  preventClick = (event) => {\n    if (event) {\n      event.stopPropagation()\n    }\n  }\n\n  onCloseClickHandler = (event: React.SyntheticEvent) => {\n    this.closeModalContent(event, { triggeredBy: 'button' })\n  }\n\n  onContentMouseDownHandler = (event: React.SyntheticEvent) => {\n    this._overlayClickRef.current =\n      event.target === event.currentTarget\n        ? (event.target as HTMLElement)\n        : null\n  }\n\n  onContentClickHandler = (event: React.SyntheticEvent) => {\n    /**\n     * Prevent false-positive Modal close,\n     * when e.g. selecting text inside and moving the mouse outside,\n     * we would still get this event fired. There we check if the current click,\n     * has the same target as where the click got initiated.\n     */\n    if (this._overlayClickRef.current !== event.target) {\n      return // stop here\n    }\n    this._overlayClickRef.current = null\n\n    const { prevent_overlay_close } = this.props\n\n    if (!isTrue(prevent_overlay_close)) {\n      this.closeModalContent(event, {\n        triggeredBy: 'overlay',\n        ifIsLatest: false,\n      })\n    }\n  }\n\n  onKeyDownHandler = (event) => {\n    switch (keycode(event)) {\n      case 'esc': {\n        const mostCurrent = getModalRoot(-1)\n\n        if (mostCurrent === this) {\n          event.preventDefault()\n          this.closeModalContent(event, {\n            triggeredBy: 'keyboard',\n          })\n        }\n\n        break\n      }\n    }\n  }\n\n  closeModalContent(event, { triggeredBy, ...params }) {\n    event?.persist?.()\n    this.setState({ triggeredBy, triggeredByEvent: event }, () => {\n      this.props.close(event, {\n        triggeredBy,\n        ...params,\n      })\n    })\n  }\n\n  setBackgroundColor = (color: string) => {\n    this.setState({ color })\n  }\n\n  render() {\n    const {\n      hide,\n      title,\n      labelled_by,\n      id: _id, // eslint-disable-line\n      close_title = 'Lukk',\n      dialog_title = 'Vindu',\n      hide_close_button = false,\n      close_button_attributes,\n      no_animation = false,\n      no_animation_on_mobile = false,\n      fullscreen = 'auto',\n      container_placement = 'right',\n      close,\n      content_class,\n      overlay_class,\n      content_id,\n      children, // eslint-disable-line\n      dialog_role = null,\n      ...rest\n    } = this.props\n    const { color } = this.state\n\n    const contentId = content_id || makeUniqueId('modal-')\n\n    const useDialogRole = !(IS_MAC || IS_SAFARI || IS_IOS)\n    let role = dialog_role || 'dialog'\n    if (!useDialogRole && role === 'dialog') {\n      role = 'region'\n    }\n\n    const contentParams = {\n      /**\n       * Do not use role=\"dialog\" on Safari\n       *\n       * VoiceOver has troubles with role=\"dialog\" and \"Modal in Modal\",\n       * the result is, only the first Modal gets focus (set by Safari)\n       *\n       * Tests have shown: Both VoiceOver are working fine with the:\n       * \"aria-labelledby\" and \"aria-describedby\" approach\n       *\n       */\n      role,\n      'aria-modal': useDialogRole ? true : undefined,\n\n      /**\n       * ARIA references\n       */\n      'aria-labelledby': combineLabelledBy(\n        this.props,\n        title ? contentId + '-title' : null,\n        labelled_by\n      ),\n      'aria-describedby': combineDescribedBy(\n        this.props,\n        contentId + '-content'\n      ),\n\n      /**\n       * If no labelled_by and no title is given,\n       * set a fallback \"dialog_title\"\n       */\n      'aria-label': !title && !labelled_by ? dialog_title : undefined,\n\n      className: classnames(\n        'dnb-modal__content',\n        isTrue(fullscreen)\n          ? 'dnb-modal__content--fullscreen'\n          : fullscreen === 'auto' && 'dnb-modal__content--auto-fullscreen',\n        container_placement\n          ? `dnb-modal__content--${container_placement || 'right'}`\n          : null,\n        getThemeClasses(this.context?.theme),\n        content_class\n      ),\n      onMouseDown: this.onContentMouseDownHandler,\n      onClick: this.onContentClickHandler,\n    }\n\n    const content =\n      typeof children === 'function'\n        ? children({ ...rest, close })\n        : children\n\n    return (\n      <ModalContext.Provider\n        value={{\n          id: this.props.id,\n          title,\n          hide_close_button,\n          close_button_attributes,\n          close_title,\n          hide,\n          setBackgroundColor: this.setBackgroundColor,\n          onCloseClickHandler: this.onCloseClickHandler,\n          preventClick: this.preventClick,\n          onKeyDownHandler: this.onKeyDownHandler,\n          contentRef: this._contentRef,\n          scrollRef: this._scrollRef,\n          contentId,\n          close,\n        }}\n      >\n        <div\n          id={contentId}\n          /** Sets the color on scroll overflow (at the bottom) */\n          style={\n            (color\n              ? { '--modal-background-color': `var(--color-${color})` }\n              : null) as CSSPropertiesWithVars\n          }\n          {...contentParams}\n        >\n          {content}\n        </div>\n\n        <span\n          className={classnames(\n            'dnb-modal__overlay',\n            hide && 'dnb-modal__overlay--hide',\n            isTrue(no_animation) && 'dnb-modal__overlay--no-animation',\n            isTrue(no_animation_on_mobile) &&\n              'dnb-modal__overlay--no-animation-on-mobile',\n            overlay_class\n          )}\n          aria-hidden={true}\n        />\n      </ModalContext.Provider>\n    )\n  }\n}\n"],"mappings":"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"}

package/cjs/components/progress-indicator/style/dnb-progress-indicator.css

@@ -10,6 +10,10 @@
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-background-color: grey;
+  --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-background-color: grey;
+  --progress-indicator-linear-bar-color: var(--color-black);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -45,6 +49,10 @@
 }
 .dnb-progress-indicator__circular svg {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
@@ -77,12 +85,44 @@
   stroke-linecap: round;
 }
 .dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
-  stroke: grey;
+  stroke: var(--progress-indicator-circular-background-color);
 }
 .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-black);
+  stroke: var(--progress-indicator-circular-bar-color);
+}
+.dnb-progress-indicator__circular--small {
+  width: 1rem;
+  height: 1rem;
+}
+.dnb-progress-indicator__circular--medium {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.dnb-progress-indicator__circular--large {
+  width: 3.5rem;
+  height: 3.5rem;
+}
+.dnb-progress-indicator__circular--huge {
+  width: 20rem;
+  height: 20rem;
+}
+.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.1;
+}
+.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.3;
+}
+.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.5;
+}
+.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.7;
+}
+.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
+  stroke-width: 3.9;
 }
 .dnb-progress-indicator__linear {
+  background-color: var(--progress-indicator-linear-background-color);
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -91,6 +131,7 @@
   border-radius: 0.25rem;
 }
 .dnb-progress-indicator__linear__bar {
+  background-color: var(--progress-indicator-linear-bar-color);
   width: 100%;
   position: absolute;
   left: 0;
@@ -110,6 +151,22 @@
   width: auto;
   animation: progress-indicator-linear-bar-2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
 }
+.dnb-progress-indicator__linear--small {
+  height: 0.25rem;
+  border-radius: 0.125rem;
+}
+.dnb-progress-indicator__linear--medium {
+  height: 1rem;
+  border-radius: 0.5rem;
+}
+.dnb-progress-indicator__linear--large {
+  height: 1.5rem;
+  border-radius: 0.75rem;
+}
+.dnb-progress-indicator__linear--huge {
+  height: 2rem;
+  border-radius: 1rem;
+}
 html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation {
   left: -35%;
   right: 100%;

package/cjs/components/progress-indicator/style/dnb-progress-indicator.min.css

@@ -1 +1 @@
-.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{margin:0 1rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{margin-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:grey}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--color-black)}.dnb-progress-indicator__linear{border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}
+.dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{margin:0 1rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{margin-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}

package/cjs/components/progress-indicator/style/dnb-progress-indicator.scss

@@ -10,6 +10,10 @@
   --progress-indicator-circular-circle: 88;
   --progress-indicator-circular-circle-offset--min: 88;
   --progress-indicator-circular-circle-offset--max: 1;
+  --progress-indicator-circular-background-color: grey;
+  --progress-indicator-circular-bar-color: var(--color-black);
+  --progress-indicator-linear-background-color: grey;
+  --progress-indicator-linear-bar-color: var(--color-black);
 
   position: relative;
   display: inline-flex;
@@ -60,6 +64,7 @@
 
     svg {
       position: absolute;
+      inset: 0;
       width: 100%;
       height: 100%;
     }
@@ -109,16 +114,58 @@
     }
 
     &__line.light &__circle {
-      stroke: grey;
+      stroke: var(--progress-indicator-circular-background-color);
     }
 
     &__line.dark &__circle {
-      stroke: var(--color-black);
+      stroke: var(--progress-indicator-circular-bar-color);
+    }
+
+    &--small {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &--medium {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    &--large {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    &--huge {
+      width: 20rem;
+      height: 20rem;
+    }
+
+    // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
+    &--small &__line.dark &__circle {
+      stroke-width: 3.1;
+    }
+
+    &--medium &__line.dark &__circle {
+      stroke-width: 3.3;
+    }
+
+    &--default &__line.dark &__circle {
+      stroke-width: 3.5;
+    }
+
+    &--large &__line.dark &__circle {
+      stroke-width: 3.7;
+    }
+
+    &--huge &__line.dark &__circle {
+      stroke-width: 3.9;
     }
   }
 
   // linear variant
   &__linear {
+    background-color: var(--progress-indicator-linear-background-color);
     position: relative;
     overflow: hidden;
     width: 100%;
@@ -129,6 +176,7 @@
     border-radius: 0.25rem;
 
     &__bar {
+      background-color: var(--progress-indicator-linear-bar-color);
       width: 100%;
       position: absolute;
       left: 0;
@@ -154,6 +202,26 @@
         cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
     }
 
+    &--small {
+      height: 0.25rem;
+      border-radius: 0.125rem;
+    }
+
+    &--medium {
+      height: 1rem;
+      border-radius: 0.5rem;
+    }
+
+    &--large {
+      height: 1.5rem;
+      border-radius: 0.75rem;
+    }
+
+    &--huge {
+      height: 2rem;
+      border-radius: 1rem;
+    }
+
     html[data-visual-test] &__bar1-animation {
       left: -35%;
       right: 100%;

package/cjs/components/progress-indicator/style/themes/dnb-progress-indicator-theme-sbanken.css

@@ -0,0 +1,18 @@
+/*
+* ProgressIndicator theme for Sbanken
+*
+*/
+.dnb-progress-indicator {
+  --progress-indicator-circular-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-circular-bar-color: var(
+    --sb-color-purple-alternative
+  );
+  --progress-indicator-linear-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-linear-bar-color: var(
+    --sb-color-purple-alternative
+  );
+}

package/cjs/components/progress-indicator/style/themes/dnb-progress-indicator-theme-sbanken.min.css

@@ -0,0 +1,9 @@
+.dnb-progress-indicator{--progress-indicator-circular-background-color:var(
+    --sb-color-gray-light-2
+  );--progress-indicator-circular-bar-color:var(
+    --sb-color-purple-alternative
+  );--progress-indicator-linear-background-color:var(
+    --sb-color-gray-light-2
+  );--progress-indicator-linear-bar-color:var(
+    --sb-color-purple-alternative
+  )}

package/cjs/components/progress-indicator/style/themes/dnb-progress-indicator-theme-sbanken.scss

@@ -0,0 +1,19 @@
+/*
+* ProgressIndicator theme for Sbanken
+*
+*/
+
+.dnb-progress-indicator {
+  --progress-indicator-circular-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-circular-bar-color: var(
+    --sb-color-purple-alternative
+  );
+  --progress-indicator-linear-background-color: var(
+    --sb-color-gray-light-2
+  );
+  --progress-indicator-linear-bar-color: var(
+    --sb-color-purple-alternative
+  );
+}

package/cjs/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.css

@@ -2,68 +2,9 @@
 * ProgressIndicator theme
 *
 */
-/*
- * Utilities
- */
-.dnb-progress-indicator__circular--small {
-  width: 1rem;
-  height: 1rem;
-}
-.dnb-progress-indicator__circular--medium {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.dnb-progress-indicator__circular--large {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-.dnb-progress-indicator__circular--huge {
-  width: 20rem;
-  height: 20rem;
-}
-.dnb-progress-indicator__circular__line {
-  animation-duration: 2s;
-}
-.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-mint-green);
-}
-.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke: var(--color-emerald-green);
-}
-.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.1;
-}
-.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.3;
-}
-.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.5;
-}
-.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.7;
-}
-.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle {
-  stroke-width: 3.9;
-}
-.dnb-progress-indicator__linear {
-  background-color: var(--color-black-8);
-}
-.dnb-progress-indicator__linear--small {
-  height: 0.25rem;
-  border-radius: 0.125rem;
-}
-.dnb-progress-indicator__linear--medium {
-  height: 1rem;
-  border-radius: 0.5rem;
-}
-.dnb-progress-indicator__linear--large {
-  height: 1.5rem;
-  border-radius: 0.75rem;
-}
-.dnb-progress-indicator__linear--huge {
-  height: 2rem;
-  border-radius: 1rem;
-}
-.dnb-progress-indicator__linear__bar {
-  background-color: var(--color-sea-green);
+.dnb-progress-indicator {
+  --progress-indicator-circular-background-color: var(--color-mint-green);
+  --progress-indicator-circular-bar-color: var(--color-emerald-green);
+  --progress-indicator-linear-background-color: var(--color-black-8);
+  --progress-indicator-linear-bar-color: var(--color-sea-green);
 }

package/cjs/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.min.css

@@ -1 +1 @@
-.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular__line{animation-duration:2s}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--color-mint-green)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--color-emerald-green)}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--color-black-8)}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}.dnb-progress-indicator__linear__bar{background-color:var(--color-sea-green)}
+.dnb-progress-indicator{--progress-indicator-circular-background-color:var(--color-mint-green);--progress-indicator-circular-bar-color:var(--color-emerald-green);--progress-indicator-linear-background-color:var(--color-black-8);--progress-indicator-linear-bar-color:var(--color-sea-green)}

package/cjs/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss

@@ -3,8 +3,6 @@
 *
 */
 
-@import '../../../../style/core/utilities.scss';
-
 .dnb-progress-indicator {
   // to get a reverse #v3 - use the following setup, strokeDashoffset has also to be:
   // const strokeDashoffset = -((maxOffset / 100) * progress-indicator)
@@ -12,88 +10,8 @@
   // --progress-indicator-circular-circle-offset--min: -1;
   // --progress-indicator-circular-circle-offset--max: -88;
 
-  // circular variant
-  &__circular {
-    &--small {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &--medium {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    &--large {
-      width: 3.5rem;
-      height: 3.5rem;
-    }
-
-    &--huge {
-      width: 20rem;
-      height: 20rem;
-    }
-
-    &__line {
-      animation-duration: 2s;
-    }
-
-    &__line.light &__circle {
-      stroke: var(--color-mint-green);
-    }
-
-    &__line.dark &__circle {
-      stroke: var(--color-emerald-green);
-    }
-
-    // compensate for 'aliasing artifacts' seen when rendering same sized, lighter on dark elements
-    &--small &__line.dark &__circle {
-      stroke-width: 3.1;
-    }
-
-    &--medium &__line.dark &__circle {
-      stroke-width: 3.3;
-    }
-
-    &--default &__line.dark &__circle {
-      stroke-width: 3.5;
-    }
-
-    &--large &__line.dark &__circle {
-      stroke-width: 3.7;
-    }
-
-    &--huge &__line.dark &__circle {
-      stroke-width: 3.9;
-    }
-  }
-
-  // linear variant
-  &__linear {
-    background-color: var(--color-black-8);
-
-    &--small {
-      height: 0.25rem;
-      border-radius: 0.125rem;
-    }
-
-    &--medium {
-      height: 1rem;
-      border-radius: 0.5rem;
-    }
-
-    &--large {
-      height: 1.5rem;
-      border-radius: 0.75rem;
-    }
-
-    &--huge {
-      height: 2rem;
-      border-radius: 1rem;
-    }
-
-    &__bar {
-      background-color: var(--color-sea-green);
-    }
-  }
+  --progress-indicator-circular-background-color: var(--color-mint-green);
+  --progress-indicator-circular-bar-color: var(--color-emerald-green);
+  --progress-indicator-linear-background-color: var(--color-black-8);
+  --progress-indicator-linear-bar-color: var(--color-sea-green);
 }

package/cjs/components/section/Section.js

@@ -35,7 +35,7 @@ function Section(localProps) {
     } = props,
     attributes = _objectWithoutProperties(props, _excluded);
   const params = _objectSpread({
-    className: (0, _classnames.default)(`dnb-section dnb-section--${variant ?? (style_type || 'default')}`, (0, _SpacingHelper.createSpacingClasses)(props), className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`)
+    className: (0, _classnames.default)(`dnb-section dnb-section--${variant ? variant : style_type || 'default'}`, (0, _SpacingHelper.createSpacingClasses)(props), className, spacing && `dnb-section--spacing-${(0, _componentHelper.isTrue)(spacing) ? 'large' : spacing}`)
   }, attributes);
   const internalRef = _react.default.useRef();
   const elementRef = inner_ref || internalRef;