@ironsource/shared-ui 2.0.0-rc.0 → 2.0.0-rc.2

package/styleguide.scss

@@ -1,32 +1,32 @@
 /* #region Colors */
-$white: #FFFFFF;
+$white: #ffffff;
 $black: #000000;
 
-$black-200: #696A6b;
-$black-300: #565C62;
+$black-200: #696a6b;
+$black-300: #565c62;
 $black-500: #53575b;
 $black-900: #41454d;
 
-$primary-100: #E2EEFF;
-$primary-200: #C9DFFF;
-$primary-300: #96C0FF;
-$primary-400: #68A5FF;
-$primary-500: #3083FF;
-$primary-600: #2B76E6;
-$primary-700: #005BE2;
-$primary-800: #0051C9;
-$primary-900: #0046AF;
-
-$light-50: #F7F8F9;
-$light-100: #F1F3F4;
-$light-200: #EDEFF0;
-$light-300: #E5E7E9;
-$light-400: #DDDFE1;
-$light-500: #D2D5D8;
-$light-600: #B7BBC0;
-$light-700: #A9AFB4;
-$light-800: #8E959D;
-$light-900: #7B838C;
+$primary-100: #e2eeff;
+$primary-200: #c9dfff;
+$primary-300: #96c0ff;
+$primary-400: #68a5ff;
+$primary-500: #3083ff;
+$primary-600: #2b76e6;
+$primary-700: #005be2;
+$primary-800: #0051c9;
+$primary-900: #0046af;
+
+$light-50: #f7f8f9;
+$light-100: #f1f3f4;
+$light-200: #edeff0;
+$light-300: #e5e7e9;
+$light-400: #dddfe1;
+$light-500: #d2d5d8;
+$light-600: #b7bbc0;
+$light-700: #a9afb4;
+$light-800: #8e959d;
+$light-900: #7b838c;
 $light-1000: #626970;
 
 $secondary-100: #e1fbfc;
@@ -56,14 +56,14 @@ $negative-500: #ff6a63;
 $negative-600: #ec5d56;
 $negative-700: #da564f;
 
-$dark-100: #CFD0E8;
-$dark-200: #B6B9DD;
+$dark-100: #cfd0e8;
+$dark-200: #b6b9dd;
 $dark-300: #313d91;
 $dark-400: #212791;
 $dark-500: #0d148c;
 $dark-600: #021074;
 $dark-700: #1d1c64;
-$dark-800: #070A46;
+$dark-800: #070a46;
 
 $alpha-30: 4D;
 $input-shadow-color: unquote($primary-500 + '' + $alpha-30);
@@ -105,20 +105,20 @@ $breakpoint-xl: 1920px;
 /* #endregion Breakpoints */
 
 /* #region Media */
-$mobile: "only screen and (max-width:#{$breakpoint-xxs-end})";
-$tablet: "only screen and (min-width:#{$breakpoint-sm-start}) and (max-width:#{$breakpoint-sm-end})";
-$smallLaptop: "only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-md-end})";
-$largeLaptop: "only screen and (min-width:#{$breakpoint-lg-start}) and (max-width:#{$breakpoint-lg-end})";
-$desktop: "only screen and (min-width:#{$breakpoint-xl})";
+$mobile: 'only screen and (max-width:#{$breakpoint-xxs-end})';
+$tablet: 'only screen and (min-width:#{$breakpoint-sm-start}) and (max-width:#{$breakpoint-sm-end})';
+$smallLaptop: 'only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-md-end})';
+$largeLaptop: 'only screen and (min-width:#{$breakpoint-lg-start}) and (max-width:#{$breakpoint-lg-end})';
+$desktop: 'only screen and (min-width:#{$breakpoint-xl})';
 // inclusive - mobile and below: use mobile, huge and below: everything, no need for media query
-$tabletAndBelow: "only screen and (max-width:#{$breakpoint-sm-end})";
-$tabletAndAbove: "only screen and (min-width:#{$breakpoint-sm-start})";
-$smallLaptopAndBelow: "only screen and (max-width:#{$breakpoint-md-end})";
-$largeLaptopAndBelow: "only screen and (max-width:#{$breakpoint-lg-end})";
-$desktopAndAbove: "only screen and (min-width:#{$breakpoint-xl})";
-$largeLaptopAndAbove: "only screen and (min-width:#{$breakpoint-lg-start})";
+$tabletAndBelow: 'only screen and (max-width:#{$breakpoint-sm-end})';
+$tabletAndAbove: 'only screen and (min-width:#{$breakpoint-sm-start})';
+$smallLaptopAndBelow: 'only screen and (max-width:#{$breakpoint-md-end})';
+$largeLaptopAndBelow: 'only screen and (max-width:#{$breakpoint-lg-end})';
+$desktopAndAbove: 'only screen and (min-width:#{$breakpoint-xl})';
+$largeLaptopAndAbove: 'only screen and (min-width:#{$breakpoint-lg-start})';
 // combinations
-$laptop: "only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-lg-end})";
+$laptop: 'only screen and (min-width:#{$breakpoint-md-start}) and (max-width:#{$breakpoint-lg-end})';
 /* #endregion Media */
 
 /* #region Grid */
@@ -127,8 +127,8 @@ $grid-gap: 1rem;
 /* #endregion Grid */
 
 /* #region Fonts */
-$heading-font-family: "NHaasGroteskDSPro-75Bd", sans-serif;
-$heading-font-family-label: "NHaasGroteskDSPro-65Md", sans-serif;
+$heading-font-family: 'NHaasGroteskDSPro-75Bd', sans-serif;
+$heading-font-family-label: 'NHaasGroteskDSPro-65Md', sans-serif;
 $heading-font-size-1: 3.75rem;
 $heading-font-size-2: 2rem;
 $heading-font-size-3: 1.375rem;
@@ -149,7 +149,7 @@ $body-font-weight-strong: 500;
 $font-smoothing: antialiased;
 $heading-line-height: 1.1rem;
 $body-line-height: 1.5rem;
-.label{
+.label {
   color: $black-900;
 }
 /* #endregion Fonts */
@@ -159,52 +159,51 @@ $border: 1px solid $light-400;
 $shape-border-radius: $spacing-1;
 
 $popover-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16),
-0px 0px 1px rgba(0, 0, 0, 0.4);
-$modal-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08), 0px 0px 32px -8px rgba(0, 0, 0, 0.12);
-
+  0px 0px 1px rgba(0, 0, 0, 0.4);
+$modal-shadow: 0px 32px 32px -8px rgba(0, 0, 0, 0.08),
+  0px 0px 32px -8px rgba(0, 0, 0, 0.12);
 
 $focus-line: linear-gradient(
-                0deg,
-                $primary-500 0,
-                $primary-500 2px,
-                $light-100 0
+  0deg,
+  $primary-500 0,
+  $primary-500 2px,
+  $light-100 0
 );
 $focus-line-white: linear-gradient(
-                0deg,
-                $primary-500 0,
-                $primary-500 2px,
-                $white 0
+  0deg,
+  $primary-500 0,
+  $primary-500 2px,
+  $white 0
 );
 $error-focus-line: linear-gradient(
-                0deg,
-                $negative-500 0,
-                $negative-500 2px,
-                $light-100 0
+  0deg,
+  $negative-500 0,
+  $negative-500 2px,
+  $light-100 0
 );
 $error-focus-line-white: linear-gradient(
-                0deg,
-                $negative-500 0,
-                $negative-500 2px,
-                $white 0
+  0deg,
+  $negative-500 0,
+  $negative-500 2px,
+  $white 0
 );
 
-
 @mixin scrollbar {
-    ::-webkit-scrollbar {
-        width: 0.625rem;
-        opacity: 0.7;
-        background-color: transparent;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        border: 3px solid transparent;
-        background-clip: padding-box;
-        border-radius: 0.625rem;
-        background-color: $light-500 !important;
-      }
-
-      ::-webkit-scrollbar-track {
-        border-radius: 0.625rem;
-        background-color: transparent;
-      }
+  ::-webkit-scrollbar {
+    width: 0.625rem;
+    opacity: 0.7;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-clip: padding-box;
+    border-radius: 0.625rem;
+    background-color: $light-500 !important;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 0.625rem;
+    background-color: transparent;
+  }
 }

package/styles/v4/border-radius.css

@@ -0,0 +1,8 @@
+.light-theme-v4 {
+    --border-radius-xs: 2px;
+    --border-radius-sm: 4px;
+    --border-radius-md: 6px;
+    --border-radius-lg: 8px;
+    --border-radius-xl: 16px;
+    --border-radius-full: 100px;
+}

package/styles/v4/breakpoints.scss

@@ -0,0 +1,131 @@
+$breakPoints: (
+    xxs: 0,
+    // Phones - 768px and below
+    xs: 768px,
+    // Tablet portrait - 768px - 1023px
+    sm: 1024px,
+    // Tablet landscape - 1024px - 1279px
+    md: 1280px,
+    // Small laptop - 1280px - 1439px
+    lg: 1440px,
+    // Large laptop - 1440px - 1919px
+    xl: 1920px,
+    // Desktop - 1920px - 2559px
+    xxl: 2560px,
+    // Big Desktop - 2560px and up
+
+) !default;
+
+// Breakpoint viewport sizes and media queries.
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+// The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+    $n: index($breakpoint-names, $name);
+
+    @if not $n {
+        @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+    }
+
+    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $breakPoints) {
+    $min: map-get($breakpoints, $name);
+    @return if($min !=0, $min, null);
+}
+
+// Maximum breakpoint width.
+// The maximum value is reduced by 0.02px to work around the limitations of
+@function breakpoint-max($name, $breakpoints: $breakPoints) {
+    $max: map-get($breakpoints, $name);
+    @return if($max and $max > 0, $max - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $breakPoints) {
+    @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-min($name, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    @if $min {
+        @media (min-width: $min) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-max($name, $breakpoints: $breakPoints) {
+    $max: breakpoint-max($name, $breakpoints);
+    @if $max {
+        @media (max-width: $max) {
+            @content;
+        }
+    }
+    @else {
+        @content;
+    }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($lower, $breakpoints);
+    $max: breakpoint-max($upper, $breakpoints);
+    @if $min !=null and $max !=null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @else if $max==null {
+        @include media-breakpoint-min($lower, $breakpoints) {
+            @content;
+        }
+    }
+    @else if $min==null {
+        @include media-breakpoint-max($upper, $breakpoints) {
+            @content;
+        }
+    }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $breakPoints) {
+    $min: breakpoint-min($name, $breakpoints);
+    $next: breakpoint-next($name, $breakpoints);
+    $max: breakpoint-max($next);
+    @if $min !=null and $max !=null {
+        @media (min-width: $min) and (max-width: $max) {
+            @content;
+        }
+    }
+    @else if $max==null {
+        @include media-breakpoint-min($name, $breakpoints) {
+            @content;
+        }
+    }
+    @else if $min==null {
+        @include media-breakpoint-max($next, $breakpoints) {
+            @content;
+        }
+    }
+}

package/styles/v4/colors.css

@@ -0,0 +1,101 @@
+.light-theme-v4 {
+  --background-default: #FFFFFF;
+  --background-paper: hsl(0, 0%, 99.0%);
+  --background-model-elevation: #FFFFFF;
+  --background-backdrop: hsla(0, 0%, 0%, 0.11);
+  --background-paper-elevation-0: hsl(0, 0%, 97.5%);
+  --background-paper-elevation-1: hsl(0, 0%, 94.6%);
+  --background-paper-elevation-2: hsl(0, 0%, 92.0%);
+  --background-paper-elevation-3: hsl(0, 0%, 89.5%);
+  --background-paper-elevation-4: hsl(0, 0%, 86.8%);
+  --background-paper-elevation-5: hsl(0, 0%, 83.0%);
+  --background-paper-elevation-6: hsl(0, 0%, 73.2%);
+  --background-paper-elevation-7: hsl(0, 0%, 55.2%);
+  --background-paper-elevation-8: hsl(0, 0%, 50.3%);
+  --background-paper-elevation-9: hsl(0, 0%, 39.3%);
+
+  --action-primary: hsl(0, 0%, 12.5%);
+  --action-active: hsl(0, 0%, 50.3%);
+  --action-hover: hsla(0, 0%, 0%, 0.05);
+  --action-selected: hsla(0, 0%, 92%, 1);
+  --action-disabled: hsla(0, 0%, 87%, 1);
+  --action-disabled-background: hsla(0, 0%, 95%, 1);
+  --action-focus: hsl(0, 0%, 92.0%);
+  --action-outlined-border  : hsla(0, 0%, 73%, 1);
+
+  --default-light: hsl(0, 0%, 89.5%);
+  --default-main: hsl(0 0% 94.51%);
+  --default-dark: hsl(0, 0%, 92.0%);
+  --default-outlined-border: hsl(0, 0%, 73.2%);
+  --default-contrast-text: hsl(0, 0%, 12.5%);
+  --default-button-contrast-text: hsla(0, 0%, 0%, 1);
+
+  --common-white: #FFFFFF;
+  --common-black: #000000;
+  --common-inverse-white: #FFFFFF;
+  --common-inverse-black: #000000;
+  --common-divider: hsl(0, 0%, 86.8%);
+  --common-divider-elevation-0: hsla(0, 0%, 89%, 1);
+
+  --text-primary: hsl(0, 0%, 12.5%);
+  --text-secondary: hsl(0, 0%, 39.3%);
+  --text-disabled: hsl(0 0% 73.33%);
+
+  --primary-lighter: hsl(209, 100%, 96.5%);
+  --primary-light: hsl(209, 95.0%, 90.1%);
+  --primary-main: hsl(206, 100%, 50.0%);
+  --primary-main-8-p: hsla(206, 100%, 50%, 0.08);
+  --primary-main-50-p: hsla(206, 100%, 50%, 0.5);
+  --primary-dark: hsl(208, 93.5%, 47.4%);
+  --primary-darker: hsl(211, 90.0%, 42.0%);
+  --primary-outlined-border: hsl(206, 100%, 50.0%);
+  --primary-contrast-text: hsl(216, 71.0%, 23.0%);
+  --primary-button-contrast-text: hsla(0, 0%, 100%, 1);
+
+  --info-lighter: hsl(223, 98.4%, 97.1%);
+  --info-light: hsl(224, 87.1%, 92.0%);
+  --info-main: hsl(226, 70.0%, 55.5%);
+  --info-main-8-p: hsla(226, 70%, 55.5%, 0.08);
+  --info-main-50-p: hsla(226, 70%, 55.5%, 0.5);
+  --info-dark: hsl(226, 58.6%, 51.3%);
+  --info-darker: hsl(226, 55.0%, 45.0%);
+  --info-outlined-border: hsl(226, 70.0%, 55.5%);
+  --info-contrast-text: hsl(226, 50.0%, 24.0%);
+  --info-button-contrast-text: hsla(0, 0%, 100%, 1);
+
+  --success-lighter: hsl(139, 55.2%, 94.5%);
+  --success-light: hsl(141, 43.7%, 86.0%);
+  --success-main: hsl(151, 55.0%, 41.5%);
+  --success-main-8-p: hsla(151, 55%, 41.5%, 0.08);
+  --success-main-50-p: hsla(151, 55%, 41.5%, 0.5);
+  --success-dark: hsl(152, 57.5%, 37.6%);
+  --success-darker: hsl(153, 67.0%, 28.5%);
+  --success-outlined-border: hsl(151, 55.0%, 41.5%);
+  --success-contrast-text: hsl(155, 40.0%, 16.5%);
+  --success-button-contrast-text: hsla(0, 0%, 100%, 1);
+
+  --warning-lighter: hsl(45, 100%, 90.8%);
+  --warning-light: hsl(40, 100%, 81.5%);
+  --warning-main: hsl(42, 100%, 62.0%);
+  --warning-main-8-p: hsla(42, 100%, 62%, 0.08);
+  --warning-main-50-p: hsla(42, 100%, 62%, 0.5);
+  --warning-dark: hsl(42, 100%, 55.0%);
+  --warning-darker: hsl(25, 50.0%, 38.0%);
+  --warning-outlined-border: hsl(42, 100%, 62.0%);
+  --warning-contrast-text: hsl(25, 40.0%, 22.0%);
+  --warning-button-contrast-text: hsla(24, 40%, 22%, 1);
+
+  --error-lighter: hsl(360, 100%, 96.8%);
+  --error-light: hsl(360, 90.2%, 91.9%);
+  --error-main: hsl(358, 75.0%, 59.0%);
+  --error-main-8-p: hsla(358, 75%, 59%, 0.08);
+  --error-main-50-p: hsla(358, 75%, 59%, 0.5);
+  --error-dark: hsl(358, 67.4%, 54.6%);
+  --error-darker: hsl(358, 65.0%, 47.0%);
+  --error-outlined-border: hsl(358, 75.0%, 59.0%);
+  --error-contrast-text: hsl(350, 63.0%, 24.0%);
+  --error-button-contrast-text: hsla(0, 0%, 100%, 1);
+
+  --aba: #FFC134;
+  --abb: #4F4FF5;
+}

package/styles/v4/elevations.css

@@ -0,0 +1,10 @@
+.light-theme-v4 {
+  --elevation-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  --elevation-sm: 0px 1px 2px rgba(16, 24, 40, 0.06), 0px 1px 3px rgba(16, 24, 40, 0.1);
+  --elevation-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.12);
+  --elevation-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  --elevation-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -6px rgba(16, 24, 40, 0.08);
+  --elevation-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+  --elevation-xxxl: 0px 19px 32px 2px rgba(44, 45, 45, 0.14);
+  --elevation-sl: 0px 27px 27px 2px rgba(44, 45, 45, 0.14);
+}

package/styles/v4/fonts.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2,.font-chart-2,.font-chart-1{font-family:"Inter",sans-serif;font-weight:700}.font-chip-label,.font-table-label,.font-button,.font-heading-6,.font-heading-5,.font-heading-4,.font-heading-3,.font-heading-2,.font-heading-1,.font-title{font-family:"Inter",sans-serif;font-weight:600}.font-tab-label1,.font-input-label,.font-overline,.font-subtitle-2,.font-subtitle-1{font-family:"Inter",sans-serif;font-weight:500}.font-caption,.font-body-2,.font-body-1{font-family:"Inter",sans-serif;font-weight:400}.font-title{font-size:2.5rem;line-height:3rem;letter-spacing:-0.055rem}.font-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-0.0285rem}.font-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-0.01575rem}.font-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-0.011rem}.font-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-0.00525rem}.font-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-0.00244rem}.font-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-0.00525rem}.font-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-0.00244rem}.font-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-0.015rem}.font-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-0.0125rem}.font-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption{font-size:.75rem;line-height:1rem}.font-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1{font-size:.875rem;line-height:1rem}.font-tab-label2{font-size:.875rem;line-height:1rem}.font-chip-label{font-size:.75rem;line-height:1rem}h1,h2,h3,h4,h5,h6{margin:0}/*# sourceMappingURL=fonts.css.map */

package/styles/v4/fonts.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["fonts.scss"],"names":[],"mappings":"AAKQ,0FAKR,6CACE,YAHM,mBAIN,gBAEF,4JACE,YAPM,mBAQN,gBAEF,oFACE,YAXM,mBAYN,gBAEF,wCACE,YAfM,mBAgBN,gBAIF,YACE,iBACA,iBACA,yBAGF,gBACE,iBACA,oBACA,0BAGF,gBACE,mBACA,oBACA,2BAGF,gBACE,eACA,mBACA,yBAGF,gBACE,kBACA,iBACA,qBAGF,gBACE,mBACA,iBACA,qBAGF,gBACE,iBACA,mBACA,iBAMF,aACE,kBACA,oBACA,2BAGF,aACE,mBACA,oBACA,2BAMF,iBACE,kBACA,oBACA,2BAGF,iBACE,mBACA,oBACA,2BAMF,cACE,iBACA,mBACA,yBAGF,cACE,kBACA,oBACA,0BAOF,aACE,kBACA,oBACA,yBAGF,eACE,iBACA,iBACA,uBACA,yBAGF,cACE,iBACA,iBAGF,kBACE,mBACA,oBACA,yBAGF,kBACE,mBACA,iBACA,yBAGF,iBACE,kBACA,iBAGF,iBACE,kBACA,iBAGF,iBACE,iBACA,iBAKF,kBAME","file":"fonts.css"}