@energycap/components 0.45.1 → 0.45.2-multi-select-component.20260303-0733

package/src/styles/_colors.scss

@@ -1,96 +1,96 @@
-// Variables for the EnergyCAP brand color pallette
-// Colors go from lighter (1) to darker (8).
-$black: rgb(26, 26, 35);
-$white: rgb(255, 255, 255);
-
-$gray-1: rgb(218, 228, 233);
-$gray-2: rgb(172, 188, 195);
-$gray-3: rgb(140, 156, 165);
-$gray-4: rgb(117, 132, 143);
-$gray-5: rgb(94, 109, 121);
-$gray-6: rgb(73, 89, 99);
-$gray-7: rgb(53, 71, 81);
-$gray-8: rgb(22, 47, 59);
-
-$red-1: rgb(255, 225, 231);
-$red-2: rgb(255, 178, 192);
-$red-3: rgb(255, 138, 159);
-$red-4: rgb(254, 88, 117);
-$red-5: rgb(237, 56, 88);
-$red-6: rgb(219, 11, 48);
-$red-7: rgb(197, 1, 36);
-$red-8: rgb(150, 0, 27);
-
-$orange-1: rgb(253, 195, 161);
-$orange-2: rgb(255, 181, 137);
-$orange-3: rgb(255, 147, 83);
-$orange-4: rgb(255, 131, 57);
-$orange-5: rgb(249, 106, 21);
-$orange-6: rgb(235, 91, 6);
-$orange-7: rgb(214, 80, 2);
-$orange-8: rgb(194, 72, 0);
-
-$yellow-1: rgb(255, 249, 195);
-$yellow-2: rgb(255, 239, 155);
-$yellow-3: rgb(255, 230, 100);
-$yellow-4: rgb(255, 222, 50);
-$yellow-5: rgb(245, 207, 8);
-$yellow-6: rgb(232, 182, 4);
-$yellow-7: rgb(214, 150, 4);
-$yellow-8: rgb(178, 124, 0);
-
-$green-1: rgb(227, 251, 214);
-$green-2: rgb(194, 236, 172);
-$green-3: rgb(153, 216, 120);
-$green-4: rgb(99, 184, 54);
-$green-5: rgb(43, 154, 3);
-$green-6: rgb(39, 134, 4);
-$green-7: rgb(40, 111, 15);
-$green-8: rgb(24, 86, 2);
-
-$blue-1: rgb(185, 237, 252);
-$blue-2: rgb(172, 228, 243);
-$blue-3: rgb(118, 206, 230);
-$blue-4: rgb(64, 183, 216);
-$blue-5: rgb(42, 163, 196);
-$blue-6: rgb(36, 143, 172);
-$blue-7: rgb(26, 111, 135);
-$blue-8: rgb(10, 74, 92);
-
-$purple-1: rgb(237, 220, 255);
-$purple-2: rgb(215, 180, 253);
-$purple-3: rgb(188, 140, 239);
-$purple-4: rgb(165, 114, 220);
-$purple-5: rgb(147, 85, 214);
-$purple-6: rgb(118, 48, 193);
-$purple-7: rgb(95, 20, 175);
-$purple-8: rgb(75, 7, 147);
-
-$cobalt-1: rgb(218, 229, 251);
-$cobalt-2: rgb(153, 185, 251);
-$cobalt-3: rgb(109, 164, 254);
-$cobalt-4: rgb(70, 132, 232);
-$cobalt-5: rgb(66, 117, 216);
-$cobalt-6: rgb(45, 92, 184);
-$cobalt-7: rgb(22, 63, 140);
-$cobalt-8: rgb(6, 47, 125);
-
-$aqua-1: rgb(219, 255, 246);
-$aqua-2: rgb(196, 250, 237);
-$aqua-3: rgb(121, 232, 205);
-$aqua-4: rgb(55, 213, 175);
-$aqua-5: rgb(45, 184, 151);
-$aqua-6: rgb(34, 153, 125);
-$aqua-7: rgb(30, 116, 96);
-$aqua-8: rgb(28, 89, 75);
-
-$pink-1: rgb(255, 223, 244);
-$pink-2: rgb(255, 194, 235);
-$pink-3: rgb(232, 127, 197);
-$pink-4: rgb(228, 85, 180);
-$pink-5: rgb(207, 61, 158);
-$pink-6: rgb(185, 13, 127);
-$pink-7: rgb(182, 10, 124);
-$pink-8: rgb(151, 3, 101);
-
-$ec-color-accrual: rgb(35, 195, 205);
+// Variables for the EnergyCAP brand color pallette
+// Colors go from lighter (1) to darker (8).
+$black: rgb(26, 26, 35);
+$white: rgb(255, 255, 255);
+
+$gray-1: rgb(218, 228, 233);
+$gray-2: rgb(172, 188, 195);
+$gray-3: rgb(140, 156, 165);
+$gray-4: rgb(117, 132, 143);
+$gray-5: rgb(94, 109, 121);
+$gray-6: rgb(73, 89, 99);
+$gray-7: rgb(53, 71, 81);
+$gray-8: rgb(22, 47, 59);
+
+$red-1: rgb(255, 225, 231);
+$red-2: rgb(255, 178, 192);
+$red-3: rgb(255, 138, 159);
+$red-4: rgb(254, 88, 117);
+$red-5: rgb(237, 56, 88);
+$red-6: rgb(219, 11, 48);
+$red-7: rgb(197, 1, 36);
+$red-8: rgb(150, 0, 27);
+
+$orange-1: rgb(253, 195, 161);
+$orange-2: rgb(255, 181, 137);
+$orange-3: rgb(255, 147, 83);
+$orange-4: rgb(255, 131, 57);
+$orange-5: rgb(249, 106, 21);
+$orange-6: rgb(235, 91, 6);
+$orange-7: rgb(214, 80, 2);
+$orange-8: rgb(194, 72, 0);
+
+$yellow-1: rgb(255, 249, 195);
+$yellow-2: rgb(255, 239, 155);
+$yellow-3: rgb(255, 230, 100);
+$yellow-4: rgb(255, 222, 50);
+$yellow-5: rgb(245, 207, 8);
+$yellow-6: rgb(232, 182, 4);
+$yellow-7: rgb(214, 150, 4);
+$yellow-8: rgb(178, 124, 0);
+
+$green-1: rgb(227, 251, 214);
+$green-2: rgb(194, 236, 172);
+$green-3: rgb(153, 216, 120);
+$green-4: rgb(99, 184, 54);
+$green-5: rgb(43, 154, 3);
+$green-6: rgb(39, 134, 4);
+$green-7: rgb(40, 111, 15);
+$green-8: rgb(24, 86, 2);
+
+$blue-1: rgb(185, 237, 252);
+$blue-2: rgb(172, 228, 243);
+$blue-3: rgb(118, 206, 230);
+$blue-4: rgb(64, 183, 216);
+$blue-5: rgb(42, 163, 196);
+$blue-6: rgb(36, 143, 172);
+$blue-7: rgb(26, 111, 135);
+$blue-8: rgb(10, 74, 92);
+
+$purple-1: rgb(237, 220, 255);
+$purple-2: rgb(215, 180, 253);
+$purple-3: rgb(188, 140, 239);
+$purple-4: rgb(165, 114, 220);
+$purple-5: rgb(147, 85, 214);
+$purple-6: rgb(118, 48, 193);
+$purple-7: rgb(95, 20, 175);
+$purple-8: rgb(75, 7, 147);
+
+$cobalt-1: rgb(218, 229, 251);
+$cobalt-2: rgb(153, 185, 251);
+$cobalt-3: rgb(109, 164, 254);
+$cobalt-4: rgb(70, 132, 232);
+$cobalt-5: rgb(66, 117, 216);
+$cobalt-6: rgb(45, 92, 184);
+$cobalt-7: rgb(22, 63, 140);
+$cobalt-8: rgb(6, 47, 125);
+
+$aqua-1: rgb(219, 255, 246);
+$aqua-2: rgb(196, 250, 237);
+$aqua-3: rgb(121, 232, 205);
+$aqua-4: rgb(55, 213, 175);
+$aqua-5: rgb(45, 184, 151);
+$aqua-6: rgb(34, 153, 125);
+$aqua-7: rgb(30, 116, 96);
+$aqua-8: rgb(28, 89, 75);
+
+$pink-1: rgb(255, 223, 244);
+$pink-2: rgb(255, 194, 235);
+$pink-3: rgb(232, 127, 197);
+$pink-4: rgb(228, 85, 180);
+$pink-5: rgb(207, 61, 158);
+$pink-6: rgb(185, 13, 127);
+$pink-7: rgb(182, 10, 124);
+$pink-8: rgb(151, 3, 101);
+
+$ec-color-accrual: rgb(35, 195, 205);

package/src/styles/_core.scss

@@ -1,4 +1,4 @@
-@import 'functions';
-@import 'colors';
-@import 'mixins/common';
+@import 'functions';
+@import 'colors';
+@import 'mixins/common';
 @import 'icons';

package/src/styles/_functions.scss

@@ -1,114 +1,114 @@
-// Common functions
-
-// Returns the measurement of an inner radius by subtracting 1px from the outer-radius given
-@use "sass:math";
-
-@function inner-radius($outer-radius) {
-  @return calc(#{$outer-radius} -  1px);
-}
-
-/// Replace every instance of $search in a giving $string with the value of $replace
-/// @param {string} $string
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
-/// @param {Number} $num - Number to strip unit from.
-/// @returns {Number} The same number, sans unit.
-/// @source https://github.com/zurb/foundation-apps/blob/master/scss/helpers/_functions.scss
-@function strip-unit($num) {
-  @return math.div($num, $num * 0 + 1);
-}
-
-/// Converts one or more pixel values into matching rem values.
-/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
-/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
-///
-/// @returns {List} A list of converted values.
-/// @source https://github.com/zurb/foundation-apps/blob/master/scss/helpers/_functions.scss
-@function rem-calc($values, $base: null) {
-  $rem-values: ();
-  $count: length($values);
-
-  // If no base is defined, defer to the global font size
-  @if $base == null {
-    $base: 100%;
-  }
-
-  // If the base font size is a %, then multiply it by 16px
-  // This is because 100% font size = 16px in most all browsers
-  @if unit($base) == '%' {
-    $base: math.div($base, 100%) * 16px;
-  }
-
-  // Using rem as base allows correct scaling
-  @if unit($base) == 'rem' {
-    $base: strip-unit($base) * 16px;
-  }
-
-  @if $count == 1 {
-    @return px-to-rem($values, $base);
-  }
-
-  @for $i from 1 through $count {
-    $rem-values: append($rem-values, px-to-rem(nth($values, $i), $base));
-  }
-
-  @return $rem-values;
-}
-
-/// Helper function used by rem-calc. Converts a pixel value to matching rem value. *Any* value passed, regardless of unit,
-/// is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is 100% or 16px,
-/// which is the default for most all browsers.
-/// @access private
-/// @param {Number} $value - Pixel number to convert without units.
-/// @param {Number} $base [null] - Base for pixel conversion.
-/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
-@function px-to-rem($value, $base: null) {
-  // Check if the value is a number
-  @if type-of($value) != 'number' {
-    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
-    @return $value;
-  }
-
-  // Transform em into rem if someone hands over 'em's
-  @if unit($value) == 'em' {
-    $value: strip-unit($value) * 1rem;
-  }
-
-  // Calculate rem if units for $value is not rem or em
-  @if unit($value) != 'rem' {
-    $value: math.div(strip-unit($value), strip-unit($base)) * 1rem;
-  }
-
-  // Turn 0rem into 0
-  @if $value == 0rem {
-    $value: 0;
-  }
-
-  @return $value;
-}
-
-@function em-to-rem($value, $rem-base: 1rem) {
-  $value: strip-unit($value) * $rem-base;
-  @return $value;
-}
-
-@function rem-to-em($value, $rem-base: 1rem) {
-  $value: strip-unit(math.div($value, $rem-base)) * 1em;
-  @return $value;
-}
-
-@function get-icon-unicode($icons, $iconName) {
-  $icon: map-get($icons, $iconName);
-  $content: map-get($icon, 'content');
-  $code: map-get($content, 'unicode');
-  @return $code;
-}
+// Common functions
+
+// Returns the measurement of an inner radius by subtracting 1px from the outer-radius given
+@use "sass:math";
+
+@function inner-radius($outer-radius) {
+  @return calc(#{$outer-radius} -  1px);
+}
+
+/// Replace every instance of $search in a giving $string with the value of $replace
+/// @param {string} $string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+/// @param {Number} $num - Number to strip unit from.
+/// @returns {Number} The same number, sans unit.
+/// @source https://github.com/zurb/foundation-apps/blob/master/scss/helpers/_functions.scss
+@function strip-unit($num) {
+  @return math.div($num, $num * 0 + 1);
+}
+
+/// Converts one or more pixel values into matching rem values.
+/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
+/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
+///
+/// @returns {List} A list of converted values.
+/// @source https://github.com/zurb/foundation-apps/blob/master/scss/helpers/_functions.scss
+@function rem-calc($values, $base: null) {
+  $rem-values: ();
+  $count: length($values);
+
+  // If no base is defined, defer to the global font size
+  @if $base == null {
+    $base: 100%;
+  }
+
+  // If the base font size is a %, then multiply it by 16px
+  // This is because 100% font size = 16px in most all browsers
+  @if unit($base) == '%' {
+    $base: math.div($base, 100%) * 16px;
+  }
+
+  // Using rem as base allows correct scaling
+  @if unit($base) == 'rem' {
+    $base: strip-unit($base) * 16px;
+  }
+
+  @if $count == 1 {
+    @return px-to-rem($values, $base);
+  }
+
+  @for $i from 1 through $count {
+    $rem-values: append($rem-values, px-to-rem(nth($values, $i), $base));
+  }
+
+  @return $rem-values;
+}
+
+/// Helper function used by rem-calc. Converts a pixel value to matching rem value. *Any* value passed, regardless of unit,
+/// is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is 100% or 16px,
+/// which is the default for most all browsers.
+/// @access private
+/// @param {Number} $value - Pixel number to convert without units.
+/// @param {Number} $base [null] - Base for pixel conversion.
+/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
+@function px-to-rem($value, $base: null) {
+  // Check if the value is a number
+  @if type-of($value) != 'number' {
+    @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+    @return $value;
+  }
+
+  // Transform em into rem if someone hands over 'em's
+  @if unit($value) == 'em' {
+    $value: strip-unit($value) * 1rem;
+  }
+
+  // Calculate rem if units for $value is not rem or em
+  @if unit($value) != 'rem' {
+    $value: math.div(strip-unit($value), strip-unit($base)) * 1rem;
+  }
+
+  // Turn 0rem into 0
+  @if $value == 0rem {
+    $value: 0;
+  }
+
+  @return $value;
+}
+
+@function em-to-rem($value, $rem-base: 1rem) {
+  $value: strip-unit($value) * $rem-base;
+  @return $value;
+}
+
+@function rem-to-em($value, $rem-base: 1rem) {
+  $value: strip-unit(math.div($value, $rem-base)) * 1em;
+  @return $value;
+}
+
+@function get-icon-unicode($icons, $iconName) {
+  $icon: map-get($icons, $iconName);
+  $content: map-get($icon, 'content');
+  $code: map-get($content, 'unicode');
+  @return $code;
+}