@dnb/eufemia 10.8.0 → 10.9.0

package/cjs/shared/useMedia.js

@@ -35,10 +35,36 @@ function useMedia() {
     disabled,
     log
   } = props;
-  const makeResult = () => {
-    return Object.entries(queries).reduce((acc, _ref) => {
+  const context = _react.default.useContext(_Context.default);
+  const refs = _react.default.useRef({});
+  const defaults = _react.default.useRef({});
+  const disabledRef = _react.default.useRef(disabled);
+  const [result, updateRerender] = _react.default.useState(makeResult);
+  _react.default.useEffect(() => {
+    if (Object.keys(refs.current).length) {
+      makeResult();
+    }
+    return removeListeners;
+  }, []);
+  _react.default.useEffect(() => {
+    if (disabledRef.current && !disabled) {
+      updateRerender(makeResult());
+    }
+    disabledRef.current = disabled;
+  }, [disabled]);
+  return result;
+  function removeListeners() {
+    Object.entries(refs.current).forEach(_ref => {
+      var _item$event;
+      let [key, item] = _ref;
+      item === null || item === void 0 ? void 0 : (_item$event = item.event) === null || _item$event === void 0 ? void 0 : _item$event.call(item);
+      delete refs.current[key];
+    });
+  }
+  function makeResult() {
+    return Object.entries(queries).reduce((acc, _ref2) => {
       var _item$mediaQueryList;
-      let [key, when] = _ref;
+      let [key, when] = _ref2;
       const name = `is${(0, _componentHelper.toPascalCase)(key)}`;
       if (disabled) {
         acc[name] = false;
@@ -55,12 +81,12 @@ function useMedia() {
     }, {
       isSSR: !(0, _MediaQueryUtils.isMatchMediaSupported)()
     });
-  };
-  const runQuery = _ref2 => {
+  }
+  function runQuery(_ref3) {
     let {
       when,
       name
-    } = _ref2;
+    } = _ref3;
     if (!(0, _MediaQueryUtils.isMatchMediaSupported)()) {
       return;
     }
@@ -82,22 +108,6 @@ function useMedia() {
       event,
       mediaQueryList
     };
-  };
-  _react.default.useEffect(() => {
-    if (disabledRef.current && !disabled) {
-      updateRerender(makeResult());
-    }
-    disabledRef.current = disabled;
-  }, [disabled]);
-  _react.default.useEffect(() => removeListeners, []);
-  const context = _react.default.useContext(_Context.default);
-  const refs = _react.default.useRef({});
-  const defaults = _react.default.useRef({});
-  const disabledRef = _react.default.useRef(disabled);
-  const [result, updateRerender] = _react.default.useState(makeResult);
-  const removeListeners = () => {
-    Object.values(refs.current).forEach(item => (item === null || item === void 0 ? void 0 : item.event) && item.event());
-  };
-  return result;
+  }
 }
 //# sourceMappingURL=useMedia.js.map

package/cjs/shared/useMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.js","names":["_react","_interopRequireDefault","require","_Context","_MediaQueryUtils","_componentHelper","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","queries","small","min","max","medium","large","exports","useMedia","props","disabled","log","makeResult","entries","reduce","acc","_ref","_item$mediaQueryList","when","name","toPascalCase","defaults","current","item","runQuery","mediaQueryList","matches","refs","isSSR","isMatchMediaSupported","_ref2","makeMediaQueryList","context","breakpoints","event","createMediaQueryListener","match","disabledRef","state","result","updateRerender","React","useEffect","removeListeners","useContext","Context","useRef","useState","values"],"sources":["../../../src/shared/useMedia.tsx"],"sourcesContent":["import React from 'react'\nimport Context from './Context'\nimport {\n  makeMediaQueryList,\n  createMediaQueryListener,\n  isMatchMediaSupported,\n  MediaQueryCondition,\n} from './MediaQueryUtils'\nimport type { MediaQueryListener } from './MediaQueryUtils'\nimport { toPascalCase } from './component-helper'\n\nexport type UseMediaProps = {\n  /**\n   * If set to true, no MediaQuery will be used.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * For debugging\n   */\n  log?: boolean\n}\n\nexport type UseMediaQueries = {\n  small: MediaQueryCondition\n  medium: MediaQueryCondition\n  large: MediaQueryCondition\n}\n\nexport const queries: UseMediaQueries = {\n  small: { min: 0, max: 'small' },\n  medium: { min: 'small', max: 'medium' },\n  large: { min: 'medium' },\n}\n\nexport type UseMediaResult = {\n  isSmall: boolean\n  isMedium: boolean\n  isLarge: boolean\n  isSSR: boolean\n}\n\n/**\n * Internal stuff\n */\n\ntype UseMediaItem = {\n  event: MediaQueryListener\n  mediaQueryList: MediaQueryList\n}\n\ntype UseMediaQueryProps = {\n  name: string\n  when: MediaQueryCondition\n}\n\nexport default function useMedia(\n  props: UseMediaProps = {}\n): UseMediaResult {\n  const { disabled, log } = props\n\n  const makeResult = () => {\n    return Object.entries(queries).reduce(\n      (acc, [key, when]) => {\n        const name = `is${toPascalCase(key)}`\n\n        if (disabled) {\n          acc[name] = false\n          return acc\n        }\n\n        defaults.current[name] = false\n\n        const item = runQuery({\n          name,\n          when,\n        })\n\n        acc[name] = item?.mediaQueryList?.matches || false\n\n        refs.current[key] = item\n\n        return acc\n      },\n      { isSSR: !isMatchMediaSupported() }\n    ) as UseMediaResult\n  }\n\n  const runQuery = ({ when, name }: UseMediaQueryProps): UseMediaItem => {\n    if (!isMatchMediaSupported()) {\n      return // do nothing\n    }\n\n    const mediaQueryList = makeMediaQueryList(\n      {\n        when,\n        disabled,\n        log,\n      },\n\n      context.breakpoints\n    )\n\n    const event = createMediaQueryListener(mediaQueryList, (match) => {\n      if (!disabledRef.current && match) {\n        const state = {\n          ...defaults.current,\n          isSSR: result.isSSR,\n        } as UseMediaResult\n        state[name] = match\n        updateRerender(state)\n      }\n    })\n\n    return { event, mediaQueryList }\n  }\n\n  React.useEffect(() => {\n    // If it was disabled before\n    if (disabledRef.current && !disabled) {\n      updateRerender(makeResult())\n    }\n    disabledRef.current = disabled\n  }, [disabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => removeListeners, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const context = React.useContext(Context)\n\n  const refs = React.useRef({})\n  const defaults = React.useRef({})\n  const disabledRef = React.useRef(disabled)\n  const [result, updateRerender] =\n    React.useState<UseMediaResult>(makeResult)\n  const removeListeners = () => {\n    Object.values(refs.current).forEach(\n      (item: UseMediaItem) => item?.event && item.event()\n    )\n  }\n\n  return result\n}\n"],"mappings":"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"}
+{"version":3,"file":"useMedia.js","names":["_react","_interopRequireDefault","require","_Context","_MediaQueryUtils","_componentHelper","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","queries","small","min","max","medium","large","exports","useMedia","props","disabled","log","context","React","useContext","Context","refs","useRef","defaults","disabledRef","result","updateRerender","useState","makeResult","useEffect","current","removeListeners","entries","_ref","_item$event","item","event","reduce","acc","_ref2","_item$mediaQueryList","when","name","toPascalCase","runQuery","mediaQueryList","matches","isSSR","isMatchMediaSupported","_ref3","makeMediaQueryList","breakpoints","createMediaQueryListener","match","state"],"sources":["../../../src/shared/useMedia.tsx"],"sourcesContent":["import React from 'react'\nimport Context from './Context'\nimport {\n  makeMediaQueryList,\n  createMediaQueryListener,\n  isMatchMediaSupported,\n  MediaQueryCondition,\n} from './MediaQueryUtils'\nimport type { MediaQueryListener } from './MediaQueryUtils'\nimport { toPascalCase } from './component-helper'\n\nexport type UseMediaProps = {\n  /**\n   * If set to true, no MediaQuery will be used.\n   * Default: false\n   */\n  disabled?: boolean\n\n  /**\n   * For debugging\n   */\n  log?: boolean\n}\n\nexport type UseMediaQueries = {\n  small: MediaQueryCondition\n  medium: MediaQueryCondition\n  large: MediaQueryCondition\n}\n\nexport const queries: UseMediaQueries = {\n  small: { min: 0, max: 'small' },\n  medium: { min: 'small', max: 'medium' },\n  large: { min: 'medium' },\n}\n\nexport type UseMediaResult = {\n  isSmall: boolean\n  isMedium: boolean\n  isLarge: boolean\n  isSSR: boolean\n}\n\n/**\n * Internal stuff\n */\n\ntype UseMediaItem = {\n  event: MediaQueryListener\n  mediaQueryList: MediaQueryList\n}\n\ntype UseMediaQueryProps = {\n  name: string\n  when: MediaQueryCondition\n}\n\nexport default function useMedia(\n  props: UseMediaProps = {}\n): UseMediaResult {\n  const { disabled, log } = props\n\n  const context = React.useContext(Context)\n\n  const refs = React.useRef({})\n  const defaults = React.useRef({})\n  const disabledRef = React.useRef(disabled)\n  const [result, updateRerender] =\n    React.useState<UseMediaResult>(makeResult)\n\n  React.useEffect(() => {\n    // In StrictMode, the keys got empty,\n    // so we make the result again\n    if (Object.keys(refs.current).length) {\n      makeResult()\n    }\n\n    return removeListeners\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  React.useEffect(() => {\n    // If it was disabled before\n    if (disabledRef.current && !disabled) {\n      updateRerender(makeResult())\n    }\n    disabledRef.current = disabled\n  }, [disabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return result\n\n  function removeListeners() {\n    Object.entries(refs.current).forEach(\n      ([key, item]: [string, UseMediaItem]) => {\n        item?.event?.()\n        delete refs.current[key]\n      }\n    )\n  }\n\n  function makeResult() {\n    return Object.entries(queries).reduce(\n      (acc, [key, when]) => {\n        const name = `is${toPascalCase(key)}`\n\n        if (disabled) {\n          acc[name] = false\n          return acc\n        }\n\n        defaults.current[name] = false\n\n        const item = runQuery({\n          name,\n          when,\n        })\n\n        acc[name] = item?.mediaQueryList?.matches || false\n\n        refs.current[key] = item\n\n        return acc\n      },\n      { isSSR: !isMatchMediaSupported() }\n    ) as UseMediaResult\n  }\n\n  function runQuery({ when, name }: UseMediaQueryProps): UseMediaItem {\n    if (!isMatchMediaSupported()) {\n      return // do nothing\n    }\n\n    const mediaQueryList = makeMediaQueryList(\n      {\n        when,\n        disabled,\n        log,\n      },\n\n      context.breakpoints\n    )\n\n    const event = createMediaQueryListener(mediaQueryList, (match) => {\n      if (!disabledRef.current && match) {\n        const state = {\n          ...defaults.current,\n          isSSR: result.isSSR,\n        } as UseMediaResult\n        state[name] = match\n        updateRerender(state)\n      }\n    })\n\n    return { event, mediaQueryList }\n  }\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AAOA,IAAAG,gBAAA,GAAAH,OAAA;AAAiD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,QAAAC,MAAA,EAAAC,cAAA,QAAAC,IAAA,GAAAC,MAAA,CAAAD,IAAA,CAAAF,MAAA,OAAAG,MAAA,CAAAC,qBAAA,QAAAC,OAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAJ,MAAA,GAAAC,cAAA,KAAAI,OAAA,GAAAA,OAAA,CAAAC,MAAA,WAAAC,GAAA,WAAAJ,MAAA,CAAAK,wBAAA,CAAAR,MAAA,EAAAO,GAAA,EAAAE,UAAA,OAAAP,IAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,IAAA,EAAAG,OAAA,YAAAH,IAAA;AAAA,SAAAU,cAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,WAAAF,SAAA,CAAAD,CAAA,IAAAC,SAAA,CAAAD,CAAA,QAAAA,CAAA,OAAAf,OAAA,CAAAI,MAAA,CAAAc,MAAA,OAAAC,OAAA,WAAAC,GAAA,IAAAC,eAAA,CAAAP,MAAA,EAAAM,GAAA,EAAAF,MAAA,CAAAE,GAAA,SAAAhB,MAAA,CAAAkB,yBAAA,GAAAlB,MAAA,CAAAmB,gBAAA,CAAAT,MAAA,EAAAV,MAAA,CAAAkB,yBAAA,CAAAJ,MAAA,KAAAlB,OAAA,CAAAI,MAAA,CAAAc,MAAA,GAAAC,OAAA,WAAAC,GAAA,IAAAhB,MAAA,CAAAoB,cAAA,CAAAV,MAAA,EAAAM,GAAA,EAAAhB,MAAA,CAAAK,wBAAA,CAAAS,MAAA,EAAAE,GAAA,iBAAAN,MAAA;AAAA,SAAAO,gBAAAxB,GAAA,EAAAuB,GAAA,EAAAK,KAAA,IAAAL,GAAA,GAAAM,cAAA,CAAAN,GAAA,OAAAA,GAAA,IAAAvB,GAAA,IAAAO,MAAA,CAAAoB,cAAA,CAAA3B,GAAA,EAAAuB,GAAA,IAAAK,KAAA,EAAAA,KAAA,EAAAf,UAAA,QAAAiB,YAAA,QAAAC,QAAA,oBAAA/B,GAAA,CAAAuB,GAAA,IAAAK,KAAA,WAAA5B,GAAA;AAAA,SAAA6B,eAAAG,GAAA,QAAAT,GAAA,GAAAU,YAAA,CAAAD,GAAA,2BAAAT,GAAA,gBAAAA,GAAA,GAAAW,MAAA,CAAAX,GAAA;AAAA,SAAAU,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAK,IAAA,CAAAP,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAE,SAAA,4DAAAP,IAAA,gBAAAF,MAAA,GAAAU,MAAA,EAAAT,KAAA;AAqB1C,MAAMU,OAAwB,GAAG;EACtCC,KAAK,EAAE;IAAEC,GAAG,EAAE,CAAC;IAAEC,GAAG,EAAE;EAAQ,CAAC;EAC/BC,MAAM,EAAE;IAAEF,GAAG,EAAE,OAAO;IAAEC,GAAG,EAAE;EAAS,CAAC;EACvCE,KAAK,EAAE;IAAEH,GAAG,EAAE;EAAS;AACzB,CAAC;AAAAI,OAAA,CAAAN,OAAA,GAAAA,OAAA;AAuBc,SAASO,QAAQA,CAAA,EAEd;EAAA,IADhBC,KAAoB,GAAAlC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAqB,SAAA,GAAArB,SAAA,MAAG,CAAC,CAAC;EAEzB,MAAM;IAAEmC,QAAQ;IAAEC;EAAI,CAAC,GAAGF,KAAK;EAE/B,MAAMG,OAAO,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EAEzC,MAAMC,IAAI,GAAGH,cAAK,CAACI,MAAM,CAAC,CAAC,CAAC,CAAC;EAC7B,MAAMC,QAAQ,GAAGL,cAAK,CAACI,MAAM,CAAC,CAAC,CAAC,CAAC;EACjC,MAAME,WAAW,GAAGN,cAAK,CAACI,MAAM,CAACP,QAAQ,CAAC;EAC1C,MAAM,CAACU,MAAM,EAAEC,cAAc,CAAC,GAC5BR,cAAK,CAACS,QAAQ,CAAiBC,UAAU,CAAC;EAE5CV,cAAK,CAACW,SAAS,CAAC,MAAM;IAGpB,IAAI7D,MAAM,CAACD,IAAI,CAACsD,IAAI,CAACS,OAAO,CAAC,CAACjD,MAAM,EAAE;MACpC+C,UAAU,CAAC,CAAC;IACd;IAEA,OAAOG,eAAe;EACxB,CAAC,EAAE,EAAE,CAAC;EAENb,cAAK,CAACW,SAAS,CAAC,MAAM;IAEpB,IAAIL,WAAW,CAACM,OAAO,IAAI,CAACf,QAAQ,EAAE;MACpCW,cAAc,CAACE,UAAU,CAAC,CAAC,CAAC;IAC9B;IACAJ,WAAW,CAACM,OAAO,GAAGf,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOU,MAAM;EAEb,SAASM,eAAeA,CAAA,EAAG;IACzB/D,MAAM,CAACgE,OAAO,CAACX,IAAI,CAACS,OAAO,CAAC,CAAC/C,OAAO,CAClCkD,IAAA,IAAyC;MAAA,IAAAC,WAAA;MAAA,IAAxC,CAAClD,GAAG,EAAEmD,IAAI,CAAyB,GAAAF,IAAA;MAClCE,IAAI,aAAJA,IAAI,wBAAAD,WAAA,GAAJC,IAAI,CAAEC,KAAK,cAAAF,WAAA,uBAAXA,WAAA,CAAA/B,IAAA,CAAAgC,IAAc,CAAC;MACf,OAAOd,IAAI,CAACS,OAAO,CAAC9C,GAAG,CAAC;IAC1B,CACF,CAAC;EACH;EAEA,SAAS4C,UAAUA,CAAA,EAAG;IACpB,OAAO5D,MAAM,CAACgE,OAAO,CAAC1B,OAAO,CAAC,CAAC+B,MAAM,CACnC,CAACC,GAAG,EAAAC,KAAA,KAAkB;MAAA,IAAAC,oBAAA;MAAA,IAAhB,CAACxD,GAAG,EAAEyD,IAAI,CAAC,GAAAF,KAAA;MACf,MAAMG,IAAI,GAAI,KAAI,IAAAC,6BAAY,EAAC3D,GAAG,CAAE,EAAC;MAErC,IAAI+B,QAAQ,EAAE;QACZuB,GAAG,CAACI,IAAI,CAAC,GAAG,KAAK;QACjB,OAAOJ,GAAG;MACZ;MAEAf,QAAQ,CAACO,OAAO,CAACY,IAAI,CAAC,GAAG,KAAK;MAE9B,MAAMP,IAAI,GAAGS,QAAQ,CAAC;QACpBF,IAAI;QACJD;MACF,CAAC,CAAC;MAEFH,GAAG,CAACI,IAAI,CAAC,GAAG,CAAAP,IAAI,aAAJA,IAAI,wBAAAK,oBAAA,GAAJL,IAAI,CAAEU,cAAc,cAAAL,oBAAA,uBAApBA,oBAAA,CAAsBM,OAAO,KAAI,KAAK;MAElDzB,IAAI,CAACS,OAAO,CAAC9C,GAAG,CAAC,GAAGmD,IAAI;MAExB,OAAOG,GAAG;IACZ,CAAC,EACD;MAAES,KAAK,EAAE,CAAC,IAAAC,sCAAqB,EAAC;IAAE,CACpC,CAAC;EACH;EAEA,SAASJ,QAAQA,CAAAK,KAAA,EAAmD;IAAA,IAAlD;MAAER,IAAI;MAAEC;IAAyB,CAAC,GAAAO,KAAA;IAClD,IAAI,CAAC,IAAAD,sCAAqB,EAAC,CAAC,EAAE;MAC5B;IACF;IAEA,MAAMH,cAAc,GAAG,IAAAK,mCAAkB,EACvC;MACET,IAAI;MACJ1B,QAAQ;MACRC;IACF,CAAC,EAEDC,OAAO,CAACkC,WACV,CAAC;IAED,MAAMf,KAAK,GAAG,IAAAgB,yCAAwB,EAACP,cAAc,EAAGQ,KAAK,IAAK;MAChE,IAAI,CAAC7B,WAAW,CAACM,OAAO,IAAIuB,KAAK,EAAE;QACjC,MAAMC,KAAK,GAAA7E,aAAA,CAAAA,aAAA,KACN8C,QAAQ,CAACO,OAAO;UACnBiB,KAAK,EAAEtB,MAAM,CAACsB;QAAK,EACF;QACnBO,KAAK,CAACZ,IAAI,CAAC,GAAGW,KAAK;QACnB3B,cAAc,CAAC4B,KAAK,CAAC;MACvB;IACF,CAAC,CAAC;IAEF,OAAO;MAAElB,KAAK;MAAES;IAAe,CAAC;EAClC;AACF"}

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

@@ -4289,6 +4289,10 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   --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;
@@ -4324,6 +4328,10 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
 }
 .dnb-progress-indicator__circular svg {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
@@ -4356,12 +4364,44 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   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%;
@@ -4370,6 +4410,7 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   border-radius: 0.25rem;
 }
 .dnb-progress-indicator__linear__bar {
+  background-color: var(--progress-indicator-linear-bar-color);
   width: 100%;
   position: absolute;
   left: 0;
@@ -4389,6 +4430,22 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation {
   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%;
@@ -4754,6 +4811,13 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 /*
  * Utilities
  */
+.dnb-skeleton {
+  --skeleton-delay: 5s;
+}
+.dnb-skeleton img,
+.dnb-skeleton video {
+  filter: brightness(0%) contrast(0%) opacity(0.5);
+}
 .dnb-skeleton--block {
   display: block;
 }
@@ -4787,6 +4851,18 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   background: none !important;
   box-shadow: none !important;
 }
+.dnb-skeleton--shape.dnb-skeleton::before {
+  background-color: var(--skeleton-color) !important;
+}
+.dnb-skeleton--shape.dnb-skeleton::after {
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
+  background-repeat: repeat !important;
+  background-size: 100% !important;
+  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  animation: skeletonLinearAnimation 1.5s linear infinite var(--skeleton-delay);
+}
 .dnb-skeleton--code pre,
 .dnb-skeleton--code pre *,
 .dnb-skeleton--code code,
@@ -4804,6 +4880,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   font-family: var(--font-family-default) !important;
   font-style: unset !important;
 }
+.dnb-skeleton--font-only::marker, .dnb-skeleton--font::marker, .dnb-skeleton--font .dnb-skeleton--show-font::marker, .dnb-skeleton--font .dnb-p::marker {
+  color: var(--skeleton-color);
+}
 .dnb-skeleton--font, .dnb-skeleton--font .dnb-skeleton--show-font, .dnb-skeleton--font .dnb-p {
   background-position-y: 50% !important;
   background-repeat: no-repeat !important;
@@ -4811,6 +4890,12 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   -webkit-text-fill-color: transparent !important;
   -webkit-background-clip: text !important;
           background-clip: text !important;
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px, var(--skeleton-color--contrast) 2px, transparent 0, transparent 6px) !important;
+  background-image: repeating-linear-gradient(-45deg, var(--skeleton-color--contrast) 1px 2px, transparent 0 6px) !important;
+  --border-color: var(--skeleton-color);
+  background-color: var(--skeleton-color) !important;
+  background-position-x: 30rem;
+  animation: skeletonFontAnimation 5s linear infinite var(--skeleton-delay);
 }
 html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font, html[data-visual-test] .dnb-skeleton--font .dnb-p {
   animation: none !important;
@@ -4836,6 +4921,28 @@ html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton
   animation: none !important;
 }
 
+@keyframes skeletonLinearAnimation {
+  0% {
+    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
+  }
+  50% {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  100% {
+    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+            clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
+  }
+}
+@keyframes skeletonFontAnimation {
+  0% {
+    background-position-x: 30rem;
+  }
+  100% {
+    background-position-x: -30rem;
+  }
+}
 @font-face {
   font-family: DNBSkeleton;
   src: url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff2") format("woff2"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.woff") format("woff"), url("../assets/fonts/dnb/skeleton/DNB-Skeleton-Regular.ttf") format("truetype");
@@ -7414,6 +7521,10 @@ html[data-visual-test] .dnb-textarea__textarea {
  * Utilities
  */
 .dnb-tooltip {
+  --tooltip-color: white;
+  --tooltip-background-color: black;
+  --tooltip-border-color: 1px solid black;
+  --tooltip-border-radius: 1rem;
   position: absolute;
   z-index: 3100;
   display: flex;
@@ -7421,6 +7532,10 @@ html[data-visual-test] .dnb-textarea__textarea {
   justify-content: center;
   align-items: center;
   padding: 0 1rem;
+  color: var(--tooltip-color);
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: var(--shadow-default);
   opacity: 0;
   visibility: hidden;
   transition: opacity 200ms var(--easing-default);
@@ -7478,6 +7593,8 @@ html[data-visual-test] .dnb-tooltip--hide {
   left: 0;
   width: 1rem;
   height: 1rem;
+  background-color: var(--tooltip-background-color);
+  border: var(--tooltip-border-color);
   transform: translateY(70%) rotate(45deg);
 }
 .dnb-tooltip__arrow__position--bottom {