@helsenorge/designsystem-react 10.6.0 → 10.6.1

package/components/AnchorLink/styles.module.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
 
 $underline-width: 0.0625rem;
 $focus-width: 0.15rem;

package/components/Button/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 $dark-mode-disabled-transparrent: #ffffffb3;
 $with-icons: // icon-class, size-class, padding-left, padding-right, padding-left desktop, padding-right desktop, svg-margin-left, svg-margin-right, svg-margin-left desktop, svg-margin-right desktop
@@ -70,7 +70,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   :disabled > & {
     outline-color: palette.$neutral700;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       outline-color: palette.$neutral500;
     }
   }
@@ -84,7 +84,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   :disabled > & {
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       color: palette.$neutral700;
     }
   }
@@ -147,7 +147,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     outline-color: palette.$white;
 
     :disabled > & {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         outline-color: $dark-mode-disabled-transparrent;
       }
     }
@@ -169,7 +169,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     color: palette.$white;
 
     :disabled > & {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         color: $dark-mode-disabled-transparrent;
       }
     }
@@ -232,7 +232,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     color: palette.$neutral800;
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     min-height: 3.125rem;
     padding: 0 spacers.getSpacer(l);
     font-size: font-settings.$font-size-md;
@@ -244,7 +244,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     padding: 0 spacers.getSpacer(l);
     font-size: 1.3125rem;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       min-height: 4.5rem;
       padding: 0 spacers.getSpacer(xl);
       font-size: font-settings.$font-size-lg;
@@ -257,7 +257,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
       padding-left: $pl;
       padding-right: $pr;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding-left: $pld;
         padding-right: $prd;
       }
@@ -269,7 +269,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
       margin-left: $svgml;
       margin-right: $svgmr;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: $svgmld;
         margin-right: $svgmrd;
       }
@@ -336,7 +336,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     align-items: center;
     justify-content: center;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin: 0 auto 0 0;
     }
 
@@ -372,7 +372,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
 
   @include on-dark;
 
-  @include tiny-screens-media-query {
+  @include breakpoints.tiny-screens-media-query {
     min-height: spacers.getSpacer(l);
     padding: 0 spacers.getSpacer(xs);
   }
@@ -395,7 +395,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   &--on-dark &__line {
     border-color: palette.$white;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       border-color: $dark-mode-disabled-transparrent;
     }
   }

package/components/Checkbox/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 @mixin dashed-dotted-border() {
   box-shadow: none;
@@ -245,7 +245,7 @@ $checkbox-icon-size: 1.625rem;
     background-color: palette.$blueberry800;
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     &--large {
       padding: 1.68rem spacers.getSpacer(l);
     }

package/components/Chip/styles.module.scss

@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
 
 .chip {
   $chip: &;

package/components/Close/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .close {
   display: flex;
@@ -14,7 +14,7 @@
   background-color: transparent;
   cursor: pointer;
 
-  @media (max-width: map.get($grid-breakpoints, sm)) {
+  @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     height: 2.375rem;
     width: 2.375rem;
   }

package/components/Drawer/styles.module.scss

@@ -2,8 +2,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .drawer {
   position: fixed;
@@ -32,7 +32,7 @@
     border-radius: 0.75rem 0.75rem 0 0;
     outline: none;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       justify-content: space-between;
       height: 100%;
       max-height: 100dvh;
@@ -43,14 +43,14 @@
     }
 
     &--right {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         transform: translateX(100%);
         right: 0;
         left: unset;
       }
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       max-height: 100dvh;
       border-radius: 0;
     }
@@ -61,7 +61,7 @@
       max-height: inherit;
       overflow: hidden;
 
-      @include tiny-screens-media-query {
+      @include breakpoints.tiny-screens-media-query {
         overflow-y: auto;
 
         &:focus-visible {
@@ -79,11 +79,11 @@
     padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
     border-bottom: 1px solid var(--color-base-border-neutral);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(xs);
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       padding: spacers.getSpacer(4xs) 0;
       flex-direction: column-reverse;
       align-items: flex-start;
@@ -99,11 +99,11 @@
       outline-offset: -1px;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(xs);
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       overflow-y: unset;
     }
   }
@@ -114,11 +114,11 @@
     border-top: 1px solid var(--color-base-border-neutral);
     padding: spacers.getSpacer(s) spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(m) spacers.getSpacer(xs);
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       flex-wrap: wrap;
       gap: spacers.getSpacer(2xs) 0;
       padding: spacers.getSpacer(2xs) 0;

package/components/Dropdown/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .dropdown {
   position: relative;
@@ -25,7 +25,7 @@
     font-size: font-settings.$font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(3xs) spacers.getSpacer(s);
       font-size: font-settings.$font-size-md;
       line-height: 1.5rem;
@@ -167,7 +167,7 @@
     &__label {
       padding: spacers.getSpacer(3xs) 0;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(2xs) 0;
       }
     }
@@ -197,7 +197,7 @@
     padding: 0;
     margin: 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       max-height: 464px;
     }
   }
@@ -210,7 +210,7 @@
     border-bottom: 1px solid palette.$neutral300;
     padding: spacers.getSpacer(2xs) spacers.getSpacer(s);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s);
     }
 

package/components/Duolist/styles.module.scss

@@ -3,8 +3,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .duolist-wrapper {
   &--border {

package/components/EmptyState/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .emptystate {
   display: flex;
@@ -11,7 +11,7 @@
   padding: spacers.getSpacer(s);
   align-items: center;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     gap: spacers.getSpacer(m);
     padding: spacers.getSpacer(l);
   }
@@ -26,7 +26,7 @@
   &--blank {
     border: none;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-left: spacers.getSpacer(2xs);
     }
   }
@@ -51,7 +51,7 @@
     flex-flow: column;
     gap: spacers.getSpacer(3xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       gap: spacers.getSpacer(xs);
     }
   }

package/components/ErrorWrapper/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/font-mixins' as fonts;
 
 .error-wrapper {
@@ -10,7 +10,7 @@
     border: 1px solid var(--core-color-cherry-400);
     border-left: 4px solid var(--color-notification-border-error);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(m);
     }
   }

package/components/Expander/styles.module.scss

@@ -4,8 +4,8 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../Button/styles.module' as button;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .expander {
   position: initial;
@@ -60,7 +60,7 @@
     font-weight: 600;
     text-align: left;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-md;
       line-height: font-settings.$lineheight-size-md;
     }
@@ -70,7 +70,7 @@
       padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
       cursor: pointer;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(l);
       }
     }
@@ -78,7 +78,7 @@
     &--icon {
       padding-left: spacers.getSpacer(2xs);
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding-left: spacers.getSpacer(s);
       }
     }
@@ -173,7 +173,7 @@
       padding-left: spacers.getSpacer(s);
       border-left: solid 3px palette.$neutral200;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         margin-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
         padding-left: calc(
           38px / 2 + 12px - 2px
@@ -184,11 +184,11 @@
     &--large {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
       }
       &#{$content}--icon {
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding-left: 70px;
         }
       }

package/components/ExpanderHierarchy/expander.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .expander {
   $item: &;
@@ -23,7 +23,7 @@
     border-bottom: 1px solid palette.$neutral500;
     padding: spacers.getSpacer(xs) 0;
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       flex-direction: row-reverse;
       justify-content: start;
       padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(2xs);
@@ -53,7 +53,7 @@
     &--2-and-lower {
       padding: spacers.getSpacer(2xs) 0;
 
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding: spacers.getSpacer(xs) spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(2xs);
       }
     }
@@ -106,13 +106,13 @@
 
     &--1,
     &--2 {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding-left: spacers.getSpacer(2xl);
       }
     }
 
     &--3-and-lower {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding-left: spacers.getSpacer(xl);
       }
     }
@@ -125,13 +125,13 @@
       margin-left: spacers.getSpacer(xs);
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       margin-left: 0;
       margin-right: spacers.getSpacer(s);
     }
 
     &--3-and-lower {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         margin-right: spacers.getSpacer(xs);
       }
     }

package/components/ExpanderList/styles.module.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .expander-list {
   list-style: none;
@@ -131,7 +131,7 @@
   width: 100%;
   outline: none;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }

package/components/FormGroup/styles.module.scss

@@ -1,7 +1,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .form-group-wrapper {
   &__title {

package/components/HelpBubble/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .helpbubble {
   $bubble: &;
@@ -15,7 +15,7 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, lg)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-md;
   }

package/components/HelpQuestion/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .helpquestion {
   display: inline-flex;
@@ -19,7 +19,7 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-xs;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     gap: spacers.getSpacer(2xs);
     font-size: font-settings.$font-size-md;
     line-height: font-settings.$lineheight-size-sm;

package/components/HighlightPanel/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
-@import '../../scss/supernova/styles/colors';
+@import '../../scss/supernova/styles/colors.css';
 
 @mixin content-wrapper-with-icon-flex {
   display: flex;

package/components/HorizontalScroll/styles.module.scss

@@ -1,6 +1,6 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 // Disables fordi stylelint og prettier er uenige
 /* stylelint-disable-next-line scss/dollar-variable-colon-space-after */

package/components/Input/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/input' as input;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .input-wrapper {
   @include input.input-wrapper;
@@ -42,7 +42,7 @@
   &--with-icon {
     padding: 1px 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: 0.375rem 0;
     }
   }
@@ -60,7 +60,7 @@
       height: 2.5rem;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       height: 2.125rem;
 
       &--large {

package/components/Label/styles.module.scss

@@ -3,13 +3,13 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/font-mixins' as fonts;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .label-wrapper {
   margin-bottom: spacers.getSpacer(2xs);
   line-height: font-settings.$lineheight-size-xs;
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     line-height: font-settings.$lineheight-size-sm;
   }
 

package/components/LinkList/styles.module.scss

@@ -2,8 +2,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .link-list {
   list-style: none;
@@ -122,7 +122,7 @@
       line-height: font-settings.$lineheight-size-md;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       &--small {
         font-size: font-settings.$font-size-sm;
         line-height: font-settings.$lineheight-size-sm;

package/components/ListHeader/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .list-header {
   display: grid;

package/components/MaxCharacters/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .max-characters {
   display: flex;
@@ -12,7 +12,7 @@
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     line-height: font-settings.$lineheight-size-md;
     font-size: font-settings.$font-size-md;
   }