@mtvh/mtvh-design-system 0.0.31 → 0.0.33

package/assets/scss/components/_accordion.scss

@@ -0,0 +1,66 @@
+.accordion {
+  --#{$prefix}accordion-active-bg: var(--#{$prefix}white);
+  --#{$prefix}accordion-active-color: var(--#{$prefix}blue-04);
+  --#{$prefix}accordion-body-padding-x: #{$mtvh-spacing-7};
+  --#{$prefix}accordion-body-padding-y: #{$mtvh-spacing-6};
+  --#{$prefix}accordion-inner-border-radius: #{$border-radius-lg};
+
+  background-color: var(--#{$prefix}white);
+  padding: $mtvh-spacing-6 $mtvh-spacing-5;
+  border-radius: $border-radius-lg;
+  @include media-breakpoint-up(md) {
+    padding: $mtvh-spacing-6;
+  }
+
+}
+
+.accordion-button {
+  border-left: 0;
+  border-right: 0;
+  font-size: $font-size-sm;
+  font-weight: $mtvh-font-weight-bold;
+  font-family: $font-family-sans-serif;
+  &:not(.collapsed)
+  {
+    box-shadow: none;
+  }
+
+
+  &:focus {
+    @include focus-radius;
+    border-radius: $border-radius-lg;
+  }
+
+  &:after {
+    left: 0;
+    position: absolute;
+
+  }
+  padding-left: $mtvh-spacing-7;
+}
+.accordion-header {
+
+  &:hover {
+    background-color: var(--#{$prefix}grey-01);
+    .accordion-button {
+      background-color: var(--#{$prefix}grey-01);
+    }
+  }
+
+  padding-top:0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  align-items: center;
+}
+.accordion-item {
+  border-left: 0;
+  border-right: 0;
+
+}
+.accordion-body {
+  padding-top: 0;
+  padding-right: 0;
+  border-right: 0;
+
+}

package/assets/scss/components/_agent-repair-location-list.scss

@@ -0,0 +1,13 @@
+// list style overrides for the MTVHO agent repair search results
+.agent-repair-location-search-list {
+  list-style-type: none;
+  padding-left: 0;
+
+  ul {
+    padding-left: $mtvh-spacing-6;
+  }
+
+  &.agent-repair-location-search-list-additional {
+    border-bottom: 1px solid var(--mtvh-grey-03);
+  }
+}

package/assets/scss/components/_all.scss

@@ -16,3 +16,7 @@
 @import "_card-list";
 @import "_space-selection";
 @import "_good-to-know";
+@import "_collapse_button";
+@import "_agent-repair-location-list";
+@import "_accordion";
+@import "_table";

package/assets/scss/components/_banner.scss

@@ -57,7 +57,7 @@
   &.alert {
     --#{$prefix}alert-margin-bottom: 0;
     &.p-0 {
-      height: 44px;
+      height: $input-min-height;
       overflow: hidden;
     }
   }

package/assets/scss/components/_button-circle.scss

@@ -1,9 +1,12 @@
 .btn-icon-circle {
+  --#{$prefix}icon-right-spacing: 0px;
+  --#{$prefix}icon-left-spacing: 0px;
   --#{$prefix}btn-close-focus-outline-color: var(
     --#{$prefix}primary-outline-color
   );
   min-width: unset;
   min-height: unset;
+
   @include button-circle();
 
 }

package/assets/scss/components/_button.scss

@@ -129,21 +129,18 @@ $mtvh-buttons: (
   box-shadow: none;
 
   &:focus-visible {
-    box-shadow: none;
-    outline: solid var(--#{$prefix}btn-outline-border)
-      var(--#{$prefix}btn-outline-color);
-    outline-offset: var(--#{$prefix}btn-outline-border);
-    text-decoration: none;
-  }
-  &:focus:not(:focus-visible) {
-    outline: 0;
+    @include focus-radius;
   }
+
   &:hover {
     text-decoration: none;
   }
 }
 
 .mtvh-btn {
+  --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
+  --#{$prefix}icon-left-spacing: 0;
+
   min-height: 2.5rem;
   min-width: var(--#{$prefix}btn-min-width);
   border-radius: $btn-border-radius;

package/assets/scss/components/_card-list.scss

@@ -1,11 +1,35 @@
 .card-list {
+  border-radius: $border-radius-lg;
+  background-color: var(--#{$prefix}white);
+
   &-item {
+
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
+    align-items: center;
+
     border-bottom: 1px solid var(--#{$prefix}grey-03);
-    padding-top: $mtvh-spacing-5;
+    padding-top: $mtvh-spacing-4;
     padding-bottom: $mtvh-spacing-5;
+    margin-left: $mtvh-spacing-5;
+    margin-right: $mtvh-spacing-5;
+
+    @include media-breakpoint-up(md) {
+      margin-left: $mtvh-spacing-6;
+      margin-right: $mtvh-spacing-6;
+      padding-top: $mtvh-spacing-5;
+    }
+
+    .credit-card-form & {
+
+      margin-left: 0;
+      margin-right: 0;
+
+      &:first-child {
+        border-top: 1px solid var(--#{$prefix}grey-03);
+      }
+    }
 
     &:has(.label) {
       &:last-child {
@@ -30,15 +54,22 @@
 
       div {
         flex-wrap: nowrap;
-        @include media-breakpoint-up(lg) {
-          flex-wrap: nowrap;
-        }
+      }
+
+      .form-check-input, span {
+        margin-right: $mtvh-spacing-5;
       }
 
       span {
+        --#{$prefix}icon-right-spacing: #{$mtvh-spacing-5};
         display: block;
         align-self: center;
-
+        font-size: $font-size-xs;
+        @include media-breakpoint-down(sm) {
+          &:not(:first-child) {
+            padding-top: $mtvh-spacing-2;
+          }
+        }
         @include media-breakpoint-up(sm) {
           display: inline;
         }
@@ -53,8 +84,9 @@
       align-self: flex-start;
     }
 
-    .invali-feedback {
+    .invalid-feedback {
       flex-basis: 100%;
+      padding-top: $mtvh-spacing-4;
     }
   }
 }

package/assets/scss/components/_collapse_button.scss

@@ -0,0 +1,14 @@
+// collapse button for use with Bootstrap Collapse components, based on the
+// circle varriation of the close button animation goes through the transition
+// mixin so it adheres to the reduced motion setting.
+.btn-collapse {
+
+  transform: rotate(0deg);;
+  @include transition($btn-collapse-transition);
+
+  &.collapsed {
+    transform: rotate(180deg);
+    @include transition($btn-collapse-transition);
+  }
+}
+

package/assets/scss/components/_content-block.scss

@@ -6,10 +6,17 @@
     padding: $mtvh-spacing-6 $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6;
   }
 
-  &:last-of-type {
-    .mtvh-link {
-      padding-bottom: 0;
-    }
+  p {
+    margin-bottom: $mtvh-spacing-3;
+  }
+  .large {
+    margin-bottom: map-get($spacers,2);
+  }
+  .mtvh-link, .mtvh-btn {
+    margin-top: $mtvh-spacing-3;
+  }
+ .mtvh-btn {
+    margin-bottom: $mtvh-spacing-3;
   }
 
   &__date {
@@ -93,25 +100,6 @@
       font-size: $mtvh-base-font-size;
     }
   }
-  .mtvh-btn,
-  p {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  h3,
-  .mtvh-h3 {
-    + .mtvh-btn {
-      margin-top: 0.625rem;
-    }
-  }
-  h4,
-  .mtvh-h4 {
-    + .mtvh-btn {
-      margin-top: 0.625rem;
-    }
-  }
 
   &-no-padding {
     padding: 0;
@@ -129,6 +117,8 @@
   }
 
   &-icon {
+
+    --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
     &:not(.mtvh-content-block-link-card) {
       padding: $mtvh-spacing-5;
       @include media-breakpoint-up(md) {
@@ -142,11 +132,6 @@
       display: block;
     }
 
-    h3:has(+ p + p),
-    h3:has(+ p + p + p),
-    h3:has(+ div) {
-      margin-bottom: $mtvh-spacing-5;
-    }
   }
 
   &-container {

package/assets/scss/components/_form.scss

@@ -8,6 +8,7 @@
 @import "../forms/validation";
 @import "../forms/stripe";
 @import "../forms/credit-card-form";
+@import "../forms/search";
 
 .formio-form {
   @import "../forms/formio";
@@ -127,11 +128,12 @@ formio {
     }
   }
 
-  .mtvh-form-container-required {
-    font-size: $font-size-xs;
-    padding: 0 0 $mtvh-spacing-6 0;
-    @include media-breakpoint-down("lg") {
-      padding-bottom: $mtvh-spacing-7;
-    }
+}
+
+.mtvh-form-container-required {
+  font-size: $font-size-xs;
+  padding: 0 0 $mtvh-spacing-6 0;
+  @include media-breakpoint-down("lg") {
+    padding-bottom: $mtvh-spacing-7;
   }
 }

package/assets/scss/components/_link.scss

@@ -85,10 +85,11 @@ $mtvh-links: (
       }
     }
   }
+
   &:before {
-    margin-right: $link-icon-spacing !important;
+    --#{$prefix}icon-right-spacing: #{$link-icon-spacing};
   }
   &:after {
-    margin-left: $link-icon-spacing !important;
+    --#{$prefix}icon-left-spacing: #{$link-icon-spacing};
   }
 }

package/assets/scss/components/_pagination.scss

@@ -1,5 +1,5 @@
 .pagination {
-  $size: 44px;
+  $size: $input-min-height;
   margin: 0;
 
   @include media-breakpoint-down("lg") {

package/assets/scss/components/_payment.scss

@@ -0,0 +1,59 @@
+.payment-supported {
+
+  text-align: center;
+  font-size: $font-size-xs;
+  color: var(--#{$prefix}grey-06);
+  border-top:1px solid var(--#{$prefix}grey-04);
+
+  margin-top: $mtvh-spacing-4;
+  margin-bottom: $mtvh-spacing-5;
+
+  @include media-breakpoint-up(md) {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    padding-top: $mtvh-spacing-3;
+    padding-bottom: $mtvh-spacing-5;
+    margin: 0;
+  }
+
+  &-text {
+    padding-top: $mtvh-spacing-4;
+    padding-bottom: $mtvh-spacing-3;
+    display: block;
+
+    @include media-breakpoint-up(md) {
+      padding-top: $mtvh-spacing-3;
+      padding-bottom: $mtvh-spacing-5;
+      margin-right: $mtvh-spacing-6;
+    }
+
+  }
+  &-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    margin-bottom: $mtvh-spacing-6;
+
+    span {
+      &:last-child {
+        margin-right: $mtvh-spacing-3;
+      }
+    }
+    @include media-breakpoint-up(md) {
+      margin: 0;
+    }
+  }
+}
+
+.payment-info {
+  padding: $mtvh-spacing-4 $mtvh-spacing-5;
+  border-radius: $border-radius-lg;
+  background-color: var(--#{$prefix}grey-01);
+  font-size: $font-size-xs;
+  @include media-breakpoint-up(md) {
+    font-size: $font-size-sm;
+    padding: $mtvh-spacing-5 $mtvh-spacing-6;
+  }
+}

package/assets/scss/components/_space-selection.scss

@@ -1,4 +1,6 @@
 fieldset.space-selection {
+  --#{$prefix}icon-right-spacing: #{$button-icon-spacing};
+
   input {
     @extend .btn-check;
   }

package/assets/scss/components/_table.scss

@@ -0,0 +1,46 @@
+.table-sticky {
+
+  @include media-breakpoint-down("sm") {
+    th:first-child, td:first-child {
+      &:after {
+        background: var(--#{$prefix}white);
+        content: "";
+        inset: 0;
+        position: absolute;
+        z-index: -1;
+      }
+    }
+    th:first-child, td:first-child  {
+      &:before {
+        background: linear-gradient(54deg, #000, #d9d9d9 0);
+        border-radius: inherit;
+        bottom: 0;
+        content: "";
+        filter: blur(10px);
+        opacity: .8;
+        position: absolute;
+        right: -8px;
+        top: 0;
+        width: 18px;
+        z-index: -1;
+      }
+    }
+  }
+  thead {
+    border-color: black;
+  }
+  th,td {
+    &:first-child,
+    {
+      background: inherit;
+      left: 0;
+      position: sticky;
+      z-index: 3;
+      min-width: 45px;
+    }
+
+    @include media-breakpoint-down("sm") {
+      text-wrap: nowrap;
+    }
+  }
+}

package/assets/scss/config/_icon-list.scss

@@ -81,9 +81,9 @@ $icons: (
   "space-sub-block":
     '<svg width="28" height="28" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.52481 12C1.24033 12 0.998404 11.8987 0.799042 11.6961C0.599681 11.4933 0.5 11.2474 0.5 10.9582V1.0416C0.5 0.752457 0.599681 0.506571 0.799042 0.303943C0.998404 0.101314 1.24033 0 1.52481 0H5.88428C6.16876 0 6.41069 0.101314 6.61005 0.303943C6.80941 0.506571 6.90909 0.752457 6.90909 1.0416V2.74286H12.4752C12.7597 2.74286 13.0016 2.84417 13.201 3.0468C13.4003 3.24943 13.5 3.49531 13.5 3.78446V10.9582C13.5 11.2474 13.4003 11.4933 13.201 11.6961C13.0016 11.8987 12.7597 12 12.4752 12H1.52481ZM1.51182 10.9714H5.89727V9.25714H1.51182V10.9714ZM1.51182 8.22857H5.89727V6.51429H1.51182V8.22857ZM1.51182 5.48571H5.89727V3.77143H1.51182V5.48571ZM1.51182 2.74286H5.89727V1.02857H1.51182V2.74286ZM6.90909 10.9714H12.4882V3.77143H6.90909V10.9714ZM8.89427 6.51429C8.75091 6.51429 8.63071 6.46497 8.53367 6.36634C8.43674 6.26771 8.38828 6.14548 8.38828 5.99966C8.38828 5.85394 8.43674 5.73183 8.53367 5.63331C8.63071 5.53491 8.75091 5.48571 8.89427 5.48571H10.3733C10.5167 5.48571 10.6368 5.53503 10.7337 5.63366C10.8308 5.73217 10.8793 5.85434 10.8793 6.00017C10.8793 6.146 10.8308 6.26811 10.7337 6.36651C10.6368 6.46503 10.5167 6.51429 10.3733 6.51429H8.89427ZM8.89427 9.25714C8.75091 9.25714 8.63071 9.20783 8.53367 9.1092C8.43674 9.01057 8.38828 8.88834 8.38828 8.74251C8.38828 8.5968 8.43674 8.47468 8.53367 8.37617C8.63071 8.27777 8.75091 8.22857 8.89427 8.22857H10.3733C10.5167 8.22857 10.6368 8.27788 10.7337 8.37651C10.8308 8.47503 10.8793 8.5972 10.8793 8.74303C10.8793 8.88886 10.8308 9.01097 10.7337 9.10937C10.6368 9.20789 10.5167 9.25714 10.3733 9.25714H8.89427Z" fill="#9A9A9A"/></svg>',
   "chevron-up":
-  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#000" d="m22.01 18.23-8.413 9.46a.875.875 0 0 1-.621.31c-.244.014-.466-.088-.665-.308a1.11 1.11 0 0 1-.31-.723c-.009-.262.087-.512.285-.75l8.636-9.711c.17-.177.34-.309.513-.397.173-.088.364-.132.575-.132.21 0 .403.044.577.133.173.089.34.222.497.399l8.627 9.705c.188.211.285.456.289.732.005.277-.093.525-.291.744-.2.22-.415.33-.646.33-.231 0-.445-.11-.64-.331l-8.413-9.46Z"/></svg>',
+  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 20 13"><path fill="#000" d="m10.01 2.252-8.413 9.46a.875.875 0 0 1-.621.31c-.244.013-.466-.09-.665-.308a1.11 1.11 0 0 1-.31-.723c-.009-.262.087-.512.285-.75L8.922.528c.17-.176.34-.309.513-.397C9.608.044 9.8 0 10.01 0c.21 0 .403.044.577.133.173.089.34.222.497.4l8.627 9.704c.188.212.285.456.289.732a1.05 1.05 0 0 1-.291.745c-.2.219-.415.329-.646.329-.231 0-.445-.11-.64-.331l-8.413-9.46Z"/></svg>',
   "chevron-down":
-  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 44"><path fill="#000" d="m21.99 25.77 8.413-9.46a.875.875 0 0 1 .621-.31c.244-.014.466.088.665.308s.302.46.31.723c.009.262-.086.512-.285.75l-8.636 9.711c-.17.177-.34.309-.513.397a1.247 1.247 0 0 1-.575.132c-.21 0-.403-.044-.577-.133a1.73 1.73 0 0 1-.497-.399l-8.627-9.705a1.096 1.096 0 0 1-.289-.732 1.051 1.051 0 0 1 .291-.744c.2-.22.415-.33.646-.33.231 0 .445.11.64.331l8.413 9.46Z"/></svg>'
+  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="20" height="20" viewBox="0 0 20 13"><path fill="#000" d="M9.99 9.79 18.403.33a.875.875 0 0 1 .621-.309c.244-.014.466.089.665.308.199.22.302.46.31.723.009.262-.086.512-.285.75l-8.636 9.712c-.17.176-.34.308-.513.397a1.247 1.247 0 0 1-.575.132c-.21 0-.403-.045-.577-.134a1.73 1.73 0 0 1-.497-.399L.289 1.805A1.097 1.097 0 0 1 0 1.073 1.051 1.051 0 0 1 .291.329C.491.109.705 0 .937 0c.231 0 .445.11.64.33L9.99 9.79Z"/></svg>'
 );
 
 /**
@@ -127,6 +127,14 @@ $mtvh-icons: (
     width: $icon-size-scale-sm,
     height: $icon-size-scale-sm,
   ),
+  "chevron-up": (
+    width: $icon-size-scale-sm,
+    height: $icon-size-scale-sm
+  ),
+  "chevron-down": (
+    width: $icon-size-scale-sm,
+    height: $icon-size-scale-sm
+  ),
   "spreadsheet": (
     width: $icon-size-scale-sm,
     height: $icon-size-scale-sm,
@@ -679,14 +687,7 @@ $mtvh-icons: (
     height: $icon-size-scale-lg,
     svg-path: "#{$asset-icon-path}mastercard.svg",
   ),
-  "chevron-up": (
-    width: $icon-size-scale-lg,
-    height: $icon-size-scale-lg
-  ),
-  "chevron-down": (
-    width: $icon-size-scale-lg,
-    height: $icon-size-scale-lg
-  ),
+
   "space-building": (
     width: $icon-size-scale-md,
     height: $icon-size-scale-md,

package/assets/scss/config/_theme.scss

@@ -12,7 +12,7 @@
   --mtvh-btn-line-height: 1.5;
   --mtvh-btn-font-weight: bold;
   --mtvh-btn-outline-color: var(--mtvh-blue-03);
-  --mtvh-btn-outline-border: 0.13rem;
+  --mtvh-btn-outline-border: 0.125rem;
   --mtvh-btn-min-width: 10rem;
 
   /* Shadows */

package/assets/scss/config/_variables.scss

@@ -162,6 +162,7 @@ $form-feedback-font-size: $font-size-sm;
 $form-feedback-invalid-color: $danger;
 
 $form-feedback-margin-top: $mtvh-spacing-4;
+$input-min-height: 2.75rem;
 $input-line-height: 1.5;
 $input-font-size: $font-size-sm;
 $input-padding-y: $mtvh-spacing-4;
@@ -183,7 +184,7 @@ $input-width-size-xl: 450px;
 $input-width-size-l: 420px;
 
 /* form check */
-$form-check-bg-color: unset;
+$form-check-bg-color: var(--#{$prefix}grey-01);
 $form-check-hover-bg-color: unset;
 $form-check-input-width: 2.75rem;
 $form-check-input-height: 2.75rem;
@@ -223,6 +224,9 @@ $btn-close-circle-height: 1.25rem;
 $btn-close-focus-opacity: 1;
 $btn-close-hover-opacity: 1;
 
+/* collapse button */
+$btn-collapse-transition: transform 0.2s ease-in-out;
+
 /* stepper */
 $stepper-bg-color: var(--#{$prefix}grey-06);
 $stepper-sm-font-color: var(--#{$prefix}purple-04);
@@ -233,7 +237,6 @@ $stepper-font-size: $font-size-xs;
 $stepper-font-color: var(--#{$prefix}white);
 $stepper-breakpoint: "lg";
 
-$alert-border-radius: 0.5rem;
 $alert-padding-x: 0;
 $alert-padding-y: 0;
 
@@ -388,3 +391,17 @@ $pagination-font-size: $font-size-sm;
 $pagination-focus-box-shadow: unset;
 $pagination-border-width: 0;
 $pagination-bg: transparent;
+
+/* Accordion */
+$accordion-button-icon: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8399 10.9658C14.1412 10.6644 14.4979 10.5549 15.0753 10.7285C15.6526 10.902 16.0347 11.1793 15.9975 11.6653C15.9604 12.1512 14.274 14.1401 13.6771 14.8836C13.0803 15.6271 12.1466 16.964 11.7111 17.7018C11.2755 18.4396 10.9292 19.0333 10.4145 18.9985C9.89987 18.9638 9.41959 18.8397 8.70831 17.9484C7.99703 17.057 4.42288 12.3984 4.09421 12.0311C3.76554 11.6638 4.36995 11.105 4.78537 11.0375C5.2008 10.9701 5.65431 10.6722 6.03656 11.1874C6.4188 11.7026 8.99375 14.7047 8.99375 14.7047C8.99375 14.7047 8.85766 13.9341 8.79465 12.3944C8.70391 10.1772 8.62477 9.40462 8.64694 7.62401C8.66911 5.8434 8.81999 3.02738 8.95 2.25625C9.08001 1.48512 9.20018 0.705523 9.94859 1.11094C10.697 1.51636 10.9968 2.57194 11.0479 3.82131C11.0991 5.07067 11.0662 7.05431 11.1211 9.32562C11.1803 11.9316 11.275 14.2456 11.275 14.2456C11.275 14.2456 12.0687 13.2044 12.6086 12.4629C13.1485 11.7214 13.5028 11.3212 13.8498 10.9742L13.8399 10.9658Z' fill='%230072BF'/></svg>");
+$accordion-button-active-icon: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8399 10.9658C14.1412 10.6644 14.4979 10.5549 15.0753 10.7285C15.6526 10.902 16.0347 11.1793 15.9975 11.6653C15.9604 12.1512 14.274 14.1401 13.6771 14.8836C13.0803 15.6271 12.1466 16.964 11.7111 17.7018C11.2755 18.4396 10.9292 19.0333 10.4145 18.9985C9.89987 18.9638 9.41959 18.8397 8.70831 17.9484C7.99703 17.057 4.42288 12.3984 4.09421 12.0311C3.76554 11.6638 4.36995 11.105 4.78537 11.0375C5.2008 10.9701 5.65431 10.6722 6.03656 11.1874C6.4188 11.7026 8.99375 14.7047 8.99375 14.7047C8.99375 14.7047 8.85766 13.9341 8.79465 12.3944C8.70391 10.1772 8.62477 9.40462 8.64694 7.62401C8.66911 5.8434 8.81999 3.02738 8.95 2.25625C9.08001 1.48512 9.20018 0.705523 9.94859 1.11094C10.697 1.51636 10.9968 2.57194 11.0479 3.82131C11.0991 5.07067 11.0662 7.05431 11.1211 9.32562C11.1803 11.9316 11.275 14.2456 11.275 14.2456C11.275 14.2456 12.0687 13.2044 12.6086 12.4629C13.1485 11.7214 13.5028 11.3212 13.8498 10.9742L13.8399 10.9658Z' fill='%230072BF'/></svg>");
+$accordion-btn-focus-box-shadow: 0;
+$accordion-border-radius: 0;
+$accordion-active-color: var(--#{$prefix}white);
+$accordion-bg: var(--#{$prefix}white);
+$accordion-button-color: var(--#{$prefix}blue-04);
+$accordion-padding-y: $mtvh-spacing-6;
+$accordion-padding-x: 0;
+$accordion-body-padding-x: $mtvh-spacing-7;
+$accordion-body-padding-y: $mtvh-spacing-6;
+$accordion-border-color: var(--#{$prefix}grey-04);

package/assets/scss/core/iconography/_icon.scss

@@ -1,3 +1,7 @@
+.mtvh-icon--right {
+  --#{$prefix}icon-right-spacing: 0px;
+  --#{$prefix}icon-left-spacing: #{$button-icon-spacing};
+}
 .mtvh-icon {
   @each $mtvh-icon, $property-map in $mtvh-icons {
     &-#{$mtvh-icon} {

package/assets/scss/core/typography/_typography.scss

@@ -9,7 +9,7 @@ h5,
 h6,
 .mtvh-h1,
 mtvh-child-title-h1,
-mtvh-title-h1 .mtvh-h2,
+mtvh-title-h1, .mtvh-h2,
 .mtvh-h3,
 .mtvh-h4,
 .mtvh-h5,
@@ -114,9 +114,13 @@ p {
   font-size: 1.375rem;
   line-height: 1.4;
 }
-
+.large {
+  font-size: 1.625rem;
+  line-height: 1.3;
+  font-weight: $mtvh-font-weight-bolder;
+  font-family: $font-family-sans-serif;
+}
 .small {
-  margin-bottom: 0.75rem;
   font-size: 1rem;
   line-height: 1.5;
 }

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

@@ -26,9 +26,10 @@
 }
 
 .form-check-input {
+
+  --#{$prefix}form-check-bg: #{$form-check-bg-color};
   margin-top: 0;
   margin-right: $mtvh-spacing-4;
-  float: unset;
   align-self: start;
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}grey-06);
 

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

@@ -1,27 +1,3 @@
 .input-group-text {
   border-radius: 0.25rem 0 0 0.25rem;
 }
-.input-group-search {
-  $height: 46px;
-  display: flex;
-  align-items: center;
-
-
-  input.form-control {
-    padding-left: $mtvh-spacing-5;
-    border-right: 0;
-    height: $height;
-  }
-  .input-group-append {
-    border: var(--mtvh-border-width) solid var(--mtvh-grey-06);
-    border-top-right-radius: 0.25rem !important;
-    border-bottom-right-radius: 0.25rem !important;
-    border-radius: 0.25rem;
-    height: $height;
-    .mtvh-icon {
-      &:before {
-        background-color: var(--mtvh-black);
-      }
-    }
-  }
-}

package/assets/scss/forms/_search.scss

@@ -0,0 +1,31 @@
+.input-group-search {
+
+  $height: $input-min-height;
+  $button-size: $icon-size-scale-lg;
+  display: flex;
+  align-items: center;
+  position: relative;
+  input.form-control {
+    padding-left: $mtvh-spacing-5;
+    padding-right: calc(#{$button-size} * 2  + 0.25rem);
+    height: $height;
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+  .input-group-search-append {
+    position: absolute;
+    z-index:8;
+    display: flex;
+    top: 0;
+    right: 0;
+  }
+
+  .mtvh-icon {
+    position: relative;
+    margin: 0;
+    &:before {
+      background-color: var(--mtvh-black) !important;
+    }
+  }
+
+}