@elliemae/ds-basic 3.22.0-rc.7 → 3.22.0-rc.9

package/dist/styles/components/packages/ds-basic/static-build/styles/base/_generic/_generic-dir.scss

@@ -1,2 +1,2 @@
 @import './_normalize.scss';
-@import './general-functions.scss';
+@import './general-functions.scss';

package/dist/styles/components/packages/ds-basic/static-build/styles/base/border.scss

@@ -4,18 +4,12 @@ $border-unit: 1px !default;
 // Learn more here: https://builttoadapt.io/intro-to-the-8-border-grid-system-d2573cde8632
 
 $border-size-data: (
-  none: 0,
-  xxs: rem($border-unit * 0.5),
-  // 0.5px
-  xs: rem($border-unit),
-  // 1px
-  s: rem($border-unit * 1.5),
-  // 1.5px
-  m: rem($border-unit * 2),
-  // 2px
-  l: rem($border-unit * 2.5),
-  // 2.5px
-  xl: rem($border-unit * 3),
-  // 3px
-  xxl: rem($border-unit * 4) // 3.5px,
+        none: 0,
+        xxs:  rem($border-unit * 0.5), // 0.5px
+        xs:   rem($border-unit),     // 1px
+        s:    rem($border-unit * 1.5), // 1.5px
+        m:    rem($border-unit * 2), // 2px
+        l:    rem($border-unit * 2.5), // 2.5px
+        xl:   rem($border-unit * 3), // 3px
+        xxl:  rem($border-unit * 4)  // 3.5px
 ) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/base/color.scss

@@ -12,7 +12,7 @@ $color-palette-data: (
     100: $theme-color-neutral-100,
     080: $theme-color-neutral-080,
     050: $theme-color-neutral-050,
-    000: $theme-color-neutral-000,
+    000: $theme-color-neutral-000
   ),
 
   brand-primary: (
@@ -24,7 +24,7 @@ $color-palette-data: (
     400: $theme-color-brand-primary-400,
     300: $theme-color-brand-primary-300,
     200: $theme-color-brand-primary-200,
-    100: $theme-color-brand-primary-100,
+    100: $theme-color-brand-primary-100
   ),
 
   brand-secondary: (
@@ -36,7 +36,7 @@ $color-palette-data: (
     400: $theme-color-brand-secondary-400,
     300: $theme-color-brand-secondary-300,
     200: $theme-color-brand-secondary-200,
-    100: $theme-color-brand-secondary-100,
+    100: $theme-color-brand-secondary-100
   ),
 
   success: (
@@ -48,7 +48,7 @@ $color-palette-data: (
     400: $theme-color-success-400,
     300: $theme-color-success-300,
     200: $theme-color-success-200,
-    100: $theme-color-success-100,
+    100: $theme-color-success-100
   ),
 
   warning: (
@@ -60,7 +60,7 @@ $color-palette-data: (
     400: $theme-color-warning-400,
     300: $theme-color-warning-300,
     200: $theme-color-warning-200,
-    100: $theme-color-warning-100,
+    100: $theme-color-warning-100
   ),
 
   danger: (
@@ -72,6 +72,6 @@ $color-palette-data: (
     400: $theme-color-danger-400,
     300: $theme-color-danger-300,
     200: $theme-color-danger-200,
-    100: $theme-color-danger-100,
-  ),
+    100: $theme-color-danger-100
+  ) 
 ) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/base/depth.scss

@@ -1,71 +1,26 @@
 $shadows-data: (
-  500: (
-    0 27px 24px 0 rgba(0, 0, 0, 0.24),
-    0 40px 77px 0 rgba(0, 0, 0, 0.19),
-  ),
-  400: (
-    0 16px 28px 0 rgba(0, 0, 0, 0.24),
-    0 25px 55px 0 rgba(0, 0, 0, 0.19),
-  ),
-  300: (
-    0 12px 15px 0 rgba(0, 0, 0, 0.24),
-    0 17px 50px 0 rgba(0, 0, 0, 0.19),
-  ),
-  200: (
-    0 6px 20px 0 rgba(0, 0, 0, 0.24),
-    0 8px 17px 0 rgba(0, 0, 0, 0.19),
-  ),
-  100: (
-    0 1px 5px 0 rgba(0, 0, 0, 0.13),
-    0 2px 4px 0 rgba(0, 0, 0, 0.2),
-  ),
-  000: 0 0 0 0 transparent,
+        500: (0 27px 24px 0 rgba(0, 0, 0, 0.24), 0 40px 77px 0 rgba(0, 0, 0, 0.19)),
+        400: (0 16px 28px 0 rgba(0, 0, 0, 0.24), 0 25px 55px 0 rgba(0, 0, 0, 0.19)),
+        300: (0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)),
+        200: (0 6px 20px 0 rgba(0, 0, 0, 0.24), 0 8px 17px 0 rgba(0, 0, 0, 0.19)),
+        100: (0 1px 5px 0 rgba(0, 0, 0, 0.13), 0 2px 4px 0 rgba(0, 0, 0, 0.2)),
+        000: 0 0 0 0 transparent
 ) !default;
 
 $shadows-data-alt: (
-  500: (
-    0 0 0 1px rgba(16, 22, 26, 0.1),
-    0 27px 24px rgba(16, 22, 26, 0.2),
-    0 40px 77px rgba(16, 22, 26, 0.2),
-  ),
-  400: (
-    0 0 0 1px rgba(16, 22, 26, 0.1),
-    0 16px 28px rgba(16, 22, 26, 0.2),
-    0 25px 55 rgba(16, 22, 26, 0.2),
-  ),
-  300: (
-    0 0 0 1px rgba(16, 22, 26, 0.1),
-    0 12px 15px rgba(16, 22, 26, 0.2),
-    0 17px 50 rgba(16, 22, 26, 0.2),
-  ),
-  200: (
-    0 0 0 1px rgba(16, 22, 26, 0.1),
-    0 2px 4px rgba(16, 22, 26, 0.2),
-    0 8px 24px rgba(16, 22, 26, 0.2),
-  ),
-  100: (
-    0 0 0 1px rgba(16, 22, 26, 0.1),
-    0 0px 0px rgba(16, 22, 26, 0.2),
-    0 0px 0px rgba(16, 22, 26, 0.2),
-  ),
-  000: 0 0 0 0 transparent,
+        500: (0 0 0 1px rgba(16,22,26,.1), 0 27px 24px rgba(16,22,26,.2), 0 40px 77px rgba(16,22,26,.2)),
+        400: (0 0 0 1px rgba(16,22,26,.1), 0 16px 28px rgba(16,22,26,.2), 0 25px 55 rgba(16,22,26,.2)),
+        300: (0 0 0 1px rgba(16,22,26,.1), 0 12px 15px rgba(16,22,26,.2), 0 17px 50 rgba(16,22,26,.2)),
+        200: (0 0 0 1px rgba(16,22,26,.1), 0 2px 4px rgba(16,22,26,.2), 0 8px 24px rgba(16,22,26,.2)),
+        100: (0 0 0 1px rgba(16,22,26,.1), 0 0px 0px rgba(16,22,26,.2), 0 0px 0px rgba(16,22,26,.2)),
+        000: 0 0 0 0 transparent
 ) !default;
 
-$drop-shadow-data: (
-  500: (
-    0 27px 24px rgba(0, 0, 0, 0.3),
-  ),
-  400: (
-    0 16px 28px rgba(0, 0, 0, 0.3),
-  ),
-  300: (
-    0 12px 15px rgba(0, 0, 0, 0.3),
-  ),
-  200: (
-    0 6px 20px rgba(0, 0, 0, 0.3),
-  ),
-  100: (
-    0 0px 2px rgba(0, 0, 0, 0.3),
-  ),
-  000: 0 0 0 0 transparent,
+$drop-shadow-data:(
+        500: (0 27px 24px rgba(0, 0, 0, 0.3)),
+        400: (0 16px 28px rgba(0, 0, 0, 0.3)),
+        300: (0 12px 15px rgba(0, 0, 0, 0.3)),
+        200: (0 6px 20px rgba(0, 0, 0, 0.3)),
+        100: (0 0px 2px rgba(0, 0, 0, 0.3)),
+        000: 0 0 0 0 transparent
 ) !default;

package/dist/styles/components/packages/ds-basic/static-build/styles/base/fonts/font-base.scss

@@ -3,98 +3,98 @@
 // Regular font style
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThin.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThin.woff') format('woff');
   font-weight: 100;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLight.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLight.woff') format('woff');
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMedium.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMedium.woff') format('woff');
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemibold.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemibold.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBold.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBold.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtrabold.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtrabold.woff') format('woff');
   font-weight: 800;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlack.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlack.woff') format('woff');
   font-weight: 900;
   font-style: normal;
 }
 // Italic font style
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThinItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThinItalic.woff') format('woff');
   font-weight: 100;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLightItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLightItalic.woff') format('woff');
   font-weight: 300;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegularItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegularItalic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMediumItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMediumItalic.woff') format('woff');
   font-weight: 500;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemiboldItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemiboldItalic.woff') format('woff');
   font-weight: 600;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBoldItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBoldItalic.woff') format('woff');
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtraboldItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtraboldItalic.woff') format('woff');
   font-weight: 800;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlackItalic.otf') format('opentype');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlackItalic.woff') format('woff');
   font-weight: 900;
   font-style: italic;
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/_grid-var-styles.scss

@@ -52,4 +52,4 @@ $global-color-pick-contrast-tolerance: 0 !default;
   .is-hidden {
     display: none !important;
   }
-}
+}

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/functions/_contain.scss

@@ -25,7 +25,7 @@
 /// @requires sl-contain
 /// @alias sl-contain
 ///
-
+ 
 @function sl-include($list, $value) {
   @return sl-contain($list, $value);
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/functions/_purge.scss

@@ -16,7 +16,7 @@
 
 @function sl-purge($list) {
   $_: sl-missing-dependencies('sl-is-true', 'sl-to-list');
-
+  
   $result: ();
 
   @each $item in $list {
@@ -32,7 +32,7 @@
 /// @requires sl-purge
 /// @alias sl-purge
 ///
-
+ 
 @function sl-clean($list) {
   @return sl-purge($list);
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/functions/_replace.scss

@@ -18,7 +18,7 @@
 /// // a b c
 
 /// @return {List}
-
+ 
 @function sl-replace($list, $old, $value) {
   $running: true;
 
@@ -27,12 +27,14 @@
 
     @if not $index {
       $running: false;
-    } @else {
+    }
+
+    @else {
       $list: set-nth($list, $index, $value);
     }
   }
 
   $list: if(sl-is-true($value), $list, sl-purge($list));
-
+  
   @return sl-to-list($list);
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/functions/_to-list.scss

@@ -9,7 +9,7 @@
 /// @example
 /// sl-to-list(a b c, comma)
 /// // a, b, c
-///
+/// 
 /// @return {List}
 ///
 

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/helpers/_missing-dependencies.scss

@@ -7,16 +7,16 @@
 ///
 /// @return {Bool} Whether or not there are missing dependencies
 ///
-
+ 
 @function sl-missing-dependencies($functions...) {
   $missing-dependencies: ();
-
+  
   @each $function in $functions {
     @if not function-exists($function) {
       $missing-dependencies: append($missing-dependencies, $function, comma);
     }
   }
-
+  
   @if length($missing-dependencies) > 0 {
     @error 'Unmet dependencies! The following functions are required: #{$missing-dependencies}.';
   }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/helpers/_true.scss

@@ -7,7 +7,7 @@
 ///
 /// @return {Bool}
 ///
-
+ 
 @function sl-is-true($value) {
   @return if($value == null, false, $value and $value != null and $value != '' and $value != ());
 }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_color.scss

@@ -3,3 +3,6 @@
 // Licensed under MIT Open Source
 
 @import 'math';
+
+
+

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_direction.scss

@@ -10,7 +10,9 @@
 ///
 /// @param {Keyword} $dir - Used direction between "top", "right", "bottom" and "left".
 /// @return {Keyword} Opposite direction of $dir
-@function direction-opposite($dir) {
+@function direction-opposite(
+  $dir
+) {
   $dirs: (top, right, bottom, left);
   $place: index($dirs, $dir);
 
@@ -26,3 +28,4 @@
 
   @return nth($dirs, $opposite-place);
 }
+

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_flex.scss

@@ -1,4 +1,4 @@
-@function -zf-flex-justify($text-direction) {
+@function -zf-flex-justify($text-direction){
   $-zf-flex-justify: (
     'left': if($text-direction == rtl, flex-end, flex-start),
     'right': if($text-direction == rtl, flex-start, flex-end),
@@ -10,6 +10,7 @@
   @return $-zf-flex-justify;
 }
 
+
 $-zf-flex-align: (
   'top': flex-start,
   'bottom': flex-end,
@@ -37,7 +38,8 @@ $-zf-flex-direction: (
   @if $x {
     @if map-has-key($-zf-flex-justify, $x) {
       $x: map-get($-zf-flex-justify, $x);
-    } @else {
+    }
+    @else {
       @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';
     }
   }
@@ -45,7 +47,8 @@ $-zf-flex-direction: (
   @if $y {
     @if map-has-key($-zf-flex-align, $y) {
       $y: map-get($-zf-flex-align, $y);
-    } @else {
+    }
+    @else {
       @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';
     }
   }
@@ -61,7 +64,8 @@ $-zf-flex-direction: (
   @if $y {
     @if map-has-key($-zf-flex-align, $y) {
       $y: map-get($-zf-flex-align, $y);
-    } @else {
+    }
+    @else {
       @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';
     }
   }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_math.scss

@@ -16,7 +16,8 @@
   // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
   @if ($b != 0) {
     @return gcd($b, $a % $b);
-  } @else {
+  }
+  @else {
     @return abs($a);
   }
 }
@@ -29,7 +30,7 @@
 /// @returns {Number} The product of the exponentiation.
 @function pow($base, $exponent, $prec: 16) {
   @if (floor($exponent) != $exponent) {
-    $prec2: pow(10, $prec);
+    $prec2 : pow(10, $prec);
     $exponent: round($exponent * $prec2);
     $denominator: gcd($exponent, $prec2);
     @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
@@ -40,7 +41,8 @@
     @for $i from 2 through $exponent {
       $value: $value * $base;
     }
-  } @else if $exponent < 1 {
+  }
+  @else if $exponent < 1 {
     @for $i from 0 through -$exponent {
       $value: $value / $base;
     }

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_mixins.scss

@@ -7,21 +7,26 @@
 ////
 
 /// Creates an inner box-shadow for only one side
-///
+/// 
 /// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
 /// @param {Number} $size - Width for the target side.
 /// @param {Color} $color - Color of the shadow.
-@mixin inner-side-shadow($side: bottom, $size: 20px, $color: rgba($black, 0.25)) {
+@mixin inner-side-shadow(
+  $side: bottom,
+  $size: 20px,
+  $color: rgba($black, 0.25)
+) {
+
   $helper: round($size * 0.65);
 
   @if ($side == top) {
-    box-shadow: inset 0 $helper $size (-1) * $helper $color;
+    box-shadow: inset 0 $helper $size (-1)*$helper $color;
   } @else if ($side == left) {
-    box-shadow: inset $helper 0 $size (-1) * $helper $color;
+    box-shadow: inset $helper 0 $size (-1)*$helper $color;
   } @else if ($side == right) {
-    box-shadow: inset (-1) * $helper 0 $size (-1) * $helper $color;
+    box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
   } @else if ($side == bottom) {
-    box-shadow: inset 0 (-1) * $helper $size (-1) * $helper $color;
+    box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
   }
 }
 
@@ -30,7 +35,11 @@
 /// @param {Number} $triangle-size - Width of the triangle.
 /// @param {Color} $triangle-color - Color of the triangle.
 /// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.
-@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+@mixin css-triangle(
+  $triangle-size,
+  $triangle-color,
+  $triangle-direction
+) {
   display: block;
   width: 0;
   height: 0;
@@ -69,7 +78,14 @@
 /// @param {Number} $height [16px] - Height of the icon.
 /// @param {Number} $weight [2px] - Height of individual bars in the icon.
 /// @param {Number} $bars [3] - Number of bars in the icon.
-@mixin hamburger($color: $black, $color-hover: $dark-gray, $width: 20px, $height: 16px, $weight: 2px, $bars: 3) {
+@mixin hamburger(
+  $color: $black,
+  $color-hover: $dark-gray,
+  $width: 20px,
+  $height: 16px,
+  $weight: 2px,
+  $bars: 3
+) {
   // box-shadow CSS output
   $shadow: ();
   $hover-shadow: ();
@@ -134,11 +150,12 @@
 
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #{$rgb}'></polygon></svg>");
 
-  @media screen and (min-width: 0\0) {
+  @media screen and (min-width:0\0) {
     @if lightness($color) < 60% {
       // White triangle
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
-    } @else {
+    }
+    @else {
       // Black triangle
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
     }
@@ -196,7 +213,7 @@
   height: 1px;
   padding: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0,0,0,0);
   white-space: nowrap;
   clip-path: inset(50%);
   border: 0;
@@ -256,7 +273,8 @@
       @include breakpoint($name) {
         @content;
       }
-    } @else {
+    }
+    @else {
       @content;
     }
   }
@@ -268,7 +286,10 @@
 /// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
 /// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
 /// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
-@mixin -zf-breakpoint-value($name: auto, $map: null) {
+@mixin -zf-breakpoint-value(
+  $name: auto,
+  $map: null
+) {
   @if $name == auto and type-of($map) == 'map' {
     // "auto"
     @each $k, $v in $map {
@@ -278,7 +299,8 @@
         }
       }
     }
-  } @else {
+  }
+  @else {
     // breakpoint name
     @if type-of($name) == 'string' {
       $name: -zf-get-bp-val($map, $name);

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_selector.scss

@@ -13,14 +13,28 @@
 @function text-inputs($types: (), $modifier: '') {
   $return: ();
 
-  $all-types: text password date datetime datetime-local month week email number search tel time url color;
+  $all-types:
+    text
+    password
+    date
+    datetime
+    datetime-local
+    month
+    week
+    email
+    number
+    search
+    tel
+    time
+    url
+    color;
 
   @if not has-value($types) {
     $types: $all-types;
   }
 
   @each $type in $types {
-    $return: append($return, unquote("[type='#{$type}']#{$modifier}"), comma);
+    $return: append($return, unquote('[type=\'#{$type}\']#{$modifier}'), comma);
   }
 
   @return $return;

package/dist/styles/components/packages/ds-basic/static-build/styles/base/grid/util/_unit.scss

@@ -104,6 +104,7 @@ $global-font-size: 100% !default;
 ///
 /// @return {Number} - Unitless number
 @function unitless-calc($value, $base: null) {
+
   // If no base is defined, defer to the global font size
   @if $base == null {
     $base: $global-font-size;