@vcita/design-system 1.7.0 → 1.7.1

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

@@ -11,7 +11,7 @@ import { VDialog, VBtn, VLayout, VAlert, VTooltip, VIcon, VSubheader, VListItem,
 //
 //
 //
-var script$1t = {
+var script$1u = {
   components: {
     VDialog: VDialog
   },
@@ -172,10 +172,10 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$1t = script$1t;
+const __vue_script__$1u = script$1u;
 /* template */
 
-var __vue_render__$1p = function () {
+var __vue_render__$1q = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -210,10 +210,10 @@ var __vue_render__$1p = function () {
   }, [_vm._t("default")], 2);
 };
 
-var __vue_staticRenderFns__$1p = [];
+var __vue_staticRenderFns__$1q = [];
 /* style */
 
-const __vue_inject_styles__$1t = function (inject) {
+const __vue_inject_styles__$1u = function (inject) {
   if (!inject) return;
   inject("data-v-7e4b12ce_0", {
     source: ".VcModalWrapper{position:relative;width:auto;background-color:var(--modal-bg-color);box-shadow:var(--modal-box-shadow)}@media screen and (min-width:960px){.VcModalWrapper{margin:0 24px}.VcModalWrapper.offset{left:var(--modal-desktop-offset)}#app[dir=rtl] .VcModalWrapper.offset{left:auto;right:var(--modal-desktop-offset)}}",
@@ -224,25 +224,25 @@ const __vue_inject_styles__$1t = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$1t = undefined;
+const __vue_scope_id__$1u = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$1t = undefined;
+const __vue_module_identifier__$1u = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$1t = false;
+const __vue_is_functional_template__$1u = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$2c = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$1p,
-  staticRenderFns: __vue_staticRenderFns__$1p
-}, __vue_inject_styles__$1t, __vue_script__$1t, __vue_scope_id__$1t, __vue_is_functional_template__$1t, __vue_module_identifier__$1t, false, createInjector, undefined, undefined);
+const __vue_component__$2d = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1q,
+  staticRenderFns: __vue_staticRenderFns__$1q
+}, __vue_inject_styles__$1u, __vue_script__$1u, __vue_scope_id__$1u, __vue_is_functional_template__$1u, __vue_module_identifier__$1u, false, createInjector, undefined, undefined);
 
-var VcModalWrapper = __vue_component__$2c;
+var VcModalWrapper = __vue_component__$2d;
 
-var script$1s = {
+var script$1t = {
   name: "VcIcon",
   props: {
     dataQa: {
@@ -270,32 +270,32 @@ var script$1s = {
 };
 
 /* script */
-const __vue_script__$1s = script$1s;
+const __vue_script__$1t = script$1t;
 /* template */
 
 /* style */
 
-const __vue_inject_styles__$1s = undefined;
+const __vue_inject_styles__$1t = undefined;
 /* scoped */
 
-const __vue_scope_id__$1s = undefined;
+const __vue_scope_id__$1t = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$1s = undefined;
+const __vue_module_identifier__$1t = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$1s = undefined;
+const __vue_is_functional_template__$1t = undefined;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$2b = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$1s, __vue_script__$1s, __vue_scope_id__$1s, __vue_is_functional_template__$1s, __vue_module_identifier__$1s, false, undefined, undefined, undefined);
+const __vue_component__$2c = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$1t, __vue_script__$1t, __vue_scope_id__$1t, __vue_is_functional_template__$1t, __vue_module_identifier__$1t, false, undefined, undefined, undefined);
 
-var VcIcon = __vue_component__$2b;
+var VcIcon = __vue_component__$2c;
 
-var script$1r = {
+var script$1s = {
   name: "VcButton",
   components: {
     VcIcon,
@@ -449,10 +449,10 @@ var script$1r = {
 };
 
 /* script */
-const __vue_script__$1r = script$1r;
+const __vue_script__$1s = script$1s;
 /* template */
 
-var __vue_render__$1o = function () {
+var __vue_render__$1p = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -501,10 +501,10 @@ var __vue_render__$1o = function () {
   }), _vm._v("\n  " + _vm._s(_vm.label || _vm.$slots.default && _vm.$slots.default[0].text || "") + "\n  "), _vm._t("append")], 2);
 };
 
-var __vue_staticRenderFns__$1o = [];
+var __vue_staticRenderFns__$1p = [];
 /* style */
 
-const __vue_inject_styles__$1r = function (inject) {
+const __vue_inject_styles__$1s = function (inject) {
   if (!inject) return;
   inject("data-v-b09ecc94_0", {
     source: ".VcButton[data-v-b09ecc94]{letter-spacing:var(--letter-spacing)}.VcButton[data-v-b09ecc94]:disabled{background-color:var(--gray-lighten-2);color:var(--gray-darken-2)}.VcButton .prependDefaultIcon[data-v-b09ecc94]{margin-inline-end:var(--size-value3)}.VcButton.secondary__text[data-v-b09ecc94]{color:var(--gray-darken-5)!important;border-color:var(--neutral-lighten-1)}",
@@ -515,13 +515,92 @@ const __vue_inject_styles__$1r = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$1r = "data-v-b09ecc94";
+const __vue_scope_id__$1s = "data-v-b09ecc94";
+/* module identifier */
+
+const __vue_module_identifier__$1s = undefined;
+/* functional template */
+
+const __vue_is_functional_template__$1s = false;
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$2b = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1p,
+  staticRenderFns: __vue_staticRenderFns__$1p
+}, __vue_inject_styles__$1s, __vue_script__$1s, __vue_scope_id__$1s, __vue_is_functional_template__$1s, __vue_module_identifier__$1s, false, createInjector, undefined, undefined);
+
+var VcButton = __vue_component__$2b;
+
+var script$1r = {
+  name: 'VcCloseButton',
+  components: {
+    VcButton,
+    VcIcon
+  },
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcButton-close-button'
+    }
+  }
+};
+
+/* script */
+const __vue_script__$1r = script$1r;
+/* template */
+
+var __vue_render__$1o = function () {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('VcButton', {
+    staticClass: "VcModalCloseButton",
+    attrs: {
+      "icon": "",
+      "fab": "",
+      "small": "",
+      "data-qa": _vm.dataQa
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('click');
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "prepend",
+      fn: function () {
+        return [_c('VcIcon', {
+          attrs: {
+            "size": "14",
+            "color": "var(--gray-darken-2)"
+          }
+        }, [_vm._v("$close_button")])];
+      },
+      proxy: true
+    }])
+  });
+};
+
+var __vue_staticRenderFns__$1o = [];
+/* style */
+
+const __vue_inject_styles__$1r = undefined;
+/* scoped */
+
+const __vue_scope_id__$1r = "data-v-ea2565a4";
 /* module identifier */
 
 const __vue_module_identifier__$1r = undefined;
 /* functional template */
 
 const __vue_is_functional_template__$1r = false;
+/* style inject */
+
 /* style inject SSR */
 
 /* style inject shadow dom */
@@ -529,9 +608,9 @@ const __vue_is_functional_template__$1r = false;
 const __vue_component__$2a = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$1o,
   staticRenderFns: __vue_staticRenderFns__$1o
-}, __vue_inject_styles__$1r, __vue_script__$1r, __vue_scope_id__$1r, __vue_is_functional_template__$1r, __vue_module_identifier__$1r, false, createInjector, undefined, undefined);
+}, __vue_inject_styles__$1r, __vue_script__$1r, __vue_scope_id__$1r, __vue_is_functional_template__$1r, __vue_module_identifier__$1r, false, undefined, undefined, undefined);
 
-var VcButton = __vue_component__$2a;
+var VcCloseButton = __vue_component__$2a;
 
 var script$1q = {
   name: 'VcModalContainer',
@@ -539,6 +618,7 @@ var script$1q = {
     VcButton,
     VcModalWrapper,
     VcIcon,
+    VcCloseButton,
     VLayout: VLayout
   },
   props: {
@@ -627,42 +707,20 @@ var __vue_render__$1n = function () {
       "data-qa": _vm.dataQa
     }
   }, [_c('header', {
+    staticClass: "d-flex justify-end",
     class: {
       'showDivider': _vm.showHeaderDivider
     }
-  }, [_vm._t("header"), _vm._v(" "), _vm.showCloseButton ? _c('VcButton', {
-    staticClass: "VcModalCloseButton",
+  }, [_vm._t("header"), _vm._v(" "), _vm.showCloseButton ? _c('VcCloseButton', {
+    staticClass: "VcModalContainer--closeButton",
     attrs: {
-      "icon": "",
-      "fab": "",
-      "small": ""
+      "data-qa": _vm.dataQa + "-close-button"
     },
     on: {
       "click": function ($event) {
         return _vm.$emit('onCloseButtonClicked');
       }
-    },
-    scopedSlots: _vm._u([{
-      key: "prepend",
-      fn: function () {
-        return [_c('svg', {
-          attrs: {
-            "width": "14",
-            "height": "14",
-            "viewBox": "0 0 14 14",
-            "fill": "none",
-            "xmlns": "http://www.w3.org/2000/svg"
-          }
-        }, [_c('path', {
-          attrs: {
-            "d": "M12.3047 13.0138L13.0119 12.3066C13.1093 12.2091 13.1093 12.0507 13.0119 11.9532L8.05931 7.00064L13.0065 2.05349C13.104 1.95599 13.104 1.79754 13.0065 1.70007L12.2993 0.992855C12.2018 0.895382 12.0434 0.895382 11.9459 0.992855L6.99867 5.94L2.04911 0.99012C1.9516 0.892616 1.79316 0.892616 1.69568 0.99012L0.988167 1.6973C0.890663 1.79481 0.890663 1.95325 0.988167 2.05076L5.93803 7.00064L0.993702 11.9447C0.896198 12.0422 0.896198 12.2006 0.993702 12.2981L1.70088 13.0053C1.79839 13.1028 1.95683 13.1028 2.05434 13.0053L6.99867 8.06127L11.9512 13.0138C12.0487 13.1113 12.2072 13.1113 12.3047 13.0138Z",
-            "fill": "black",
-            "fill-opacity": "0.4"
-          }
-        })])];
-      },
-      proxy: true
-    }], null, false, 4251314713)
+    }
   }) : _vm._e()], 2), _vm._v(" "), _c('div', {
     staticClass: "VcModalContainerContent"
   }, [_vm._t("content")], 2), _vm._v(" "), !!_vm.$slots.footer ? _c('footer', {
@@ -677,8 +735,8 @@ var __vue_staticRenderFns__$1n = [];
 
 const __vue_inject_styles__$1q = function (inject) {
   if (!inject) return;
-  inject("data-v-04afec37_0", {
-    source: ".VcModalContainer{overflow-y:hidden;height:auto;min-height:100px;min-width:300px;display:flex}.VcModalContainer.sm{width:var(--modal-width-small)}.VcModalContainer.md{width:var(--modal-width-medium)}.VcModalContainer.lg{width:var(--modal-width-large)}.VcModalContainer.xl{width:var(--modal-width-x-large)}.VcModalContainer.responsive{width:100%;margin:0 24px}.VcModalContainer .VcModalContainerContent,.VcModalContainer footer,.VcModalContainer header{flex-shrink:0}.VcModalContainer header{display:flex;justify-content:space-between}.VcModalContainer header .VcModalCloseButton{position:absolute;z-index:1;inset-inline-end:5px;top:var(--size-value2)}.VcModalContainer header .VcModalCloseButton .VcIcon{font-size:22px}.VcModalContainer header.showDivider{border-bottom:1px solid rgba(0,0,0,.12)}.VcModalContainer .VcModalContainerContent{overflow-y:auto;overflow-x:hidden;height:calc(100% - 138px);line-height:var(--size-value6);flex-grow:1;font-size:var(--font-size-small);padding:0 var(--size-value6) var(--size-value6)}.VcModalContainer footer{padding:var(--size-value3) var(--size-value4) var(--size-value3);text-align:end}.VcModalContainer footer.showDivider{border-top:1px solid rgba(0,0,0,.12)}@media screen and (min-width:960px){.VcModalContainer footer{padding:var(--size-value3) var(--size-value6) var(--size-value3)}}.VcModalContainer.notice header,.VcModalContainer.prominent header{font-weight:var(--font-weight-xl);font-size:var(--font-size-medium2);padding-bottom:0;padding-top:var(--size-value10)}.VcModalContainer.notice .VcModalContainerContent,.VcModalContainer.prominent .VcModalContainerContent{padding:0;min-height:168px;height:calc(100% - 497px)}@media screen and (min-width:960px){.VcModalContainer.notice .VcModalContainerContent,.VcModalContainer.prominent .VcModalContainerContent{margin-bottom:var(--size-value2)}}.VcModalContainer.notice footer,.VcModalContainer.prominent footer{padding-top:var(--size-value3);padding-bottom:0}.VcModalContainer.notice.responsive .VcModalContainerContent,.VcModalContainer.notice.sm .VcModalContainerContent,.VcModalContainer.prominent.responsive .VcModalContainerContent,.VcModalContainer.prominent.sm .VcModalContainerContent{margin-left:var(--size-value6);padding-right:var(--size-value6)}.VcModalContainer.notice.md .VcModalContainerContent,.VcModalContainer.prominent.md .VcModalContainerContent{margin-left:var(--size-value10);padding-right:var(--size-value10)}.VcModalContainer.notice.lg header,.VcModalContainer.prominent.lg header{height:initial}.VcModalContainer.notice.lg .VcModalContainerContent,.VcModalContainer.prominent.lg .VcModalContainerContent{min-height:0;margin-left:var(--size-value16);padding-right:var(--size-value16)}.VcModalContainer.prominent .VcModalContainerContent{margin-bottom:var(--size-value6)}.VcModalContainer.input.responsive{height:100%;margin:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.VcModalContainer.input .VcModalContainerContent{padding:0}",
+  inject("data-v-17fbc650_0", {
+    source: ".VcModalContainer{overflow-y:hidden;height:auto;min-height:100px;min-width:300px;display:flex}.VcModalContainer.sm{width:var(--modal-width-small)}.VcModalContainer.md{width:var(--modal-width-medium)}.VcModalContainer.lg{width:var(--modal-width-large)}.VcModalContainer.xl{width:var(--modal-width-x-large)}.VcModalContainer.responsive{width:100%;margin:0 24px}.VcModalContainer--closeButton{padding-inline-end:var(--size-value2);top:var(--size-value2)}.VcModalContainer .VcModalContainerContent,.VcModalContainer footer,.VcModalContainer header{flex-shrink:0}.VcModalContainer header{display:flex;justify-content:space-between}.VcModalContainer header.showDivider{border-bottom:1px solid rgba(0,0,0,.12)}.VcModalContainer .VcModalContainerContent{overflow-y:auto;overflow-x:hidden;height:calc(100% - 138px);line-height:var(--size-value6);flex-grow:1;font-size:var(--font-size-small);padding:0 var(--size-value6) var(--size-value6)}.VcModalContainer footer{padding:var(--size-value3) var(--size-value4) var(--size-value3);text-align:end}.VcModalContainer footer.showDivider{border-top:1px solid rgba(0,0,0,.12)}@media screen and (min-width:960px){.VcModalContainer footer{padding:var(--size-value3) var(--size-value6) var(--size-value3)}}.VcModalContainer.notice header,.VcModalContainer.prominent header{font-weight:var(--font-weight-xl);font-size:var(--font-size-medium2);padding-bottom:0}.VcModalContainer.notice .VcModalContainerContent,.VcModalContainer.prominent .VcModalContainerContent{min-height:168px;height:calc(100% - 497px);padding:var(--size-value10) 0 0}@media screen and (min-width:960px){.VcModalContainer.notice .VcModalContainerContent,.VcModalContainer.prominent .VcModalContainerContent{margin-bottom:var(--size-value2)}}.VcModalContainer.notice footer,.VcModalContainer.prominent footer{padding-top:var(--size-value3);padding-bottom:0}.VcModalContainer.notice.responsive .VcModalContainerContent,.VcModalContainer.notice.sm .VcModalContainerContent,.VcModalContainer.prominent.responsive .VcModalContainerContent,.VcModalContainer.prominent.sm .VcModalContainerContent{margin-left:var(--size-value6);padding-right:var(--size-value6)}.VcModalContainer.notice.md .VcModalContainerContent,.VcModalContainer.prominent.md .VcModalContainerContent{margin-left:var(--size-value10);padding-right:var(--size-value10)}.VcModalContainer.notice.lg header,.VcModalContainer.prominent.lg header{height:initial}.VcModalContainer.notice.lg .VcModalContainerContent,.VcModalContainer.prominent.lg .VcModalContainerContent{min-height:0;margin-left:var(--size-value16);padding-right:var(--size-value16)}.VcModalContainer.prominent .VcModalContainerContent{margin-bottom:var(--size-value6)}.VcModalContainer.input.responsive{height:100%;margin:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.VcModalContainer.input .VcModalContainerContent{padding:0}",
     map: undefined,
     media: undefined
   });
@@ -851,6 +909,7 @@ var VcModalFooter = __vue_component__$27;
 var script$1n = {
   name: "VcModalHeader",
   components: {
+    VcCloseButton,
     VcLayout,
     VcIcon,
     VcButton
@@ -1026,36 +1085,24 @@ var __vue_render__$1l = function () {
       key: "prepend",
       fn: function () {
         return [_c('VcIcon', {
-          staticClass: "VcHeaderRightIcon",
           attrs: {
             "size": "20",
+            "color": "var(--gray-darken-2)",
             "data-qa": _vm.dataQa + "-right-button"
           }
         }, [_vm._v(_vm._s(_vm.rightButtonIcon))])];
       },
       proxy: true
-    }], null, false, 3224284697)
-  }) : _vm._e(), _vm._v(" "), _vm.closeButton ? _c('VcButton', {
-    staticClass: "close-button",
+    }], null, false, 176506655)
+  }) : _vm._e(), _vm._v(" "), _vm.closeButton ? _c('VcCloseButton', {
     attrs: {
-      "ripple": false,
-      "data-qa": _vm.dataQa + "-close-button",
-      "plain": ""
+      "data-qa": _vm.dataQa + "-close-button"
     },
     on: {
       "click": function ($event) {
         return _vm.$emit('onCloseButtonClicked');
       }
-    },
-    scopedSlots: _vm._u([{
-      key: "append",
-      fn: function () {
-        return [_c('vc-icon', {
-          staticClass: "mobile-close-icon"
-        }, [_vm._v(_vm._s(_vm.closeButtonIcon))])];
-      },
-      proxy: true
-    }], null, false, 1238132906)
+    }
   }) : _vm._e()], 2);
 };
 
@@ -1064,8 +1111,8 @@ var __vue_staticRenderFns__$1l = [];
 
 const __vue_inject_styles__$1n = function (inject) {
   if (!inject) return;
-  inject("data-v-78752165_0", {
-    source: ".VcHeader[data-v-78752165]{padding:var(--size-value4);font-weight:var(--font-weight-large);font-size:var(--font-size-medium);line-height:var(--size-value7);letter-spacing:var(--letter-spacing)}@media screen and (min-width:960px){.VcHeader[data-v-78752165]{padding:var(--size-value4) var(--size-value4) var(--size-value4) var(--size-value6)}}.VcHeader.no-close-button[data-v-78752165]{font-weight:var(--font-weight-large2);font-size:var(--font-size-small2);padding:var(--size-value4) var(--size-value6) var(--size-value0)}.VcHeader.no-close-button.input[data-v-78752165]{padding-block-end:var(--size-value0)}.VcHeader .VcHeaderImage[data-v-78752165]{width:var(--size-value8);margin-right:var(--size-value3);padding:5px;border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:var(--border-radius)}.VcHeader .VcHeaderTopTitle[data-v-78752165]{font-size:11px;font-weight:var(--font-weight-medium);line-height:var(--size-value3);color:var(--gray-darken-3)}.VcHeader .VcHeaderTitle[data-v-78752165]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:var(--size-value6)}.VcHeader .VcHeaderDescription[data-v-78752165]{font-size:var(--font-size-xx-small);font-weight:var(--font-weight-medium);line-height:var(--size-value4);color:var(--gray-darken-4)}.VcHeader .VcHeaderSubtitle[data-v-78752165]{font-size:var(--font-size-small2);font-weight:var(--font-weight-medium);color:var(--gray-darken-5);padding-left:var(--size-value2)}.VcHeader.confirm[data-v-78752165]{font-weight:var(--font-weight-large);font-size:var(--font-size-medium);line-height:var(--size-value7);display:flex;align-items:flex-end;letter-spacing:var(--letter-spacing);color:var(--gray-darken-5);padding-inline:var(--size-value6) var(--size-value4)}@media screen and (min-width:960px){.VcHeader.confirm[data-v-78752165]{font-weight:var(--font-weight-large2);padding-bottom:var(--size-value1);padding-top:var(--size-value6)}}.VcHeader.confirm .VcHeaderButton[data-v-78752165],.VcHeader.input .VcHeaderButton[data-v-78752165]{max-height:24px;margin-right:var(--size-value3)}.VcHeader.confirm .VcRightButton[data-v-78752165],.VcHeader.input .VcRightButton[data-v-78752165]{max-height:24px}.VcHeader.confirm .VcHeaderIcon[data-v-78752165],.VcHeader.input .VcHeaderIcon[data-v-78752165]{padding-right:var(--size-value3);font-size:var(--font-size-medium)}.VcHeader.confirm .VcHeaderRightIcon[data-v-78752165]  path,.VcHeader.confirm .VcHeaderRightIcon[data-v-78752165]  svg,.VcHeader.input .VcHeaderRightIcon[data-v-78752165]  path,.VcHeader.input .VcHeaderRightIcon[data-v-78752165]  svg{fill:var(--gray-darken-3)}@media screen and (min-width:960px){.VcHeader.input[data-v-78752165]{padding-bottom:var(--size-value3)}}.VcHeader .close-button[data-v-78752165]{height:var(--size-value3);width:var(--size-value3);padding:unset}.VcHeader .close-button .mobile-close-icon[data-v-78752165]{fill:var(--gray-darken-2);width:var(--size-value3)}",
+  inject("data-v-7f07f38e_0", {
+    source: ".VcHeader[data-v-7f07f38e]{padding:var(--size-value4);font-weight:var(--font-weight-large);font-size:var(--font-size-medium);line-height:var(--size-value7);letter-spacing:var(--letter-spacing)}@media screen and (min-width:960px){.VcHeader[data-v-7f07f38e]{padding:var(--size-value4) var(--size-value4) var(--size-value4) var(--size-value6)}}.VcHeader.no-close-button[data-v-7f07f38e]{font-weight:var(--font-weight-large2);font-size:var(--font-size-small2);padding:var(--size-value4) var(--size-value6) var(--size-value0)}.VcHeader.no-close-button.input[data-v-7f07f38e]{padding-block-end:var(--size-value0)}.VcHeader .VcHeaderImage[data-v-7f07f38e]{width:var(--size-value8);margin-right:var(--size-value3);padding:5px;border:1px solid var(--gray-lighten-1);box-sizing:border-box;border-radius:var(--border-radius)}.VcHeader .VcHeaderTopTitle[data-v-7f07f38e]{font-size:11px;font-weight:var(--font-weight-medium);line-height:var(--size-value3);color:var(--gray-darken-3)}.VcHeader .VcHeaderTitle[data-v-7f07f38e]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-end:var(--size-value6)}.VcHeader .VcHeaderDescription[data-v-7f07f38e]{font-size:var(--font-size-xx-small);font-weight:var(--font-weight-medium);line-height:var(--size-value4);color:var(--gray-darken-4)}.VcHeader .VcHeaderSubtitle[data-v-7f07f38e]{font-size:var(--font-size-small2);font-weight:var(--font-weight-medium);color:var(--gray-darken-5);padding-left:var(--size-value2)}.VcHeader.confirm[data-v-7f07f38e]{font-weight:var(--font-weight-large);font-size:var(--font-size-medium);line-height:var(--size-value7);display:flex;align-items:flex-end;letter-spacing:var(--letter-spacing);color:var(--gray-darken-5);padding-inline:var(--size-value6) var(--size-value4)}@media screen and (min-width:960px){.VcHeader.confirm[data-v-7f07f38e]{font-weight:var(--font-weight-large2);padding-bottom:var(--size-value1);padding-top:var(--size-value6)}}.VcHeader.confirm .VcHeaderButton[data-v-7f07f38e],.VcHeader.input .VcHeaderButton[data-v-7f07f38e]{max-height:24px;margin-right:var(--size-value3)}.VcHeader.confirm .VcRightButton[data-v-7f07f38e],.VcHeader.input .VcRightButton[data-v-7f07f38e]{max-height:24px}.VcHeader.confirm .VcHeaderIcon[data-v-7f07f38e],.VcHeader.input .VcHeaderIcon[data-v-7f07f38e]{padding-right:var(--size-value3);font-size:var(--font-size-medium)}.VcHeader.input[data-v-7f07f38e]{padding:var(--size-value2);padding-inline-start:var(--size-value4)}@media screen and (min-width:960px){.VcHeader.input[data-v-7f07f38e]{padding:var(--size-value2);padding-inline-start:var(--size-value6)}}",
     map: undefined,
     media: undefined
   });
@@ -1073,7 +1120,7 @@ const __vue_inject_styles__$1n = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$1n = "data-v-78752165";
+const __vue_scope_id__$1n = "data-v-7f07f38e";
 /* module identifier */
 
 const __vue_module_identifier__$1n = undefined;
@@ -1453,7 +1500,7 @@ var __vue_render__$1j = function () {
     attrs: {
       "showHeaderDivider": "",
       "flavor": "input",
-      "showCloseButton": _vm.closeButton,
+      "showCloseButton": false,
       "useOffset": _vm.useOffset,
       "showDialog": _vm.showDialog,
       "size": _vm.$vuetify.breakpoint.mdAndUp ? _vm.size : 'responsive',
@@ -1474,6 +1521,7 @@ var __vue_render__$1j = function () {
               "topTitle": _vm.topTitle,
               "title": _vm.title,
               "subtitle": _vm.subtitle,
+              "close-button": _vm.closeButton,
               "icon": _vm.headerIcon,
               "image": _vm.headerImage,
               "flavor": "input",
@@ -1552,8 +1600,8 @@ var __vue_staticRenderFns__$1j = [];
 
 const __vue_inject_styles__$1k = function (inject) {
   if (!inject) return;
-  inject("data-v-17206e50_0", {
-    source: ".VcInputForm-layout .VcInputForm-main[data-v-17206e50]{width:100%;max-width:100%;padding:var(--size-value6)}.VcInputForm-layout .VcInputForm-additional[data-v-17206e50]{min-width:324px;padding:var(--size-value6);background:#f8f9fb;border-left:1px solid rgba(0,0,0,.12)}",
+  inject("data-v-6d9529e6_0", {
+    source: ".VcInputForm-layout .VcInputForm-main[data-v-6d9529e6]{width:100%;max-width:100%;padding:var(--size-value6)}.VcInputForm-layout .VcInputForm-additional[data-v-6d9529e6]{min-width:324px;padding:var(--size-value6);background:#f8f9fb;border-left:1px solid rgba(0,0,0,.12)}",
     map: undefined,
     media: undefined
   });
@@ -1561,7 +1609,7 @@ const __vue_inject_styles__$1k = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$1k = "data-v-17206e50";
+const __vue_scope_id__$1k = "data-v-6d9529e6";
 /* module identifier */
 
 const __vue_module_identifier__$1k = undefined;