@elliemae/ds-basic 3.50.1-next.8 → 3.51.0-beta.1

package/dist/styles/components/index.scss

@@ -42,6 +42,7 @@
 @import 'packages/ds-page-header/DSPageHeader';
 @import 'packages/ds-pills/DSPills';
 @import 'packages/ds-zoom/DSZoom';
+
 @import 'packages/ds-page-number/DSPageNumber';
 @import 'packages/ds-zipcode-search/DSZipCodeSearch';
 @import 'packages/ds-circular-progress-indicator/DSCircularProgressIndicator';

package/dist/styles/components/packages/ds-basic/index.scss

@@ -31,13 +31,13 @@
 @import '../../../agregators/ds-tooltip/src/v1/DSTooltip';
 @import '../../../legacy/ds-popover/src/DSPopover';
 @import '../../../legacy/ds-overlay/src/DSOverlay';
-@import '../../../util/ds-portal/src/DSPortal';
+@import '../../../legacy/ds-portal/src/DSPortal';
 @import '../../../legacy/ds-button-v1/src/DSButton';
 @import '../../../atom/ds-separator/src/DSSeparator';
 @import '../../../legacy/ds-label-value/src/DSLabelValue';
 @import '../../../legacy/ds-group-box/src/DSGroupBox';
 @import '../../../legacy/ds-text-wrapper/src/DSTextWrapper';
-@import '../../../layout/ds-card/src/DSCard';
+@import '../../../legacy/ds-card/src/DSCard';
 @import '../../../legacy/ds-button-group/src//DSButtonGroup';
 @import '../../../legacy/ds-dropdownmenu/src/DSDropdownMenu';
 @import '../../../legacy/ds-menu/src/Menu';

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,12 +4,18 @@ $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,26 +1,71 @@
 $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,.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
+  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,
 ) !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.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThin.otf') format('opentype');
   font-weight: 100;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLight.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLight.otf') format('opentype');
   font-weight: 300;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegular.otf') format('opentype');
   font-weight: normal;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMedium.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMedium.otf') format('opentype');
   font-weight: 500;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemibold.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemibold.otf') format('opentype');
   font-weight: 600;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBold.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBold.otf') format('opentype');
   font-weight: bold;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtrabold.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtrabold.otf') format('opentype');
   font-weight: 800;
   font-style: normal;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlack.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlack.otf') format('opentype');
   font-weight: 900;
   font-style: normal;
 }
 // Italic font style
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThinItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaThinItalic.otf') format('opentype');
   font-weight: 100;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLightItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaLightItalic.otf') format('opentype');
   font-weight: 300;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegularItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaRegularItalic.otf') format('opentype');
   font-weight: normal;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMediumItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaMediumItalic.otf') format('opentype');
   font-weight: 500;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemiboldItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaSemiboldItalic.otf') format('opentype');
   font-weight: 600;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBoldItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBoldItalic.otf') format('opentype');
   font-weight: bold;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtraboldItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaExtraboldItalic.otf') format('opentype');
   font-weight: 800;
   font-style: italic;
 }
 @font-face {
   font-family: 'proxima-nova';
-  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlackItalic.woff') format('woff');
+  src: url('~@elliemae/ds-basic/styles/base/fonts/ProximaNovaBlackItalic.otf') format('opentype');
   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,14 +27,12 @@
 
     @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,6 +3,3 @@
 // Licensed under MIT Open Source
 
 @import 'math';
-
-
-

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

@@ -10,9 +10,7 @@
 ///
 /// @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);
 
@@ -28,4 +26,3 @@
 
   @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,7 +10,6 @@
   @return $-zf-flex-justify;
 }
 
-
 $-zf-flex-align: (
   'top': flex-start,
   'bottom': flex-end,
@@ -38,8 +37,7 @@ $-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.';
     }
   }
@@ -47,8 +45,7 @@ $-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.';
     }
   }
@@ -64,8 +61,7 @@ $-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,8 +16,7 @@
   // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
   @if ($b != 0) {
     @return gcd($b, $a % $b);
-  }
-  @else {
+  } @else {
     @return abs($a);
   }
 }
@@ -30,7 +29,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);
@@ -41,8 +40,7 @@
     @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,26 +7,21 @@
 ////
 
 /// 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;
   }
 }
 
@@ -35,11 +30,7 @@
 /// @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;
@@ -78,14 +69,7 @@
 /// @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: ();
@@ -150,12 +134,11 @@
 
   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==');
     }
@@ -213,7 +196,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;
@@ -273,8 +256,7 @@
       @include breakpoint($name) {
         @content;
       }
-    }
-    @else {
+    } @else {
       @content;
     }
   }
@@ -286,10 +268,7 @@
 /// - 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 {
@@ -299,8 +278,7 @@
         }
       }
     }
-  }
-  @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,28 +13,14 @@
 @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;