@helsenorge/designsystem-react 10.6.1 → 10.6.3

package/components/Tile/styles.module.scss

@@ -1,10 +1,10 @@
 @use 'sass:map';
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/palette' as palette;
-@use '../../scss/spacers' as spacers;
-@use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/font-settings';
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/screen-reader';
+@import '../../scss/supernova/styles/colors';
 
 .tile {
   // Referanse for grandparent selection i underklassene lenger nede
@@ -12,23 +12,23 @@
 
   display: flex;
   width: inherit;
-  padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
+  padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
   flex-direction: column;
   justify-content: center;
   background-color: var(--core-color-white);
-  color: palette.$black;
+  color: $black;
   text-decoration: none;
   cursor: pointer;
   border: 1px solid var(--color-base-border-blueberry);
   outline: none;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(s);
     justify-content: flex-start;
   }
 
   @media print {
-    border: 1px solid palette.$black;
+    border: 1px solid $black;
   }
 
   &--fixed {
@@ -37,10 +37,10 @@
   }
 
   &--compact {
-    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(xs);
+    padding: getSpacer(2xs) getSpacer(2xs) getSpacer(xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding: getSpacer(s) getSpacer(m) getSpacer(s) getSpacer(s);
     }
   }
 
@@ -59,14 +59,14 @@
   }
 
   &--highlighted {
-    background-color: palette.$blueberry500;
-    border-color: palette.$blueberry500;
-    color: palette.$white;
+    background-color: $blueberry500;
+    border-color: $blueberry500;
+    color: $white;
 
     &:hover,
     &:active {
-      background-color: palette.$blueberry700;
-      border-color: palette.$blueberry700;
+      background-color: $blueberry700;
+      border-color: $blueberry700;
     }
 
     &:focus-visible {
@@ -78,26 +78,26 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
     text-align: center;
     line-height: 1.74rem;
     font-weight: 400;
-    margin: spacers.getSpacer(3xs) 0 0;
+    margin: getSpacer(3xs) 0 0;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       text-align: left;
       font-weight: 600;
-      font-size: font-settings.$font-size-md;
+      font-size: $font-size-md;
       line-height: 1.625rem;
-      margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
+      margin: getSpacer(s) 0 0 getSpacer(2xs);
     }
 
     &--compact {
-      margin: 0 0 0 spacers.getSpacer(3xs);
+      margin: 0 0 0 getSpacer(3xs);
       text-align: left;
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        margin-left: spacers.getSpacer(2xs);
+      @media (min-width: map.get($grid-breakpoints, md)) {
+        margin-left: getSpacer(2xs);
       }
     }
   }
@@ -113,11 +113,11 @@
   &__description {
     font-size: 1.125rem;
     line-height: 1.75rem;
-    margin: spacers.getSpacer(2xs) 0 0 spacers.getSpacer(2xs);
+    margin: getSpacer(2xs) 0 0 getSpacer(2xs);
   }
 
   &__children {
-    margin: spacers.getSpacer(s) 0 0 spacers.getSpacer(2xs);
+    margin: getSpacer(s) 0 0 getSpacer(2xs);
   }
 }
 
@@ -126,7 +126,7 @@
   flex-direction: column;
   align-items: center;
 
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     align-items: start;
 
     @media print {
@@ -137,7 +137,7 @@
   &--compact {
     flex-direction: row;
     align-items: center;
-    padding-right: spacers.getSpacer(s);
+    padding-right: getSpacer(s);
     padding-bottom: 0;
 
     svg {

package/components/Title/styles.module.scss

@@ -1,4 +1,4 @@
-@use '../../scss/font-mixins' as fonts;
+@import '../../scss/font-mixins';
 
 .title {
   overflow-wrap: break-word;
@@ -7,30 +7,30 @@
   margin-right: 0;
 
   &--feature {
-    @include fonts.title-feature;
+    @include title-feature;
   }
 
   &--title1 {
-    @include fonts.title1;
+    @include title1;
   }
 
   &--title2 {
-    @include fonts.title2;
+    @include title2;
   }
 
   &--title3 {
-    @include fonts.title3;
+    @include title3;
   }
 
   &--title4 {
-    @include fonts.title4;
+    @include title4;
   }
 
   &--title5 {
-    @include fonts.title5;
+    @include title5;
   }
 
   &--title6 {
-    @include fonts.title6;
+    @include title6;
   }
 }

package/components/Toggle/styles.module.scss

@@ -1,10 +1,10 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
+@import '../../scss/font-mixins';
 
 .toggle-container {
   display: flex;
@@ -22,39 +22,39 @@
   }
 
   &__label {
-    @include fonts.label;
+    @include label;
 
     color: var(--core-color-neutral-900);
-    margin-left: spacers.getSpacer(xs);
+    margin-left: getSpacer(xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      margin-left: spacers.getSpacer(s);
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-left: getSpacer(s);
     }
 
     &__text--subdued {
-      @include fonts.label-subdued;
+      @include label-subdued;
     }
 
     &--toggle-right {
       margin-left: 0;
-      margin-right: spacers.getSpacer(xs);
+      margin-right: getSpacer(xs);
 
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-        margin-right: spacers.getSpacer(s);
+      @media (min-width: map.get($grid-breakpoints, sm)) {
+        margin-right: getSpacer(s);
       }
     }
   }
 
   &__sublabel {
-    font-size: font-settings.$font-size-xs;
+    font-size: $font-size-xs;
     line-height: 1.25rem;
     color: var(--core-color-neutral-800);
     margin-left: 3.9rem;
     text-align: left;
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
-      font-size: font-settings.$font-size-sm;
-      line-height: font-settings.$lineheight-size-xs;
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      font-size: $font-size-sm;
+      line-height: $lineheight-size-xs;
       text-align: left;
       margin-left: 4.1rem;
     }

package/components/Tooltip/TooltipWord/styles.module.scss

@@ -1,5 +1,5 @@
-@use '../../../scss/palette' as palette;
-@use '../../../scss/spacers' as spacers;
+@import '../../../scss/palette';
+@import '../../../scss/spacers';
 
 .word {
   all: unset;
@@ -8,11 +8,11 @@
   cursor: help;
 
   // bruker border istedet for text-decoration for å komme rundt text-decoraton-thickness begrensninger i safari
-  border-bottom: 0.2rem dotted palette.$plum400;
+  border-bottom: 0.2rem dotted $plum400;
   line-height: 1.4rem;
 
   &:focus-visible {
-    box-shadow: 0 0 0 spacers.getSpacer(4xs) palette.$black;
+    box-shadow: 0 0 0 getSpacer(4xs) $black;
     outline: none;
   }
 }

package/components/Trigger/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/icon' as icon;
+@import '../../scss/palette';
+@import '../../scss/icon';
 
 $trigger-medium-size: 24.18px;
 $trigger-medium-click-area: 44px;
@@ -24,8 +24,8 @@ $trigger-large-size: 30.61px;
   &--medium {
     height: $trigger-medium-size;
     width: $trigger-medium-size;
-    margin-left: calc((map.get(icon.$icon-sizes, xs) - $trigger-medium-size) / 2);
-    margin-right: calc((map.get(icon.$icon-sizes, xs) - $trigger-medium-size) / 2);
+    margin-left: calc((map.get($icon-sizes, xs) - $trigger-medium-size) / 2);
+    margin-right: calc((map.get($icon-sizes, xs) - $trigger-medium-size) / 2);
 
     &::after {
       // Increase the clickable area
@@ -41,8 +41,8 @@ $trigger-large-size: 30.61px;
   &--large {
     height: $trigger-large-size;
     width: $trigger-large-size;
-    margin-left: calc((map.get(icon.$icon-sizes, sm) - $trigger-large-size) / 2);
-    margin-right: calc((map.get(icon.$icon-sizes, sm) - $trigger-large-size) / 2);
+    margin-left: calc((map.get($icon-sizes, sm) - $trigger-large-size) / 2);
+    margin-right: calc((map.get($icon-sizes, sm) - $trigger-large-size) / 2);
   }
 
   $variant-map: (
@@ -52,56 +52,56 @@ $trigger-large-size: 30.61px;
 
   @each $variant, $color in $variant-map {
     &--#{$variant} {
-      box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}600);
+      box-shadow: inset 0 0 0 1.6px map.get($palette-map, #{$color}600);
 
       &:hover,
       &#{$trigger}--hovered {
-        box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}800);
-        background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
+        box-shadow: inset 0 0 0 1.6px map.get($palette-map, #{$color}800);
+        background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
       }
 
       &:focus-visible {
-        box-shadow: inset 0 0 0 1.6px palette.$black;
-        outline: 1.6px solid palette.$black;
+        box-shadow: inset 0 0 0 1.6px $black;
+        outline: 1.6px solid $black;
       }
 
       &#{$trigger}--selected {
-        box-shadow: inset 0 0 0 1.6px map.get(palette.$palette-map, #{$color}800);
-        background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
+        box-shadow: inset 0 0 0 1.6px map.get($palette-map, #{$color}800);
+        background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
 
         &:hover,
         &#{$trigger}--hovered {
-          background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.2);
+          background-color: rgba(map.get($palette-map, #{$color}600), 0.2);
         }
 
         &:focus {
-          background-color: rgba(map.get(palette.$palette-map, #{$color}600), 0.1);
+          background-color: rgba(map.get($palette-map, #{$color}600), 0.1);
         }
       }
     }
   }
 
   &--ondark {
-    box-shadow: inset 0 0 0 1.6px palette.$white;
+    box-shadow: inset 0 0 0 1.6px $white;
 
     &:hover {
-      background-color: rgba(palette.$plum50, 0.2);
+      background-color: rgba($plum50, 0.2);
     }
 
     &:focus-visible {
-      outline: 1.6px solid palette.$white;
+      outline: 1.6px solid $white;
     }
 
     &#{$trigger}--selected {
-      background-color: rgba(palette.$plum50, 0.1);
+      background-color: rgba($plum50, 0.1);
 
       &:hover,
       &#{$trigger}--hovered {
-        background-color: rgba(palette.$plum50, 0.2);
+        background-color: rgba($plum50, 0.2);
       }
 
       &:focus-visible {
-        background-color: rgba(palette.$plum50, 0.1);
+        background-color: rgba($plum50, 0.1);
       }
     }
   }

package/components/Validation/styles.module.scss

@@ -1,32 +1,32 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
-@use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/breakpoints';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .validation {
   &__error-wrapper {
-    margin-bottom: spacers.getSpacer(2xs);
+    margin-bottom: getSpacer(2xs);
 
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      margin-bottom: spacers.getSpacer(m);
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      margin-bottom: getSpacer(m);
     }
   }
 
   &__summary {
-    color: palette.$cherry600;
+    color: $cherry600;
 
     &--visible {
-      margin: spacers.getSpacer(l) 0 spacers.getSpacer(s);
+      margin: getSpacer(l) 0 getSpacer(s);
     }
   }
 
   &__errors {
-    font-size: font-settings.$font-size-sm;
+    font-size: $font-size-sm;
     font-weight: 600;
 
     &--visible {
-      margin: spacers.getSpacer(l) 0 spacers.getSpacer(s);
+      margin: getSpacer(l) 0 getSpacer(s);
     }
   }
 }

package/hooks/useBreakpoint.js

@@ -20,7 +20,9 @@ function getCurrentBreakpoint() {
   return (matched == null ? void 0 : matched.breakpoint) ?? Breakpoint.xxs;
 }
 const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(() => getCurrentBreakpoint());
+  const [breakpoint, setBreakpoint] = useState(
+    typeof window.matchMedia !== "undefined" ? getCurrentBreakpoint() : Breakpoint.xxs
+  );
   useEffect(() => {
     const handleMediaQueryEvent = (event) => {
       switch (event.media) {

package/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(() => getCurrentBreakpoint());\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,MAAM,sBAAsB;AAErF,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(\n    typeof window.matchMedia !== 'undefined' ? getCurrentBreakpoint() : Breakpoint.xxs\n  );\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AACvC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,OAAO,OAAO,eAAe,cAAc,qBAAA,IAAyB,WAAW;AAAA,EACjF;AAEA,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.6.1",
+  "version": "10.6.3",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_body.scss

@@ -1,11 +1,12 @@
 @use 'sass:map';
-@use './palette' as palette;
-@use './font-mixins' as fonts;
+@import './palette';
+@import './breakpoints';
+@import './font-mixins';
 
 body {
   font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
-  background-color: palette.$white;
-  color: palette.$black;
+  background-color: $white;
+  color: $black;
 
-  @include fonts.body;
+  @include body;
 }

package/scss/_breakpoints.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use 'spacers' as spacers;
+@import 'spacers';
 
-$grid-gutter-width: map.get(spacers.$spacers, 5);
+$grid-gutter-width: map.get($spacers, 5);
 $grid-columns: 12;
 $grid-breakpoints: (
   xxs: 0,