@mtvh/mtvh-design-system 0.0.24 → 0.0.26

package/assets/scss/forms/_form-check.scss

@@ -3,31 +3,29 @@
 //
 
 .form-check {
-
   display: flex;
   margin-bottom: $mtvh-spacing-5;
 
   &:last-child {
     margin-bottom: 0;
   }
+}
 
-  .form-check-label {
-    position: relative;
-    display: flex;
-    align-items: center;
-    @include field-focus();
-    input {
-      float: unset;
-      align-self: start;
-    }
-    &:hover {
-      cursor: pointer;
-    }
+.form-check-label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  @include field-focus();
+  input {
+    float: unset;
+    align-self: start;
+  }
+  &:hover {
+    cursor: pointer;
   }
 }
 
 .form-check-input {
-
   margin-top: 0;
   margin-right: $mtvh-spacing-4;
   float: unset;
@@ -35,8 +33,8 @@
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}grey-06);
 
   &:checked {
-    background-color: var( --#{$prefix}form-check-input-checked-bg-color);
-    border-color: var( --#{$prefix}form-check-input-checked-bg-color);
+    background-color: var(--#{$prefix}form-check-input-checked-bg-color);
+    border-color: var(--#{$prefix}form-check-input-checked-bg-color);
   }
 
   &[type="checkbox"] {

package/assets/scss/forms/_form-chip.scss

@@ -15,32 +15,31 @@
     position: absolute;
 
     &:focus {
-      + label  {
+      + label {
         @include focus-style();
         color: inherit;
       }
     }
     &:checked {
-      + label  {
+      + label {
         background-color: $form-check-input-checked-bg-color;
         color: $form-check-input-checked-color;
       }
       &:focus {
-        + label  {
+        + label {
           color: $form-check-input-checked-color;
         }
       }
     }
 
     &[type="checkbox"] {
-
-      &:checked + label  {
+      &:checked + label {
         &:hover {
           position: relative;
           &:after {
-            position: absolute;;
+            position: absolute;
             content: "";
-            background-image: get-icon( 'cancel' , white);
+            background-image: get-icon("cancel", white);
             background-repeat: no-repeat;
             right: 5px;
             top: 12px;
@@ -52,23 +51,21 @@
         }
       }
     }
-
   }
 
-  .form-check-label  {
-
-      padding: $mtvh-spacing-3 $mtvh-spacing-6;
-      border: 1px solid var(--mtvh-grey-06);
-      border-radius: 0.5rem;
-      background-color: var(--mtvh-grey-01);
-   
+  .form-check-label {
+    padding: $mtvh-spacing-3 $mtvh-spacing-6;
+    border: 1px solid var(--mtvh-grey-06);
+    border-radius: 0.5rem;
+    background-color: var(--mtvh-grey-01);
   }
 
   &--fullwidth {
     .form-check {
       width: 100%;
     }
-    .form-check-label, .form-check-label span {
+    .form-check-label,
+    .form-check-label span {
       width: 100%;
     }
   }

package/assets/scss/forms/_form-control.scss

@@ -1,6 +1,4 @@
-.form-control  {
-
-
+.form-control {
   @include field-focus();
 
   &.is-invalid {
@@ -12,7 +10,8 @@
     background-image: none;
   }
 
-  span[ref|="charcount"], .text-muted {
+  span[ref|="charcount"],
+  .text-muted {
     color: var(--mtvh-grey-06) !important;
   }
 
@@ -20,16 +19,40 @@
     max-width: var(--#{$prefix}form-control-input-width);
   }
 
-  &[ref|="postCode"], &[inputmode|="decimal"], &[autocomplete|="tel"] {
+  &[ref|="postCode"],
+  &[inputmode|="decimal"],
+  &[autocomplete|="tel"] {
     max-width: $input-width-size-md;
   }
 
   &textarea {
+    max-height: 496px;
+    @include media-breakpoint-up(md) {
+      max-height: 608px;
+    }
+  }
 
-      max-height: 496px;
-      @include media-breakpoint-up(md) {
-        max-height: 608px;
-      }
+  &--xxs {
+    --#{$prefix}form-control-input-width: #{$input-width-size-xxs};
   }
 
+  &--xs {
+    --#{$prefix}form-control-input-width: #{$input-width-size-xs};
+  }
+
+  &--sm {
+    --#{$prefix}form-control-input-width: #{$input-width-size-sm};
+  }
+
+  &--md {
+    --#{$prefix}form-control-input-width: #{$input-width-size-md};
+  }
+
+  &--lg {
+    --#{$prefix}form-control-input-width: #{$input-width-size-lg};
+  }
+
+  &--xl {
+    --#{$prefix}form-control-input-width: #{$input-width-size-xl};
+  }
 }

package/assets/scss/forms/_form-date-input.scss

@@ -10,7 +10,6 @@
 
   &:has(select) {
     width: auto;
-
   }
 
   &--large {

package/assets/scss/forms/_form-select.scss

@@ -1,6 +1,5 @@
-
-.form-select, select {
-
+.form-select,
+select {
   color: $form-select-color;
   max-width: unset;
   -o-appearance: none;
@@ -10,7 +9,6 @@
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99024 13.8513L18.4014 5.44069C18.5717 5.27035 18.7789 5.17873 19.0228 5.1658C19.267 5.15321 19.4885 5.24434 19.6874 5.4392C19.8862 5.63439 19.9898 5.84863 19.998 6.08193C20.0063 6.31489 19.911 6.53726 19.7122 6.74901L11.0779 15.3829C10.9085 15.5396 10.7375 15.6573 10.5649 15.7358C10.3922 15.814 10.2007 15.8531 9.99024 15.8531C9.77981 15.8531 9.58761 15.8137 9.41363 15.7348C9.23998 15.6559 9.07412 15.5376 8.91605 15.3799L0.290642 6.752C0.102411 6.56377 0.00614352 6.34671 0.00183483 6.10082C-0.00280383 5.85492 0.0942936 5.63438 0.293127 5.4392C0.491961 5.24434 0.707031 5.14691 0.938341 5.14691C1.16965 5.14691 1.38323 5.24484 1.57908 5.44069L9.99024 13.8513Z' fill='black'/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
   background-size: 1rem;
-  background-position: right .75rem center;
+  background-position: right 0.75rem center;
   @include field-focus();
-
 }

package/assets/scss/forms/_formio.scss

@@ -1,30 +1,32 @@
 .formio-component {
-
-    &.formio-hidden{
-      margin-bottom: 0;
-      --#{$prefix}form-group-padding-y: 0;
-    }
-
-    &.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
-      margin-bottom:0;
-    }
-
-    &.has-message {
-      &.has-error {
-        .text-danger {
-          color: $form-feedback-invalid-color !important;
-          font-weight: bold;
-        }
+  &.formio-hidden {
+    margin-bottom: 0;
+    --#{$prefix}form-group-padding-y: 0;
+  }
+
+  &.formio-component-button:has(> button[type="submit"]),
+  &.formio-component-form,
+  &.formio-component-fieldset,
+  &.formio-component-columns,
+  &.formio-component-mtvhLogicSet {
+    margin-bottom: 0;
+  }
+
+  &.has-message {
+    &.has-error {
+      .text-danger {
+        color: $form-feedback-invalid-color !important;
+        font-weight: bold;
       }
-
     }
+  }
 
-    //Remove padding from last child
-    div.formio-component-form{
-      & .formio-component:last-child {
-        margin-bottom:0!important;
-      }
+  //Remove padding from last child
+  div.formio-component-form {
+    & .formio-component:last-child {
+      margin-bottom: 0 !important;
     }
+  }
 }
 
 .formio-wizard-nav-container {

package/assets/scss/forms/_global.scss

@@ -5,6 +5,6 @@ input::-webkit-inner-spin-button {
 }
 
 /* Firefox */
-input[type=number] {
+input[type="number"] {
   -moz-appearance: textfield;
 }

package/assets/scss/forms/_input-group.scss

@@ -1,3 +1,3 @@
 .input-group-text {
-  border-radius: 0.25rem 0 0  0.25rem ;
+  border-radius: 0.25rem 0 0 0.25rem;
 }

package/assets/scss/forms/_labels.scss

@@ -1,4 +1,5 @@
-.col-form-label, .form-label {
+.col-form-label,
+.form-label {
   font-size: $form-label-font-size;
   font-weight: $form-label-font-weight;
   padding: 0;
@@ -7,6 +8,5 @@
   .optional-question {
     font-weight: $mtvh-font-weight-normal;
     font-size: $font-size-sm;
-
   }
 }

package/assets/scss/forms/_mtvho_contact_phone.scss

@@ -1,6 +1,6 @@
 .formio-component-mtvhoContactPhone {
-  select, input {
-
+  select,
+  input {
     @include media-breakpoint-up(lg) {
       width: 50%;
     }

package/assets/scss/forms/_validation.scss

@@ -4,11 +4,13 @@
 // primarily for client-side validation via scoped `:invalid` and `:valid`
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server-side validation.
-.was-validated .form-control:invalid, .form-control.is-invalid {
+.was-validated .form-control:invalid,
+.form-control.is-invalid {
   padding-right: $input-padding-x;
 }
 
-.invalid-feedback, .formio-component.has-error.has-message  .invalid-feedback  {
+.invalid-feedback,
+.formio-component.has-error.has-message .invalid-feedback {
   font-weight: $mtvh-font-weight-bold;
   &:has(.error.form-text) {
     .form-text {
@@ -28,7 +30,8 @@
 }
 
 .mtvh-chips {
-  &.has-error, &.has-message {
+  &.has-error,
+  &.has-message {
     .form-check-label {
       color: $form-label-color;
       span {
@@ -46,4 +49,3 @@
     }
   }
 }
-

package/assets/scss/mixins/_butttons.scss

@@ -6,9 +6,8 @@
   transition: transform 0.3s ease-in;
 }
 
-@mixin hover-animate( $position : 'left', $rotate : '') {
-
-  @if $position == 'right' {
+@mixin hover-animate($position: "left", $rotate: "") {
+  @if $position == "right" {
     &:hover:not(.disabled) {
       &:after {
         -webkit-transform: translateX(4px);
@@ -20,7 +19,7 @@
     }
   } @else {
     &:hover:not(.disabled) {
-      &:before{
+      &:before {
         -webkit-transform: translateX(-4px);
         -moz-transform: translateX(-4px);
         -ms-transform: translateX(-4px);
@@ -29,23 +28,52 @@
       }
     }
   }
-
 }
 
 @mixin icon-transform($direction) {
   //default is a right
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
-  content:' ';
+  content: " ";
   opacity: 1;
   display: inline-block;
   vertical-align: middle;
   background-repeat: no-repeat;
-  margin-top: -.125rem;
-  @if $direction == 'right' {
+  margin-top: -0.125rem;
+  @if $direction == "right" {
     margin-left: $button-icon-spacing;
-  }
-  @else {
+  } @else {
     margin-right: $button-icon-spacing;
   }
 }
+
+@mixin button-circle() {
+  border: 0;
+  border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  padding: $mtvh-spacing-4;
+
+  &:focus-visible {
+    box-shadow: none;
+    outline: solid var(--#{$prefix}btn-outline-border)
+      var(--#{$prefix}btn-close-focus-outline-color);
+    outline-offset: calc(var(--mtvh-btn-outline-border) * -2);
+    text-decoration: none;
+    -webkit-tap-highlight-color: unset;
+  }
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+  &:hover {
+    cursor: pointer;
+    outline: 0;
+  }
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+  &:active:not(:disabled):not(.disabled) {
+    outline: 0;
+    background-color: rgba(0, 0, 0, 0.16);
+  }
+}

package/assets/scss/mixins/_form.scss

@@ -1,5 +1,3 @@
-
-
 @mixin form-invalid-text() {
   color: $form-feedback-invalid-color;
   font-size: $font-size-sm;
@@ -8,20 +6,19 @@
   display: flex;
   margin: $mtvh-spacing-3 0 0 0;
   &:before {
-    content: '';
-    -webkit-mask: get-icon('error',$danger);
-    mask: get-icon('error',$danger);
+    content: "";
+    -webkit-mask: get-icon("error", $danger);
+    mask: get-icon("error", $danger);
     background-color: $danger;
     mask-repeat: no-repeat;
     -webkit-mask-repeat: no-repeat;
     padding-right: $mtvh-spacing-6;
     margin-top: $mtvh-spacing-1;
+    vertical-align: top;
   }
-
 }
 
-
-@mixin textfield-no-arrow(){
+@mixin textfield-no-arrow() {
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -29,14 +26,12 @@
   }
 
   /* Firefox */
-  input[type=number] {
+  input[type="number"] {
     -moz-appearance: textfield;
     padding-right: $input-padding-x !important;
   }
-
 }
 
-
 @mixin field-focus() {
   &:focus {
     @include focus-style();
@@ -44,7 +39,8 @@
 }
 @mixin focus-style() {
   box-shadow: none;
-  outline: solid var(--#{$prefix}btn-outline-border) var(--#{$prefix}primary-outline-color);
+  outline: solid var(--#{$prefix}btn-outline-border)
+    var(--#{$prefix}primary-outline-color);
   outline-offset: var(--#{$prefix}btn-outline-border);
   color: $input-color;
 }

package/assets/scss/mixins/_icon.scss

@@ -1,75 +1,84 @@
 // arrow direction: left, right, up, down, Default: right
 // arrow position: left, right
-@mixin mtvh-icon($icon : '', $color :'',  $hover-color :'', $active-color :'', $border-color :'', $position : 'left', $direction :  'right', $width : 20px, $height: 20px, $svg-path : null) {
-
-  @if $border-color != '' {
+@mixin mtvh-icon(
+  $icon: "",
+  $color: "",
+  $hover-color: "",
+  $active-color: "",
+  $border-color: "",
+  $position: "left",
+  $direction: "right",
+  $width: 20px,
+  $height: 20px,
+  $svg-path: null
+) {
+  @if $border-color != "" {
     $border-color: $color;
   }
-  @if $hover-color == '' {
+  @if $hover-color == "" {
     $hover-color: $color;
   }
-  @if $active-color == '' {
+  @if $active-color == "" {
     $active-color: $color;
   }
-  &:before, &:after {
+  &:before,
+  &:after {
     height: $height;
     width: $width;
   }
 
   text-decoration: none;
-  @if $position == 'right' {
-
+  @if $position == "right" {
     &:after {
-
-
       @include animate-default;
       @include icon-transform($direction);
 
-      @if $svg-path  {
+      @if $svg-path {
         background-image: url($svg-path);
       } @else {
         -webkit-mask: get-icon($icon);
-        mask:  get-icon($icon);
+        mask: get-icon($icon);
         background-color: currentColor;
       }
     }
 
-    @if $svg-path == '' {
+    @if $svg-path == "" {
       &:hover:not(.disabled) {
         &:after {
           background-color: currentColor;
         }
       }
-      &:focus, &:active {
-
+      &:focus,
+      &:active {
         &:after {
           background-color: currentColor;
         }
       }
     }
-  } @else { //position is left
+  } @else {
+    //position is left
 
-    &:before{ ;
+    &:before {
       @include animate-default;
-      @include icon-transform('left');
-      @if $svg-path  {
+      @include icon-transform("left");
+      @if $svg-path {
         background-image: url($svg-path);
       } @else {
         -webkit-mask: get-icon($icon);
         mask: get-icon($icon);
-        background-color: currentColor
+        background-color: currentColor;
       }
-
     }
 
-    @if $svg-path == '' {
+    @if $svg-path == "" {
       &:hover:not(.disabled) {
         &:before {
           background-color: currentColor;
         }
       }
 
-      &:focus, &:active {
+      &:focus,
+      &:active {
         &:before {
           background-color: currentColor;
         }
@@ -78,7 +87,8 @@
   }
 
   &.base {
-    &:before, &:after {
+    &:before,
+    &:after {
       mask-size: auto 9px;
       mask-repeat: no-repeat;
       -webkit-mask-size: auto 9px;
@@ -87,8 +97,9 @@
   }
 }
 
-@mixin icon-size ($width,$height) {
-  &:before, &:after {
+@mixin icon-size($width, $height) {
+  &:before,
+  &:after {
     mask-size: $width $height;
     width: $width;
     height: $height;
@@ -97,10 +108,9 @@
 }
 
 @mixin mtvh-banner-icon() {
-
   padding-top: #{$mtvh-spacing-3};
   padding-bottom: #{$mtvh-spacing-3};
-  padding-left: (calc(#{$icon-size-scale-md} + #{$mtvh-spacing-5} ));
+  padding-left: (calc(#{$icon-size-scale-md} + #{$mtvh-spacing-5}));
   padding-right: #{$mtvh-spacing-4};
   position: relative;
 

package/assets/scss/mtvh.scss

@@ -4,12 +4,12 @@
 @import "bootstrap/scss/functions";
 
 // 2. Include any default variable overrides here
-@import 'config/palette';
+@import "config/palette";
 @import "config/variables";
 @import "config/font";
-@import 'config/theme';
+@import "config/theme";
 @import "config/icon-list";
-@import 'base/all';
+@import "base/all";
 
 @import "mixins/icon";
 @import "mixins/form";
@@ -69,6 +69,6 @@
 @import "bootstrap/scss/utilities/api";
 
 // 8. Add additional custom code here
-@import 'components/all';
+@import "components/all";
 
-@import 'core/all';
+@import "core/all";

package/dist/images/icons/alarm-clock.svg

@@ -0,0 +1,7 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.1638 24.771C48.7314 24.1498 50.6266 22.6044 50.6578 20.5232C50.7046 17.5101 47.0624 11.8723 43.3421 12.9051C41.5327 13.4099 37.5785 13.7826 37.5629 13.7748C37.2041 13.5807 36.4554 13.3633 35.4961 13.1614L47.1638 24.7788V24.771Z" fill="#1791E8"/>
+<path d="M4.95235 26.2931C7.33892 26.9765 8.21244 25.1749 7.70548 26.4562L16.0351 12.9983C12.3538 12.9051 13.2273 11.0879 12.3928 11.88C9.28873 10.9637 7.09714 9.131 3.53289 11.5539C1.46609 12.9517 0.701766 15.3047 0.45219 16.3919C-0.397927 20.1116 -0.405727 23.3965 3.64208 25.6486C6.15344 27.0541 1.70007 25.1671 4.93675 26.2931H4.95235Z" fill="#1791E8"/>
+<path d="M25.6846 12.742C15.452 13.107 5.60156 19.5991 5.60156 33.8336C5.60156 44.1464 13.5256 52.0596 24.195 53.4807C35.574 55.0028 43.3733 46.4838 44.3248 37.2582C45.4791 26.099 37.3601 12.3227 25.6924 12.742H25.6846Z" fill="white"/>
+<path d="M34.0651 19.8321C33.7453 19.9485 33.2618 20.6475 33.1448 20.8882C32.7938 21.6104 31.9983 23.2412 31.5771 23.9789C30.3683 26.0601 28.9644 28.0171 27.7477 30.0983C27.6307 30.2924 26.648 32.1872 26.5934 32.1639C25.4313 31.6669 23.9885 31.6436 22.7484 31.465C22.1167 31.3718 21.4849 31.2786 20.8532 31.1855C21.1028 31.2165 20.978 31.201 20.4788 31.1233C19.3089 30.9525 18.1157 31.7446 17.8037 32.094C15.7603 34.4237 20.2838 35.3789 20.2526 35.3789C21.6175 35.5653 23.0292 35.7206 24.4096 35.7051C25.0492 35.7051 26.4998 35.9303 27.1238 35.7905C27.194 35.775 28.0129 35.8992 28.9722 35.3479C30.8206 34.2762 29.9393 33.3831 30.4073 32.7075C31.7487 30.7816 33.0668 28.8402 34.3459 26.8755C35.4612 25.1515 36.8494 23.0859 36.2879 20.927C36.0461 20.0107 34.8918 19.537 34.0651 19.8398V19.8321Z" fill="black"/>
+<path d="M52.8396 13.006C50.9834 10.8938 48.2146 9.27851 45.3601 9.1232C45.0014 -0.708128 33.6457 -0.0402811 26.0258 0.0373755C22.4304 0.0762038 18.289 0.355767 15.5826 2.99609C13.781 4.75113 13.3598 6.71584 13.6016 9.31734C10.2245 8.75045 6.65249 10.0473 4.07874 12.7653C0.210315 16.8345 -0.132852 24.3672 5.27982 27.4502C5.72438 27.6987 6.24693 27.6987 6.70708 27.5278C6.16894 33.8646 8.35272 40.9779 12.0028 45.451C10.9967 46.1421 10.0842 47.1283 9.45242 47.936C6.87867 51.2209 6.66029 53.535 6.63689 53.636C6.18453 55.2279 8.68029 56.3695 9.38222 54.7853C9.42122 54.6921 11.5114 52.0285 12.1978 51.2286C12.7905 50.5375 13.4534 49.9007 14.1476 49.3027C14.4907 49.0076 14.8573 48.7902 15.2005 48.5495C22.1808 54.0631 31.6725 54.63 39.1597 50.4288C39.1831 50.4521 39.1909 50.4753 39.2143 50.4986C40.08 51.415 44.3072 55.2823 44.7362 55.5153C45.4303 55.8802 46.1011 56.0744 46.6626 55.9734C47.4581 55.8414 48.1211 55.2512 48.3238 54.4902C48.3238 54.4902 48.8464 53.3797 46.959 51.3995C46.4208 50.8403 45.7735 50.3822 45.1729 49.8852C44.3618 49.2095 43.5351 48.5728 42.685 47.9515C43.4805 47.2681 44.237 46.5226 44.939 45.7072C49.5951 40.3412 50.9132 33.95 49.6185 27.9472C52.4028 28.7393 55.5069 24.2818 55.8813 22.0453C56.4351 18.7604 54.9922 15.4444 52.8474 12.9983L52.8396 13.006ZM18.2422 4.7589C19.8878 2.77865 23.7562 2.98056 26.0258 2.9262C29.4185 2.83301 32.9359 2.84855 36.2506 3.62511C39.9085 4.47933 40.6026 7.01094 41.3045 10.1638C40.275 10.8006 39.3703 11.6703 38.6528 12.6721C32.7488 9.25521 24.9261 9.13097 18.5385 11.8101C18.1096 11.4141 17.6728 11.0491 17.2049 10.7462C17.1893 8.70385 16.9475 6.33533 18.2422 4.76666V4.7589ZM7.19064 24.507C6.41071 23.047 5.34222 21.7346 5.16283 20.0184C4.98345 18.3566 5.92716 16.85 6.97226 15.6541C8.01736 14.4582 9.28863 13.6428 10.8329 13.2545C12.1588 12.9206 13.3832 13.371 14.5375 13.9923C12.2991 15.5532 10.4195 17.5489 9.09365 19.9408C8.22014 21.3153 7.604 22.8684 7.19844 24.5147L7.19064 24.507ZM41.6711 42.4612C35.3693 49.9783 25.0821 50.4288 17.509 44.5579C12.0418 40.3256 9.00006 32.6299 10.4351 26.1145C10.6769 25.9592 10.8953 25.7495 11.0747 25.4544C14.015 20.4688 17.1815 16.7103 22.9607 15.0639C28.1238 13.5885 34.5036 14.7611 38.6762 18.1702C46.2804 24.3827 48.1289 34.7576 41.6711 42.4689V42.4612ZM51.8335 21.2066C51.6931 23.148 49.6575 23.4353 48.5734 24.538C47.1462 20.8882 44.7362 17.5023 41.5229 14.73C42.3964 13.5885 43.4649 12.7187 45.1417 12.7498C47.0292 12.7886 48.7762 14.3029 49.8525 15.7162C51.077 17.3315 51.9817 19.1409 51.8257 21.2066H51.8335Z" fill="black"/>
+</svg>

package/dist/images/icons/bar-chart.svg

@@ -0,0 +1,7 @@
+<svg width="56" height="50" viewBox="0 0 56 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.29637 3.82578C7.98628 0.402756 25.5192 1.0529 29.9708 1.06073C39.1245 1.06073 45.4461 0.606415 49.3657 1.16256C55.1944 1.99286 55.1787 4.01378 55.1944 6.95116C55.2257 11.7763 55.3509 27.2622 55.3352 29.1264C55.2805 35.385 55.9376 40.077 53.794 43.2259C52.6673 44.8786 48.8416 46.7664 44.9845 46.5079C39.1637 46.1241 30.5967 47.252 23.3442 45.6619C19.8157 44.8865 13.2986 46.3982 7.1335 46.9309C5.66265 47.0562 4.44998 45.7716 4.4578 44.1502C4.48127 38.7532 3.91797 31.1238 3.91797 26.9097C3.91797 21.1289 4.60645 7.24881 6.29637 3.81795V3.82578Z" fill="white"/>
+<path d="M7.22152 45.9047C4.87442 46.0066 7.00246 27.9045 7.73006 27.834C8.01172 27.8026 11.8766 28.2334 13.9499 28.0376C15.7024 27.8731 14.1533 37.7349 14.7636 45.9047C14.9044 47.7377 7.83177 45.8812 7.2137 45.9047H7.22152Z" fill="#FA3D54"/>
+<path d="M22.3092 45.3957C20.8853 44.2756 19.8839 17.2047 21.2921 16.7347C21.6129 16.625 25.2118 15.8652 27.4103 16.8052C29.1393 17.5493 28.7794 22.0376 28.8342 31.7114C28.8576 35.3851 28.9828 40.0692 29.241 45.192C29.3505 47.3226 22.8803 45.85 22.3092 45.3957Z" fill="#1791E8"/>
+<path d="M38.3202 44.8865C36.685 44.0719 35.1829 7.31153 40.1509 6.76322C40.5734 6.71622 42.6545 5.84676 45.2598 7.00604C47.0984 7.82068 44.8451 27.9829 46.9966 44.7847C47.3252 47.3617 39.2356 45.3408 38.328 44.8865H38.3202Z" fill="#9470D1"/>
+<path d="M54.8423 45.1596C53.2228 44.6739 51.3216 44.6504 49.5222 44.6426C49.7021 44.4389 49.8351 44.1961 49.8821 43.8828C50.6097 39.1438 50.2263 34.0837 50.3671 29.2821C50.5236 23.9948 50.6957 18.7153 50.6723 13.4202C50.6723 11.5638 50.6723 5.7125 48.8572 4.74121C46.3849 3.40176 42.4104 5.12503 39.6643 4.67855C38.2874 4.45139 37.2233 6.05716 38.0527 7.03628C38.0135 7.17728 37.9822 7.33394 37.9744 7.50626C37.8492 13.4985 37.7788 19.4829 37.7241 25.4752C37.6928 28.8121 37.6849 32.1489 37.7397 35.4858C37.7554 36.5668 37.9118 43.3031 38.4751 44.0864C38.7098 44.4076 35.377 44.3919 33.468 44.3919C33.5149 44.2118 33.5462 44.016 33.5306 43.7888C33.202 39.0028 32.9907 34.2012 32.8969 29.4074C32.8186 24.9817 33.554 20.1801 32.7795 15.8171C32.67 15.2218 31.9971 14.744 31.4103 14.7753C28.7972 14.9006 25.8008 14.3288 23.1955 14.5168C22.5461 14.5168 21.8967 14.9633 21.8185 15.8563C21.0283 25.0836 21.709 34.5928 22.7574 43.7966C22.7886 44.063 22.8825 44.2901 23.0155 44.4703C21.396 44.4938 19.667 44.5251 17.9223 44.5643C17.6094 39.6608 17.672 33.1124 18.4934 28.3108C18.6343 27.4648 18.2822 26.4935 17.3434 26.2898C14.4173 25.6554 11.3739 26.1097 8.40871 26.1802C7.10998 26.2115 6.57797 27.7311 7.21169 28.6006C7.13345 28.8826 7.2821 30.1515 7.29775 30.6293C7.35252 32.3134 6.96133 42.0499 7.27428 44.8619C7.27428 44.8619 7.27428 44.8698 7.27428 44.8776C6.17896 44.9167 5.09147 44.9637 3.99616 45.0186C3.69103 38.995 3.2529 32.9949 3.21379 26.94C3.16684 18.9581 3.36244 10.9841 3.50326 3.00228C3.53456 1.22419 0.976212 1.38908 0.741502 3.88906C-0.0565203 12.3891 0.373788 18.9503 0.358141 26.9321C0.350317 32.9557 0.24861 39.1751 0.741502 45.2379C-0.338167 45.7001 -0.220812 47.345 0.976212 47.7053C0.976212 47.7053 0.976212 47.7053 0.976212 48.2365C0.976212 48.7676 4.18392 49.9127 4.12133 48.2365C4.11827 48.1544 4.12133 48.1239 4.12133 47.9873C11.6477 48.4024 20.0817 47.486 27.5533 47.4233C32.889 47.3763 48.1765 47.1648 50.1716 47.2745C51.0243 47.3215 53.035 47.2667 53.5592 47.5643C55.6403 48.7706 57.1503 45.8567 54.8345 45.1596H54.8423ZM10.0204 29.376C11.679 29.423 13.7601 29.1802 15.4187 29.2821C14.6911 33.6607 14.0887 40.3344 15.4579 44.6269C13.7836 44.6661 12.1328 44.7131 10.5837 44.7601C10.6463 44.1099 10.2864 30.2298 10.0204 29.376ZM25.8399 44.4468C25.9181 44.2666 25.9572 44.0551 25.9259 43.7966C25.1436 36.9271 25.0027 19.3028 24.8854 17.3994C26.3562 17.5952 28.0383 17.7519 29.5248 17.7362C29.298 18.8485 29.1806 26.8382 29.2119 29.4074C29.2667 34.2169 29.517 39.0107 29.9864 43.7888C30.0099 44.016 30.0725 44.2118 30.1507 44.3998C28.5782 44.3998 27.4124 44.4233 25.8321 44.4468H25.8399ZM46.3614 43.8906C46.4084 44.1726 46.5335 44.4076 46.6978 44.5956C44.6871 44.5251 41.0022 44.4859 41.1821 44.1021C41.6985 43.0133 41.3621 36.4571 41.3464 35.5015C41.2917 32.1646 41.3308 28.8277 41.3699 25.4909C41.4481 19.7806 41.5342 14.0625 41.4638 8.35223C42.7077 8.54022 43.9674 8.43056 45.3678 8.12507C47.5819 7.63943 46.6744 16.9685 46.6352 18.6135C46.5257 23.0626 46.3692 27.504 46.2362 31.9531C46.1189 35.8696 45.6886 40.0211 46.3536 43.8906H46.3614Z" fill="black"/>
+</svg>