@globalpayments/vega 2.36.0 → 2.37.1

package/dist/esm/vega-dialog_2.entry.js

@@ -1,40 +1,42 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-187f71d1.js';
+import { r as registerInstance, h, H as Host, g as getElement, F as Fragment, c as createEvent } from './index-187f71d1.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { g as getCurrentBreakpoint } from './breakpoints-91116111.js';
 import { I as InjectVegaSlimmer, c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import './state-background-color-formatter-121ae7d3.js';
-import { f as formatAndValidResponsiveToken } from './design-token-d06bc718.js';
+import { f as formatAndValidResponsiveToken } from './design-token-e14b622b.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
-import { c as VegaClose, a as VegaClick, F as VegaOpen } from './dom-node-subject-factory-5831cdd4.js';
-import { D as DefaultModalSize } from './ui-8424715a.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
+import { c as VegaClose, a as VegaClick, F as VegaOpen } from './dom-node-subject-factory-97deb349.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-3220fa5b.js';
+import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-000e0c11.js';
+import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-43d184b3.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-661193d7.js';
+import { D as DefaultModalSize } from './ui-8424715a.js';
 import { g as getDeviceType, D as DeviceType, f as findParent } from './ui-62e4be97.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-8268945e.js';
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-97aae8a8.js';
-import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-000e0c11.js';
-import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-43d184b3.js';
 import './breakpoints-d9faf11c.js';
 import './type-guard-158f6d7a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './change-manager-6a7eb88c.js';
-import './number-4398f2e1.js';
-import './pixel-f32c07ce.js';
+import './observer-3959f9dd.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-07e1b3d9.js';
+import './internal-vega-event-manager-0a01ba12.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-4b3fe6f8.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
 import './object-261e7344.js';
+import './number-4398f2e1.js';
+import './pixel-f32c07ce.js';
 
 const vegaDialogCss = ":host vega-modal{padding-left:16px;padding-right:16px}@media (min-width: 768px){:host vega-modal{padding:0px}}:host .vega-dialog-actions-container{display:flex;justify-content:center;flex-direction:column;gap:12px}@media (min-width: 768px){:host .vega-dialog-actions-container{justify-content:flex-end;flex-direction:row}}:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:30px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}";
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -127,13 +129,13 @@ const VegaDialog = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$2([
+__decorate$a([
   InjectVegaGlobalSlimmer()
 ], VegaDialog.prototype, "globalSlimmers", void 0);
-__decorate$2([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDialog.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$2([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDialog.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaDialog.style = vegaDialogCss;
@@ -167,7 +169,7 @@ const VegaModalRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -193,245 +195,45 @@ class VegaNestedModalController extends VegaSlimmer {
     });
   }
 }
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaNestedModalController.prototype, "host", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('connectedCallback')
 ], VegaNestedModalController.prototype, "connectedCallback", null);
 
-const vegaModalCss = ":host(.v-p-0),.v-p-0{padding:0px}:host(.v-px-0),.v-px-0{padding-left:0px;padding-right:0px}:host(.v-py-0),.v-py-0{padding-top:0px;padding-bottom:0px}:host(.v-pt-0),.v-pt-0{padding-top:0px}:host(.v-pb-0),.v-pb-0{padding-bottom:0px}:host(.v-pr-0),.v-pr-0{padding-right:0px}:host(.v-pl-0),.v-pl-0{padding-left:0px}:host(.v-p-size-0),.v-p-size-0{padding:0px}:host(.v-px-size-0),.v-px-size-0{padding-left:0px;padding-right:0px}:host(.v-py-size-0),.v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.v-pt-size-0),.v-pt-size-0{padding-top:0px}:host(.v-pb-size-0),.v-pb-size-0{padding-bottom:0px}:host(.v-pr-size-0),.v-pr-size-0{padding-right:0px}:host(.v-pl-size-0),.v-pl-size-0{padding-left:0px}:host(.v-p-size-4),.v-p-size-4{padding:4px}:host(.v-px-size-4),.v-px-size-4{padding-left:4px;padding-right:4px}:host(.v-py-size-4),.v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.v-pt-size-4),.v-pt-size-4{padding-top:4px}:host(.v-pb-size-4),.v-pb-size-4{padding-bottom:4px}:host(.v-pr-size-4),.v-pr-size-4{padding-right:4px}:host(.v-pl-size-4),.v-pl-size-4{padding-left:4px}:host(.v-p-size-8),.v-p-size-8{padding:8px}:host(.v-px-size-8),.v-px-size-8{padding-left:8px;padding-right:8px}:host(.v-py-size-8),.v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.v-pt-size-8),.v-pt-size-8{padding-top:8px}:host(.v-pb-size-8),.v-pb-size-8{padding-bottom:8px}:host(.v-pr-size-8),.v-pr-size-8{padding-right:8px}:host(.v-pl-size-8),.v-pl-size-8{padding-left:8px}:host(.v-p-size-12),.v-p-size-12{padding:12px}:host(.v-px-size-12),.v-px-size-12{padding-left:12px;padding-right:12px}:host(.v-py-size-12),.v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.v-pt-size-12),.v-pt-size-12{padding-top:12px}:host(.v-pb-size-12),.v-pb-size-12{padding-bottom:12px}:host(.v-pr-size-12),.v-pr-size-12{padding-right:12px}:host(.v-pl-size-12),.v-pl-size-12{padding-left:12px}:host(.v-p-size-16),.v-p-size-16{padding:16px}:host(.v-px-size-16),.v-px-size-16{padding-left:16px;padding-right:16px}:host(.v-py-size-16),.v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.v-pt-size-16),.v-pt-size-16{padding-top:16px}:host(.v-pb-size-16),.v-pb-size-16{padding-bottom:16px}:host(.v-pr-size-16),.v-pr-size-16{padding-right:16px}:host(.v-pl-size-16),.v-pl-size-16{padding-left:16px}:host(.v-p-size-20),.v-p-size-20{padding:20px}:host(.v-px-size-20),.v-px-size-20{padding-left:20px;padding-right:20px}:host(.v-py-size-20),.v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.v-pt-size-20),.v-pt-size-20{padding-top:20px}:host(.v-pb-size-20),.v-pb-size-20{padding-bottom:20px}:host(.v-pr-size-20),.v-pr-size-20{padding-right:20px}:host(.v-pl-size-20),.v-pl-size-20{padding-left:20px}:host(.v-p-size-24),.v-p-size-24{padding:24px}:host(.v-px-size-24),.v-px-size-24{padding-left:24px;padding-right:24px}:host(.v-py-size-24),.v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.v-pt-size-24),.v-pt-size-24{padding-top:24px}:host(.v-pb-size-24),.v-pb-size-24{padding-bottom:24px}:host(.v-pr-size-24),.v-pr-size-24{padding-right:24px}:host(.v-pl-size-24),.v-pl-size-24{padding-left:24px}:host(.v-p-size-32),.v-p-size-32{padding:32px}:host(.v-px-size-32),.v-px-size-32{padding-left:32px;padding-right:32px}:host(.v-py-size-32),.v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.v-pt-size-32),.v-pt-size-32{padding-top:32px}:host(.v-pb-size-32),.v-pb-size-32{padding-bottom:32px}:host(.v-pr-size-32),.v-pr-size-32{padding-right:32px}:host(.v-pl-size-32),.v-pl-size-32{padding-left:32px}:host(.v-p-size-40),.v-p-size-40{padding:40px}:host(.v-px-size-40),.v-px-size-40{padding-left:40px;padding-right:40px}:host(.v-py-size-40),.v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.v-pt-size-40),.v-pt-size-40{padding-top:40px}:host(.v-pb-size-40),.v-pb-size-40{padding-bottom:40px}:host(.v-pr-size-40),.v-pr-size-40{padding-right:40px}:host(.v-pl-size-40),.v-pl-size-40{padding-left:40px}:host(.v-p-size-48),.v-p-size-48{padding:48px}:host(.v-px-size-48),.v-px-size-48{padding-left:48px;padding-right:48px}:host(.v-py-size-48),.v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.v-pt-size-48),.v-pt-size-48{padding-top:48px}:host(.v-pb-size-48),.v-pb-size-48{padding-bottom:48px}:host(.v-pr-size-48),.v-pr-size-48{padding-right:48px}:host(.v-pl-size-48),.v-pl-size-48{padding-left:48px}:host(.v-p-size-64),.v-p-size-64{padding:64px}:host(.v-px-size-64),.v-px-size-64{padding-left:64px;padding-right:64px}:host(.v-py-size-64),.v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.v-pt-size-64),.v-pt-size-64{padding-top:64px}:host(.v-pb-size-64),.v-pb-size-64{padding-bottom:64px}:host(.v-pr-size-64),.v-pr-size-64{padding-right:64px}:host(.v-pl-size-64),.v-pl-size-64{padding-left:64px}:host(.v-p-size-72),.v-p-size-72{padding:72px}:host(.v-px-size-72),.v-px-size-72{padding-left:72px;padding-right:72px}:host(.v-py-size-72),.v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.v-pt-size-72),.v-pt-size-72{padding-top:72px}:host(.v-pb-size-72),.v-pb-size-72{padding-bottom:72px}:host(.v-pr-size-72),.v-pr-size-72{padding-right:72px}:host(.v-pl-size-72),.v-pl-size-72{padding-left:72px}:host(.v-p-size-80),.v-p-size-80{padding:80px}:host(.v-px-size-80),.v-px-size-80{padding-left:80px;padding-right:80px}:host(.v-py-size-80),.v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.v-pt-size-80),.v-pt-size-80{padding-top:80px}:host(.v-pb-size-80),.v-pb-size-80{padding-bottom:80px}:host(.v-pr-size-80),.v-pr-size-80{padding-right:80px}:host(.v-pl-size-80),.v-pl-size-80{padding-left:80px}:host(.v-p-size-112),.v-p-size-112{padding:112px}:host(.v-px-size-112),.v-px-size-112{padding-left:112px;padding-right:112px}:host(.v-py-size-112),.v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.v-pt-size-112),.v-pt-size-112{padding-top:112px}:host(.v-pb-size-112),.v-pb-size-112{padding-bottom:112px}:host(.v-pr-size-112),.v-pr-size-112{padding-right:112px}:host(.v-pl-size-112),.v-pl-size-112{padding-left:112px}:host(.v-p-size-2),.v-p-size-2{padding:2px}:host(.v-px-size-2),.v-px-size-2{padding-left:2px;padding-right:2px}:host(.v-py-size-2),.v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.v-pt-size-2),.v-pt-size-2{padding-top:2px}:host(.v-pb-size-2),.v-pb-size-2{padding-bottom:2px}:host(.v-pr-size-2),.v-pr-size-2{padding-right:2px}:host(.v-pl-size-2),.v-pl-size-2{padding-left:2px}@media (min-width: 320px){:host(.S\\:v-p-0),.S\\:v-p-0{padding:0px}:host(.S\\:v-px-0),.S\\:v-px-0{padding-left:0px;padding-right:0px}:host(.S\\:v-py-0),.S\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.S\\:v-pt-0),.S\\:v-pt-0{padding-top:0px}:host(.S\\:v-pb-0),.S\\:v-pb-0{padding-bottom:0px}:host(.S\\:v-pr-0),.S\\:v-pr-0{padding-right:0px}:host(.S\\:v-pl-0),.S\\:v-pl-0{padding-left:0px}:host(.S\\:v-p-size-0),.S\\:v-p-size-0{padding:0px}:host(.S\\:v-px-size-0),.S\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.S\\:v-py-size-0),.S\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.S\\:v-pt-size-0),.S\\:v-pt-size-0{padding-top:0px}:host(.S\\:v-pb-size-0),.S\\:v-pb-size-0{padding-bottom:0px}:host(.S\\:v-pr-size-0),.S\\:v-pr-size-0{padding-right:0px}:host(.S\\:v-pl-size-0),.S\\:v-pl-size-0{padding-left:0px}:host(.S\\:v-p-size-4),.S\\:v-p-size-4{padding:4px}:host(.S\\:v-px-size-4),.S\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.S\\:v-py-size-4),.S\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.S\\:v-pt-size-4),.S\\:v-pt-size-4{padding-top:4px}:host(.S\\:v-pb-size-4),.S\\:v-pb-size-4{padding-bottom:4px}:host(.S\\:v-pr-size-4),.S\\:v-pr-size-4{padding-right:4px}:host(.S\\:v-pl-size-4),.S\\:v-pl-size-4{padding-left:4px}:host(.S\\:v-p-size-8),.S\\:v-p-size-8{padding:8px}:host(.S\\:v-px-size-8),.S\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.S\\:v-py-size-8),.S\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.S\\:v-pt-size-8),.S\\:v-pt-size-8{padding-top:8px}:host(.S\\:v-pb-size-8),.S\\:v-pb-size-8{padding-bottom:8px}:host(.S\\:v-pr-size-8),.S\\:v-pr-size-8{padding-right:8px}:host(.S\\:v-pl-size-8),.S\\:v-pl-size-8{padding-left:8px}:host(.S\\:v-p-size-12),.S\\:v-p-size-12{padding:12px}:host(.S\\:v-px-size-12),.S\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.S\\:v-py-size-12),.S\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.S\\:v-pt-size-12),.S\\:v-pt-size-12{padding-top:12px}:host(.S\\:v-pb-size-12),.S\\:v-pb-size-12{padding-bottom:12px}:host(.S\\:v-pr-size-12),.S\\:v-pr-size-12{padding-right:12px}:host(.S\\:v-pl-size-12),.S\\:v-pl-size-12{padding-left:12px}:host(.S\\:v-p-size-16),.S\\:v-p-size-16{padding:16px}:host(.S\\:v-px-size-16),.S\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.S\\:v-py-size-16),.S\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.S\\:v-pt-size-16),.S\\:v-pt-size-16{padding-top:16px}:host(.S\\:v-pb-size-16),.S\\:v-pb-size-16{padding-bottom:16px}:host(.S\\:v-pr-size-16),.S\\:v-pr-size-16{padding-right:16px}:host(.S\\:v-pl-size-16),.S\\:v-pl-size-16{padding-left:16px}:host(.S\\:v-p-size-20),.S\\:v-p-size-20{padding:20px}:host(.S\\:v-px-size-20),.S\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.S\\:v-py-size-20),.S\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.S\\:v-pt-size-20),.S\\:v-pt-size-20{padding-top:20px}:host(.S\\:v-pb-size-20),.S\\:v-pb-size-20{padding-bottom:20px}:host(.S\\:v-pr-size-20),.S\\:v-pr-size-20{padding-right:20px}:host(.S\\:v-pl-size-20),.S\\:v-pl-size-20{padding-left:20px}:host(.S\\:v-p-size-24),.S\\:v-p-size-24{padding:24px}:host(.S\\:v-px-size-24),.S\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.S\\:v-py-size-24),.S\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.S\\:v-pt-size-24),.S\\:v-pt-size-24{padding-top:24px}:host(.S\\:v-pb-size-24),.S\\:v-pb-size-24{padding-bottom:24px}:host(.S\\:v-pr-size-24),.S\\:v-pr-size-24{padding-right:24px}:host(.S\\:v-pl-size-24),.S\\:v-pl-size-24{padding-left:24px}:host(.S\\:v-p-size-32),.S\\:v-p-size-32{padding:32px}:host(.S\\:v-px-size-32),.S\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.S\\:v-py-size-32),.S\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.S\\:v-pt-size-32),.S\\:v-pt-size-32{padding-top:32px}:host(.S\\:v-pb-size-32),.S\\:v-pb-size-32{padding-bottom:32px}:host(.S\\:v-pr-size-32),.S\\:v-pr-size-32{padding-right:32px}:host(.S\\:v-pl-size-32),.S\\:v-pl-size-32{padding-left:32px}:host(.S\\:v-p-size-40),.S\\:v-p-size-40{padding:40px}:host(.S\\:v-px-size-40),.S\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.S\\:v-py-size-40),.S\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.S\\:v-pt-size-40),.S\\:v-pt-size-40{padding-top:40px}:host(.S\\:v-pb-size-40),.S\\:v-pb-size-40{padding-bottom:40px}:host(.S\\:v-pr-size-40),.S\\:v-pr-size-40{padding-right:40px}:host(.S\\:v-pl-size-40),.S\\:v-pl-size-40{padding-left:40px}:host(.S\\:v-p-size-48),.S\\:v-p-size-48{padding:48px}:host(.S\\:v-px-size-48),.S\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.S\\:v-py-size-48),.S\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.S\\:v-pt-size-48),.S\\:v-pt-size-48{padding-top:48px}:host(.S\\:v-pb-size-48),.S\\:v-pb-size-48{padding-bottom:48px}:host(.S\\:v-pr-size-48),.S\\:v-pr-size-48{padding-right:48px}:host(.S\\:v-pl-size-48),.S\\:v-pl-size-48{padding-left:48px}:host(.S\\:v-p-size-64),.S\\:v-p-size-64{padding:64px}:host(.S\\:v-px-size-64),.S\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.S\\:v-py-size-64),.S\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.S\\:v-pt-size-64),.S\\:v-pt-size-64{padding-top:64px}:host(.S\\:v-pb-size-64),.S\\:v-pb-size-64{padding-bottom:64px}:host(.S\\:v-pr-size-64),.S\\:v-pr-size-64{padding-right:64px}:host(.S\\:v-pl-size-64),.S\\:v-pl-size-64{padding-left:64px}:host(.S\\:v-p-size-72),.S\\:v-p-size-72{padding:72px}:host(.S\\:v-px-size-72),.S\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.S\\:v-py-size-72),.S\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.S\\:v-pt-size-72),.S\\:v-pt-size-72{padding-top:72px}:host(.S\\:v-pb-size-72),.S\\:v-pb-size-72{padding-bottom:72px}:host(.S\\:v-pr-size-72),.S\\:v-pr-size-72{padding-right:72px}:host(.S\\:v-pl-size-72),.S\\:v-pl-size-72{padding-left:72px}:host(.S\\:v-p-size-80),.S\\:v-p-size-80{padding:80px}:host(.S\\:v-px-size-80),.S\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.S\\:v-py-size-80),.S\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.S\\:v-pt-size-80),.S\\:v-pt-size-80{padding-top:80px}:host(.S\\:v-pb-size-80),.S\\:v-pb-size-80{padding-bottom:80px}:host(.S\\:v-pr-size-80),.S\\:v-pr-size-80{padding-right:80px}:host(.S\\:v-pl-size-80),.S\\:v-pl-size-80{padding-left:80px}:host(.S\\:v-p-size-112),.S\\:v-p-size-112{padding:112px}:host(.S\\:v-px-size-112),.S\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.S\\:v-py-size-112),.S\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.S\\:v-pt-size-112),.S\\:v-pt-size-112{padding-top:112px}:host(.S\\:v-pb-size-112),.S\\:v-pb-size-112{padding-bottom:112px}:host(.S\\:v-pr-size-112),.S\\:v-pr-size-112{padding-right:112px}:host(.S\\:v-pl-size-112),.S\\:v-pl-size-112{padding-left:112px}:host(.S\\:v-p-size-2),.S\\:v-p-size-2{padding:2px}:host(.S\\:v-px-size-2),.S\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.S\\:v-py-size-2),.S\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.S\\:v-pt-size-2),.S\\:v-pt-size-2{padding-top:2px}:host(.S\\:v-pb-size-2),.S\\:v-pb-size-2{padding-bottom:2px}:host(.S\\:v-pr-size-2),.S\\:v-pr-size-2{padding-right:2px}:host(.S\\:v-pl-size-2),.S\\:v-pl-size-2{padding-left:2px}}@media (min-width: 768px){:host(.M\\:v-p-0),.M\\:v-p-0{padding:0px}:host(.M\\:v-px-0),.M\\:v-px-0{padding-left:0px;padding-right:0px}:host(.M\\:v-py-0),.M\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.M\\:v-pt-0),.M\\:v-pt-0{padding-top:0px}:host(.M\\:v-pb-0),.M\\:v-pb-0{padding-bottom:0px}:host(.M\\:v-pr-0),.M\\:v-pr-0{padding-right:0px}:host(.M\\:v-pl-0),.M\\:v-pl-0{padding-left:0px}:host(.M\\:v-p-size-0),.M\\:v-p-size-0{padding:0px}:host(.M\\:v-px-size-0),.M\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.M\\:v-py-size-0),.M\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.M\\:v-pt-size-0),.M\\:v-pt-size-0{padding-top:0px}:host(.M\\:v-pb-size-0),.M\\:v-pb-size-0{padding-bottom:0px}:host(.M\\:v-pr-size-0),.M\\:v-pr-size-0{padding-right:0px}:host(.M\\:v-pl-size-0),.M\\:v-pl-size-0{padding-left:0px}:host(.M\\:v-p-size-4),.M\\:v-p-size-4{padding:4px}:host(.M\\:v-px-size-4),.M\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.M\\:v-py-size-4),.M\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.M\\:v-pt-size-4),.M\\:v-pt-size-4{padding-top:4px}:host(.M\\:v-pb-size-4),.M\\:v-pb-size-4{padding-bottom:4px}:host(.M\\:v-pr-size-4),.M\\:v-pr-size-4{padding-right:4px}:host(.M\\:v-pl-size-4),.M\\:v-pl-size-4{padding-left:4px}:host(.M\\:v-p-size-8),.M\\:v-p-size-8{padding:8px}:host(.M\\:v-px-size-8),.M\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.M\\:v-py-size-8),.M\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.M\\:v-pt-size-8),.M\\:v-pt-size-8{padding-top:8px}:host(.M\\:v-pb-size-8),.M\\:v-pb-size-8{padding-bottom:8px}:host(.M\\:v-pr-size-8),.M\\:v-pr-size-8{padding-right:8px}:host(.M\\:v-pl-size-8),.M\\:v-pl-size-8{padding-left:8px}:host(.M\\:v-p-size-12),.M\\:v-p-size-12{padding:12px}:host(.M\\:v-px-size-12),.M\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.M\\:v-py-size-12),.M\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.M\\:v-pt-size-12),.M\\:v-pt-size-12{padding-top:12px}:host(.M\\:v-pb-size-12),.M\\:v-pb-size-12{padding-bottom:12px}:host(.M\\:v-pr-size-12),.M\\:v-pr-size-12{padding-right:12px}:host(.M\\:v-pl-size-12),.M\\:v-pl-size-12{padding-left:12px}:host(.M\\:v-p-size-16),.M\\:v-p-size-16{padding:16px}:host(.M\\:v-px-size-16),.M\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.M\\:v-py-size-16),.M\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.M\\:v-pt-size-16),.M\\:v-pt-size-16{padding-top:16px}:host(.M\\:v-pb-size-16),.M\\:v-pb-size-16{padding-bottom:16px}:host(.M\\:v-pr-size-16),.M\\:v-pr-size-16{padding-right:16px}:host(.M\\:v-pl-size-16),.M\\:v-pl-size-16{padding-left:16px}:host(.M\\:v-p-size-20),.M\\:v-p-size-20{padding:20px}:host(.M\\:v-px-size-20),.M\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.M\\:v-py-size-20),.M\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.M\\:v-pt-size-20),.M\\:v-pt-size-20{padding-top:20px}:host(.M\\:v-pb-size-20),.M\\:v-pb-size-20{padding-bottom:20px}:host(.M\\:v-pr-size-20),.M\\:v-pr-size-20{padding-right:20px}:host(.M\\:v-pl-size-20),.M\\:v-pl-size-20{padding-left:20px}:host(.M\\:v-p-size-24),.M\\:v-p-size-24{padding:24px}:host(.M\\:v-px-size-24),.M\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.M\\:v-py-size-24),.M\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.M\\:v-pt-size-24),.M\\:v-pt-size-24{padding-top:24px}:host(.M\\:v-pb-size-24),.M\\:v-pb-size-24{padding-bottom:24px}:host(.M\\:v-pr-size-24),.M\\:v-pr-size-24{padding-right:24px}:host(.M\\:v-pl-size-24),.M\\:v-pl-size-24{padding-left:24px}:host(.M\\:v-p-size-32),.M\\:v-p-size-32{padding:32px}:host(.M\\:v-px-size-32),.M\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.M\\:v-py-size-32),.M\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.M\\:v-pt-size-32),.M\\:v-pt-size-32{padding-top:32px}:host(.M\\:v-pb-size-32),.M\\:v-pb-size-32{padding-bottom:32px}:host(.M\\:v-pr-size-32),.M\\:v-pr-size-32{padding-right:32px}:host(.M\\:v-pl-size-32),.M\\:v-pl-size-32{padding-left:32px}:host(.M\\:v-p-size-40),.M\\:v-p-size-40{padding:40px}:host(.M\\:v-px-size-40),.M\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.M\\:v-py-size-40),.M\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.M\\:v-pt-size-40),.M\\:v-pt-size-40{padding-top:40px}:host(.M\\:v-pb-size-40),.M\\:v-pb-size-40{padding-bottom:40px}:host(.M\\:v-pr-size-40),.M\\:v-pr-size-40{padding-right:40px}:host(.M\\:v-pl-size-40),.M\\:v-pl-size-40{padding-left:40px}:host(.M\\:v-p-size-48),.M\\:v-p-size-48{padding:48px}:host(.M\\:v-px-size-48),.M\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.M\\:v-py-size-48),.M\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.M\\:v-pt-size-48),.M\\:v-pt-size-48{padding-top:48px}:host(.M\\:v-pb-size-48),.M\\:v-pb-size-48{padding-bottom:48px}:host(.M\\:v-pr-size-48),.M\\:v-pr-size-48{padding-right:48px}:host(.M\\:v-pl-size-48),.M\\:v-pl-size-48{padding-left:48px}:host(.M\\:v-p-size-64),.M\\:v-p-size-64{padding:64px}:host(.M\\:v-px-size-64),.M\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.M\\:v-py-size-64),.M\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.M\\:v-pt-size-64),.M\\:v-pt-size-64{padding-top:64px}:host(.M\\:v-pb-size-64),.M\\:v-pb-size-64{padding-bottom:64px}:host(.M\\:v-pr-size-64),.M\\:v-pr-size-64{padding-right:64px}:host(.M\\:v-pl-size-64),.M\\:v-pl-size-64{padding-left:64px}:host(.M\\:v-p-size-72),.M\\:v-p-size-72{padding:72px}:host(.M\\:v-px-size-72),.M\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.M\\:v-py-size-72),.M\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.M\\:v-pt-size-72),.M\\:v-pt-size-72{padding-top:72px}:host(.M\\:v-pb-size-72),.M\\:v-pb-size-72{padding-bottom:72px}:host(.M\\:v-pr-size-72),.M\\:v-pr-size-72{padding-right:72px}:host(.M\\:v-pl-size-72),.M\\:v-pl-size-72{padding-left:72px}:host(.M\\:v-p-size-80),.M\\:v-p-size-80{padding:80px}:host(.M\\:v-px-size-80),.M\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.M\\:v-py-size-80),.M\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.M\\:v-pt-size-80),.M\\:v-pt-size-80{padding-top:80px}:host(.M\\:v-pb-size-80),.M\\:v-pb-size-80{padding-bottom:80px}:host(.M\\:v-pr-size-80),.M\\:v-pr-size-80{padding-right:80px}:host(.M\\:v-pl-size-80),.M\\:v-pl-size-80{padding-left:80px}:host(.M\\:v-p-size-112),.M\\:v-p-size-112{padding:112px}:host(.M\\:v-px-size-112),.M\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.M\\:v-py-size-112),.M\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.M\\:v-pt-size-112),.M\\:v-pt-size-112{padding-top:112px}:host(.M\\:v-pb-size-112),.M\\:v-pb-size-112{padding-bottom:112px}:host(.M\\:v-pr-size-112),.M\\:v-pr-size-112{padding-right:112px}:host(.M\\:v-pl-size-112),.M\\:v-pl-size-112{padding-left:112px}:host(.M\\:v-p-size-2),.M\\:v-p-size-2{padding:2px}:host(.M\\:v-px-size-2),.M\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.M\\:v-py-size-2),.M\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.M\\:v-pt-size-2),.M\\:v-pt-size-2{padding-top:2px}:host(.M\\:v-pb-size-2),.M\\:v-pb-size-2{padding-bottom:2px}:host(.M\\:v-pr-size-2),.M\\:v-pr-size-2{padding-right:2px}:host(.M\\:v-pl-size-2),.M\\:v-pl-size-2{padding-left:2px}}@media (min-width: 1024px){:host(.L\\:v-p-0),.L\\:v-p-0{padding:0px}:host(.L\\:v-px-0),.L\\:v-px-0{padding-left:0px;padding-right:0px}:host(.L\\:v-py-0),.L\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.L\\:v-pt-0),.L\\:v-pt-0{padding-top:0px}:host(.L\\:v-pb-0),.L\\:v-pb-0{padding-bottom:0px}:host(.L\\:v-pr-0),.L\\:v-pr-0{padding-right:0px}:host(.L\\:v-pl-0),.L\\:v-pl-0{padding-left:0px}:host(.L\\:v-p-size-0),.L\\:v-p-size-0{padding:0px}:host(.L\\:v-px-size-0),.L\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.L\\:v-py-size-0),.L\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.L\\:v-pt-size-0),.L\\:v-pt-size-0{padding-top:0px}:host(.L\\:v-pb-size-0),.L\\:v-pb-size-0{padding-bottom:0px}:host(.L\\:v-pr-size-0),.L\\:v-pr-size-0{padding-right:0px}:host(.L\\:v-pl-size-0),.L\\:v-pl-size-0{padding-left:0px}:host(.L\\:v-p-size-4),.L\\:v-p-size-4{padding:4px}:host(.L\\:v-px-size-4),.L\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.L\\:v-py-size-4),.L\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.L\\:v-pt-size-4),.L\\:v-pt-size-4{padding-top:4px}:host(.L\\:v-pb-size-4),.L\\:v-pb-size-4{padding-bottom:4px}:host(.L\\:v-pr-size-4),.L\\:v-pr-size-4{padding-right:4px}:host(.L\\:v-pl-size-4),.L\\:v-pl-size-4{padding-left:4px}:host(.L\\:v-p-size-8),.L\\:v-p-size-8{padding:8px}:host(.L\\:v-px-size-8),.L\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.L\\:v-py-size-8),.L\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.L\\:v-pt-size-8),.L\\:v-pt-size-8{padding-top:8px}:host(.L\\:v-pb-size-8),.L\\:v-pb-size-8{padding-bottom:8px}:host(.L\\:v-pr-size-8),.L\\:v-pr-size-8{padding-right:8px}:host(.L\\:v-pl-size-8),.L\\:v-pl-size-8{padding-left:8px}:host(.L\\:v-p-size-12),.L\\:v-p-size-12{padding:12px}:host(.L\\:v-px-size-12),.L\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.L\\:v-py-size-12),.L\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.L\\:v-pt-size-12),.L\\:v-pt-size-12{padding-top:12px}:host(.L\\:v-pb-size-12),.L\\:v-pb-size-12{padding-bottom:12px}:host(.L\\:v-pr-size-12),.L\\:v-pr-size-12{padding-right:12px}:host(.L\\:v-pl-size-12),.L\\:v-pl-size-12{padding-left:12px}:host(.L\\:v-p-size-16),.L\\:v-p-size-16{padding:16px}:host(.L\\:v-px-size-16),.L\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.L\\:v-py-size-16),.L\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.L\\:v-pt-size-16),.L\\:v-pt-size-16{padding-top:16px}:host(.L\\:v-pb-size-16),.L\\:v-pb-size-16{padding-bottom:16px}:host(.L\\:v-pr-size-16),.L\\:v-pr-size-16{padding-right:16px}:host(.L\\:v-pl-size-16),.L\\:v-pl-size-16{padding-left:16px}:host(.L\\:v-p-size-20),.L\\:v-p-size-20{padding:20px}:host(.L\\:v-px-size-20),.L\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.L\\:v-py-size-20),.L\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.L\\:v-pt-size-20),.L\\:v-pt-size-20{padding-top:20px}:host(.L\\:v-pb-size-20),.L\\:v-pb-size-20{padding-bottom:20px}:host(.L\\:v-pr-size-20),.L\\:v-pr-size-20{padding-right:20px}:host(.L\\:v-pl-size-20),.L\\:v-pl-size-20{padding-left:20px}:host(.L\\:v-p-size-24),.L\\:v-p-size-24{padding:24px}:host(.L\\:v-px-size-24),.L\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.L\\:v-py-size-24),.L\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.L\\:v-pt-size-24),.L\\:v-pt-size-24{padding-top:24px}:host(.L\\:v-pb-size-24),.L\\:v-pb-size-24{padding-bottom:24px}:host(.L\\:v-pr-size-24),.L\\:v-pr-size-24{padding-right:24px}:host(.L\\:v-pl-size-24),.L\\:v-pl-size-24{padding-left:24px}:host(.L\\:v-p-size-32),.L\\:v-p-size-32{padding:32px}:host(.L\\:v-px-size-32),.L\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.L\\:v-py-size-32),.L\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.L\\:v-pt-size-32),.L\\:v-pt-size-32{padding-top:32px}:host(.L\\:v-pb-size-32),.L\\:v-pb-size-32{padding-bottom:32px}:host(.L\\:v-pr-size-32),.L\\:v-pr-size-32{padding-right:32px}:host(.L\\:v-pl-size-32),.L\\:v-pl-size-32{padding-left:32px}:host(.L\\:v-p-size-40),.L\\:v-p-size-40{padding:40px}:host(.L\\:v-px-size-40),.L\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.L\\:v-py-size-40),.L\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.L\\:v-pt-size-40),.L\\:v-pt-size-40{padding-top:40px}:host(.L\\:v-pb-size-40),.L\\:v-pb-size-40{padding-bottom:40px}:host(.L\\:v-pr-size-40),.L\\:v-pr-size-40{padding-right:40px}:host(.L\\:v-pl-size-40),.L\\:v-pl-size-40{padding-left:40px}:host(.L\\:v-p-size-48),.L\\:v-p-size-48{padding:48px}:host(.L\\:v-px-size-48),.L\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.L\\:v-py-size-48),.L\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.L\\:v-pt-size-48),.L\\:v-pt-size-48{padding-top:48px}:host(.L\\:v-pb-size-48),.L\\:v-pb-size-48{padding-bottom:48px}:host(.L\\:v-pr-size-48),.L\\:v-pr-size-48{padding-right:48px}:host(.L\\:v-pl-size-48),.L\\:v-pl-size-48{padding-left:48px}:host(.L\\:v-p-size-64),.L\\:v-p-size-64{padding:64px}:host(.L\\:v-px-size-64),.L\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.L\\:v-py-size-64),.L\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.L\\:v-pt-size-64),.L\\:v-pt-size-64{padding-top:64px}:host(.L\\:v-pb-size-64),.L\\:v-pb-size-64{padding-bottom:64px}:host(.L\\:v-pr-size-64),.L\\:v-pr-size-64{padding-right:64px}:host(.L\\:v-pl-size-64),.L\\:v-pl-size-64{padding-left:64px}:host(.L\\:v-p-size-72),.L\\:v-p-size-72{padding:72px}:host(.L\\:v-px-size-72),.L\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.L\\:v-py-size-72),.L\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.L\\:v-pt-size-72),.L\\:v-pt-size-72{padding-top:72px}:host(.L\\:v-pb-size-72),.L\\:v-pb-size-72{padding-bottom:72px}:host(.L\\:v-pr-size-72),.L\\:v-pr-size-72{padding-right:72px}:host(.L\\:v-pl-size-72),.L\\:v-pl-size-72{padding-left:72px}:host(.L\\:v-p-size-80),.L\\:v-p-size-80{padding:80px}:host(.L\\:v-px-size-80),.L\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.L\\:v-py-size-80),.L\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.L\\:v-pt-size-80),.L\\:v-pt-size-80{padding-top:80px}:host(.L\\:v-pb-size-80),.L\\:v-pb-size-80{padding-bottom:80px}:host(.L\\:v-pr-size-80),.L\\:v-pr-size-80{padding-right:80px}:host(.L\\:v-pl-size-80),.L\\:v-pl-size-80{padding-left:80px}:host(.L\\:v-p-size-112),.L\\:v-p-size-112{padding:112px}:host(.L\\:v-px-size-112),.L\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.L\\:v-py-size-112),.L\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.L\\:v-pt-size-112),.L\\:v-pt-size-112{padding-top:112px}:host(.L\\:v-pb-size-112),.L\\:v-pb-size-112{padding-bottom:112px}:host(.L\\:v-pr-size-112),.L\\:v-pr-size-112{padding-right:112px}:host(.L\\:v-pl-size-112),.L\\:v-pl-size-112{padding-left:112px}:host(.L\\:v-p-size-2),.L\\:v-p-size-2{padding:2px}:host(.L\\:v-px-size-2),.L\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.L\\:v-py-size-2),.L\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.L\\:v-pt-size-2),.L\\:v-pt-size-2{padding-top:2px}:host(.L\\:v-pb-size-2),.L\\:v-pb-size-2{padding-bottom:2px}:host(.L\\:v-pr-size-2),.L\\:v-pr-size-2{padding-right:2px}:host(.L\\:v-pl-size-2),.L\\:v-pl-size-2{padding-left:2px}}@media (min-width: 1440px){:host(.XL\\:v-p-0),.XL\\:v-p-0{padding:0px}:host(.XL\\:v-px-0),.XL\\:v-px-0{padding-left:0px;padding-right:0px}:host(.XL\\:v-py-0),.XL\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.XL\\:v-pt-0),.XL\\:v-pt-0{padding-top:0px}:host(.XL\\:v-pb-0),.XL\\:v-pb-0{padding-bottom:0px}:host(.XL\\:v-pr-0),.XL\\:v-pr-0{padding-right:0px}:host(.XL\\:v-pl-0),.XL\\:v-pl-0{padding-left:0px}:host(.XL\\:v-p-size-0),.XL\\:v-p-size-0{padding:0px}:host(.XL\\:v-px-size-0),.XL\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.XL\\:v-py-size-0),.XL\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.XL\\:v-pt-size-0),.XL\\:v-pt-size-0{padding-top:0px}:host(.XL\\:v-pb-size-0),.XL\\:v-pb-size-0{padding-bottom:0px}:host(.XL\\:v-pr-size-0),.XL\\:v-pr-size-0{padding-right:0px}:host(.XL\\:v-pl-size-0),.XL\\:v-pl-size-0{padding-left:0px}:host(.XL\\:v-p-size-4),.XL\\:v-p-size-4{padding:4px}:host(.XL\\:v-px-size-4),.XL\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.XL\\:v-py-size-4),.XL\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.XL\\:v-pt-size-4),.XL\\:v-pt-size-4{padding-top:4px}:host(.XL\\:v-pb-size-4),.XL\\:v-pb-size-4{padding-bottom:4px}:host(.XL\\:v-pr-size-4),.XL\\:v-pr-size-4{padding-right:4px}:host(.XL\\:v-pl-size-4),.XL\\:v-pl-size-4{padding-left:4px}:host(.XL\\:v-p-size-8),.XL\\:v-p-size-8{padding:8px}:host(.XL\\:v-px-size-8),.XL\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.XL\\:v-py-size-8),.XL\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.XL\\:v-pt-size-8),.XL\\:v-pt-size-8{padding-top:8px}:host(.XL\\:v-pb-size-8),.XL\\:v-pb-size-8{padding-bottom:8px}:host(.XL\\:v-pr-size-8),.XL\\:v-pr-size-8{padding-right:8px}:host(.XL\\:v-pl-size-8),.XL\\:v-pl-size-8{padding-left:8px}:host(.XL\\:v-p-size-12),.XL\\:v-p-size-12{padding:12px}:host(.XL\\:v-px-size-12),.XL\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.XL\\:v-py-size-12),.XL\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.XL\\:v-pt-size-12),.XL\\:v-pt-size-12{padding-top:12px}:host(.XL\\:v-pb-size-12),.XL\\:v-pb-size-12{padding-bottom:12px}:host(.XL\\:v-pr-size-12),.XL\\:v-pr-size-12{padding-right:12px}:host(.XL\\:v-pl-size-12),.XL\\:v-pl-size-12{padding-left:12px}:host(.XL\\:v-p-size-16),.XL\\:v-p-size-16{padding:16px}:host(.XL\\:v-px-size-16),.XL\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.XL\\:v-py-size-16),.XL\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.XL\\:v-pt-size-16),.XL\\:v-pt-size-16{padding-top:16px}:host(.XL\\:v-pb-size-16),.XL\\:v-pb-size-16{padding-bottom:16px}:host(.XL\\:v-pr-size-16),.XL\\:v-pr-size-16{padding-right:16px}:host(.XL\\:v-pl-size-16),.XL\\:v-pl-size-16{padding-left:16px}:host(.XL\\:v-p-size-20),.XL\\:v-p-size-20{padding:20px}:host(.XL\\:v-px-size-20),.XL\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.XL\\:v-py-size-20),.XL\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.XL\\:v-pt-size-20),.XL\\:v-pt-size-20{padding-top:20px}:host(.XL\\:v-pb-size-20),.XL\\:v-pb-size-20{padding-bottom:20px}:host(.XL\\:v-pr-size-20),.XL\\:v-pr-size-20{padding-right:20px}:host(.XL\\:v-pl-size-20),.XL\\:v-pl-size-20{padding-left:20px}:host(.XL\\:v-p-size-24),.XL\\:v-p-size-24{padding:24px}:host(.XL\\:v-px-size-24),.XL\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.XL\\:v-py-size-24),.XL\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.XL\\:v-pt-size-24),.XL\\:v-pt-size-24{padding-top:24px}:host(.XL\\:v-pb-size-24),.XL\\:v-pb-size-24{padding-bottom:24px}:host(.XL\\:v-pr-size-24),.XL\\:v-pr-size-24{padding-right:24px}:host(.XL\\:v-pl-size-24),.XL\\:v-pl-size-24{padding-left:24px}:host(.XL\\:v-p-size-32),.XL\\:v-p-size-32{padding:32px}:host(.XL\\:v-px-size-32),.XL\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.XL\\:v-py-size-32),.XL\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.XL\\:v-pt-size-32),.XL\\:v-pt-size-32{padding-top:32px}:host(.XL\\:v-pb-size-32),.XL\\:v-pb-size-32{padding-bottom:32px}:host(.XL\\:v-pr-size-32),.XL\\:v-pr-size-32{padding-right:32px}:host(.XL\\:v-pl-size-32),.XL\\:v-pl-size-32{padding-left:32px}:host(.XL\\:v-p-size-40),.XL\\:v-p-size-40{padding:40px}:host(.XL\\:v-px-size-40),.XL\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.XL\\:v-py-size-40),.XL\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.XL\\:v-pt-size-40),.XL\\:v-pt-size-40{padding-top:40px}:host(.XL\\:v-pb-size-40),.XL\\:v-pb-size-40{padding-bottom:40px}:host(.XL\\:v-pr-size-40),.XL\\:v-pr-size-40{padding-right:40px}:host(.XL\\:v-pl-size-40),.XL\\:v-pl-size-40{padding-left:40px}:host(.XL\\:v-p-size-48),.XL\\:v-p-size-48{padding:48px}:host(.XL\\:v-px-size-48),.XL\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.XL\\:v-py-size-48),.XL\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.XL\\:v-pt-size-48),.XL\\:v-pt-size-48{padding-top:48px}:host(.XL\\:v-pb-size-48),.XL\\:v-pb-size-48{padding-bottom:48px}:host(.XL\\:v-pr-size-48),.XL\\:v-pr-size-48{padding-right:48px}:host(.XL\\:v-pl-size-48),.XL\\:v-pl-size-48{padding-left:48px}:host(.XL\\:v-p-size-64),.XL\\:v-p-size-64{padding:64px}:host(.XL\\:v-px-size-64),.XL\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.XL\\:v-py-size-64),.XL\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.XL\\:v-pt-size-64),.XL\\:v-pt-size-64{padding-top:64px}:host(.XL\\:v-pb-size-64),.XL\\:v-pb-size-64{padding-bottom:64px}:host(.XL\\:v-pr-size-64),.XL\\:v-pr-size-64{padding-right:64px}:host(.XL\\:v-pl-size-64),.XL\\:v-pl-size-64{padding-left:64px}:host(.XL\\:v-p-size-72),.XL\\:v-p-size-72{padding:72px}:host(.XL\\:v-px-size-72),.XL\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.XL\\:v-py-size-72),.XL\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.XL\\:v-pt-size-72),.XL\\:v-pt-size-72{padding-top:72px}:host(.XL\\:v-pb-size-72),.XL\\:v-pb-size-72{padding-bottom:72px}:host(.XL\\:v-pr-size-72),.XL\\:v-pr-size-72{padding-right:72px}:host(.XL\\:v-pl-size-72),.XL\\:v-pl-size-72{padding-left:72px}:host(.XL\\:v-p-size-80),.XL\\:v-p-size-80{padding:80px}:host(.XL\\:v-px-size-80),.XL\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.XL\\:v-py-size-80),.XL\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.XL\\:v-pt-size-80),.XL\\:v-pt-size-80{padding-top:80px}:host(.XL\\:v-pb-size-80),.XL\\:v-pb-size-80{padding-bottom:80px}:host(.XL\\:v-pr-size-80),.XL\\:v-pr-size-80{padding-right:80px}:host(.XL\\:v-pl-size-80),.XL\\:v-pl-size-80{padding-left:80px}:host(.XL\\:v-p-size-112),.XL\\:v-p-size-112{padding:112px}:host(.XL\\:v-px-size-112),.XL\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.XL\\:v-py-size-112),.XL\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.XL\\:v-pt-size-112),.XL\\:v-pt-size-112{padding-top:112px}:host(.XL\\:v-pb-size-112),.XL\\:v-pb-size-112{padding-bottom:112px}:host(.XL\\:v-pr-size-112),.XL\\:v-pr-size-112{padding-right:112px}:host(.XL\\:v-pl-size-112),.XL\\:v-pl-size-112{padding-left:112px}:host(.XL\\:v-p-size-2),.XL\\:v-p-size-2{padding:2px}:host(.XL\\:v-px-size-2),.XL\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.XL\\:v-py-size-2),.XL\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.XL\\:v-pt-size-2),.XL\\:v-pt-size-2{padding-top:2px}:host(.XL\\:v-pb-size-2),.XL\\:v-pb-size-2{padding-bottom:2px}:host(.XL\\:v-pr-size-2),.XL\\:v-pr-size-2{padding-right:2px}:host(.XL\\:v-pl-size-2),.XL\\:v-pl-size-2{padding-left:2px}}:host{display:none;box-sizing:border-box;overflow-y:auto;text-align:left;position:fixed;top:0px;left:0px;right:0px;bottom:0px;align-items:flex-start}.modal-dialog{margin-left:auto;margin-right:auto;margin-top:64px;margin-bottom:64px}:host(.align-center){align-items:center}.modal-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-shadow:var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16));border-radius:12px;box-sizing:border-box;pointer-events:auto;overflow:hidden}:host(.animation) .modal-container{animation-name:animatetop;animation-duration:0.4s}.vega-modal-header{display:flex;align-items:flex-start;flex-direction:row;gap:8px;padding-bottom:0px}.vega-modal-header.vega-modal-header-with-title,.vega-modal-header.vega-modal-header-with-icon{padding-bottom:16px}.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon){padding-top:0px;padding-bottom:0px}.vega-modal-header-with-content-scroll.vega-modal-header-with-icon,.vega-modal-header-with-content-scroll.vega-modal-header-with-title{box-shadow:var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))}.vega-modal-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px;flex-grow:1;word-break:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}.vega-modal-close-btn{cursor:pointer}.vega-modal-content{padding-top:0px;padding-bottom:0px}.vega-modal-content-with-scroll{padding-top:24px;padding-bottom:24px;overflow:auto}.vega-modal-footer:not(.vega-modal-footer-with-slot){padding-top:0px}.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot){padding-top:0px;padding-bottom:0px}.vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot{box-shadow:var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))}.vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot.vega-modal-footer-with-content-scroll-to-bottom{box-shadow:var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))}@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const VegaModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.vegaClose = createEvent(this, "vegaClose", 7);
-    this.close = createEvent(this, "close", 7);
-    this.vegaOpen = createEvent(this, "vegaOpen", 7);
-    this.modalOpen = createEvent(this, "modalOpen", 7);
-    this.globalSlimmers = {};
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-resize-e2e}
-     */
-    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
-      callback: /* istanbul ignore next */ () => {
-        this.setModalWidth('update');
-        this.setContentMaxHeight();
-      },
-      isDeferred: true,
-    });
-    this.nestedModalController = new VegaNestedModalController();
-    this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
-    this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
-    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
-    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(vegaModalDisableBodyScrollCss);
-    this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
-    this.isModalWidthSet = false;
-    /**
-     * Provides options for controlling the behavior of the backdrop.
-     * - `default`:
-     *      indicates that the user can close the modal
-     *      by clicking on the backdrop.
-     * - `static`:
-     *      means that the user cannot close the modal by
-     *      clicking on the backdrop.
-     * - `none`:
-     *      specifies that the backdrop will not be rendered.
-     *
-     * _Note_:
-     *    When changing this value, a page refresh is required
-     *    for the changes to take effect.
-     *
-     * @vegaVersion 1.0.6
-     */
-    this.backdrop = 'default';
-    /**
-     * Determines whether the modal is initially open.
-     *
-     * @vegaVersion 1.0.6
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.open = false;
-    /**
-     * Specifies whether the modal uses an animated transition
-     *    when it appears.
-     *
-     * @vegaVersion 1.0.11
-     */
-    this.animation = false;
-    /**
-     * Represents the title displayed within the modal.
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.modalTitle = '';
-    /**
-     * Specifies the background color of the modal's backdrop.
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.backdropColor = 'default';
-    /**
-     * Determines whether the modal is vertically centered
-     *    on the screen.
-     * @deprecated This property will be removed soon and replaced by prop isVerticallyCentered
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.isVerticallyCenter = false;
-    /**
-     * Determines whether the modal is vertically centered
-     *    on the screen.
-     *
-     * @vegaVersion 2.2.0
-     */
-    this.isVerticallyCentered = false;
-    /**
-     * Determines whether the modal displays a close button to
-     *    allow hiding or closing of the modal.
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.showCloseButton = true;
-    /**
-     * Specifies the amount of space or padding within the modal.
-     *
-     * It can be set as a ResponsiveType or any size value.
-     *
-     * @vegaVersion 1.0.10
-     */
-    this.padding = 'size-24';
-    /**
-     * Provides a callback function that is triggered when a user clicks the
-     *    close button located in the top right corner of the modal.
-     *
-     * If the callback function returns `true`, the modal will be closed.
-     *
-     * If the callback function returns `false` or does not return any value, the modal will remain open.
-     *
-     * @vegaVersion 1.22.0
-     */
-    this.handleClose = undefined;
-    /**
-     * The below method is e2e-test covered in
-     * @see{module:vega-modal-toggle-interactive-e2e}
-     */
-    /* istanbul ignore next */
-    this.closeModal = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!this.handleClose || this.handleClose()) {
-        this.open = false;
-      }
-    };
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-size-number-e2e}
-   * @see{module:vega-modal-size-responsive-e2e}
-   */
-  /* istanbul ignore next */
-  watchSize() {
-    this.setModalWidth('update');
-  }
-  watchOpen() {
-    this.toggle();
-  }
-  disconnectedCallback() {
-    this.open = false;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-resize-e2e}
-   */
-  /* istanbul ignore next */
-  componentDidLoad() {
-    if (this.open) {
-      this.toggle();
-    }
-    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
-      this.disableBackdropTouchMove();
-    }
-    if (this.isContentScrollable) {
-      this.listenContentScroll();
-    }
-    this.setContentMaxHeight();
-  }
-  /**
-   * Clicking on a non-static current modal should close this modal, not other modals.
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  listenDataTarget(e) {
-    /*
-     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
-     */
-    const target = e.composedPath()[0];
-    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
-      this.open = false;
-    }
-    if (this.host.id &&
-      (target.getAttribute('data-target') === this.host.id ||
-        findParent(target, `[data-target=${this.host.id}]`))) {
-      e.preventDefault();
-      this.open = true;
-    }
+/**
+ * Modal renderer
+ */
+class VegaModalRenderer extends VegaSlimmer {
+  getModalContentRef() {
+    return this.modalContent;
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  listenDataDismiss(e) {
-    const target = e.target.closest(`[data-dismiss='modal']`);
-    if (target) {
-      e.preventDefault();
-      this.open = false;
-    }
+  getModalFooterRef() {
+    return this.modalFooter;
   }
-  /**
-   * Invoke this method to show or hide the modal.
-   *
-   * @vegaVersion 1.0.6
-   */
-  /* The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next
-   *
-   */
-  async modal(option) {
-    switch (option) {
-      case 'show':
-        this.open = true;
-        break;
-      case 'hide':
-        this.open = false;
-        break;
-    }
+  getModalContainerRef() {
+    return this.modalContainer;
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: {
+    return (h(Host, { class: {
         'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
         'animation': this.animation,
-      } }, h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
+      } },
+      h("div", { class: "modal-dialog" }, this.renderContainer())));
   }
   renderContainer() {
     const padding = formatAndValidResponsiveToken(this.padding, 'padding');
-    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) }, this.renderHeader(padding), this.renderContent(padding), this.renderFooter(padding)));
+    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
+      this.renderHeader(padding),
+      this.renderContent(padding),
+      this.renderFooter(padding)));
   }
   renderHeader(padding) {
     return (h("div", { class: {
@@ -440,14 +242,20 @@ const VegaModal = class {
         'vega-modal-header-with-icon': this.showCloseButton,
         'vega-modal-header-with-content-scroll': this.isContentScrollable(),
         [padding]: true,
-      } }, this.renderTitle(), this.showCloseButton && this.renderCloseBtn()));
+      } },
+      this.renderTitle(),
+      this.showCloseButton && this.renderCloseBtn()));
   }
   renderContent(padding) {
     return (h("div", { class: {
         'vega-modal-content': true,
         'vega-modal-content-with-scroll': this.isContentScrollable(),
         [padding]: true,
-      }, ref: (e) => (this.modalContent = e) }, h(Fragment, null, h("slot", null), h("slot", { name: "content" }), h("slot", { name: "modal-content" }))));
+      }, ref: (e) => (this.modalContent = e) },
+      h(Fragment, null,
+        h("slot", null),
+        h("slot", { name: "content" }),
+        h("slot", { name: "modal-content" }))));
   }
   renderFooter(padding) {
     return (h("div", { class: {
@@ -455,13 +263,19 @@ const VegaModal = class {
         'vega-modal-footer-with-slot': this.hasModalFooter(),
         'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
         [padding]: true,
-      }, ref: (e) => (this.modalFooter = e) }, h(Fragment, null, h("slot", { name: "footer" }), h("slot", { name: "modal-footer" }))));
+      }, ref: (e) => (this.modalFooter = e) },
+      h(Fragment, null,
+        h("slot", { name: "footer" }),
+        h("slot", { name: "modal-footer" }))));
   }
   renderTitle() {
-    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null, h("slot", { name: "title" }), h("slot", { name: "modal-title" })))));
+    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
+      h("slot", { name: "title" }),
+      h("slot", { name: "modal-title" })))));
   }
   renderCloseBtn() {
-    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.closeModal, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }, h("vega-icon", { icon: "close", size: "size-16" })));
+    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.openStateController.onModalClose, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "close", size: "size-16" })));
   }
   hasModalFooter() {
     return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
@@ -475,53 +289,84 @@ const VegaModal = class {
       this.host.querySelector(`[slot='modal-title']`) !== null ||
       this.host.querySelector(`[slot='title']`) !== null);
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-content-scroll-to-bottom}
-   */
-  /* istanbul ignore next */
-  listenContentScroll() {
-    this.modalContent.addEventListener('scroll', () => {
-      if (this.modalContent.scrollHeight - this.modalContent.scrollTop <=
-        this.modalContent.clientHeight) {
-        this.modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-      else {
-        this.modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
-      }
-    });
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  toggle() {
-    this.open ? this.pushToModalStack() : this.deleteFromModalStack();
-    this.updateDocumentRootOverflow();
-    this.setBackdrop();
-    this.setModalZIndex();
-    this.setModalWidth();
-    this.emitEvent();
-    this.setModalVisibility();
-  }
-  setModalZIndex() {
-    if (this.open) {
-      InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.setZIndex(this.host, 'base');
-    }
-    else {
-      InternalVegaZIndexManager.removeZIndex(this.backdropRef, 'base');
-      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
-      const length = this.getVisibleModalLength();
-      if (length > 0) {
-        InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
-        InternalVegaZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
-      }
-      this.removeBackdropWhileNoModalShow();
-    }
+}
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "host", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "animation", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "open", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "padding", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "showCloseButton", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "modalTitle", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "contentMaxHeight", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "handleClose", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "openStateController", void 0);
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Modal layout controller
+ */
+class VegaModalLayoutController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-resize-e2e}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: 
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.setModalWidth('update');
+        this.setContentMaxHeight();
+      },
+      isDeferred: true,
+    });
+    this.isModalWidthSet = false;
+  }
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  componentDidLoad() {
+    this.setContentMaxHeight();
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-resize-e2e}
+   */
+  /* istanbul ignore next */
   /**
+   * Listen watch size method to be called
+   */
+  watchSize() {
+    this.setModalWidth('update');
+  }
+  /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-default-e2e}
    * @see{module:vega-modal-size-number-e2e}
@@ -532,6 +377,11 @@ const VegaModal = class {
    * So to avoid repeated calls by toggle, we add a flag as parameter,
    */
   /* istanbul ignore next */
+  /**
+   * Set width of modal.
+   *
+   * @param {'initialize' | 'update'} flag - Is trigger by
+   */
   setModalWidth(flag = 'initialize') {
     if (this.isModalWidthSet && flag === 'initialize')
       return;
@@ -542,29 +392,21 @@ const VegaModal = class {
       : (dialog.style['width'] = `${size}`);
     this.isModalWidthSet = true;
   }
-  /**
+  /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-content-max-height-responsive-e2e}
    */
   /* istanbul ignore next */
+  /**
+   * Set max height of modal content.
+   */
   setContentMaxHeight() {
     const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
     if (maxHeight) {
-      this.modalContent.style.maxHeight = `${maxHeight}px`;
+      this.renderer.getModalContentRef().style.maxHeight = `${maxHeight}px`;
     }
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-toggle-interactive-e2e}
-   */
-  /* istanbul ignore next */
-  setModalVisibility() {
-    this.host.style['display'] = this.open ? 'flex' : 'none';
-  }
-  emitEvent() {
-    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
-  }
-  /**
+  /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-default-e2e}
    * @see{module:vega-modal-size-number-e2e}
@@ -574,6 +416,11 @@ const VegaModal = class {
    * @see{module:vega-modal-default-width-S-600-e2e}
    */
   /* istanbul ignore next */
+  /**
+   * Get size of modal.
+   *
+   * @returns {number | string} - Modal size.
+   */
   getModalSize() {
     const size = ResponsiveFormatFacade.format(this.size, 'size');
     if (size) {
@@ -583,63 +430,49 @@ const VegaModal = class {
       return DefaultModalSize[getCurrentBreakpoint()];
     }
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-backdrop-color-default-e2e}
-   * @see{module:vega-modal-backdrop-color-semi-e2e}
-   * @see{module:vega-modal-backdrop-color-none-e2e}
-   * @see{module:vega-modal-default-e2e}
-   */
-  /* istanbul ignore next */
-  setBackdrop() {
-    if (this.backdrop === 'none')
-      return;
-    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
-    if (!backdrop) {
-      backdrop = document.createElement('vega-backdrop');
-      backdrop.classList.add('modal-backdrop');
-      backdrop.color = VegaModal.backdropColorMap[this.backdropColor];
-      backdrop.visible = true;
-      document.querySelector('body').append(backdrop);
-    }
-    this.backdropRef = backdrop;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-modal-disconnected-callback-e2e }
-   */
+}
+__decorate$7([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "contentMaxHeight", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "size", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "renderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaModalLayoutController.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$7([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalLayoutController.prototype, "componentDidLoad", null);
+__decorate$7([
+  MapToComponentMethod('watchSize')
+], VegaModalLayoutController.prototype, "watchSize", null);
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Modal mobile controller
+ */
+class VegaModalMobileController extends VegaSlimmer {
   /* istanbul ignore next */
-  removeBackdropWhileNoModalShow() {
-    if (this.getVisibleModalLength() === 0) {
-      this.backdropRef && this.backdropRef.remove();
-    }
-  }
-  //TODO: Record the nest modal by an array.
-  /**
-   * Get visible modal length
-   */
-  getVisibleModalLength() {
-    return VegaModal.openedModalStack.length;
-  }
   /**
-   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
+   * Component lifecycle - [connectedCallback]
    */
-  updateDocumentRootOverflow() {
-    if (this.backdrop === 'none')
-      return;
-    if (this.open && this.getVisibleModalLength() === 1) {
-      document.body.classList.add('disable-scroll-in-desktop');
-    }
-    else if (!this.open && this.getVisibleModalLength() === 0) {
-      document.body.classList.remove('disable-scroll-in-desktop');
+  componentDidLoad() {
+    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
+      this.disableBackdropTouchMove();
     }
   }
-  pushToModalStack() {
-    VegaModal.openedModalStack.push(this.host);
-  }
-  deleteFromModalStack() {
-    VegaModal.openedModalStack = VegaModal.openedModalStack.filter((modal) => modal !== this.host);
-  }
+  /* istanbul ignore next */
   /**
    * There are two situations in modal scrolling:
    * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
@@ -652,7 +485,6 @@ const VegaModal = class {
    * https://v5.bootcss.com/docs/components/modal/
    * https://mui.com/material-ui/react-dialog/
    */
-  /* istanbul ignore next */
   disableBackdropTouchMove() {
     this.host.addEventListener('touchstart', (e) => {
       this.touchStartY = e.targetTouches[0].pageY;
@@ -668,27 +500,646 @@ const VegaModal = class {
       }
     }, { capture: true });
   }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "size": ["watchSize"],
-    "open": ["watchOpen"]
-  }; }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaModalMobileController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaModalMobileController.prototype, "backdrop", void 0);
+__decorate$6([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalMobileController.prototype, "componentDidLoad", null);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-VegaModal.openedModalStack = [];
-VegaModal.backdropColorMap = {
-  default: 'bg-backdrop-modal',
-  semi: 'bg-backdrop-popover',
-  none: 'bg-transparent',
+/**
+ * Modal scroll controller
+ */
+class VegaModalScrollController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  componentDidLoad() {
+    if (this.isContentScrollable()) {
+      this.listenContentScroll();
+    }
+  }
+  /**
+   * Is modal content scrollable.
+   *
+   * @returns {boolean} - Is scrollable.
+   */
+  isContentScrollable() {
+    return Boolean(this.contentMaxHeight);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-content-scroll-to-bottom}
+   */
+  /* istanbul ignore next */
+  /**
+   * Listen content scroll
+   */
+  listenContentScroll() {
+    const modalContent = this.renderer.getModalContentRef();
+    const modalFooter = this.renderer.getModalFooterRef();
+    modalContent.addEventListener('scroll', () => {
+      if (modalContent.scrollHeight - modalContent.scrollTop <= modalContent.clientHeight) {
+        modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+      else {
+        modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+      this.notifyContentScrolling();
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-shadow-root-scrolling-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Notifies the `ChangeManager` about scrolling in a specific element within a shadow root.
+   */
+  notifyContentScrolling() {
+    ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+      host: this.host,
+    });
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaModalScrollController.prototype, "host", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaModalScrollController.prototype, "contentMaxHeight", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaModalScrollController.prototype, "renderer", void 0);
+__decorate$5([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalScrollController.prototype, "componentDidLoad", null);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-__decorate([
-  InjectVegaGlobalSlimmer()
-], VegaModal.prototype, "globalSlimmers", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaModal.prototype, "nestedModalController", void 0);
+/**
+ * Modal open state controller
+ */
+class VegaModalOpenStateController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-toggle-interactive-e2e}
+     */
+    /* istanbul ignore next */
+    /**
+     * Listen modal close event and close modal.
+     *
+     * @param {MouseEvent} e - Close modal event.
+     */
+    this.onModalClose = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!this.handleClose || this.handleClose()) {
+        this.open = false;
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    if (this.open) {
+      this.toggle();
+    }
+  }
+  /**
+   * Toggle modal while open property changed.
+   */
+  watchOpen() {
+    this.toggle();
+  }
+  /**
+   * Listen the target element clicked has a `data-target='modal'` attribute and open the modal if it does.
+   *
+   * @param {MouseEvent} e - Open modal event.
+   */
+  listenDataTarget(e) {
+    /*
+     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
+     */
+    const target = e.composedPath()[0];
+    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
+      this.open = false;
+    }
+    if (this.host.id &&
+      (target.getAttribute('data-target') === this.host.id ||
+        findParent(target, `[data-target=${this.host.id}]`))) {
+      e.preventDefault();
+      this.open = true;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Listen the target element clicked has a `data-dismiss='modal'` attribute and closes the modal if it does.
+   *
+   * @param {MouseEvent} e - Close modal event.
+   */
+  listenDataDismiss(e) {
+    const target = e.target.closest(`[data-dismiss='modal']`);
+    if (target) {
+      e.preventDefault();
+      this.open = false;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Manages the visibility and behavior of a modal by updating various properties
+   * and emitting an event.
+   */
+  toggle() {
+    this.open ? this.openedModalStackController.push() : this.openedModalStackController.remove();
+    this.updateDocumentRootOverflow();
+    this.backdropController.setBackdrop();
+    this.zIndexController.setModalZIndex();
+    this.removeBackdropWhileNoModalShow();
+    this.layoutController.setModalWidth();
+    this.emitEvent();
+    this.setModalVisibility();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Toggles the display property of a modal element between 'flex' and
+   * 'none' based on the value of the `open` property.
+   */
+  setModalVisibility() {
+    this.host.style['display'] = this.open ? 'flex' : 'none';
+  }
+  /**
+   * Emits either an open or close event based on the value of the `open` property.
+   */
+  emitEvent() {
+    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
+  }
+  /**
+   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
+   */
+  updateDocumentRootOverflow() {
+    if (this.backdrop === 'none')
+      return;
+    const openedModalStackLength = this.openedModalStackController.length();
+    if (this.open && openedModalStackLength === 1) {
+      document.body.classList.add('disable-scroll-in-desktop');
+    }
+    else if (!this.open && openedModalStackLength === 0) {
+      document.body.classList.remove('disable-scroll-in-desktop');
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-disconnected-callback-e2e }
+   */
+  /* istanbul ignore next */
+  /**
+   * Removes the backdrop element if no modals are currently visible.
+   */
+  removeBackdropWhileNoModalShow() {
+    if (!this.open && this.openedModalStackController.length() === 0) {
+      this.backdropController.removeBackdrop();
+    }
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaModalOpenStateController.prototype, "open", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "backdrop", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "handleClose", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "closeEventEmitter", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "openEventEmitter", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "layoutController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "backdropController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "openedModalStackController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "zIndexController", void 0);
+__decorate$4([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalOpenStateController.prototype, "componentDidLoad", null);
+__decorate$4([
+  MapToComponentMethod('watchOpen')
+], VegaModalOpenStateController.prototype, "watchOpen", null);
+__decorate$4([
+  MapToComponentMethod('listenDataTarget')
+], VegaModalOpenStateController.prototype, "listenDataTarget", null);
+__decorate$4([
+  MapToComponentMethod('listenDataDismiss')
+], VegaModalOpenStateController.prototype, "listenDataDismiss", null);
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Modal backdrop controller
+ */
+class VegaModalBackdropController extends VegaSlimmer {
+  /**
+   * Get the backdropRef element or null.
+   *
+   * @returns {HTMLElement | null} - The backdropRef.
+   */
+  getBackdropRef() {
+    return this.backdropRef;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-backdrop-color-default-e2e}
+   * @see{module:vega-modal-backdrop-color-semi-e2e}
+   * @see{module:vega-modal-backdrop-color-none-e2e}
+   * @see{module:vega-modal-default-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set backdrop of modal.
+   */
+  setBackdrop() {
+    if (this.backdrop === 'none')
+      return;
+    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
+    if (!backdrop) {
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add('modal-backdrop');
+      backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
+      backdrop.visible = true;
+      document.querySelector('body').append(backdrop);
+    }
+    this.backdropRef = backdrop;
+  }
+  /**
+   * Removes the backdrop element if it exists.
+   */
+  removeBackdrop() {
+    this.backdropRef && this.backdropRef.remove();
+  }
+}
+VegaModalBackdropController.backdropColorMap = {
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
+};
+__decorate$3([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "backdrop", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "backdropColor", void 0);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Opened modal stack controller
+ */
+class VegaModalOpenedModalStackController extends VegaSlimmer {
+  /**
+   * Adds the current host element to an array in a modal toggle controller.
+   */
+  push() {
+    VegaModalOpenedModalStackController.openedModalStack.push(this.host);
+  }
+  /**
+   * Removes the current modal from the opened modal stack.
+   */
+  remove() {
+    VegaModalOpenedModalStackController.openedModalStack =
+      VegaModalOpenedModalStackController.openedModalStack.filter((modal) => modal !== this.host);
+  }
+  //TODO: Record the nest modal by an array.
+  /**
+   * Get visible modal length.
+   *
+   * @returns {number} - Visible modal length.
+   */
+  length() {
+    return VegaModalOpenedModalStackController.openedModalStack.length;
+  }
+  /**
+   * Returns the previous HTMLVegaModalElement from the openedModalStack if it exists.
+   *
+   * @returns {Nullable<HTMLElement>} - The previous HTMLVegaModalElement.
+   */
+  peek() {
+    const length = this.length();
+    if (length > 0) {
+      return VegaModalOpenedModalStackController.openedModalStack[length - 1];
+    }
+    /* istanbul ignore next */
+    return null;
+  }
+}
+VegaModalOpenedModalStackController.openedModalStack = [];
+__decorate$2([
+  MapToComponentField()
+], VegaModalOpenedModalStackController.prototype, "host", void 0);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Modal z-index controller
+ */
+class VegaModalZIndexController extends VegaSlimmer {
+  /**
+   * Manages the z-index of modal elements based on their visibility status.
+   */
+  setModalZIndex() {
+    const backdropRef = this.backdropController.getBackdropRef();
+    if (this.open) {
+      InternalVegaZIndexManager.setZIndex(backdropRef, 'base');
+      InternalVegaZIndexManager.setZIndex(this.host, 'base');
+    }
+    else {
+      InternalVegaZIndexManager.removeZIndex(backdropRef, 'base');
+      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
+      if (this.openedModalStackController.length() > 0) {
+        InternalVegaZIndexManager.setZIndex(backdropRef, 'base');
+        InternalVegaZIndexManager.setZIndex(this.openedModalStackController.peek(), 'base');
+      }
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "open", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "backdropController", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "openedModalStackController", void 0);
+
+const vegaModalCss = ":host(.v-p-0),.v-p-0{padding:0px}:host(.v-px-0),.v-px-0{padding-left:0px;padding-right:0px}:host(.v-py-0),.v-py-0{padding-top:0px;padding-bottom:0px}:host(.v-pt-0),.v-pt-0{padding-top:0px}:host(.v-pb-0),.v-pb-0{padding-bottom:0px}:host(.v-pr-0),.v-pr-0{padding-right:0px}:host(.v-pl-0),.v-pl-0{padding-left:0px}:host(.v-p-size-0),.v-p-size-0{padding:0px}:host(.v-px-size-0),.v-px-size-0{padding-left:0px;padding-right:0px}:host(.v-py-size-0),.v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.v-pt-size-0),.v-pt-size-0{padding-top:0px}:host(.v-pb-size-0),.v-pb-size-0{padding-bottom:0px}:host(.v-pr-size-0),.v-pr-size-0{padding-right:0px}:host(.v-pl-size-0),.v-pl-size-0{padding-left:0px}:host(.v-p-size-4),.v-p-size-4{padding:4px}:host(.v-px-size-4),.v-px-size-4{padding-left:4px;padding-right:4px}:host(.v-py-size-4),.v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.v-pt-size-4),.v-pt-size-4{padding-top:4px}:host(.v-pb-size-4),.v-pb-size-4{padding-bottom:4px}:host(.v-pr-size-4),.v-pr-size-4{padding-right:4px}:host(.v-pl-size-4),.v-pl-size-4{padding-left:4px}:host(.v-p-size-8),.v-p-size-8{padding:8px}:host(.v-px-size-8),.v-px-size-8{padding-left:8px;padding-right:8px}:host(.v-py-size-8),.v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.v-pt-size-8),.v-pt-size-8{padding-top:8px}:host(.v-pb-size-8),.v-pb-size-8{padding-bottom:8px}:host(.v-pr-size-8),.v-pr-size-8{padding-right:8px}:host(.v-pl-size-8),.v-pl-size-8{padding-left:8px}:host(.v-p-size-12),.v-p-size-12{padding:12px}:host(.v-px-size-12),.v-px-size-12{padding-left:12px;padding-right:12px}:host(.v-py-size-12),.v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.v-pt-size-12),.v-pt-size-12{padding-top:12px}:host(.v-pb-size-12),.v-pb-size-12{padding-bottom:12px}:host(.v-pr-size-12),.v-pr-size-12{padding-right:12px}:host(.v-pl-size-12),.v-pl-size-12{padding-left:12px}:host(.v-p-size-16),.v-p-size-16{padding:16px}:host(.v-px-size-16),.v-px-size-16{padding-left:16px;padding-right:16px}:host(.v-py-size-16),.v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.v-pt-size-16),.v-pt-size-16{padding-top:16px}:host(.v-pb-size-16),.v-pb-size-16{padding-bottom:16px}:host(.v-pr-size-16),.v-pr-size-16{padding-right:16px}:host(.v-pl-size-16),.v-pl-size-16{padding-left:16px}:host(.v-p-size-20),.v-p-size-20{padding:20px}:host(.v-px-size-20),.v-px-size-20{padding-left:20px;padding-right:20px}:host(.v-py-size-20),.v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.v-pt-size-20),.v-pt-size-20{padding-top:20px}:host(.v-pb-size-20),.v-pb-size-20{padding-bottom:20px}:host(.v-pr-size-20),.v-pr-size-20{padding-right:20px}:host(.v-pl-size-20),.v-pl-size-20{padding-left:20px}:host(.v-p-size-24),.v-p-size-24{padding:24px}:host(.v-px-size-24),.v-px-size-24{padding-left:24px;padding-right:24px}:host(.v-py-size-24),.v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.v-pt-size-24),.v-pt-size-24{padding-top:24px}:host(.v-pb-size-24),.v-pb-size-24{padding-bottom:24px}:host(.v-pr-size-24),.v-pr-size-24{padding-right:24px}:host(.v-pl-size-24),.v-pl-size-24{padding-left:24px}:host(.v-p-size-32),.v-p-size-32{padding:32px}:host(.v-px-size-32),.v-px-size-32{padding-left:32px;padding-right:32px}:host(.v-py-size-32),.v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.v-pt-size-32),.v-pt-size-32{padding-top:32px}:host(.v-pb-size-32),.v-pb-size-32{padding-bottom:32px}:host(.v-pr-size-32),.v-pr-size-32{padding-right:32px}:host(.v-pl-size-32),.v-pl-size-32{padding-left:32px}:host(.v-p-size-40),.v-p-size-40{padding:40px}:host(.v-px-size-40),.v-px-size-40{padding-left:40px;padding-right:40px}:host(.v-py-size-40),.v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.v-pt-size-40),.v-pt-size-40{padding-top:40px}:host(.v-pb-size-40),.v-pb-size-40{padding-bottom:40px}:host(.v-pr-size-40),.v-pr-size-40{padding-right:40px}:host(.v-pl-size-40),.v-pl-size-40{padding-left:40px}:host(.v-p-size-48),.v-p-size-48{padding:48px}:host(.v-px-size-48),.v-px-size-48{padding-left:48px;padding-right:48px}:host(.v-py-size-48),.v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.v-pt-size-48),.v-pt-size-48{padding-top:48px}:host(.v-pb-size-48),.v-pb-size-48{padding-bottom:48px}:host(.v-pr-size-48),.v-pr-size-48{padding-right:48px}:host(.v-pl-size-48),.v-pl-size-48{padding-left:48px}:host(.v-p-size-64),.v-p-size-64{padding:64px}:host(.v-px-size-64),.v-px-size-64{padding-left:64px;padding-right:64px}:host(.v-py-size-64),.v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.v-pt-size-64),.v-pt-size-64{padding-top:64px}:host(.v-pb-size-64),.v-pb-size-64{padding-bottom:64px}:host(.v-pr-size-64),.v-pr-size-64{padding-right:64px}:host(.v-pl-size-64),.v-pl-size-64{padding-left:64px}:host(.v-p-size-72),.v-p-size-72{padding:72px}:host(.v-px-size-72),.v-px-size-72{padding-left:72px;padding-right:72px}:host(.v-py-size-72),.v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.v-pt-size-72),.v-pt-size-72{padding-top:72px}:host(.v-pb-size-72),.v-pb-size-72{padding-bottom:72px}:host(.v-pr-size-72),.v-pr-size-72{padding-right:72px}:host(.v-pl-size-72),.v-pl-size-72{padding-left:72px}:host(.v-p-size-80),.v-p-size-80{padding:80px}:host(.v-px-size-80),.v-px-size-80{padding-left:80px;padding-right:80px}:host(.v-py-size-80),.v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.v-pt-size-80),.v-pt-size-80{padding-top:80px}:host(.v-pb-size-80),.v-pb-size-80{padding-bottom:80px}:host(.v-pr-size-80),.v-pr-size-80{padding-right:80px}:host(.v-pl-size-80),.v-pl-size-80{padding-left:80px}:host(.v-p-size-112),.v-p-size-112{padding:112px}:host(.v-px-size-112),.v-px-size-112{padding-left:112px;padding-right:112px}:host(.v-py-size-112),.v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.v-pt-size-112),.v-pt-size-112{padding-top:112px}:host(.v-pb-size-112),.v-pb-size-112{padding-bottom:112px}:host(.v-pr-size-112),.v-pr-size-112{padding-right:112px}:host(.v-pl-size-112),.v-pl-size-112{padding-left:112px}:host(.v-p-size-2),.v-p-size-2{padding:2px}:host(.v-px-size-2),.v-px-size-2{padding-left:2px;padding-right:2px}:host(.v-py-size-2),.v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.v-pt-size-2),.v-pt-size-2{padding-top:2px}:host(.v-pb-size-2),.v-pb-size-2{padding-bottom:2px}:host(.v-pr-size-2),.v-pr-size-2{padding-right:2px}:host(.v-pl-size-2),.v-pl-size-2{padding-left:2px}@media (min-width: 320px){:host(.S\\:v-p-0),.S\\:v-p-0{padding:0px}:host(.S\\:v-px-0),.S\\:v-px-0{padding-left:0px;padding-right:0px}:host(.S\\:v-py-0),.S\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.S\\:v-pt-0),.S\\:v-pt-0{padding-top:0px}:host(.S\\:v-pb-0),.S\\:v-pb-0{padding-bottom:0px}:host(.S\\:v-pr-0),.S\\:v-pr-0{padding-right:0px}:host(.S\\:v-pl-0),.S\\:v-pl-0{padding-left:0px}:host(.S\\:v-p-size-0),.S\\:v-p-size-0{padding:0px}:host(.S\\:v-px-size-0),.S\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.S\\:v-py-size-0),.S\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.S\\:v-pt-size-0),.S\\:v-pt-size-0{padding-top:0px}:host(.S\\:v-pb-size-0),.S\\:v-pb-size-0{padding-bottom:0px}:host(.S\\:v-pr-size-0),.S\\:v-pr-size-0{padding-right:0px}:host(.S\\:v-pl-size-0),.S\\:v-pl-size-0{padding-left:0px}:host(.S\\:v-p-size-4),.S\\:v-p-size-4{padding:4px}:host(.S\\:v-px-size-4),.S\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.S\\:v-py-size-4),.S\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.S\\:v-pt-size-4),.S\\:v-pt-size-4{padding-top:4px}:host(.S\\:v-pb-size-4),.S\\:v-pb-size-4{padding-bottom:4px}:host(.S\\:v-pr-size-4),.S\\:v-pr-size-4{padding-right:4px}:host(.S\\:v-pl-size-4),.S\\:v-pl-size-4{padding-left:4px}:host(.S\\:v-p-size-8),.S\\:v-p-size-8{padding:8px}:host(.S\\:v-px-size-8),.S\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.S\\:v-py-size-8),.S\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.S\\:v-pt-size-8),.S\\:v-pt-size-8{padding-top:8px}:host(.S\\:v-pb-size-8),.S\\:v-pb-size-8{padding-bottom:8px}:host(.S\\:v-pr-size-8),.S\\:v-pr-size-8{padding-right:8px}:host(.S\\:v-pl-size-8),.S\\:v-pl-size-8{padding-left:8px}:host(.S\\:v-p-size-12),.S\\:v-p-size-12{padding:12px}:host(.S\\:v-px-size-12),.S\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.S\\:v-py-size-12),.S\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.S\\:v-pt-size-12),.S\\:v-pt-size-12{padding-top:12px}:host(.S\\:v-pb-size-12),.S\\:v-pb-size-12{padding-bottom:12px}:host(.S\\:v-pr-size-12),.S\\:v-pr-size-12{padding-right:12px}:host(.S\\:v-pl-size-12),.S\\:v-pl-size-12{padding-left:12px}:host(.S\\:v-p-size-16),.S\\:v-p-size-16{padding:16px}:host(.S\\:v-px-size-16),.S\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.S\\:v-py-size-16),.S\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.S\\:v-pt-size-16),.S\\:v-pt-size-16{padding-top:16px}:host(.S\\:v-pb-size-16),.S\\:v-pb-size-16{padding-bottom:16px}:host(.S\\:v-pr-size-16),.S\\:v-pr-size-16{padding-right:16px}:host(.S\\:v-pl-size-16),.S\\:v-pl-size-16{padding-left:16px}:host(.S\\:v-p-size-20),.S\\:v-p-size-20{padding:20px}:host(.S\\:v-px-size-20),.S\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.S\\:v-py-size-20),.S\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.S\\:v-pt-size-20),.S\\:v-pt-size-20{padding-top:20px}:host(.S\\:v-pb-size-20),.S\\:v-pb-size-20{padding-bottom:20px}:host(.S\\:v-pr-size-20),.S\\:v-pr-size-20{padding-right:20px}:host(.S\\:v-pl-size-20),.S\\:v-pl-size-20{padding-left:20px}:host(.S\\:v-p-size-24),.S\\:v-p-size-24{padding:24px}:host(.S\\:v-px-size-24),.S\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.S\\:v-py-size-24),.S\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.S\\:v-pt-size-24),.S\\:v-pt-size-24{padding-top:24px}:host(.S\\:v-pb-size-24),.S\\:v-pb-size-24{padding-bottom:24px}:host(.S\\:v-pr-size-24),.S\\:v-pr-size-24{padding-right:24px}:host(.S\\:v-pl-size-24),.S\\:v-pl-size-24{padding-left:24px}:host(.S\\:v-p-size-32),.S\\:v-p-size-32{padding:32px}:host(.S\\:v-px-size-32),.S\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.S\\:v-py-size-32),.S\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.S\\:v-pt-size-32),.S\\:v-pt-size-32{padding-top:32px}:host(.S\\:v-pb-size-32),.S\\:v-pb-size-32{padding-bottom:32px}:host(.S\\:v-pr-size-32),.S\\:v-pr-size-32{padding-right:32px}:host(.S\\:v-pl-size-32),.S\\:v-pl-size-32{padding-left:32px}:host(.S\\:v-p-size-40),.S\\:v-p-size-40{padding:40px}:host(.S\\:v-px-size-40),.S\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.S\\:v-py-size-40),.S\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.S\\:v-pt-size-40),.S\\:v-pt-size-40{padding-top:40px}:host(.S\\:v-pb-size-40),.S\\:v-pb-size-40{padding-bottom:40px}:host(.S\\:v-pr-size-40),.S\\:v-pr-size-40{padding-right:40px}:host(.S\\:v-pl-size-40),.S\\:v-pl-size-40{padding-left:40px}:host(.S\\:v-p-size-48),.S\\:v-p-size-48{padding:48px}:host(.S\\:v-px-size-48),.S\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.S\\:v-py-size-48),.S\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.S\\:v-pt-size-48),.S\\:v-pt-size-48{padding-top:48px}:host(.S\\:v-pb-size-48),.S\\:v-pb-size-48{padding-bottom:48px}:host(.S\\:v-pr-size-48),.S\\:v-pr-size-48{padding-right:48px}:host(.S\\:v-pl-size-48),.S\\:v-pl-size-48{padding-left:48px}:host(.S\\:v-p-size-64),.S\\:v-p-size-64{padding:64px}:host(.S\\:v-px-size-64),.S\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.S\\:v-py-size-64),.S\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.S\\:v-pt-size-64),.S\\:v-pt-size-64{padding-top:64px}:host(.S\\:v-pb-size-64),.S\\:v-pb-size-64{padding-bottom:64px}:host(.S\\:v-pr-size-64),.S\\:v-pr-size-64{padding-right:64px}:host(.S\\:v-pl-size-64),.S\\:v-pl-size-64{padding-left:64px}:host(.S\\:v-p-size-72),.S\\:v-p-size-72{padding:72px}:host(.S\\:v-px-size-72),.S\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.S\\:v-py-size-72),.S\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.S\\:v-pt-size-72),.S\\:v-pt-size-72{padding-top:72px}:host(.S\\:v-pb-size-72),.S\\:v-pb-size-72{padding-bottom:72px}:host(.S\\:v-pr-size-72),.S\\:v-pr-size-72{padding-right:72px}:host(.S\\:v-pl-size-72),.S\\:v-pl-size-72{padding-left:72px}:host(.S\\:v-p-size-80),.S\\:v-p-size-80{padding:80px}:host(.S\\:v-px-size-80),.S\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.S\\:v-py-size-80),.S\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.S\\:v-pt-size-80),.S\\:v-pt-size-80{padding-top:80px}:host(.S\\:v-pb-size-80),.S\\:v-pb-size-80{padding-bottom:80px}:host(.S\\:v-pr-size-80),.S\\:v-pr-size-80{padding-right:80px}:host(.S\\:v-pl-size-80),.S\\:v-pl-size-80{padding-left:80px}:host(.S\\:v-p-size-112),.S\\:v-p-size-112{padding:112px}:host(.S\\:v-px-size-112),.S\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.S\\:v-py-size-112),.S\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.S\\:v-pt-size-112),.S\\:v-pt-size-112{padding-top:112px}:host(.S\\:v-pb-size-112),.S\\:v-pb-size-112{padding-bottom:112px}:host(.S\\:v-pr-size-112),.S\\:v-pr-size-112{padding-right:112px}:host(.S\\:v-pl-size-112),.S\\:v-pl-size-112{padding-left:112px}:host(.S\\:v-p-size-2),.S\\:v-p-size-2{padding:2px}:host(.S\\:v-px-size-2),.S\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.S\\:v-py-size-2),.S\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.S\\:v-pt-size-2),.S\\:v-pt-size-2{padding-top:2px}:host(.S\\:v-pb-size-2),.S\\:v-pb-size-2{padding-bottom:2px}:host(.S\\:v-pr-size-2),.S\\:v-pr-size-2{padding-right:2px}:host(.S\\:v-pl-size-2),.S\\:v-pl-size-2{padding-left:2px}}@media (min-width: 768px){:host(.M\\:v-p-0),.M\\:v-p-0{padding:0px}:host(.M\\:v-px-0),.M\\:v-px-0{padding-left:0px;padding-right:0px}:host(.M\\:v-py-0),.M\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.M\\:v-pt-0),.M\\:v-pt-0{padding-top:0px}:host(.M\\:v-pb-0),.M\\:v-pb-0{padding-bottom:0px}:host(.M\\:v-pr-0),.M\\:v-pr-0{padding-right:0px}:host(.M\\:v-pl-0),.M\\:v-pl-0{padding-left:0px}:host(.M\\:v-p-size-0),.M\\:v-p-size-0{padding:0px}:host(.M\\:v-px-size-0),.M\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.M\\:v-py-size-0),.M\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.M\\:v-pt-size-0),.M\\:v-pt-size-0{padding-top:0px}:host(.M\\:v-pb-size-0),.M\\:v-pb-size-0{padding-bottom:0px}:host(.M\\:v-pr-size-0),.M\\:v-pr-size-0{padding-right:0px}:host(.M\\:v-pl-size-0),.M\\:v-pl-size-0{padding-left:0px}:host(.M\\:v-p-size-4),.M\\:v-p-size-4{padding:4px}:host(.M\\:v-px-size-4),.M\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.M\\:v-py-size-4),.M\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.M\\:v-pt-size-4),.M\\:v-pt-size-4{padding-top:4px}:host(.M\\:v-pb-size-4),.M\\:v-pb-size-4{padding-bottom:4px}:host(.M\\:v-pr-size-4),.M\\:v-pr-size-4{padding-right:4px}:host(.M\\:v-pl-size-4),.M\\:v-pl-size-4{padding-left:4px}:host(.M\\:v-p-size-8),.M\\:v-p-size-8{padding:8px}:host(.M\\:v-px-size-8),.M\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.M\\:v-py-size-8),.M\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.M\\:v-pt-size-8),.M\\:v-pt-size-8{padding-top:8px}:host(.M\\:v-pb-size-8),.M\\:v-pb-size-8{padding-bottom:8px}:host(.M\\:v-pr-size-8),.M\\:v-pr-size-8{padding-right:8px}:host(.M\\:v-pl-size-8),.M\\:v-pl-size-8{padding-left:8px}:host(.M\\:v-p-size-12),.M\\:v-p-size-12{padding:12px}:host(.M\\:v-px-size-12),.M\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.M\\:v-py-size-12),.M\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.M\\:v-pt-size-12),.M\\:v-pt-size-12{padding-top:12px}:host(.M\\:v-pb-size-12),.M\\:v-pb-size-12{padding-bottom:12px}:host(.M\\:v-pr-size-12),.M\\:v-pr-size-12{padding-right:12px}:host(.M\\:v-pl-size-12),.M\\:v-pl-size-12{padding-left:12px}:host(.M\\:v-p-size-16),.M\\:v-p-size-16{padding:16px}:host(.M\\:v-px-size-16),.M\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.M\\:v-py-size-16),.M\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.M\\:v-pt-size-16),.M\\:v-pt-size-16{padding-top:16px}:host(.M\\:v-pb-size-16),.M\\:v-pb-size-16{padding-bottom:16px}:host(.M\\:v-pr-size-16),.M\\:v-pr-size-16{padding-right:16px}:host(.M\\:v-pl-size-16),.M\\:v-pl-size-16{padding-left:16px}:host(.M\\:v-p-size-20),.M\\:v-p-size-20{padding:20px}:host(.M\\:v-px-size-20),.M\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.M\\:v-py-size-20),.M\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.M\\:v-pt-size-20),.M\\:v-pt-size-20{padding-top:20px}:host(.M\\:v-pb-size-20),.M\\:v-pb-size-20{padding-bottom:20px}:host(.M\\:v-pr-size-20),.M\\:v-pr-size-20{padding-right:20px}:host(.M\\:v-pl-size-20),.M\\:v-pl-size-20{padding-left:20px}:host(.M\\:v-p-size-24),.M\\:v-p-size-24{padding:24px}:host(.M\\:v-px-size-24),.M\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.M\\:v-py-size-24),.M\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.M\\:v-pt-size-24),.M\\:v-pt-size-24{padding-top:24px}:host(.M\\:v-pb-size-24),.M\\:v-pb-size-24{padding-bottom:24px}:host(.M\\:v-pr-size-24),.M\\:v-pr-size-24{padding-right:24px}:host(.M\\:v-pl-size-24),.M\\:v-pl-size-24{padding-left:24px}:host(.M\\:v-p-size-32),.M\\:v-p-size-32{padding:32px}:host(.M\\:v-px-size-32),.M\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.M\\:v-py-size-32),.M\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.M\\:v-pt-size-32),.M\\:v-pt-size-32{padding-top:32px}:host(.M\\:v-pb-size-32),.M\\:v-pb-size-32{padding-bottom:32px}:host(.M\\:v-pr-size-32),.M\\:v-pr-size-32{padding-right:32px}:host(.M\\:v-pl-size-32),.M\\:v-pl-size-32{padding-left:32px}:host(.M\\:v-p-size-40),.M\\:v-p-size-40{padding:40px}:host(.M\\:v-px-size-40),.M\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.M\\:v-py-size-40),.M\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.M\\:v-pt-size-40),.M\\:v-pt-size-40{padding-top:40px}:host(.M\\:v-pb-size-40),.M\\:v-pb-size-40{padding-bottom:40px}:host(.M\\:v-pr-size-40),.M\\:v-pr-size-40{padding-right:40px}:host(.M\\:v-pl-size-40),.M\\:v-pl-size-40{padding-left:40px}:host(.M\\:v-p-size-48),.M\\:v-p-size-48{padding:48px}:host(.M\\:v-px-size-48),.M\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.M\\:v-py-size-48),.M\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.M\\:v-pt-size-48),.M\\:v-pt-size-48{padding-top:48px}:host(.M\\:v-pb-size-48),.M\\:v-pb-size-48{padding-bottom:48px}:host(.M\\:v-pr-size-48),.M\\:v-pr-size-48{padding-right:48px}:host(.M\\:v-pl-size-48),.M\\:v-pl-size-48{padding-left:48px}:host(.M\\:v-p-size-64),.M\\:v-p-size-64{padding:64px}:host(.M\\:v-px-size-64),.M\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.M\\:v-py-size-64),.M\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.M\\:v-pt-size-64),.M\\:v-pt-size-64{padding-top:64px}:host(.M\\:v-pb-size-64),.M\\:v-pb-size-64{padding-bottom:64px}:host(.M\\:v-pr-size-64),.M\\:v-pr-size-64{padding-right:64px}:host(.M\\:v-pl-size-64),.M\\:v-pl-size-64{padding-left:64px}:host(.M\\:v-p-size-72),.M\\:v-p-size-72{padding:72px}:host(.M\\:v-px-size-72),.M\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.M\\:v-py-size-72),.M\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.M\\:v-pt-size-72),.M\\:v-pt-size-72{padding-top:72px}:host(.M\\:v-pb-size-72),.M\\:v-pb-size-72{padding-bottom:72px}:host(.M\\:v-pr-size-72),.M\\:v-pr-size-72{padding-right:72px}:host(.M\\:v-pl-size-72),.M\\:v-pl-size-72{padding-left:72px}:host(.M\\:v-p-size-80),.M\\:v-p-size-80{padding:80px}:host(.M\\:v-px-size-80),.M\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.M\\:v-py-size-80),.M\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.M\\:v-pt-size-80),.M\\:v-pt-size-80{padding-top:80px}:host(.M\\:v-pb-size-80),.M\\:v-pb-size-80{padding-bottom:80px}:host(.M\\:v-pr-size-80),.M\\:v-pr-size-80{padding-right:80px}:host(.M\\:v-pl-size-80),.M\\:v-pl-size-80{padding-left:80px}:host(.M\\:v-p-size-112),.M\\:v-p-size-112{padding:112px}:host(.M\\:v-px-size-112),.M\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.M\\:v-py-size-112),.M\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.M\\:v-pt-size-112),.M\\:v-pt-size-112{padding-top:112px}:host(.M\\:v-pb-size-112),.M\\:v-pb-size-112{padding-bottom:112px}:host(.M\\:v-pr-size-112),.M\\:v-pr-size-112{padding-right:112px}:host(.M\\:v-pl-size-112),.M\\:v-pl-size-112{padding-left:112px}:host(.M\\:v-p-size-2),.M\\:v-p-size-2{padding:2px}:host(.M\\:v-px-size-2),.M\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.M\\:v-py-size-2),.M\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.M\\:v-pt-size-2),.M\\:v-pt-size-2{padding-top:2px}:host(.M\\:v-pb-size-2),.M\\:v-pb-size-2{padding-bottom:2px}:host(.M\\:v-pr-size-2),.M\\:v-pr-size-2{padding-right:2px}:host(.M\\:v-pl-size-2),.M\\:v-pl-size-2{padding-left:2px}}@media (min-width: 1024px){:host(.L\\:v-p-0),.L\\:v-p-0{padding:0px}:host(.L\\:v-px-0),.L\\:v-px-0{padding-left:0px;padding-right:0px}:host(.L\\:v-py-0),.L\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.L\\:v-pt-0),.L\\:v-pt-0{padding-top:0px}:host(.L\\:v-pb-0),.L\\:v-pb-0{padding-bottom:0px}:host(.L\\:v-pr-0),.L\\:v-pr-0{padding-right:0px}:host(.L\\:v-pl-0),.L\\:v-pl-0{padding-left:0px}:host(.L\\:v-p-size-0),.L\\:v-p-size-0{padding:0px}:host(.L\\:v-px-size-0),.L\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.L\\:v-py-size-0),.L\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.L\\:v-pt-size-0),.L\\:v-pt-size-0{padding-top:0px}:host(.L\\:v-pb-size-0),.L\\:v-pb-size-0{padding-bottom:0px}:host(.L\\:v-pr-size-0),.L\\:v-pr-size-0{padding-right:0px}:host(.L\\:v-pl-size-0),.L\\:v-pl-size-0{padding-left:0px}:host(.L\\:v-p-size-4),.L\\:v-p-size-4{padding:4px}:host(.L\\:v-px-size-4),.L\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.L\\:v-py-size-4),.L\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.L\\:v-pt-size-4),.L\\:v-pt-size-4{padding-top:4px}:host(.L\\:v-pb-size-4),.L\\:v-pb-size-4{padding-bottom:4px}:host(.L\\:v-pr-size-4),.L\\:v-pr-size-4{padding-right:4px}:host(.L\\:v-pl-size-4),.L\\:v-pl-size-4{padding-left:4px}:host(.L\\:v-p-size-8),.L\\:v-p-size-8{padding:8px}:host(.L\\:v-px-size-8),.L\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.L\\:v-py-size-8),.L\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.L\\:v-pt-size-8),.L\\:v-pt-size-8{padding-top:8px}:host(.L\\:v-pb-size-8),.L\\:v-pb-size-8{padding-bottom:8px}:host(.L\\:v-pr-size-8),.L\\:v-pr-size-8{padding-right:8px}:host(.L\\:v-pl-size-8),.L\\:v-pl-size-8{padding-left:8px}:host(.L\\:v-p-size-12),.L\\:v-p-size-12{padding:12px}:host(.L\\:v-px-size-12),.L\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.L\\:v-py-size-12),.L\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.L\\:v-pt-size-12),.L\\:v-pt-size-12{padding-top:12px}:host(.L\\:v-pb-size-12),.L\\:v-pb-size-12{padding-bottom:12px}:host(.L\\:v-pr-size-12),.L\\:v-pr-size-12{padding-right:12px}:host(.L\\:v-pl-size-12),.L\\:v-pl-size-12{padding-left:12px}:host(.L\\:v-p-size-16),.L\\:v-p-size-16{padding:16px}:host(.L\\:v-px-size-16),.L\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.L\\:v-py-size-16),.L\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.L\\:v-pt-size-16),.L\\:v-pt-size-16{padding-top:16px}:host(.L\\:v-pb-size-16),.L\\:v-pb-size-16{padding-bottom:16px}:host(.L\\:v-pr-size-16),.L\\:v-pr-size-16{padding-right:16px}:host(.L\\:v-pl-size-16),.L\\:v-pl-size-16{padding-left:16px}:host(.L\\:v-p-size-20),.L\\:v-p-size-20{padding:20px}:host(.L\\:v-px-size-20),.L\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.L\\:v-py-size-20),.L\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.L\\:v-pt-size-20),.L\\:v-pt-size-20{padding-top:20px}:host(.L\\:v-pb-size-20),.L\\:v-pb-size-20{padding-bottom:20px}:host(.L\\:v-pr-size-20),.L\\:v-pr-size-20{padding-right:20px}:host(.L\\:v-pl-size-20),.L\\:v-pl-size-20{padding-left:20px}:host(.L\\:v-p-size-24),.L\\:v-p-size-24{padding:24px}:host(.L\\:v-px-size-24),.L\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.L\\:v-py-size-24),.L\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.L\\:v-pt-size-24),.L\\:v-pt-size-24{padding-top:24px}:host(.L\\:v-pb-size-24),.L\\:v-pb-size-24{padding-bottom:24px}:host(.L\\:v-pr-size-24),.L\\:v-pr-size-24{padding-right:24px}:host(.L\\:v-pl-size-24),.L\\:v-pl-size-24{padding-left:24px}:host(.L\\:v-p-size-32),.L\\:v-p-size-32{padding:32px}:host(.L\\:v-px-size-32),.L\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.L\\:v-py-size-32),.L\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.L\\:v-pt-size-32),.L\\:v-pt-size-32{padding-top:32px}:host(.L\\:v-pb-size-32),.L\\:v-pb-size-32{padding-bottom:32px}:host(.L\\:v-pr-size-32),.L\\:v-pr-size-32{padding-right:32px}:host(.L\\:v-pl-size-32),.L\\:v-pl-size-32{padding-left:32px}:host(.L\\:v-p-size-40),.L\\:v-p-size-40{padding:40px}:host(.L\\:v-px-size-40),.L\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.L\\:v-py-size-40),.L\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.L\\:v-pt-size-40),.L\\:v-pt-size-40{padding-top:40px}:host(.L\\:v-pb-size-40),.L\\:v-pb-size-40{padding-bottom:40px}:host(.L\\:v-pr-size-40),.L\\:v-pr-size-40{padding-right:40px}:host(.L\\:v-pl-size-40),.L\\:v-pl-size-40{padding-left:40px}:host(.L\\:v-p-size-48),.L\\:v-p-size-48{padding:48px}:host(.L\\:v-px-size-48),.L\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.L\\:v-py-size-48),.L\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.L\\:v-pt-size-48),.L\\:v-pt-size-48{padding-top:48px}:host(.L\\:v-pb-size-48),.L\\:v-pb-size-48{padding-bottom:48px}:host(.L\\:v-pr-size-48),.L\\:v-pr-size-48{padding-right:48px}:host(.L\\:v-pl-size-48),.L\\:v-pl-size-48{padding-left:48px}:host(.L\\:v-p-size-64),.L\\:v-p-size-64{padding:64px}:host(.L\\:v-px-size-64),.L\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.L\\:v-py-size-64),.L\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.L\\:v-pt-size-64),.L\\:v-pt-size-64{padding-top:64px}:host(.L\\:v-pb-size-64),.L\\:v-pb-size-64{padding-bottom:64px}:host(.L\\:v-pr-size-64),.L\\:v-pr-size-64{padding-right:64px}:host(.L\\:v-pl-size-64),.L\\:v-pl-size-64{padding-left:64px}:host(.L\\:v-p-size-72),.L\\:v-p-size-72{padding:72px}:host(.L\\:v-px-size-72),.L\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.L\\:v-py-size-72),.L\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.L\\:v-pt-size-72),.L\\:v-pt-size-72{padding-top:72px}:host(.L\\:v-pb-size-72),.L\\:v-pb-size-72{padding-bottom:72px}:host(.L\\:v-pr-size-72),.L\\:v-pr-size-72{padding-right:72px}:host(.L\\:v-pl-size-72),.L\\:v-pl-size-72{padding-left:72px}:host(.L\\:v-p-size-80),.L\\:v-p-size-80{padding:80px}:host(.L\\:v-px-size-80),.L\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.L\\:v-py-size-80),.L\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.L\\:v-pt-size-80),.L\\:v-pt-size-80{padding-top:80px}:host(.L\\:v-pb-size-80),.L\\:v-pb-size-80{padding-bottom:80px}:host(.L\\:v-pr-size-80),.L\\:v-pr-size-80{padding-right:80px}:host(.L\\:v-pl-size-80),.L\\:v-pl-size-80{padding-left:80px}:host(.L\\:v-p-size-112),.L\\:v-p-size-112{padding:112px}:host(.L\\:v-px-size-112),.L\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.L\\:v-py-size-112),.L\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.L\\:v-pt-size-112),.L\\:v-pt-size-112{padding-top:112px}:host(.L\\:v-pb-size-112),.L\\:v-pb-size-112{padding-bottom:112px}:host(.L\\:v-pr-size-112),.L\\:v-pr-size-112{padding-right:112px}:host(.L\\:v-pl-size-112),.L\\:v-pl-size-112{padding-left:112px}:host(.L\\:v-p-size-2),.L\\:v-p-size-2{padding:2px}:host(.L\\:v-px-size-2),.L\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.L\\:v-py-size-2),.L\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.L\\:v-pt-size-2),.L\\:v-pt-size-2{padding-top:2px}:host(.L\\:v-pb-size-2),.L\\:v-pb-size-2{padding-bottom:2px}:host(.L\\:v-pr-size-2),.L\\:v-pr-size-2{padding-right:2px}:host(.L\\:v-pl-size-2),.L\\:v-pl-size-2{padding-left:2px}}@media (min-width: 1440px){:host(.XL\\:v-p-0),.XL\\:v-p-0{padding:0px}:host(.XL\\:v-px-0),.XL\\:v-px-0{padding-left:0px;padding-right:0px}:host(.XL\\:v-py-0),.XL\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.XL\\:v-pt-0),.XL\\:v-pt-0{padding-top:0px}:host(.XL\\:v-pb-0),.XL\\:v-pb-0{padding-bottom:0px}:host(.XL\\:v-pr-0),.XL\\:v-pr-0{padding-right:0px}:host(.XL\\:v-pl-0),.XL\\:v-pl-0{padding-left:0px}:host(.XL\\:v-p-size-0),.XL\\:v-p-size-0{padding:0px}:host(.XL\\:v-px-size-0),.XL\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.XL\\:v-py-size-0),.XL\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.XL\\:v-pt-size-0),.XL\\:v-pt-size-0{padding-top:0px}:host(.XL\\:v-pb-size-0),.XL\\:v-pb-size-0{padding-bottom:0px}:host(.XL\\:v-pr-size-0),.XL\\:v-pr-size-0{padding-right:0px}:host(.XL\\:v-pl-size-0),.XL\\:v-pl-size-0{padding-left:0px}:host(.XL\\:v-p-size-4),.XL\\:v-p-size-4{padding:4px}:host(.XL\\:v-px-size-4),.XL\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.XL\\:v-py-size-4),.XL\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.XL\\:v-pt-size-4),.XL\\:v-pt-size-4{padding-top:4px}:host(.XL\\:v-pb-size-4),.XL\\:v-pb-size-4{padding-bottom:4px}:host(.XL\\:v-pr-size-4),.XL\\:v-pr-size-4{padding-right:4px}:host(.XL\\:v-pl-size-4),.XL\\:v-pl-size-4{padding-left:4px}:host(.XL\\:v-p-size-8),.XL\\:v-p-size-8{padding:8px}:host(.XL\\:v-px-size-8),.XL\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.XL\\:v-py-size-8),.XL\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.XL\\:v-pt-size-8),.XL\\:v-pt-size-8{padding-top:8px}:host(.XL\\:v-pb-size-8),.XL\\:v-pb-size-8{padding-bottom:8px}:host(.XL\\:v-pr-size-8),.XL\\:v-pr-size-8{padding-right:8px}:host(.XL\\:v-pl-size-8),.XL\\:v-pl-size-8{padding-left:8px}:host(.XL\\:v-p-size-12),.XL\\:v-p-size-12{padding:12px}:host(.XL\\:v-px-size-12),.XL\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.XL\\:v-py-size-12),.XL\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.XL\\:v-pt-size-12),.XL\\:v-pt-size-12{padding-top:12px}:host(.XL\\:v-pb-size-12),.XL\\:v-pb-size-12{padding-bottom:12px}:host(.XL\\:v-pr-size-12),.XL\\:v-pr-size-12{padding-right:12px}:host(.XL\\:v-pl-size-12),.XL\\:v-pl-size-12{padding-left:12px}:host(.XL\\:v-p-size-16),.XL\\:v-p-size-16{padding:16px}:host(.XL\\:v-px-size-16),.XL\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.XL\\:v-py-size-16),.XL\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.XL\\:v-pt-size-16),.XL\\:v-pt-size-16{padding-top:16px}:host(.XL\\:v-pb-size-16),.XL\\:v-pb-size-16{padding-bottom:16px}:host(.XL\\:v-pr-size-16),.XL\\:v-pr-size-16{padding-right:16px}:host(.XL\\:v-pl-size-16),.XL\\:v-pl-size-16{padding-left:16px}:host(.XL\\:v-p-size-20),.XL\\:v-p-size-20{padding:20px}:host(.XL\\:v-px-size-20),.XL\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.XL\\:v-py-size-20),.XL\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.XL\\:v-pt-size-20),.XL\\:v-pt-size-20{padding-top:20px}:host(.XL\\:v-pb-size-20),.XL\\:v-pb-size-20{padding-bottom:20px}:host(.XL\\:v-pr-size-20),.XL\\:v-pr-size-20{padding-right:20px}:host(.XL\\:v-pl-size-20),.XL\\:v-pl-size-20{padding-left:20px}:host(.XL\\:v-p-size-24),.XL\\:v-p-size-24{padding:24px}:host(.XL\\:v-px-size-24),.XL\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.XL\\:v-py-size-24),.XL\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.XL\\:v-pt-size-24),.XL\\:v-pt-size-24{padding-top:24px}:host(.XL\\:v-pb-size-24),.XL\\:v-pb-size-24{padding-bottom:24px}:host(.XL\\:v-pr-size-24),.XL\\:v-pr-size-24{padding-right:24px}:host(.XL\\:v-pl-size-24),.XL\\:v-pl-size-24{padding-left:24px}:host(.XL\\:v-p-size-32),.XL\\:v-p-size-32{padding:32px}:host(.XL\\:v-px-size-32),.XL\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.XL\\:v-py-size-32),.XL\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.XL\\:v-pt-size-32),.XL\\:v-pt-size-32{padding-top:32px}:host(.XL\\:v-pb-size-32),.XL\\:v-pb-size-32{padding-bottom:32px}:host(.XL\\:v-pr-size-32),.XL\\:v-pr-size-32{padding-right:32px}:host(.XL\\:v-pl-size-32),.XL\\:v-pl-size-32{padding-left:32px}:host(.XL\\:v-p-size-40),.XL\\:v-p-size-40{padding:40px}:host(.XL\\:v-px-size-40),.XL\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.XL\\:v-py-size-40),.XL\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.XL\\:v-pt-size-40),.XL\\:v-pt-size-40{padding-top:40px}:host(.XL\\:v-pb-size-40),.XL\\:v-pb-size-40{padding-bottom:40px}:host(.XL\\:v-pr-size-40),.XL\\:v-pr-size-40{padding-right:40px}:host(.XL\\:v-pl-size-40),.XL\\:v-pl-size-40{padding-left:40px}:host(.XL\\:v-p-size-48),.XL\\:v-p-size-48{padding:48px}:host(.XL\\:v-px-size-48),.XL\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.XL\\:v-py-size-48),.XL\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.XL\\:v-pt-size-48),.XL\\:v-pt-size-48{padding-top:48px}:host(.XL\\:v-pb-size-48),.XL\\:v-pb-size-48{padding-bottom:48px}:host(.XL\\:v-pr-size-48),.XL\\:v-pr-size-48{padding-right:48px}:host(.XL\\:v-pl-size-48),.XL\\:v-pl-size-48{padding-left:48px}:host(.XL\\:v-p-size-64),.XL\\:v-p-size-64{padding:64px}:host(.XL\\:v-px-size-64),.XL\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.XL\\:v-py-size-64),.XL\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.XL\\:v-pt-size-64),.XL\\:v-pt-size-64{padding-top:64px}:host(.XL\\:v-pb-size-64),.XL\\:v-pb-size-64{padding-bottom:64px}:host(.XL\\:v-pr-size-64),.XL\\:v-pr-size-64{padding-right:64px}:host(.XL\\:v-pl-size-64),.XL\\:v-pl-size-64{padding-left:64px}:host(.XL\\:v-p-size-72),.XL\\:v-p-size-72{padding:72px}:host(.XL\\:v-px-size-72),.XL\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.XL\\:v-py-size-72),.XL\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.XL\\:v-pt-size-72),.XL\\:v-pt-size-72{padding-top:72px}:host(.XL\\:v-pb-size-72),.XL\\:v-pb-size-72{padding-bottom:72px}:host(.XL\\:v-pr-size-72),.XL\\:v-pr-size-72{padding-right:72px}:host(.XL\\:v-pl-size-72),.XL\\:v-pl-size-72{padding-left:72px}:host(.XL\\:v-p-size-80),.XL\\:v-p-size-80{padding:80px}:host(.XL\\:v-px-size-80),.XL\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.XL\\:v-py-size-80),.XL\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.XL\\:v-pt-size-80),.XL\\:v-pt-size-80{padding-top:80px}:host(.XL\\:v-pb-size-80),.XL\\:v-pb-size-80{padding-bottom:80px}:host(.XL\\:v-pr-size-80),.XL\\:v-pr-size-80{padding-right:80px}:host(.XL\\:v-pl-size-80),.XL\\:v-pl-size-80{padding-left:80px}:host(.XL\\:v-p-size-112),.XL\\:v-p-size-112{padding:112px}:host(.XL\\:v-px-size-112),.XL\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.XL\\:v-py-size-112),.XL\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.XL\\:v-pt-size-112),.XL\\:v-pt-size-112{padding-top:112px}:host(.XL\\:v-pb-size-112),.XL\\:v-pb-size-112{padding-bottom:112px}:host(.XL\\:v-pr-size-112),.XL\\:v-pr-size-112{padding-right:112px}:host(.XL\\:v-pl-size-112),.XL\\:v-pl-size-112{padding-left:112px}:host(.XL\\:v-p-size-2),.XL\\:v-p-size-2{padding:2px}:host(.XL\\:v-px-size-2),.XL\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.XL\\:v-py-size-2),.XL\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.XL\\:v-pt-size-2),.XL\\:v-pt-size-2{padding-top:2px}:host(.XL\\:v-pb-size-2),.XL\\:v-pb-size-2{padding-bottom:2px}:host(.XL\\:v-pr-size-2),.XL\\:v-pr-size-2{padding-right:2px}:host(.XL\\:v-pl-size-2),.XL\\:v-pl-size-2{padding-left:2px}}:host{display:none;box-sizing:border-box;overflow-y:auto;text-align:left;position:fixed;top:0px;left:0px;right:0px;bottom:0px;align-items:flex-start}.modal-dialog{margin-left:auto;margin-right:auto;margin-top:64px;margin-bottom:64px}:host(.align-center){align-items:center}.modal-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-shadow:var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16));border-radius:12px;box-sizing:border-box;pointer-events:auto;overflow:hidden}:host(.animation) .modal-container{animation-name:animatetop;animation-duration:0.4s}.vega-modal-header{display:flex;align-items:flex-start;flex-direction:row;gap:8px;padding-bottom:0px}.vega-modal-header.vega-modal-header-with-title,.vega-modal-header.vega-modal-header-with-icon{padding-bottom:16px}.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon){padding-top:0px;padding-bottom:0px}.vega-modal-header-with-content-scroll.vega-modal-header-with-icon,.vega-modal-header-with-content-scroll.vega-modal-header-with-title{box-shadow:var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))}.vega-modal-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px;flex-grow:1;word-break:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}.vega-modal-close-btn{cursor:pointer}.vega-modal-content{padding-top:0px;padding-bottom:0px}.vega-modal-content-with-scroll{padding-top:24px;padding-bottom:24px;overflow:auto}.vega-modal-footer:not(.vega-modal-footer-with-slot){padding-top:0px}.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot){padding-top:0px;padding-bottom:0px}.vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot{box-shadow:var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))}.vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot.vega-modal-footer-with-content-scroll-to-bottom{box-shadow:var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))}@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClose = createEvent(this, "vegaClose", 7);
+    this.close = createEvent(this, "close", 7);
+    this.vegaOpen = createEvent(this, "vegaOpen", 7);
+    this.modalOpen = createEvent(this, "modalOpen", 7);
+    this.globalSlimmers = {};
+    this.nestedModalController = new VegaNestedModalController();
+    this.openStateController = new VegaModalOpenStateController();
+    this.mobileController = new VegaModalMobileController();
+    this.scrollController = new VegaModalScrollController();
+    this.layoutController = new VegaModalLayoutController();
+    this.backdropController = new VegaModalBackdropController();
+    this.openedModalStackController = new VegaModalOpenedModalStackController();
+    this.zIndexController = new VegaModalZIndexController();
+    this.renderer = new VegaModalRenderer();
+    this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
+    this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.renderer.getModalContainerRef());
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(vegaModalDisableBodyScrollCss);
+    this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
+    /**
+     * Provides options for controlling the behavior of the backdrop.
+     * - `default`:
+     *      indicates that the user can close the modal
+     *      by clicking on the backdrop.
+     * - `static`:
+     *      means that the user cannot close the modal by
+     *      clicking on the backdrop.
+     * - `none`:
+     *      specifies that the backdrop will not be rendered.
+     *
+     * _Note_:
+     *    When changing this value, a page refresh is required
+     *    for the changes to take effect.
+     *
+     * @vegaVersion 1.0.6
+     */
+    this.backdrop = 'default';
+    /**
+     * Determines whether the modal is initially open.
+     *
+     * @vegaVersion 1.0.6
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.open = false;
+    /**
+     * Specifies whether the modal uses an animated transition
+     *    when it appears.
+     *
+     * @vegaVersion 1.0.11
+     */
+    this.animation = false;
+    /**
+     * Represents the title displayed within the modal.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.modalTitle = '';
+    /**
+     * Specifies the background color of the modal's backdrop.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.backdropColor = 'default';
+    /**
+     * Determines whether the modal is vertically centered
+     *    on the screen.
+     * @deprecated This property will be removed soon and replaced by prop isVerticallyCentered
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.isVerticallyCenter = false;
+    /**
+     * Determines whether the modal is vertically centered
+     *    on the screen.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.isVerticallyCentered = false;
+    /**
+     * Determines whether the modal displays a close button to
+     *    allow hiding or closing of the modal.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.showCloseButton = true;
+    /**
+     * Specifies the amount of space or padding within the modal.
+     *
+     * It can be set as a ResponsiveType or any size value.
+     *
+     * @vegaVersion 1.0.10
+     */
+    this.padding = 'size-24';
+    /**
+     * Provides a callback function that is triggered when a user clicks the
+     *    close button located in the top right corner of the modal.
+     *
+     * If the callback function returns `true`, the modal will be closed.
+     *
+     * If the callback function returns `false` or does not return any value, the modal will remain open.
+     *
+     * @vegaVersion 1.22.0
+     */
+    this.handleClose = undefined;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   */
+  /* istanbul ignore next */
+  watchSize() {
+  }
+  watchOpen() {
+  }
+  disconnectedCallback() {
+    this.open = false;
+  }
+  /**
+   * Clicking on a non-static current modal should close this modal, not other modals.
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  listenDataTarget(e) {
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  listenDataDismiss(e) {
+  }
+  /**
+   * Invoke this method to show or hide the modal.
+   *
+   * @vegaVersion 1.0.6
+   */
+  /* The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next
+   *
+   */
+  async modal(option) {
+    switch (option) {
+      case 'show':
+        this.open = true;
+        break;
+      case 'hide':
+        this.open = false;
+        break;
+    }
+  }
+  render() {
+    return sanitizeVegaComponent(this.renderer.render(), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "size": ["watchSize"],
+    "open": ["watchOpen"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaModal.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "nestedModalController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "mobileController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "scrollController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "layoutController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "backdropController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openedModalStackController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "zIndexController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "renderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaModal.prototype, "openEventEmitter", void 0);