@helsenorge/designsystem-react 10.6.0 → 10.6.1

package/components/Modal/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;
 
 .modal-overlay {
   background: rgb(51 51 51 / 75%);
@@ -78,22 +78,22 @@
     width: calc(100vw - 0.75rem);
     padding-bottom: spacers.getSpacer(l);
 
-    @media (max-width: map.get($grid-breakpoints, sm)) {
+    @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       p {
         font-size: 1.125rem;
       }
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-bottom: spacers.getSpacer(xl);
       width: 612px;
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       width: 696px;
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       padding-bottom: spacers.getSpacer(2xs);
     }
   }
@@ -102,11 +102,11 @@
     width: calc(100vw - 0.75rem);
     padding-bottom: spacers.getSpacer(m);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       width: 335px;
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       width: 515px;
     }
   }
@@ -118,7 +118,7 @@
   &--image {
     padding: 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       max-height: calc(100vh - 24px);
       max-width: calc(100vw - 24px);
       width: 100%;
@@ -181,7 +181,7 @@
       max-height: none;
     }
 
-    @include tiny-screens-media-query {
+    @include breakpoints.tiny-screens-media-query {
       max-height: calc(100dvh - 4rem);
     }
 
@@ -193,11 +193,11 @@
       &--large {
         padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
         }
 
-        @include tiny-screens-media-query {
+        @include breakpoints.tiny-screens-media-query {
           padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
         }
       }
@@ -205,11 +205,11 @@
       &--medium {
         padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);
 
-        @media (min-width: map.get($grid-breakpoints, md)) {
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
         }
 
-        @include tiny-screens-media-query {
+        @include breakpoints.tiny-screens-media-query {
           padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
         }
       }
@@ -260,11 +260,11 @@
     &--large {
       padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
       }
 
-      @include tiny-screens-media-query {
+      @include breakpoints.tiny-screens-media-query {
         padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }
@@ -272,7 +272,7 @@
     &--medium {
       padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;
 
-      @include tiny-screens-media-query {
+      @include breakpoints.tiny-screens-media-query {
         padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
       }
     }

package/components/NotificationPanel/styles.module.scss

@@ -3,7 +3,7 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/palette' as palette;
 @use '../AnchorLink/styles.module' as anchorlink;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .notification-panel {
   $panel: &;
@@ -13,7 +13,7 @@
   box-shadow: 0.25rem 0.25rem 0.375rem rgb(0 0 0 / 15%);
   border-radius: 0.25rem;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-left: spacers.getSpacer(s);
     padding-right: spacers.getSpacer(m);
     #{$panel}__icon {
@@ -27,7 +27,7 @@
     line-height: 1.25rem;
     box-shadow: none;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-left: spacers.getSpacer(2xs);
       padding-right: spacers.getSpacer(s);
     }
@@ -45,15 +45,15 @@
   }
 
   &--small {
-    max-width: map.get($grid-breakpoints, sm);
+    max-width: map.get(breakpoints.$grid-breakpoints, sm);
   }
 
   &--medium {
-    max-width: map.get($grid-breakpoints, md);
+    max-width: map.get(breakpoints.$grid-breakpoints, md);
   }
 
   &--large {
-    max-width: map.get($grid-breakpoints, lg);
+    max-width: map.get(breakpoints.$grid-breakpoints, lg);
   }
 
   &--info {
@@ -133,7 +133,7 @@
     line-height: font-settings.$lineheight-size-xs;
     margin: 0;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-sm;
       line-height: 1.625rem;
     }
@@ -173,7 +173,7 @@
     &--expander-no-label {
       margin: spacers.getSpacer(2xs) 0 0;
 
-      @media (max-width: map.get($grid-breakpoints, lg)) {
+      @media (max-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         padding-top: 0;
       }
     }

package/components/Panel/styles.module.scss

@@ -2,12 +2,12 @@
 @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;
 
 @mixin panel-padding {
   padding: spacers.getSpacer(s);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(l);
   }
 }
@@ -15,7 +15,7 @@
 @mixin panel-padding-icon {
   padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
   }
 }
@@ -58,7 +58,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     gap: $layout-sm-gap $layout-sm-gap;
     width: 100%;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       column-gap: $layout-md-col-gap;
     }
   }
@@ -68,7 +68,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       grid-template-columns: auto 1fr;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       grid-template-rows: auto auto;
       grid-template-columns: 1fr auto;
 
@@ -87,7 +87,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       grid-template-columns: auto 1fr;
     }
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       grid-template-rows: auto auto;
       grid-template-columns: 1fr auto;
 
@@ -104,7 +104,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       }
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       grid-template-columns: minmax(auto, 760px) auto;
 
       &--with-icon {
@@ -123,7 +123,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
       row-gap: $layout-sm-gap;
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       grid-template-rows: auto;
 
       &--a {
@@ -171,13 +171,13 @@ $layout-md-col-gap: spacers.getSpacer(m);
 
     &--layout-1,
     &--layout-2 {
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         grid-row: span 2;
         padding-right: spacers.getSpacer(2xs);
       }
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       grid-row: span 2;
       padding-right: spacers.getSpacer(2xs);
     }
@@ -185,7 +185,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     &--layout-3 {
       grid-row: span 2;
 
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         grid-row: span 1;
       }
     }
@@ -203,7 +203,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     justify-content: flex-end;
 
     &--no-content-b {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
         flex-direction: row;
         grid-column: span 2;
       }
@@ -217,7 +217,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
   &__details-btn {
     align-self: flex-start;
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       align-self: flex-end;
       margin-left: auto;
     }
@@ -350,7 +350,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     }
   }
 
-  @media (max-width: map.get($grid-max-breakpoints, xs)) {
+  @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -409,7 +409,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
   display: flex;
   flex-direction: column;
 
-  @media (min-width: map.get($grid-breakpoints, lg)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
     padding-top: spacers.getSpacer(xs);
     flex-direction: row;
   }
@@ -419,7 +419,7 @@ $layout-md-col-gap: spacers.getSpacer(m);
     align-items: center;
     padding-bottom: spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       padding-top: 0;
       padding-right: spacers.getSpacer(m);
       padding-bottom: 0;

package/components/PanelList/styles.module.scss

@@ -1,13 +1,13 @@
 @use 'sass:map';
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .panel-list {
   &__panel:not(:last-child) {
     margin-bottom: spacers.getSpacer(2xs);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       margin-bottom: spacers.getSpacer(s);
     }
   }

package/components/PopMenu/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .pop-menu-button {
   padding: 0;
@@ -111,7 +111,7 @@ html :focus > .pop-menu-button {
   border: 0.125rem solid rgb(24 128 151);
   box-shadow: 0 0 0.3125rem 0 rgb(0 0 0 / 50%);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     width: 26.125rem;
   }
 

package/components/PopOver/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;
 
 .popover {
   $popover: &;
@@ -22,7 +22,7 @@
   border-radius: 0.5625rem;
   box-shadow: 0 0.125rem 1.125rem 0 rgb(0 0 0 / 15%);
 
-  @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/PromoPanel/styles.module.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '../../scss/palette' as palette;
 @use '../../scss/spacers' as spacers;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 $colors: 'neutral', 'blueberry', 'cherry';
 
@@ -21,22 +21,22 @@ $colors: 'neutral', 'blueberry', 'cherry';
       inset 0 0 0 2px palette.$black;
   }
 
-  @media (min-width: map.get($grid-breakpoints, xs)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
     padding-left: 0;
   }
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     padding-right: spacers.getSpacer(s);
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-right: spacers.getSpacer(l);
   }
 
   &--no-illustration {
     padding-left: spacers.getSpacer(s);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding-left: spacers.getSpacer(l);
     }
   }
@@ -54,7 +54,7 @@ $colors: 'neutral', 'blueberry', 'cherry';
   &__illustration {
     display: none;
 
-    @media (min-width: map.get($grid-breakpoints, xs)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
       display: inline;
     }
   }
@@ -67,7 +67,7 @@ $colors: 'neutral', 'blueberry', 'cherry';
     padding-top: spacers.getSpacer(m);
     padding-bottom: spacers.getSpacer(m);
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       gap: spacers.getSpacer(2xs);
       padding-top: spacers.getSpacer(l);
       padding-bottom: spacers.getSpacer(l);
@@ -89,11 +89,11 @@ $colors: 'neutral', 'blueberry', 'cherry';
   &__icon {
     margin-left: spacers.getSpacer(xs);
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       margin-left: spacers.getSpacer(s);
     }
 
-    @media (min-width: map.get($grid-breakpoints, lg)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
       margin-left: spacers.getSpacer(l);
     }
   }

package/components/RadioButton/styles.module.scss

@@ -4,7 +4,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;
 
 @mixin dashed-border() {
   box-shadow: none;
@@ -163,7 +163,7 @@
     }
   }
 
-  @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/Select/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;
 
 .select-wrapper {
   display: flex;
@@ -65,7 +65,7 @@
   line-height: font-settings.$lineheight-size-sm;
   border-radius: 0;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     height: 3.125rem;
     font-size: font-settings.$font-size-md;
   }
@@ -98,7 +98,7 @@
     font-family: inherit;
     font-size: font-settings.$font-size-sm;
 
-    @media (min-width: map.get($grid-breakpoints, md)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       font-size: font-settings.$font-size-md;
     }
   }

package/components/ServiceMessage/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 *;
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
 
 .service-message {

package/components/SharingStatus/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;
 
 $dot-size: 1.765rem;
 

package/components/Slider/styles.module.scss

@@ -1,8 +1,8 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @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';
 
 $track-height-offset: 1rem;
 $mark-size: spacers.getSpacer(l);

package/components/StatusDot/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;
 
 $status-dot-size: 0.937rem;
 
@@ -15,7 +15,7 @@ $status-dot-size: 0.937rem;
   line-height: 1.4rem;
   font-weight: 400;
 
-  @media (min-width: map.get($grid-breakpoints, sm)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
     font-size: font-settings.$font-size-sm;
     line-height: 1.6rem;
   }
@@ -37,7 +37,7 @@ $status-dot-size: 0.937rem;
     min-width: $status-dot-size;
     min-height: $status-dot-size;
 
-    @media (min-width: map.get($grid-breakpoints, sm)) {
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
       top: spacers.getSpacer(3xs);
     }
 

package/components/StepButtons/styles.module.scss

@@ -2,7 +2,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/screen-reader' as *;
-@use '../../scss/breakpoints' as *;
+@use '../../scss/breakpoints' as breakpoints;
 
 .stepbuttons {
   margin-top: spacers.getSpacer(m);
@@ -21,7 +21,7 @@
     display: flex;
     gap: spacers.getSpacer(s);
 
-    @media (max-width: map.get($grid-max-breakpoints, xs)) {
+    @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
       width: 100%;
     }
 
@@ -33,7 +33,7 @@
   &__button {
     &--back,
     &--forward {
-      @media (max-width: map.get($grid-max-breakpoints, xs)) {
+      @media (max-width: map.get(breakpoints.$grid-max-breakpoints, xs)) {
         width: 50%;
       }
     }

package/components/Stepper/styles.module.scss

@@ -2,14 +2,14 @@
 @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;
 
 .stepper-wrapper {
   display: flex;
   align-items: center;
   min-height: spacers.getSpacer(l);
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     min-height: spacers.getSpacer(xl);
   }
 }

package/components/StickyNote/styles.module.scss

@@ -1,5 +1,5 @@
 @use '../../scss/font-settings' as font-settings;
-@import '../../scss/supernova/styles/colors';
+@import '../../scss/supernova/styles/colors.css';
 
 .sticky-note {
   position: relative;

package/components/Table/styles.module.scss

@@ -4,7 +4,7 @@
 @use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
-@use '../../scss/breakpoints' as *;
+@import '../../scss/breakpoints';
 @import '../../scss/grid';
 
 /* fix outline for Safari */

package/components/Tabs/TabList/styles.module.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../../scss/breakpoints' as *;
+@use '../../../scss/breakpoints' as breakpoints;
 @import '../../../scss/supernova/styles/colors';
 
 .tab-list {
@@ -25,7 +25,7 @@
     display: none; /* Safari */
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     padding-left: 0;
     padding-right: 0;
 

package/components/Tabs/TabPanel/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;
 @import '../../../scss/supernova/styles/colors';
 
 .tab-panel {
@@ -18,7 +18,7 @@
     }
   }
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     border-radius: 0 0 0.5rem 0.5rem;
     border: 1px solid var(--color-action-border-onlight-focus);
     border-top: 0;
@@ -27,7 +27,7 @@
     &#{$tab-panel}--first {
       border-radius: 0;
 
-      @media (min-width: map.get($grid-breakpoints, md)) {
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
         border-radius: 0 0 0.5rem 0.5rem;
       }
     }

package/components/Tabs/styles.module.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../scss/breakpoints' as *;
-@import '../../scss/supernova/styles/colors';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
 
 .tab-list-wrapper {
   position: relative;
@@ -21,7 +21,7 @@
   border-radius: 0;
   height: 50px;
 
-  @media (min-width: map.get($grid-breakpoints, md)) {
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     border-right: 1px solid var(--color-action-border-onlight-focus);
     border-left: 1px solid var(--color-action-border-onlight-focus);
     height: 50px;

package/components/Tag/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;
 
 .tag {
   $tag: &;