@vcita/design-system 0.6.2-beta.0 → 0.6.4

package/CHANGELOG.MD

@@ -6,6 +6,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Unreleased changes
 
+### 0.6.4 (2022-02-28)
+- VcButton - add flavor prop
+- VcBanner - Change component design
+
+### 0.6.3 (2022-02-23)
+- VcListbox - performance improve
+
 ### 0.6.2 (2022-02-22)
 - VcListbox - minor fix
 

package/dist/@vcita/design-system.esm.js

@@ -316,9 +316,17 @@ var script$N = {
     },
     color: {
       type: String,
-      default: 'secondary',
+      comment: "deprecated, you shuold use flavor",
+      default: "secondary",
       validator: type => {
-        return ['secondary', 'white'].indexOf(type) > -1;
+        return ["secondary", "white"].indexOf(type) > -1;
+      }
+    },
+    flavor: {
+      type: String,
+      default: "primary",
+      validator: type => {
+        return ["secondary", "primary"].indexOf(type) > -1;
       }
     },
     icon: {
@@ -358,7 +366,7 @@ var script$N = {
     },
     href: {
       type: String,
-      comment: 'This param will change the <button> to <a> with link'
+      comment: "This param will change the <button> to <a> with link"
     },
     prependDefaultIcon: {
       type: Boolean,
@@ -366,8 +374,20 @@ var script$N = {
     },
     dataQa: {
       type: String,
-      default: 'vc-btn'
+      default: "vc-btn"
     }
+  },
+  computed: {
+    buttonColor() {
+      switch (this.flavor) {
+        case "secondary":
+          return `var(${this.outlined ? '--gray-darken-5' : '--neutral-lighten-2'})`;
+
+        default:
+          return "secondary";
+      }
+    }
+
   }
 };
 
@@ -383,9 +403,9 @@ var __vue_render__$L = function () {
   var _c = _vm._self._c || _h;
 
   return _c('v-btn', {
-    staticClass: "VcButton",
+    class: "VcButton " + this.flavor + "__text",
     attrs: {
-      "color": _vm.color,
+      "color": _vm.flavor ? _vm.buttonColor : _vm.color,
       "icon": _vm.icon,
       "fab": _vm.fab,
       "outlined": _vm.outlined,
@@ -417,7 +437,7 @@ var __vue_render__$L = function () {
         "small": ""
       }
     }, [_vm._v("$plus")]) : _vm._e()];
-  }), _vm._v("\n  " + _vm._s(_vm.label || _vm.$slots.default && _vm.$slots.default[0].text || '') + "\n  "), _vm._t("append")], 2);
+  }), _vm._v("\n  " + _vm._s(_vm.label || _vm.$slots.default && _vm.$slots.default[0].text || "") + "\n  "), _vm._t("append")], 2);
 };
 
 var __vue_staticRenderFns__$L = [];
@@ -425,8 +445,8 @@ var __vue_staticRenderFns__$L = [];
 
 const __vue_inject_styles__$N = function (inject) {
   if (!inject) return;
-  inject("data-v-19570f74_0", {
-    source: ".VcButton[data-v-19570f74]{letter-spacing:var(--letter-spacing)}.VcButton[data-v-19570f74]:disabled{background-color:var(--gray-lighten-2);color:var(--gray-darken-2)}.VcButton .prependDefaultIcon[data-v-19570f74]{margin-inline-end:var(--size-value3)}.VcButton .prependDefaultIcon[data-v-19570f74]  svg{fill:currentColor}",
+  inject("data-v-7be2cd57_0", {
+    source: ".VcButton[data-v-7be2cd57]{letter-spacing:var(--letter-spacing)}.VcButton[data-v-7be2cd57]:disabled{background-color:var(--gray-lighten-2);color:var(--gray-darken-2)}.VcButton .prependDefaultIcon[data-v-7be2cd57]{margin-inline-end:var(--size-value3)}.VcButton .prependDefaultIcon[data-v-7be2cd57]  svg{fill:currentColor}.VcButton.secondary__text[data-v-7be2cd57]{color:var(--gray-darken-5)!important;border-color:var(--neutral-lighten-1)}",
     map: undefined,
     media: undefined
   });
@@ -434,7 +454,7 @@ const __vue_inject_styles__$N = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$N = "data-v-19570f74";
+const __vue_scope_id__$N = "data-v-7be2cd57";
 /* module identifier */
 
 const __vue_module_identifier__$N = undefined;
@@ -3568,18 +3588,6 @@ var script$r = {
       default: 'VcListbox'
     }
   },
-  // data: () => ({
-  //   confirmedArray: []
-  // }),
-  // watch: {
-  //   items: {
-  //     immediate: true,
-  //     deep: true,
-  //     handler(values) {
-  //       this.confirmedArray = values.filter((item) => item.checked)
-  //     }
-  //   }
-  // },
   computed: {
     getAddAnotherLabel() {
       return this.addAnotherLabel || this.$dst('ds.listbox.add');
@@ -3684,8 +3692,8 @@ var __vue_staticRenderFns__$r = [];
 
 const __vue_inject_styles__$r = function (inject) {
   if (!inject) return;
-  inject("data-v-45c85985_0", {
-    source: "[data-v-45c85985]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--popover-width:360px;--popover-max-height:464px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-list-title[data-v-45c85985]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);margin-block-end:var(--size-value3)}.VcListbox[data-v-45c85985]{padding-block:var(--size-value1);margin-block:var(--size-value1);border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:var(--border-radius);box-shadow:none!important}.VcListbox .vc-overflow[data-v-45c85985]{overflow:auto;max-height:160px}.VcListbox .vc-overflow .vc-list-item[data-v-45c85985]{padding:var(--size-value0);min-height:unset}.VcListbox .vc-overflow .vc-list-item[data-v-45c85985]:before{opacity:0}.VcListbox .divider[data-v-45c85985]{border-color:var(--gray-lighten-1)}.VcListbox .last-item[data-v-45c85985]{cursor:pointer;min-height:var(--size-value10)}.VcListbox .last-item[data-v-45c85985]:hover{background-color:var(--gray-lighten-3)}.VcListbox .last-item .add-another-label[data-v-45c85985]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small);line-height:var(--size-value5);color:var(--gray-darken-5)}.VcListbox .last-item .add-another-icon[data-v-45c85985]{margin-inline-end:var(--size-value3);cursor:pointer}.VcListbox .last-item .add-another-icon[data-v-45c85985]  .v-icon__component{height:unset;width:unset}.VcListbox .last-item .add-another-icon[data-v-45c85985]  .v-icon__component svg{width:var(--size-value3)}",
+  inject("data-v-07369312_0", {
+    source: "[data-v-07369312]:root{--primary-font-family:Montserrat;--font-size-xxx-small:9px;--font-size-xx-small:12px;--font-size-x-small:13px;--font-size-small:14px;--font-size-small2:15px;--font-size-small3:17px;--font-size-medium:18px;--font-size-medium1:22px;--font-size-medium2:24px;--font-size-large:28px;--font-weight-medium:400;--font-weight-medium2:500;--font-weight-large:600;--font-weight-large2:700;--font-weight-xl:800;--letter-spacing:0.003em;--size-value0:0px;--size-value1:4px;--size-value2:8px;--size-value3:12px;--size-value4:16px;--size-value5:20px;--size-value6:24px;--size-value7:28px;--size-value8:32px;--size-value9:36px;--size-value10:40px;--size-value11:44px;--size-value12:48px;--size-value13:52px;--size-value14:56px;--size-value15:60px;--size-value16:64px;--size-value17:68px;--size-value18:72px;--size-value19:76px;--size-value20:80px;--border-radius:6px;--popover-width:360px;--popover-max-height:464px;--modal-desktop-offset:-112px;--modal-bg-color:#ffffff;--modal-box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--modal-border-radius:10px;--modal-width-small:384px;--modal-width-medium:576px;--modal-width-large:816px;--avatar-x-sm:24px;--avatar-sm:32px;--avatar-md:40px;--avatar-lg:48px;--gray-darken-5:#212121;--gray-darken-4:#616161;--gray-darken-3:#757575;--gray-darken-2:#999999;--gray-darken-1:#b3b3b3;--gray:#cccccc;--gray-lighten-1:#e0e0e0;--gray-lighten-2:#ededed;--gray-lighten-3:#f7f7f7;--gray-lighten-4:#fafafa;--neutral:#586E8C;--neutral-lighten-1:#D6DBE6;--neutral-lighten-2:#EAEDF2;--neutral-lighten-3:#F8F9FB;--red:#F2514A;--red-lighten-1:#F79792;--red-lighten-2:#FBCBC9;--red-lighten-3:#FDE8E7;--yellow:#FFC511;--yellow-lighten-1:#FFDC70;--yellow-lighten-2:#FFEDB8;--yellow-lighten-3:#FFF7E0;--green:#54D28C;--green-lighten-1:#98E4BA;--green-lighten-2:#CFF8E1;--green-lighten-3:#EAFCF2;--blue:#478FFF;--blue-lighten-1:#91BCFF;--blue-lighten-2:#C8DDFF;--blue-lighten-3:#E7F0FF;--orange:#FF8F00;--orange-lighten-1:#FCB965;--orange-lighten-2:#FAD9B0;--orange-lighten-3:#F9EBDA;--shadow-1:0px 1px 4px rgba(0, 0, 0, 0.11);--shadow-2:0px 2px 5px rgba(0, 0, 0, 0.1),0px 2px 2px rgba(0, 0, 0, 0.06),0px 3px 1px -2px rgba(0, 0, 0, 0.06);--shadow-3:0px 3px 2px rgba(0, 0, 0, 0.101961);--shadow-4:0px 1px 1px rgba(0, 0, 0, 0.06),0px 3px 8px rgba(0, 0, 0, 0.15);--shadow-5:0px 4px 18px rgba(0, 0, 0, 0.1);--shadow-6:0px 1px 10px rgba(0, 0, 0, 0.12),0px 4px 7px rgba(0, 0, 0, 0.14),0px 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-7:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px rgba(0, 0, 0, 0.14),0px 1px 18px rgba(0, 0, 0, 0.12);--shadow-8:0px 5px 7px 3px rgba(0, 0, 0, 0.26);--shadow-9:0px 7px 8px -4px rgba(0, 0, 0, 0.2),2px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px rgba(0, 0, 0, 0.12);--shadow-10:0px 4px 8px #cccccc}.vc-list-title[data-v-07369312]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-small2);line-height:var(--size-value5);margin-block-end:var(--size-value3)}.VcListbox[data-v-07369312]{padding-block:var(--size-value1);margin-block:var(--size-value1);border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:var(--border-radius);box-shadow:none!important}.VcListbox .vc-overflow[data-v-07369312]{overflow:auto;max-height:160px}.VcListbox .vc-overflow .vc-list-item[data-v-07369312]{padding:var(--size-value0);min-height:unset}.VcListbox .vc-overflow .vc-list-item[data-v-07369312]:before{opacity:0}.VcListbox .divider[data-v-07369312]{border-color:var(--gray-lighten-1)}.VcListbox .last-item[data-v-07369312]{cursor:pointer;min-height:var(--size-value10)}.VcListbox .last-item[data-v-07369312]:hover{background-color:var(--gray-lighten-3)}.VcListbox .last-item .add-another-label[data-v-07369312]{font-weight:var(--font-weight-medium2);font-size:var(--font-size-x-small);line-height:var(--size-value5);color:var(--gray-darken-5)}.VcListbox .last-item .add-another-icon[data-v-07369312]{margin-inline-end:var(--size-value3);cursor:pointer}.VcListbox .last-item .add-another-icon[data-v-07369312]  .v-icon__component{height:unset;width:unset}.VcListbox .last-item .add-another-icon[data-v-07369312]  .v-icon__component svg{width:var(--size-value3)}",
     map: undefined,
     media: undefined
   });
@@ -3693,7 +3701,7 @@ const __vue_inject_styles__$r = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$r = "data-v-45c85985";
+const __vue_scope_id__$r = "data-v-07369312";
 /* module identifier */
 
 const __vue_module_identifier__$r = undefined;
@@ -6214,7 +6222,10 @@ var script$5 = {
   name: "VcBanner",
   components: {
     VcImage: __vue_component__$F,
-    VcButton: __vue_component__$N
+    VcButton: __vue_component__$N,
+    VcIcon: __vue_component__$O,
+    VcLink: __vue_component__$a,
+    VcSvg: __vue_component__$7
   },
   props: {
     dataQa: {
@@ -6227,7 +6238,7 @@ var script$5 = {
     },
     backgroundColor: {
       type: String,
-      default: "#FFFFFF"
+      default: "#F8F9FB"
     },
     title: {
       type: String
@@ -6235,8 +6246,23 @@ var script$5 = {
     subtitle: {
       type: String
     },
+    note: {
+      type: String
+    },
+    linkUrl: {
+      type: String,
+      default: ''
+    },
+    linkLabel: {
+      type: String,
+      default: ''
+    },
     buttonLabel: {
       type: String
+    },
+    closeButton: {
+      type: Boolean,
+      default: false
     }
   }
 };
@@ -6253,36 +6279,80 @@ var __vue_render__$5 = function () {
   var _c = _vm._self._c || _h;
 
   return _c('div', {
-    staticClass: "VcBanner pa-6 py-md-3 px-md-10 d-flex flex-column flex-md-row align-start align-md-center",
+    ref: "banner",
+    staticClass: "VcBanner d-flex justify-space-between flex-column flex-sm-row",
     style: {
       backgroundColor: _vm.backgroundColor
     },
     attrs: {
       "data-qa": _vm.dataQa
     }
-  }, [_vm.image ? _c('VcImage', {
-    staticClass: "VcBannerImage flex-grow-0 d-none d-md-block",
-    attrs: {
-      "image": _vm.image
-    }
-  }) : _vm._e(), _vm._v(" "), _c('div', {
-    staticClass: "text-container px-md-8 flex-grow-1"
   }, [_c('div', {
-    staticClass: "banner-title pb-2 pb-md-0"
-  }, [_vm._v(_vm._s(_vm.title))]), _vm._v(" "), _vm.subtitle || _vm.$slots.subtitle ? _c('div', {
-    staticClass: "banner-subtitle pb-4 pb-md-0"
-  }, [_vm._t("subtitle", function () {
-    return [_vm._v("\n        " + _vm._s(_vm.subtitle) + "\n      ")];
-  })], 2) : _vm._e()]), _vm._v(" "), _vm.buttonLabel ? _c('VcButton', {
+    staticClass: "text-container px-6 pt-10 pt-sm-6 "
+  }, [_c('div', {
+    staticClass: "banner-title pb-2 pb-sm-4 pb-md-2 "
+  }, [_vm._v(_vm._s(_vm.title))]), _vm._v(" "), _vm.subtitle ? _c('div', {
+    staticClass: "banner-subtitle"
+  }, [_vm._v(_vm._s(_vm.subtitle))]) : _vm._e(), _vm._v(" "), _vm.buttonLabel || _vm.linkLabel ? _c('div', {
+    staticClass: "cta-container py-6 py-sm-7 d-flex flex justify-start flex-wrap"
+  }, [_vm.buttonLabel ? _c('VcButton', {
+    staticClass: "primary-cta",
     attrs: {
-      "large": _vm.$vuetify.breakpoint.smAndUp
+      "pill": "",
+      "large": ""
     },
     on: {
       "click": function ($event) {
         return _vm.$emit('onAction');
       }
     }
-  }, [_vm._v("\n    " + _vm._s(_vm.buttonLabel) + "\n  ")]) : _vm._e()], 1);
+  }, [_vm._v("\n        " + _vm._s(_vm.buttonLabel) + "\n      ")]) : _vm._e(), _vm._v(" "), _vm.linkLabel && _vm.linkUrl ? _c('VcLink', {
+    staticClass: "secondary-cta pt-6 pt-sm-0",
+    attrs: {
+      "url": _vm.linkUrl,
+      "label": _vm.linkLabel
+    }
+  }) : _vm._e()], 1) : _vm._e(), _vm._v(" "), _vm.note || _vm.$slots.note ? _c('div', {
+    staticClass: "banner-note py-4 pt-sm-9"
+  }, [_vm._t("note", function () {
+    return [_vm._v("\n        " + _vm._s(_vm.note) + "\n      ")];
+  })], 2) : _vm._e()]), _vm._v(" "), _vm.image ? _c('div', {
+    staticClass: "images-container d-flex align-self-end"
+  }, [_c('VcSvg', {
+    staticClass: "background-stain",
+    attrs: {
+      "svg": _vm.$svgImages.background_stain
+    }
+  }), _vm._v(" "), _c('VcImage', {
+    staticClass: "banner-image pb-0",
+    attrs: {
+      "image": _vm.image
+    }
+  })], 1) : _vm._e(), _vm._v(" "), _vm.closeButton ? _c('VcButton', {
+    staticClass: "close-button mt-6 me-1",
+    attrs: {
+      "icon": "",
+      "data-qa": _vm.dataQa + "-close-btn",
+      "fab": "",
+      "plain": ""
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('closeBanner');
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "prepend",
+      fn: function () {
+        return [_c('VcIcon', {
+          attrs: {
+            "x-small": ""
+          }
+        }, [_vm._v("$close_button")])];
+      },
+      proxy: true
+    }], null, false, 796317393)
+  }) : _vm._e()], 1);
 };
 
 var __vue_staticRenderFns__$5 = [];
@@ -6290,8 +6360,8 @@ var __vue_staticRenderFns__$5 = [];
 
 const __vue_inject_styles__$5 = function (inject) {
   if (!inject) return;
-  inject("data-v-d461d238_0", {
-    source: ".VcBanner[data-v-d461d238]{min-height:128px;box-sizing:border-box;box-shadow:var(--shadow-10)}@media screen and (min-width:960px){.VcBanner[data-v-d461d238]{box-shadow:unset;border-radius:var(--size-value3);border:1px solid var(--neutral-lighten-2)}}.VcBanner .VcBannerImage[data-v-d461d238]{height:105px}.VcBanner .text-container[data-v-d461d238]{color:var(--gray-darken-5)}.VcBanner .text-container .banner-title[data-v-d461d238]{font-weight:var(--font-weight-large2);font-size:var(--font-size-small3);line-height:22px}@media screen and (min-width:960px){.VcBanner .text-container .banner-title[data-v-d461d238]{font-size:var(--font-size-medium2);line-height:var(--size-value8)}}.VcBanner .text-container .banner-subtitle[data-v-d461d238]{font-size:var(--font-size-small2);line-height:var(--size-value5);font-weight:var(--font-weight-medium)}",
+  inject("data-v-e21d9cb6_0", {
+    source: ".VcBanner[data-v-e21d9cb6]{min-height:188px;max-width:1240px;box-sizing:border-box;overflow:hidden;border-radius:var(--size-value2);border:1px solid var(--neutral-lighten-2);position:relative}.VcBanner .images-container[data-v-e21d9cb6]{position:relative;height:100%}.VcBanner .images-container .background-stain[data-v-e21d9cb6]{position:absolute;opacity:15%;margin:0 auto;overflow:hidden;top:-80px;height:calc(100% + 110px);transform:scale(.7);left:-335px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-e21d9cb6]{left:auto;right:-335px}@media screen and (min-width:600px){.VcBanner .images-container .background-stain[data-v-e21d9cb6]{transform:scale(1);top:-206px;height:calc(100% + 206px);left:-64px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-e21d9cb6]{left:auto;right:-64px}}@media screen and (min-width:960px){.VcBanner .images-container .background-stain[data-v-e21d9cb6]{top:-176px;height:calc(100% + 176px);left:-50px}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-e21d9cb6]{left:auto;right:-50px}}#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-e21d9cb6]{transform:scale(-.7,.7)}@media screen and (min-width:600px){#app[dir=rtl] .VcBanner .images-container .background-stain[data-v-e21d9cb6]{transform:scaleX(-1)}}.VcBanner .images-container .background-stain #background_stain[data-v-e21d9cb6]{fill:var(--v-secondary-base)}.VcBanner .images-container .banner-image[data-v-e21d9cb6]{margin:auto 0 0;position:relative;width:200px;height:95px}@media screen and (min-width:600px){.VcBanner .images-container .banner-image[data-v-e21d9cb6]{width:300px;height:142.5px}}@media screen and (min-width:960px){.VcBanner .images-container .banner-image[data-v-e21d9cb6]{width:400px;height:190px}}.VcBanner .text-container[data-v-e21d9cb6]{flex:0 0 60%;color:var(--gray-darken-5);z-index:1}.VcBanner .text-container .banner-title[data-v-e21d9cb6]{font-weight:var(--font-weight-large2);font-size:var(--font-size-medium2);line-height:var(--size-value8)}@media screen and (min-width:960px){.VcBanner .text-container .banner-title[data-v-e21d9cb6]{flex:0 0 100%}}.VcBanner .text-container .banner-subtitle[data-v-e21d9cb6]{font-size:var(--font-size-small2);line-height:var(--size-value5);font-weight:var(--font-weight-medium2)}.VcBanner .text-container .banner-note[data-v-e21d9cb6]{font-size:var(--font-size-small2);font-weight:var(--font-weight-medium)}.VcBanner .cta-container .primary-cta[data-v-e21d9cb6]{line-height:var(--size-value12);font-weight:var(--font-weight-large2);margin-inline-end:var(--size-value6)}.VcBanner .cta-container .secondary-cta[data-v-e21d9cb6]{font-size:var(--font-size-small2);font-weight:var(--font-weight-large);flex:0 0 100%}@media screen and (min-width:600px){.VcBanner .cta-container .secondary-cta[data-v-e21d9cb6]{flex:none}}.VcBanner .close-button[data-v-e21d9cb6]{position:absolute;width:var(--size-value3);height:var(--size-value3);right:var(--size-value4)}#app[dir=rtl] .VcBanner .close-button[data-v-e21d9cb6]{right:auto;left:var(--size-value4)}.VcBanner .close-button .v-btn__content[data-v-e21d9cb6]{opacity:unset}.VcBanner .close-button .v-icon[data-v-e21d9cb6]{margin-right:var(--size-value0)}.VcBanner .close-button .v-icon svg[data-v-e21d9cb6]{fill:var(--gray-darken-2)}",
     map: undefined,
     media: undefined
   });
@@ -6299,7 +6369,7 @@ const __vue_inject_styles__$5 = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$5 = "data-v-d461d238";
+const __vue_scope_id__$5 = "data-v-e21d9cb6";
 /* module identifier */
 
 const __vue_module_identifier__$5 = undefined;