@orangesk/orange-design-system 2.0.0-beta.37 → 2.0.0-beta.38

package/src/components/Table/styles/mixins.scss

@@ -58,6 +58,11 @@
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+
+  td,
+  th {
+    white-space: nowrap;
+  }
 }
 
 @mixin sort-button {

package/src/components/Tag/styles/mixins.scss

@@ -87,4 +87,4 @@
     @include generate.css-map(config.$states-transparent-color, "disabled");
     cursor: not-allowed;
   }
-}
+}

package/src/components/Testimonial/styles/config.scss

@@ -6,34 +6,37 @@ $black: var(--color-background-contrast);
 $orange: var(--color-surface-secondary);
 
 $quotation-mark-bottom: (
-    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>'),
-    mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>')
+  -webkit-mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>'),
+  mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>')
 );
 
 $quotation-mark-top: (
-    mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
-    -webkit-mask-image: url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>')
+  mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
+  -webkit-mask-image:
+    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
 );
 
 $quotation-mark-top-position: (
-    default: (
-        top: 0,
-        right: 0,
-    ),
-    oneline: (
-        top: 0,
-        right: 0,
-    )
+  default: (
+    top: 0,
+    right: 0,
+  ),
+  oneline: (
+    top: 0,
+    right: 0,
+  ),
 );
 
 $quotation-mark-bottom-position: (
-    default: (
-        left: 0,
-        bottom: 0,
-    ),
-    oneline: (
-        left: 0,
-        bottom: 0,
-    )
-)
-
+  default: (
+    left: 0,
+    bottom: 0,
+  ),
+  oneline: (
+    left: 0,
+    bottom: 0,
+  ),
+);

package/src/components/Testimonial/styles/mixins.scss

@@ -1,40 +1,44 @@
-@use './config';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
+@use "./config";
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
 
 @mixin base {
-    padding: space.get('small') space.get('large') space.get('small') convert.to-rem(40px);
-    width: fit-content;
+  padding: space.get("small") space.get("large") space.get("small")
+    convert.to-rem(40px);
+  width: fit-content;
 }
 
 @mixin quotation-mark {
-    font-size: convert.to-rem(14px);
-    position: relative;
-    &::before,
-    &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        height: convert.to-rem(18px);
-        width: convert.to-rem(20px);
-        background-repeat: no-repeat;
-        background-color: config.$black;
-    }
-    &::before {
-        @include generate.css-map(config.$quotation-mark-bottom);
-        @include generate.css-map(config.$quotation-mark-bottom-position, 'default');
-    }
-    &::after {
-        @include generate.css-map(config.$quotation-mark-top);
-        @include generate.css-map(config.$quotation-mark-top-position, 'default');
-    }
+  font-size: convert.to-rem(14px);
+  position: relative;
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    height: convert.to-rem(18px);
+    width: convert.to-rem(20px);
+    background-repeat: no-repeat;
+    background-color: config.$black;
+  }
+  &::before {
+    @include generate.css-map(config.$quotation-mark-bottom);
+    @include generate.css-map(
+      config.$quotation-mark-bottom-position,
+      "default"
+    );
+  }
+  &::after {
+    @include generate.css-map(config.$quotation-mark-top);
+    @include generate.css-map(config.$quotation-mark-top-position, "default");
+  }
 }
 
 @mixin orange {
-    &::before,
-    &::after {
-        background-color: config.$orange;
-    }
-}
+  &::before,
+  &::after {
+    background-color: config.$orange;
+  }
+}

package/src/components/Tooltip/styles/mixins.scss

@@ -1,9 +1,9 @@
-@use 'sass:math' as math;
-@use '../../../styles/tokens/base';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/layout';
-@use './config';
+@use "sass:math" as math;
+@use "../../../styles/tokens/base";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/layout";
+@use "./config";
 
 @mixin tooltip($config: config.$layout, $offset: config.$offset) {
   position: absolute;
@@ -18,7 +18,7 @@
   }
 
   @each $direction, $opposite in config.$direction-opposites {
-    &[data-popper-placement^='#{$direction}'] {
+    &[data-popper-placement^="#{$direction}"] {
       padding-#{$opposite}: $offset;
     }
   }
@@ -42,13 +42,14 @@
   $size-unitless: convert.strip-units($size);
   $hypotenuse: math.sqrt(
       math.pow($size-unitless, 2) + math.pow($size-unitless, 2)
-    ) * 1rem;
+    ) *
+    1rem;
   $arrow-position: $offset - math.div($hypotenuse, 4);
 
   display: block;
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: $size;
     height: $size;
@@ -59,13 +60,13 @@
   }
 
   @each $direction, $opposite in config.$direction-opposites {
-    [data-popper-placement^='#{$direction}'] & {
+    [data-popper-placement^="#{$direction}"] & {
       #{$opposite}: $arrow-position;
     }
   }
 
   @each $direction, $reset-directions in config.$direction-border-color-reset {
-    [data-popper-placement^='#{$direction}'] &:before {
+    [data-popper-placement^="#{$direction}"] &:before {
       @each $reset-direction in $reset-directions {
         border-#{$reset-direction}-color: transparent;
       }
@@ -80,7 +81,7 @@
   @include base.focusring-round;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: convert.to-rem(-10px);
     left: convert.to-rem(-10px);
@@ -91,4 +92,4 @@
 
 @mixin info-tooltip-active-icon {
   color: config.$icon-active-color;
-}
+}

package/src/components/index.ts

@@ -60,7 +60,7 @@ import { IconList, Item } from "./IconList";
 import { Image } from "./Image";
 import { Link } from "./Link";
 import { List, ListItem } from "./List";
-import { Loader } from "./Loader";
+import { Loader, LoaderFullscreen } from "./Loader";
 import { Megamenu, MegamenuBlog } from "./Megamenu";
 import {
   Modal,
@@ -155,6 +155,7 @@ export {
   List,
   ListItem,
   Loader,
+  LoaderFullscreen,
   Megamenu,
   MegamenuBlog,
   Message,

package/src/styles/export/breakpoint.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/breakpoint';
+@use "../tokens/breakpoint";
 
 :export {
   @each $key, $value in breakpoint.$map {

package/src/styles/export/space.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/space';
+@use "../tokens/space";
 
 :export {
   @each $key, $value in space.$map {

package/src/styles/tokens/breakpoint.scss

@@ -1,7 +1,7 @@
 @use "sass:list";
 @use "sass:meta";
-@use 'sass:map' as sassmap;
-@use '../tools/map';
+@use "sass:map" as sassmap;
+@use "../tools/map";
 
 $map: (
   xs: 0,
@@ -12,78 +12,93 @@ $map: (
   xxl: 1380px,
 );
 
-@mixin get( $breakpoint, $param: false) {
-  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {
+@mixin get($breakpoint, $param: false) {
+  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != "default") {
     @warn 'Breakpoint "#{$breakpoint}" is not defined.';
 
-    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list
+    @debug "Available breakpoints:"; // stylelint-disable-line at-rule-disallowed-list
     @debug $map; // stylelint-disable-line at-rule-disallowed-list
   }
 
   @if (
     ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or
-    ( not $breakpoint ) or
-    ( $breakpoint == 'default' )
+      (not $breakpoint) or
+      ($breakpoint == "default")
   ) {
     @content;
   } @else if not $param {
     // no param, just a standard mobile first media query
-    @if sassmap.has-key( $map, $breakpoint ) {
+    @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map, let's use stored value
-      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) { @content; };
+      @media screen and (min-width: $breakpoint) {
+        @content;
+      }
     }
-  } @else if (
-    $param == 'down' and
-    map.next($map, $breakpoint)
-  ) {
+  } @else if ($param == "down" and map.next($map, $breakpoint)) {
     @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {
       @content;
     }
-  } @else if (
-    $param == 'down' and
-    not sassmap.has-key($map, $breakpoint)
-  ) {
-    @media screen and (max-width: $breakpoint) { @content; };
-  } @else if (
-    $param == 'only' and
-    map.next($map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };
-  } @else if (
-    sassmap.has-key( $map, $param) and
-    sassmap.has-key( $map, $breakpoint)
-  ) {
-    @media screen and
-      (min-width: sassmap.get($map, $breakpoint)) and
-      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };
-  } @else if (
-    $param == 'downfrom' and
-    sassmap.get($map, $breakpoint) > 0 and
-    $breakpoint != 'xs'
-  ) {
+  } @else if ($param == "down" and not sassmap.has-key($map, $breakpoint)) {
+    @media screen and (max-width: $breakpoint) {
+      @content;
+    }
+  } @else if ($param == "only" and map.next($map, $breakpoint)) {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: map.next($map, $breakpoint) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (sassmap.has-key($map, $param) and sassmap.has-key($map, $breakpoint))
+  {
+    @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: sassmap.get($map, $param) - 0.02px) {
+      @content;
+    }
+  } @else if
+    (
+      $param ==
+        "downfrom" and
+        sassmap.get($map, $breakpoint) >
+        0 and
+        $breakpoint !=
+        "xs"
+    )
+  {
     @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {
       @content;
     } // -1
-  } @else if (meta.type-of($param) == 'number') {
+  } @else if (meta.type-of($param) == "number") {
     @if sassmap.has-key($map, $breakpoint) {
       // breakpoint is in breakpoint map
-      @media screen and
-        (min-width: sassmap.get($map, $breakpoint)) and
-        (max-width: $param) { @content; };
+      @media screen and (min-width: sassmap.get($map, $breakpoint)) and (max-width: $param) {
+        @content;
+      }
     } @else {
       // breakpoint is not in breakpoint map, let's use custom value
-      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }
+      @media screen and (min-width: $breakpoint) and (max-width: $param) {
+        @content;
+      }
     }
-  } @else if (
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and
-    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and
-    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')
-  ) {
+  } @else if
+    (
+      not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "down"
+        ) and not
+        (
+          $breakpoint == list.nth(sassmap.keys($map), -1) and $param == "only"
+        ) and not
+        (
+          $breakpoint ==
+            list.nth(sassmap.keys($map), 1) and
+            $param ==
+            "downfrom"
+        )
+    )
+  {
     // do nothing on known edge cases. we just dont generate any code.
     @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';
   }
@@ -92,7 +107,7 @@ $map: (
 @mixin each() {
   @each $breakpoint, $size in $map {
     @include get($breakpoint) {
-      @content($breakpoint);
+      @content ($breakpoint);
     }
   }
 }

package/src/styles/tokens/space.scss

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use "sass:math";
-@use '../tools/convert';
+@use "../tools/convert";
 
 $map: (
-  'none': 0,
-  'xsmall': 5px,
-  'small': 10px,
-  'medium': 20px,
-  'large': 30px,
-  'xlarge': 60px,
+  "none": 0,
+  "xsmall": 5px,
+  "small": 10px,
+  "medium": 20px,
+  "large": 30px,
+  "xlarge": 60px,
 );
 
 /// Get space size from $space
@@ -16,11 +16,11 @@ $map: (
 /// @example
 ///   get-space();
 ///   get-space('small');
-@function get($size: 'medium') {
+@function get($size: "medium") {
   @if map.has-key($map, $size) {
     $space: map.get($map, $size);
 
-    @return if(math.unit($space) == 'rem', $space, convert.to-rem($space));
+    @return if(math.unit($space) == "rem", $space, convert.to-rem($space));
   } @else {
     @error 'Cannot find key ($size) \'#{$size}\' in $space \'#{$space}\'';
   }

package/src/styles/tools/generate.scss

@@ -1,5 +1,5 @@
-@use '../tokens/breakpoint';
-@use './map' as *;
+@use "../tokens/breakpoint";
+@use "./map" as *;
 
 /// Get css propeties from map
 ///
@@ -68,7 +68,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin variants($map, $className: '', $classSuffix: '') {
+@mixin variants($map, $className: "", $classSuffix: "") {
   @each $variant, $props in $map {
     #{if(&, "&", "")}#{$className + variant-name($variant) + $classSuffix} {
       @include css-map($props);
@@ -81,7 +81,7 @@
 /// @param {Map} $map - map
 /// @param {Map} $className - class name of element
 /// @param {Map} $classSuffix - suffix for class name of element
-@mixin responsive-variants($map, $className: '', $classSuffix: '') {
+@mixin responsive-variants($map, $className: "", $classSuffix: "") {
   @each $breakpoint, $props in $map {
     @include breakpoint.get($breakpoint) {
       @include variants($props, $className, $classSuffix);
@@ -97,9 +97,9 @@
 /// // -primary
 ///   variant-name('default')
 ///
-@function variant-name($name, $prefix: '--', $suffix: '') {
+@function variant-name($name, $prefix: "--", $suffix: "") {
   @if not $name or $name == default or $name == xs {
-    @return '';
+    @return "";
   }
 
   @return #{$prefix + $name + $suffix};

package/src/styles/tools/layout.scss

@@ -1,11 +1,11 @@
-@use '../tokens/base';
+@use "../tokens/base";
 
 // -- Nicolas Gallagher's micro clearfix
 @mixin clearfix {
   &::before,
   &::after {
     // For modern browsers
-    content: '';
+    content: "";
     display: table;
   }
 
@@ -18,7 +18,7 @@
  * Resets margin-bottom of the last child to zero
  */
 @mixin reset-last-child-margin-bottom {
-  > :not([class*='mb\-']):last-child {
+  > :not([class*="mb\-"]):last-child {
     margin-bottom: 0;
   }
 }

package/src/styles/tools/map.scss

@@ -9,7 +9,7 @@
 /// @param {Mixed} $key - Key to use as a starting point.
 ///
 /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
-@function next($map, $key, $return: 'value') {
+@function next($map, $key, $return: "value") {
   // Store the keys of the map as a list
   $values: map.keys($map);
 
@@ -26,7 +26,7 @@
   }
   // Otherwise, return the value
   @else {
-    @if $return == 'value' {
+    @if $return == "value" {
       @return map.get($map, list.nth($values, $i));
     } @else {
       @return list.nth($values, $i);

package/src/styles/tools/text.scss

@@ -12,7 +12,7 @@
 /// @param {String} $search - Substring to replace
 /// @param {String} $replace ('') - New value
 /// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
+@function str-replace($string, $search, $replace: "") {
   $index: string.index($string, $search);
 
   @if $index {

package/src/styles/utilities/index.scss

@@ -1,7 +1,7 @@
-@forward 'color';
-@forward 'text';
-@forward 'border';
-@forward 'layout';
-@forward 'visibility';
-@forward 'ordering';
-@forward 'horizontal-scroll';
+@forward "color";
+@forward "text";
+@forward "border";
+@forward "layout";
+@forward "visibility";
+@forward "ordering";
+@forward "horizontal-scroll";