@mtvh/mtvh-design-system 0.0.24 → 0.0.25

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

@@ -3,7 +3,6 @@
 //
 
 .form-check {
-
   display: flex;
   margin-bottom: $mtvh-spacing-5;
 
@@ -27,7 +26,6 @@
 }
 
 .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>

package/dist/images/icons/bell.svg

@@ -0,0 +1,6 @@
+<svg width="50" height="56" viewBox="0 0 50 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9807 51.3384C15.0104 55.6396 27.9189 58.7003 31.8236 52.4565C33.4135 49.9101 33.5123 45.8292 31.8236 43.5194C28.9074 39.5364 21.1558 41.5116 16.9545 45.7557C15.7848 46.9392 13.4782 49.2571 13.9807 51.3384Z" fill="white"/>
+<path d="M18.0297 7.02818C13.7296 7.75457 9.76725 8.2198 7.32065 15.1899C5.32712 20.8869 11.2171 30.5178 9.79196 33.1458C8.38331 36.4758 2.33683 36.5575 6.49687 39.6753C8.43274 40.8016 13.2848 40.2384 15.5995 40.2058C20.5504 39.9936 25.0894 39.7161 29.7931 39.3978C33.6154 39.0386 47.3806 38.8836 44.3904 36.4187C34.5051 28.2569 36.9764 21.7275 35.3289 16.8305C34.3815 14.0147 32.4786 8.25244 27.0912 7.03634C26.0285 6.79965 25.7484 6.73435 25.9214 5.66516C26.1768 4.10626 25.9791 3.47781 25.4436 2.95545C24.8258 2.34332 23.7219 1.76384 22.5028 1.47817C19.6525 0.808909 17.1071 3.37987 17.8155 6.18752L18.0297 7.03634V7.02818Z" fill="#E8C426"/>
+<path d="M46.2542 33.2437C45.0351 32.2562 43.6264 31.5624 42.3908 30.5993C39.697 28.5018 40.4631 24.6249 40.6032 21.6622C40.8997 15.4919 37.0362 7.01182 30.479 7.05263C30.8415 2.97175 26.459 -1.33767 22.2001 0.392628C19.8112 1.36388 17.9 4.18785 18.5343 6.8241C18.6085 7.12609 18.7897 7.41175 18.9956 7.67293C12.0513 8.52991 7.52875 15.2797 7.26514 21.8907C7.10863 25.9553 9.82707 30.0607 6.35899 33.4641C4.0442 35.7331 0.0406684 37.4471 0.543169 41.1688C0.617308 41.7483 1.96006 42.3931 2.32252 42.5237C9.374 45.0702 17.414 44.8824 24.8115 44.711C28.7656 44.6213 32.7197 44.3927 36.6655 44.1805C39.903 44.0091 43.404 44.254 46.559 43.5194C47.2345 43.3643 47.6958 43.0134 47.943 42.589C48.5279 42.3523 49.0221 41.8952 49.2198 41.2178C50.1424 38.1 48.6926 35.2271 46.246 33.2437H46.2542ZM37.9259 40.1731C34.013 40.3771 30.0836 40.622 26.1707 40.8995C19.3169 41.3892 12.5373 41.0954 5.74117 40.3363C7.00154 38.4673 9.11863 37.3165 10.5767 35.5127C12.2901 33.407 12.6773 30.5667 12.4714 27.9468C12.1666 24.1434 10.7415 21.0582 12.4549 17.2712C13.9295 14.0146 17.3481 11.7783 20.1407 9.88477C21.5741 8.90535 21.3269 7.97491 21.2445 7.29748C21.1539 5.90182 22.7768 1.46182 25.4128 4.33476C25.4623 4.3919 25.9153 4.96322 26.0307 5.86101C26.1377 6.74248 25.9895 7.26484 26.2036 8.29322C26.1954 9.13388 26.9121 10.0643 27.843 10.097C32.489 10.2929 34.2848 12.7169 35.6358 17.1161C36.8138 20.9521 35.0674 24.8861 36.0395 28.7058C36.6985 31.2768 37.9177 33.2437 40.0842 34.8271C42.539 36.6146 43.8324 37.4634 44.6561 39.9364C42.4319 39.7732 40.1336 40.0507 37.9259 40.1649V40.1731Z" fill="black"/>
+<path d="M31.4747 46.5801C29.0034 51.8036 19.9172 50.5467 16.3668 46.9718C15.1888 45.7802 13.4012 46.9882 14.0849 48.694C17.0258 56.0722 34.8687 56.9782 35.297 47.6085C35.3876 45.6496 32.3479 44.7355 31.4665 46.5801H31.4747Z" fill="black"/>
+</svg>