@zeedhi/vuetify 1.38.2 → 1.41.0

package/dist/zd-vuetify.umd.js

@@ -1,6 +1,6 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@panter/vue-i18next'), require('@zeedhi/core'), require('vue-apexcharts'), require('sl-vue-tree'), require('sl-vue-tree/dist/sl-vue-tree-minimal.css'), require('sortablejs'), require('hooper/dist/hooper.css'), require('zeedhi-vue-treeselect/dist/vue-treeselect.css'), require('vue'), require('vue-property-decorator'), require('@zeedhi/common'), require('vue-class-component'), require('prismjs'), require('prismjs/themes/prism.css'), require('lodash.debounce'), require('lodash.isundefined'), require('@zeedhi/vue'), require('lodash.kebabcase'), require('lodash.camelcase'), require('vuetify/dist/vuetify.min.css')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@panter/vue-i18next', '@zeedhi/core', 'vue-apexcharts', 'sl-vue-tree', 'sl-vue-tree/dist/sl-vue-tree-minimal.css', 'sortablejs', 'hooper/dist/hooper.css', 'zeedhi-vue-treeselect/dist/vue-treeselect.css', 'vue', 'vue-property-decorator', '@zeedhi/common', 'vue-class-component', 'prismjs', 'prismjs/themes/prism.css', 'lodash.debounce', 'lodash.isundefined', '@zeedhi/vue', 'lodash.kebabcase', 'lodash.camelcase', 'vuetify/dist/vuetify.min.css'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@panter/vue-i18next'), require('@zeedhi/core'), require('vue-apexcharts'), require('sl-vue-tree'), require('sl-vue-tree/dist/sl-vue-tree-minimal.css'), require('sortablejs'), require('hooper/dist/hooper.css'), require('@zeedhi/zd-vue-treeselect/dist/vue-treeselect.css'), require('vue'), require('vue-property-decorator'), require('@zeedhi/common'), require('vue-class-component'), require('prismjs'), require('prismjs/themes/prism.css'), require('lodash.debounce'), require('lodash.isundefined'), require('@zeedhi/vue'), require('lodash.kebabcase'), require('lodash.camelcase'), require('vuetify/dist/vuetify.min.css')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@panter/vue-i18next', '@zeedhi/core', 'vue-apexcharts', 'sl-vue-tree', 'sl-vue-tree/dist/sl-vue-tree-minimal.css', 'sortablejs', 'hooper/dist/hooper.css', '@zeedhi/zd-vue-treeselect/dist/vue-treeselect.css', 'vue', 'vue-property-decorator', '@zeedhi/common', 'vue-class-component', 'prismjs', 'prismjs/themes/prism.css', 'lodash.debounce', 'lodash.isundefined', '@zeedhi/vue', 'lodash.kebabcase', 'lodash.camelcase', 'vuetify/dist/vuetify.min.css'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/vuetify"] = {}, global["@panter/vue-i18next"], global["@zeedhi/core"], global["vue-apexcharts"], global["sl-vue-tree"], null, global.sortablejs, null, null, global.vue, global["vue-property-decorator"], global["@zeedhi/common"], global["vue-class-component"], global.prismjs, null, global.lodash.debounce, global.lodash.isundefined, global["@zeedhi/vue"], global.lodash.kebabcase, global.lodash.camelcase));
 })(this, (function (exports, VueI18Next, core, VueApexCharts, SlVueTree, slVueTreeMinimal_css, Sortable, hooper_css, vueTreeselect_css, Vue, vuePropertyDecorator, common, Component, Prism$1, prism_css, debounce$1, isUndefined, vue, kebabcase, camelcase) { 'use strict';
 
@@ -29556,6 +29556,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Object)
   ], ZdComponent.prototype, "isVisible", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Boolean)
+  ], ZdComponent.prototype, "dark", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Boolean)
+  ], ZdComponent.prototype, "light", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Object, default: () => ({}) }),
       __metadata("design:type", Object)
@@ -29733,6 +29741,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       {
         class: ["zd-alert", _vm.alert.cssClass],
         attrs: {
+          id: _vm.alert.name,
           top: _vm.alert.top,
           bottom: _vm.alert.bottom,
           left: _vm.alert.left,
@@ -29741,6 +29750,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           "multi-line": _vm.alert.multiLine,
           vertical: _vm.alert.vertical,
           color: _vm.alert.color,
+          dark: _vm.alert.dark,
+          light: _vm.alert.light,
         },
         scopedSlots: _vm._u([
           {
@@ -29812,7 +29823,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1k = function (inject) {
       if (!inject) return
-      inject("data-v-3af37451_0", { source: ".zd-alert .v-snack__wrapper {\n  background: var(--v-grey-darken2);\n  border-radius: var(--border);\n}\n.zd-alert .v-snack__content {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n  padding: var(--spacing-4) var(--spacing-4);\n}\n.zd-alert .v-snack__content .v-btn.zd-alert-dismiss {\n  color: var(--v-primary-base);\n}\n.zd-alert-dismiss {\n  transition: none;\n}\n.zd-alert-dismiss .v-btn__content {\n  transition: none;\n}\n.zd-alert-dismiss-buttons {\n  margin-left: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
+      inject("data-v-5ed4af54_0", { source: ".zd-alert .v-snack__wrapper {\n  background: var(--v-grey-darken2);\n  border-radius: var(--border);\n}\n.zd-alert .v-snack__content {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n  padding: var(--spacing-4) var(--spacing-4);\n}\n.zd-alert .v-snack__content .v-btn.zd-alert-dismiss {\n  color: var(--v-primary-base);\n}\n.zd-alert-dismiss {\n  transition: none;\n}\n.zd-alert-dismiss .v-btn__content {\n  transition: none;\n}\n.zd-alert-dismiss-buttons {\n  margin-left: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -29862,6 +29873,32 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ], ZdComponentRender);
   var ZdComponentRender$1 = ZdComponentRender;
 
+  class IconRenderer {
+      static getIconHtml(iconName, vuetify) {
+          const IconRender = {
+              props: ['iconName'],
+              template: '<v-icon>{{ $getIcon(iconName) }}</v-icon>',
+          };
+          // create component constructor
+          const IconRenderCtor = Vue__default["default"].extend(IconRender);
+          const instance = new IconRenderCtor({
+              vuetify,
+              propsData: {
+                  iconName,
+              },
+          });
+          instance.$mount();
+          return instance.$el.outerHTML;
+      }
+      static getIcon(iconName, vuetify) {
+          if (!this.icons[iconName]) {
+              this.icons[iconName] = this.getIconHtml(iconName, vuetify);
+          }
+          return this.icons[iconName];
+      }
+  }
+  IconRenderer.icons = {};
+
   /**
    * ApexChart component
    */
@@ -29871,8 +29908,25 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.instanceType = common.ApexChart;
       }
       mounted() {
+          this.setApexChartTheme();
           const updateFn = (options) => this.$refs.instance.chart.updateOptions(options, false, true, true, true);
           this.instance.setViewUpdate(updateFn);
+          this.instance.setViewGetIconHTML((icon) => IconRenderer.getIcon(icon, this.$root.$options.vuetify));
+      }
+      setApexChartTheme() {
+          let theme = '';
+          const dark = this.instance.dark || this.$vuetify.theme.dark;
+          const light = this.instance.light || !this.$vuetify.theme.dark;
+          if (dark) {
+              theme = 'dark';
+          }
+          if (light) {
+              theme = 'light';
+          }
+          const newOptions = Object.assign(Object.assign({}, this.instance.options), { theme: {
+                  mode: theme,
+              } });
+          this.instance.options = newOptions;
       }
   };
   __decorate([
@@ -29922,7 +29976,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c(
       "div",
-      { staticClass: "apexcharts-container" },
+      { staticClass: "apexcharts-container", attrs: { id: _vm.instance.name } },
       [
         _c("apexchart", {
           directives: [
@@ -29973,7 +30027,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1j = function (inject) {
       if (!inject) return
-      inject("data-v-78b20d78_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-tooltip {\n  z-index: 1;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-2216f88a_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-tooltip {\n  z-index: 1;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30050,7 +30104,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           overlap: "",
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
           dot: _vm.instance.showBadgeCounter === false,
           content: _vm.instance.getBadgeText(),
           value: _vm.instance.badge && _vm.instance.badge > 0,
@@ -30075,7 +30132,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1i = function (inject) {
       if (!inject) return
-      inject("data-v-79f37752_0", { source: ".zd-badge.icon-with-badge .v-badge__badge {\n  top: 3px;\n  right: 3px;\n  min-height: var(--spacing-3);\n  min-width: var(--spacing-3);\n}\n.zd-badge.no-badge-counter .v-badge__badge > span {\n  font-size: 0px !important;\n}\n.zd-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.zd-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.zd-badge:not(.v-badge--dot) .v-badge__badge {\n  padding: 2px var(--spacing-1);\n  min-width: var(--spacing-4);\n  height: var(--spacing-4);\n}", map: undefined, media: undefined });
+      inject("data-v-c9fb3210_0", { source: ".zd-badge.icon-with-badge .v-badge__badge {\n  top: 3px;\n  right: 3px;\n  min-height: var(--spacing-3);\n  min-width: var(--spacing-3);\n}\n.zd-badge.no-badge-counter .v-badge__badge > span {\n  font-size: 0px !important;\n}\n.zd-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.zd-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.zd-badge:not(.v-badge--dot) .v-badge__badge {\n  padding: 2px var(--spacing-1);\n  min-width: var(--spacing-4);\n  height: var(--spacing-4);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30118,10 +30175,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           });
       }
   };
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdBreadcrumbs.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: String, default: '/' }),
       __metadata("design:type", String)
@@ -30138,10 +30191,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdBreadcrumbs.prototype, "large", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: true }),
-      __metadata("design:type", Boolean)
-  ], ZdBreadcrumbs.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -30175,6 +30224,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ],
       style: _vm.instance.cssStyle,
       attrs: {
+        id: _vm.instance.name,
         dark: _vm.instance.dark,
         items: _vm.getTranslatedItems(),
         large: _vm.instance.large,
@@ -30214,7 +30264,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1h = function (inject) {
       if (!inject) return
-      inject("data-v-20ab466c_0", { source: ".v-breadcrumbs {\n  padding: 0;\n}\n.v-breadcrumbs li:nth-child(2n) {\n  padding: 0 var(--spacing-2);\n}\n.v-breadcrumbs.zd-breadcrumbs--small li {\n  font-size: var(--zd-font-caption-size);\n}\n.v-breadcrumbs li {\n  font-size: var(--zd-font-body1-size);\n}\n.v-breadcrumbs--large li {\n  font-size: var(--zd-font-body3-size);\n}", map: undefined, media: undefined });
+      inject("data-v-cf0640cc_0", { source: ".v-breadcrumbs {\n  padding: 0;\n}\n.v-breadcrumbs li:nth-child(2n) {\n  padding: 0 var(--spacing-2);\n}\n.v-breadcrumbs.zd-breadcrumbs--small li {\n  font-size: var(--zd-font-caption-size);\n}\n.v-breadcrumbs li {\n  font-size: var(--zd-font-body1-size);\n}\n.v-breadcrumbs--large li {\n  font-size: var(--zd-font-body3-size);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30267,10 +30317,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: 'primary' }),
       __metadata("design:type", String)
   ], ZdButton.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdButton.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -30311,10 +30357,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdButton.prototype, "left", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdButton.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -30387,7 +30429,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             ],
             class: [_vm.instance.cssClass, "zd-button"],
             style: _vm.instance.cssStyle,
-            attrs: { name: _vm.instance.name },
+            attrs: {
+              id: _vm.instance.name,
+              name: _vm.instance.name,
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
+            },
             on: {
               click: function ($event) {
                 return _vm.click($event)
@@ -30457,7 +30504,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1g = function (inject) {
       if (!inject) return
-      inject("data-v-5cb8ba5c_0", { source: ".v-btn.zd-button,\na.v-btn.zd-button,\nbutton.v-btn.zd-button {\n  letter-spacing: unset;\n  text-transform: none;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--fab),\na.v-btn.zd-button.v-btn:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--fab) {\n  box-shadow: none;\n}\n.v-btn.zd-button.v-size--default,\na.v-btn.zd-button.v-size--default,\nbutton.v-btn.zd-button.v-size--default {\n  min-width: 0;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\na.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: var(--border);\n  padding: var(--spacing-2) var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--default,\na.v-btn.zd-button.v-btn.v-size--default,\nbutton.v-btn.zd-button.v-btn.v-size--default {\n  min-height: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--default.v-btn--icon {\n  min-width: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab) {\n  height: auto;\n  width: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon {\n  padding: 0;\n  min-width: 24px;\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab) {\n  height: auto;\n  min-height: 56px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon {\n  min-width: 56px;\n}\n.v-btn.zd-button.v-btn--outlined,\na.v-btn.zd-button.v-btn--outlined,\nbutton.v-btn.zd-button.v-btn--outlined {\n  border: var(--regular) solid;\n}\n.v-btn.zd-button .v-btn__content .v-icon,\na.v-btn.zd-button .v-btn__content .v-icon,\nbutton.v-btn.zd-button .v-btn__content .v-icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n.v-btn.zd-button .v-btn__content .v-icon--left,\na.v-btn.zd-button .v-btn__content .v-icon--left,\nbutton.v-btn.zd-button .v-btn__content .v-icon--left {\n  margin-right: var(--spacing-2);\n  margin-left: 0;\n}\n.v-btn.zd-button .v-btn__content .v-icon--right,\na.v-btn.zd-button .v-btn__content .v-icon--right,\nbutton.v-btn.zd-button .v-btn__content .v-icon--right {\n  margin-right: 0;\n  margin-left: var(--spacing-2);\n}", map: undefined, media: undefined });
+      inject("data-v-34870b14_0", { source: ".v-btn.zd-button,\na.v-btn.zd-button,\nbutton.v-btn.zd-button {\n  letter-spacing: unset;\n  text-transform: none;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--fab),\na.v-btn.zd-button.v-btn:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--fab) {\n  box-shadow: none;\n}\n.v-btn.zd-button.v-size--default,\na.v-btn.zd-button.v-size--default,\nbutton.v-btn.zd-button.v-size--default {\n  min-width: 0;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\na.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: var(--border);\n  padding: var(--spacing-2) var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--default,\na.v-btn.zd-button.v-btn.v-size--default,\nbutton.v-btn.zd-button.v-btn.v-size--default {\n  min-height: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--default.v-btn--icon {\n  min-width: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab) {\n  height: auto;\n  width: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon {\n  padding: 0;\n  min-width: 24px;\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab) {\n  height: auto;\n  min-height: 56px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon {\n  min-width: 56px;\n}\n.v-btn.zd-button.v-btn--outlined,\na.v-btn.zd-button.v-btn--outlined,\nbutton.v-btn.zd-button.v-btn--outlined {\n  border: var(--regular) solid;\n}\n.v-btn.zd-button .v-btn__content .v-icon,\na.v-btn.zd-button .v-btn__content .v-icon,\nbutton.v-btn.zd-button .v-btn__content .v-icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n.v-btn.zd-button .v-btn__content .v-icon--left,\na.v-btn.zd-button .v-btn__content .v-icon--left,\nbutton.v-btn.zd-button .v-btn__content .v-icon--left {\n  margin-right: var(--spacing-2);\n  margin-left: 0;\n}\n.v-btn.zd-button .v-btn__content .v-icon--right,\na.v-btn.zd-button .v-btn__content .v-icon--right,\nbutton.v-btn.zd-button .v-btn__content .v-icon--right {\n  margin-right: 0;\n  margin-left: var(--spacing-2);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30513,10 +30560,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: 'primary' }),
       __metadata("design:type", String)
   ], ZdButtonGroup.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdButtonGroup.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -30525,10 +30568,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdButtonGroup.prototype, "group", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdButtonGroup.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -30596,7 +30635,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ],
           class: [_vm.instance.cssClass, "zd-button-group"],
           style: _vm.instance.cssStyle,
-          attrs: { name: _vm.instance.name },
+          attrs: {
+            id: _vm.instance.name,
+            name: _vm.instance.name,
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+          },
           on: {
             change: function ($event) {
               return _vm.change()
@@ -30653,7 +30697,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1f = function (inject) {
       if (!inject) return
-      inject("data-v-ff7da310_0", { source: ".zd-button-group .v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group .btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group button.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: 0;\n}\n.zd-button-group button.v-btn.v-item--active.v-btn--active.v-btn--contained.theme--light.v-size--default.primary.zd-button {\n  color: lightgray;\n}\n.zd-button-group > .v-btn.v-btn:last-child {\n  border-top-right-radius: inherit !important;\n  border-bottom-right-radius: inherit !important;\n}\n.zd-button-group > .v-btn.v-btn:first-child {\n  border-top-left-radius: inherit !important;\n  border-bottom-left-radius: inherit !important;\n}\n.zd-button-group.v-btn-toggle--group > .v-btn.v-btn {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  margin: 4px;\n  min-width: auto;\n  color: rgba(0, 0, 0, 0.87) !important;\n}", map: undefined, media: undefined });
+      inject("data-v-246722c8_0", { source: ".zd-button-group .v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group .btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group button.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: 0;\n}\n.zd-button-group button.v-btn.v-item--active.v-btn--active.v-btn--contained.theme--light.v-size--default.primary.zd-button {\n  color: lightgray;\n}\n.zd-button-group > .v-btn.v-btn:last-child {\n  border-top-right-radius: inherit !important;\n  border-bottom-right-radius: inherit !important;\n}\n.zd-button-group > .v-btn.v-btn:first-child {\n  border-top-left-radius: inherit !important;\n  border-bottom-left-radius: inherit !important;\n}\n.zd-button-group.v-btn-toggle--group > .v-btn.v-btn {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  margin: 4px;\n  min-width: auto;\n  color: rgba(0, 0, 0, 0.87) !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30702,10 +30746,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdCard.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdCard.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -30734,10 +30774,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdCard.prototype, "img", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdCard.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -30820,6 +30856,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ],
           style: _vm.instance.cssStyle,
           attrs: {
+            id: _vm.instance.name,
             name: _vm.instance.name,
             activeClass: _vm.instance.activeClass,
             append: _vm.instance.append,
@@ -30877,7 +30914,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1e = function (inject) {
       if (!inject) return
-      inject("data-v-491b7004_0", { source: ".zd-card {\n  padding: var(--spacing-4);\n  overflow: auto;\n}\n.zd-card::before {\n  content: none;\n}\n.zd-card.zd-card-cursor-auto {\n  cursor: auto;\n}\n.zd-card.v-sheet.v-card {\n  border-radius: var(--border);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined) {\n  box-shadow: var(--shadow-3);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined).v-card--raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-card.v-sheet.v-card--hover:focus, .zd-card.v-sheet.v-card--hover:hover {\n  box-shadow: var(--shadow-5);\n}\n.zd-card.v-sheet.v-card.v-sheet--outlined {\n  border: var(--regular) solid var(--v-secondary-base);\n}", map: undefined, media: undefined });
+      inject("data-v-5e1a8d4a_0", { source: ".zd-card {\n  padding: var(--spacing-4);\n  overflow: auto;\n}\n.zd-card::before {\n  content: none;\n}\n.zd-card.zd-card-cursor-auto {\n  cursor: auto;\n}\n.zd-card.v-sheet.v-card {\n  border-radius: var(--border);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined) {\n  box-shadow: var(--shadow-3);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined).v-card--raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-card.v-sheet.v-card--hover:focus, .zd-card.v-sheet.v-card--hover:hover {\n  box-shadow: var(--shadow-5);\n}\n.zd-card.v-sheet.v-card.v-sheet--outlined {\n  border: var(--regular) solid var(--v-secondary-base);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30998,10 +31035,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Number, String] }),
       __metadata("design:type", Number)
   ], ZdCarousel.prototype, "currentSlide", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdCarousel.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -31026,10 +31059,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Boolean)
   ], ZdCarousel.prototype, "keysControl", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: true }),
-      __metadata("design:type", Boolean)
-  ], ZdCarousel.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -31159,6 +31188,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
         on: {
           click: function ($event) {
             return _vm.click($event)
@@ -31440,7 +31470,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1d = function (inject) {
       if (!inject) return
-      inject("data-v-422a2313_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+      inject("data-v-7393abf5_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -31524,10 +31554,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: 'primary' }),
       __metadata("design:type", String)
   ], ZdInput.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdInput.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Object)
@@ -31544,10 +31570,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdInput.prototype, "label", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdInput.prototype, "light", void 0);
   __decorate([
       PropWatch({ default: '' }),
       __metadata("design:type", Object)
@@ -31655,7 +31677,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c(
       "span",
-      _vm._g({}, Object.assign({}, _vm.$attrs["dropdown-activator"])),
+      _vm._g(
+        { attrs: { id: _vm.instance.name } },
+        Object.assign({}, _vm.$attrs["dropdown-activator"])
+      ),
       [
         _c(
           "v-checkbox",
@@ -31685,6 +31710,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   "validate-on-blur": "",
                   name: _vm.instance.name,
                   color: _vm.instance.color,
+                  dark: _vm.instance.dark,
+                  light: _vm.instance.light,
                 },
                 on: {
                   focus: function ($event) {
@@ -31734,7 +31761,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1c = function (inject) {
       if (!inject) return
-      inject("data-v-90255b72_0", { source: ".zd-checkbox {\n  margin: 0;\n  padding: 0;\n}\n.zd-checkbox .v-label.theme--light {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox > .v-input__control > .v-input__slot {\n  margin: 0;\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
+      inject("data-v-7b6a9f90_0", { source: ".zd-checkbox {\n  margin: 0;\n  padding: 0;\n}\n.zd-checkbox .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox > .v-input__control > .v-input__slot {\n  margin: 0;\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -31834,6 +31861,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             "zd-input-required": _vm.instance.validations.required,
           },
         ],
+        attrs: { id: _vm.instance.name },
       },
       [
         _c("div", { staticClass: "zd-checkbox-label" }, [
@@ -31910,7 +31938,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1b = function (inject) {
       if (!inject) return
-      inject("data-v-0a644c49_0", { source: ".zd-checkbox-multiple .zd-checkbox-label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 0 var(--spacing-2);\n  color: var(--zd-font-color);\n  align-items: flex-start;\n  display: flex;\n}\n.zd-checkbox-multiple .zd-checkbox-horizontal {\n  display: inline-grid;\n  grid-template-columns: var(--checkbox-horizontal-columns);\n  width: 100%;\n}\n.zd-checkbox-multiple .v-label.theme--light {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox-multiple .v-input--selection-controls {\n  padding: 0;\n  margin: 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-messages {\n  display: none;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot {\n  margin: 0 10px 0 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
+      inject("data-v-351ba26a_0", { source: ".zd-checkbox-multiple .zd-checkbox-label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 0 var(--spacing-2);\n  color: var(--zd-font-color);\n  align-items: flex-start;\n  display: flex;\n}\n.zd-checkbox-multiple .zd-checkbox-horizontal {\n  display: inline-grid;\n  grid-template-columns: var(--checkbox-horizontal-columns);\n  width: 100%;\n}\n.zd-checkbox-multiple .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox-multiple .v-input--selection-controls {\n  padding: 0;\n  margin: 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-messages {\n  display: none;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot {\n  margin: 0 10px 0 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -32037,7 +32065,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               },
             ],
             style: _vm.instance.cssStyle,
-            attrs: { name: _vm.instance.name },
+            attrs: { id: _vm.instance.name, name: _vm.instance.name },
             on: {
               click: function ($event) {
                 return _vm.click($event)
@@ -32121,7 +32149,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1a = function (inject) {
       if (!inject) return
-      inject("data-v-942c7fb4_0", { source: ".v-chip:not(.zd-chip-reverse) .zd-chip-label {\n  margin: 0;\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:first-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:last-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:first-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:last-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .v-chip__close.v-icon,\n.v-chip.zd-chip-reverse .v-chip__content .v-avatar {\n  margin: 0;\n}\n.v-chip.v-size--default {\n  height: auto;\n  padding: 6px var(--spacing-2);\n  font-size: 12px;\n  line-height: normal;\n}\n.v-chip.v-size--default .v-chip__close.v-icon {\n  font-size: var(--spacing-4) !important;\n}\n.v-chip.v-size--default .v-chip__close.v-icon.v-icon--right, .v-chip.v-size--default .v-chip__close.v-icon.v-icon--left {\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar {\n  height: auto !important;\n  min-width: auto !important;\n  width: auto !important;\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar .v-icon {\n  font-size: var(--spacing-4);\n}", map: undefined, media: undefined });
+      inject("data-v-08d8a458_0", { source: ".v-chip:not(.zd-chip-reverse) .zd-chip-label {\n  margin: 0;\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:first-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:last-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:first-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:last-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .v-chip__close.v-icon,\n.v-chip.zd-chip-reverse .v-chip__content .v-avatar {\n  margin: 0;\n}\n.v-chip.v-size--default {\n  height: auto;\n  padding: 6px var(--spacing-2);\n  font-size: 12px;\n  line-height: normal;\n}\n.v-chip.v-size--default .v-chip__close.v-icon {\n  font-size: var(--spacing-4) !important;\n}\n.v-chip.v-size--default .v-chip__close.v-icon.v-icon--right, .v-chip.v-size--default .v-chip__close.v-icon.v-icon--left {\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar {\n  height: auto !important;\n  min-width: auto !important;\n  width: auto !important;\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar .v-icon {\n  font-size: var(--spacing-4);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -32231,9 +32259,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: [
           "zd-code-editor",
           _vm.instance.cssClass,
-          { "theme--dark": _vm.$vuetify.theme.dark },
+          {
+            "theme--dark":
+              (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
+              _vm.instance.dark,
+          },
+          { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
         ],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [
         _c(
@@ -32340,11 +32374,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$19 = function (inject) {
       if (!inject) return
-      inject("data-v-03a649ee_0", { source: ".zd-code-editor[data-v-03a649ee] {\n  position: relative;\n}\n.zd-code-editor-clipboard-button[data-v-03a649ee] {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: var(--v-grey-lighten5);\n  opacity: 0;\n  transition: 0.3s all ease-in;\n}\n.zd-code-editor-clipboard-button .v-icon[data-v-03a649ee] {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button[data-v-03a649ee] {\n  opacity: 1;\n}\n.zd-code-editor-container[data-v-03a649ee] {\n  position: relative;\n  background-color: var(--v-grey-lighten5);\n  min-height: 45px;\n  display: flex;\n  border: solid var(--regular) var(--v-grey-lighten5);\n  overflow: auto;\n}\n.zd-code-editor-container[data-v-03a649ee]:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers[data-v-03a649ee] {\n  height: 100%;\n  min-height: 45px;\n  width: 30px;\n  overflow: hidden;\n  flex-shrink: 0;\n  margin-top: 0;\n  font-size: 0.9em;\n  padding: 10px 3px;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  background: var(--v-grey-lighten4);\n  color: var(--zd-font-color);\n  position: sticky;\n  top: 0;\n  left: 0;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number[data-v-03a649ee] {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre[data-v-03a649ee] {\n  padding: 10px;\n  margin: 0;\n  background: transparent;\n  -moz-tab-size: 4;\n  -ms-flex-positive: 2;\n  -o-tab-size: 4;\n  -webkit-box-flex: 2;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  flex-grow: 2;\n  outline: none;\n  tab-size: 4;\n  font-weight: 500;\n  font-size: 0.9em;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  overflow: hidden;\n  color: var(--zd-font-color);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container[data-v-03a649ee] {\n  border: solid var(--regular) var(--v-grey-darken3);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers[data-v-03a649ee] {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}", map: undefined, media: undefined });
+      inject("data-v-468d3318_0", { source: ".zd-code-editor[data-v-468d3318] {\n  position: relative;\n}\n.zd-code-editor-clipboard-button[data-v-468d3318] {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: var(--v-grey-lighten5);\n  opacity: 0;\n  transition: 0.3s all ease-in;\n}\n.zd-code-editor-clipboard-button .v-icon[data-v-468d3318] {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button[data-v-468d3318] {\n  opacity: 1;\n}\n.zd-code-editor-container[data-v-468d3318] {\n  position: relative;\n  background-color: var(--v-grey-lighten5);\n  min-height: 45px;\n  display: flex;\n  border: solid var(--regular) var(--v-grey-lighten5);\n  overflow: auto;\n}\n.zd-code-editor-container[data-v-468d3318]:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers[data-v-468d3318] {\n  height: 100%;\n  min-height: 45px;\n  width: 30px;\n  overflow: hidden;\n  flex-shrink: 0;\n  margin-top: 0;\n  font-size: 0.9em;\n  padding: 10px 3px;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  background: var(--v-grey-lighten4);\n  color: var(--zd-font-color);\n  position: sticky;\n  top: 0;\n  left: 0;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number[data-v-468d3318] {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre[data-v-468d3318] {\n  padding: 10px;\n  margin: 0;\n  background: transparent;\n  -moz-tab-size: 4;\n  -ms-flex-positive: 2;\n  -o-tab-size: 4;\n  -webkit-box-flex: 2;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  flex-grow: 2;\n  outline: none;\n  tab-size: 4;\n  font-weight: 500;\n  font-size: 0.9em;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  overflow: hidden;\n  color: var(--zd-font-color);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container[data-v-468d3318] {\n  border: solid var(--regular) var(--v-grey-darken3);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers[data-v-468d3318] {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$19 = "data-v-03a649ee";
+    const __vue_scope_id__$19 = "data-v-468d3318";
     /* module identifier */
     const __vue_module_identifier__$19 = undefined;
     /* functional template */
@@ -32429,6 +32463,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           class: _vm.instance.cssClass,
           style: _vm.instance.cssStyle,
           attrs: {
+            id: _vm.instance.name,
             name: _vm.instance.name,
             cols: _vm.instance.cols,
             sm: _vm.instance.sm,
@@ -32612,6 +32647,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: [_vm.widthStyles, _vm.instance.cssStyle],
         attrs: {
+          id: _vm.instance.name,
           dark: _vm.instance.dark,
           light: _vm.instance.light,
           value: _vm.expandStatus,
@@ -32654,7 +32690,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 },
                 scopedSlots: _vm._u(
                   [
-                    _vm.instance.expandButton && this && !this.$slots.expandButton
+                    _vm.instance.expandButton && !_vm.$slots.expandButton
                       ? {
                           key: "actions",
                           fn: function () {
@@ -32675,9 +32711,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           },
                           proxy: true,
                         }
-                      : !_vm.instance.expandButton &&
-                        this &&
-                        !this.$slots.expandButton
+                      : !_vm.instance.expandButton && !_vm.$slots.expandButton
                       ? {
                           key: "actions",
                           fn: function () {
@@ -32711,7 +32745,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 _c(
                   "div",
                   [
-                    this && !this.$slots.header
+                    !_vm.$slots.header
                       ? _vm._l(_vm.instance.header, function (item) {
                           return _c(
                             item.component,
@@ -32773,7 +32807,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$17 = function (inject) {
       if (!inject) return
-      inject("data-v-0e90afb6_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n  box-shadow: none;\n  border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  min-height: 0;\n  padding: var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n  color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n  padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n  box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
+      inject("data-v-21936231_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n  box-shadow: none;\n  border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  min-height: 0;\n  padding: var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n  color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n  padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n  box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -32848,14 +32882,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           { "fill-height": _vm.instance.fillHeight },
         ],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name, fluid: _vm.instance.fluid },
+        attrs: {
+          id: _vm.instance.name,
+          name: _vm.instance.name,
+          fluid: _vm.instance.fluid,
+        },
       },
       [
         _vm._l(_vm.instance.children, function (child, index) {
           return _c(
             child.component,
             _vm._b(
-              { key: index, tag: "component", attrs: { parent: _vm.instance } },
+              {
+                key: index,
+                tag: "component",
+                attrs: {
+                  dark: _vm.instance.dark,
+                  light: _vm.instance.light,
+                  parent: _vm.instance,
+                },
+              },
               "component",
               child,
               false
@@ -32874,11 +32920,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$16 = function (inject) {
       if (!inject) return
-      inject("data-v-9d347aae_0", { source: ".zd-container[data-v-9d347aae] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
+      inject("data-v-32c162b3_0", { source: ".zd-container[data-v-32c162b3] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$16 = "data-v-9d347aae";
+    const __vue_scope_id__$16 = "data-v-32c162b3";
     /* module identifier */
     const __vue_module_identifier__$16 = undefined;
     /* functional template */
@@ -33084,6 +33130,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             ],
             style: _vm.instance.cssStyle,
             attrs: {
+              id: _vm.instance.name,
               "validate-on-blur": "",
               name: _vm.instance.name,
               "hide-details": _vm.instance.autoHintDetails ? "auto" : false,
@@ -33190,7 +33237,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$15 = function (inject) {
       if (!inject) return
-      inject("data-v-7b99c31d_0", { source: ".zd-text-input__affix, .v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix, .v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-grey-lighten2);\n  font-size: var(--zd-font-body2-size);\n  line-height: 15px;\n  padding: 3px 0 4px 0;\n}\n.v-input.zd-text-input {\n  padding-top: var(--spacing-4);\n}\n.v-input.zd-text-input .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__prepend-outer, .v-input.zd-text-input .v-input__append-outer {\n  margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input .v-input__append-inner, .v-input.zd-text-input .v-input__prepend-inner {\n  padding: 0;\n  margin: 0;\n  align-self: unset;\n}\n.v-input.zd-text-input .v-input__prepend-outer .v-icon, .v-input.zd-text-input .v-input__append-outer .v-icon, .v-input.zd-text-input .v-input__append-inner .v-icon, .v-input.zd-text-input .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  padding-left: var(--spacing-2);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__slot {\n  position: static;\n}\n.v-input.zd-text-input.v-text-field--reverse > .v-input__control > .v-input__slot label {\n  left: auto !important;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append {\n  align-items: center;\n  display: inline-flex;\n  flex: 1 0 auto;\n  justify-content: center;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix {\n  padding-right: var(--spacing-2);\n}\n.v-input.zd-text-input.zd-text-input--prepend-icon > .v-input__control > .v-input__slot > .v-input__prepend-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-input--append-icon > .v-input__control > .v-input__slot > .v-input__append-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer, .v-input.zd-text-input.zd-dense .v-input__append-outer {\n  margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-inner .v-icon, .v-input.zd-text-input.zd-dense .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-text-input.zd-dense .v-input__slot .v-text-field__prefix {\n  height: auto;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__append-inner:last-child,\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__prepend-inner:first-child {\n  margin: 0;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot input {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-text-input.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-text-input.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}", map: undefined, media: undefined });
+      inject("data-v-0e7bd04b_0", { source: ".zd-text-input__affix, .v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix, .v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-grey-lighten2);\n  font-size: var(--zd-font-body2-size);\n  line-height: 15px;\n  padding: 3px 0 4px 0;\n}\n.v-input.zd-text-input {\n  padding-top: var(--spacing-4);\n}\n.v-input.zd-text-input .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__prepend-outer, .v-input.zd-text-input .v-input__append-outer {\n  margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input .v-input__append-inner, .v-input.zd-text-input .v-input__prepend-inner {\n  padding: 0;\n  margin: 0;\n  align-self: unset;\n}\n.v-input.zd-text-input .v-input__prepend-outer .v-icon, .v-input.zd-text-input .v-input__append-outer .v-icon, .v-input.zd-text-input .v-input__append-inner .v-icon, .v-input.zd-text-input .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  padding-left: var(--spacing-2);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__slot {\n  position: static;\n}\n.v-input.zd-text-input.v-text-field--reverse > .v-input__control > .v-input__slot label {\n  left: auto !important;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append {\n  align-items: center;\n  display: inline-flex;\n  flex: 1 0 auto;\n  justify-content: center;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix {\n  padding-right: var(--spacing-2);\n}\n.v-input.zd-text-input.zd-text-input--prepend-icon > .v-input__control > .v-input__slot > .v-input__prepend-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-input--append-icon > .v-input__control > .v-input__slot > .v-input__append-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer, .v-input.zd-text-input.zd-dense .v-input__append-outer {\n  margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-inner .v-icon, .v-input.zd-text-input.zd-dense .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-text-input.zd-dense .v-input__slot .v-text-field__prefix {\n  height: auto;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__append-inner:last-child,\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__prepend-inner:first-child {\n  margin: 0;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot input {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-text-input.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-text-input.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -33293,7 +33340,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ],
           ref: "instance",
           class: ["zd-number"],
-          attrs: { name: "number", "instance-object": _vm.instance },
+          attrs: {
+            id: _vm.instance.name,
+            name: "number",
+            "instance-object": _vm.instance,
+          },
         },
         "zd-text-input",
         {
@@ -33365,7 +33416,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-number", {
       ref: "instance",
-      attrs: { name: "currency", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "currency",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$13 = [];
@@ -33576,6 +33631,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           { "zd-pa-0": _vm.instance.removePadding },
         ],
         attrs: {
+          id: _vm.instance.name,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
           name: "container-dashboard" + _vm.instance.name,
           cssStyle: Object.assign({}, _vm.instance.cssStyle, {
             height: _vm.$formatSize(_vm.instance.height),
@@ -33652,7 +33710,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         "zd-footer",
                         {
                           name: "footer" + card.cardId,
-                          color: "white",
+                          color: "",
                           isVisible: _vm.instance.editingMode,
                           rightSlot: _vm.instance.getFooterRightSlot(card.cardId),
                         },
@@ -33715,7 +33773,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$12 = function (inject) {
       if (!inject) return
-      inject("data-v-d83d7a7c_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 20px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-b6912b0a_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 20px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -33821,6 +33879,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       onSelectDate(date, event) {
           this.instance.selectDate(date, event, this.$el);
+          this.instance.change(event, this.$refs.instance.$el);
       }
       getAllowedDates(date) {
           if (typeof this.instance.allowedDates === 'function') {
@@ -33983,6 +34042,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         staticClass: "zd-date-menu-activator",
         attrs: {
+          id: _vm.instance.name,
           "offset-overflow": "",
           "offset-y": "",
           "min-width": _vm.instance.width,
@@ -34078,7 +34138,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$11 = function (inject) {
       if (!inject) return
-      inject("data-v-20857454_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}", map: undefined, media: undefined });
+      inject("data-v-0b715682_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -34328,6 +34388,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         staticClass: "zd-date-menu-activator",
         attrs: {
+          id: _vm.instance.name,
           "offset-overflow": "",
           "offset-y": "",
           "min-width": _vm.instance.width,
@@ -34421,7 +34482,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$10 = function (inject) {
       if (!inject) return
-      inject("data-v-4cdb520c_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}", map: undefined, media: undefined });
+      inject("data-v-cff9acb0_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -34482,8 +34543,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       "v-dialog",
       {
         attrs: {
+          id: _vm.dialog.name,
           "max-width": _vm.dialog.maxWidth,
           persistent: _vm.dialog.persistent,
+          dark: _vm.dialog.dark,
+          light: _vm.dialog.light,
         },
         model: {
           value: _vm.dialog.isVisible,
@@ -34572,7 +34636,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$$ = function (inject) {
       if (!inject) return
-      inject("data-v-2b7cbae8_0", { source: ".v-dialog > .zd-dialog > .zd-dialog-title {\n  padding: var(--spacing-4);\n  padding-bottom: 0;\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n}\n.v-dialog > .zd-dialog > .zd-dialog-title .zd-dialog-icon {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  margin-right: var(--spacing-2);\n}\n.v-dialog > .zd-dialog .zd-dialog-text {\n  padding: 14px var(--spacing-4) var(--spacing-4) var(--spacing-4);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}\n.v-dialog > .zd-dialog .zd-dialog-buttons {\n  padding: var(--spacing-4);\n  padding-top: 0;\n}\n.v-dialog > .zd-dialog .zd-dialog-buttons .zd-button {\n  margin-left: var(--spacing-2);\n}", map: undefined, media: undefined });
+      inject("data-v-8dc5d162_0", { source: ".v-dialog > .zd-dialog > .zd-dialog-title {\n  padding: var(--spacing-4);\n  padding-bottom: 0;\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n}\n.v-dialog > .zd-dialog > .zd-dialog-title .zd-dialog-icon {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  margin-right: var(--spacing-2);\n}\n.v-dialog > .zd-dialog .zd-dialog-text {\n  padding: 14px var(--spacing-4) var(--spacing-4) var(--spacing-4);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}\n.v-dialog > .zd-dialog .zd-dialog-buttons {\n  padding: var(--spacing-4);\n  padding-top: 0;\n}\n.v-dialog > .zd-dialog .zd-dialog-buttons .zd-button {\n  margin-left: var(--spacing-2);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -34609,18 +34673,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.instanceType = common.Divider;
       }
   };
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdDivider.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdDivider.prototype, "inset", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdDivider.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -34650,6 +34706,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       class: [_vm.instance.cssClass],
       style: _vm.instance.cssStyle,
       attrs: {
+        id: _vm.instance.name,
         name: _vm.instance.name,
         dark: _vm.instance.dark,
         inset: _vm.instance.inset,
@@ -34801,6 +34858,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           "content-class": "zd-dropdown-menu",
           "offset-overflow": "",
           name: _vm.instance.name,
@@ -34808,6 +34866,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           closeOnClick: _vm.instance.closeOnClick,
           closeOnContentClick: _vm.instance.closeOnContentClick,
           disabled: _vm.instance.disabled,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
           fixed: _vm.instance.fixed,
           "max-height": _vm.instance.maxHeight,
           "max-width": _vm.instance.maxWidth,
@@ -34829,7 +34889,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   _vm._b(
                     {
                       tag: "component",
-                      attrs: { "dropdown-activator": dropdown },
+                      attrs: {
+                        "dropdown-activator": Object.assign(
+                          {},
+                          _vm.$attrs["dropdown-activator"],
+                          dropdown
+                        ),
+                      },
                     },
                     "component",
                     _vm.instance.activator,
@@ -34896,7 +34962,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$Z = function (inject) {
       if (!inject) return
-      inject("data-v-cc2625b2_0", { source: ".zd-dropdown {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n  padding: 2px;\n}\n.zd-dropdown .zd-dropdown-component {\n  padding: 6px 14px;\n  border-radius: var(--border);\n}\n.zd-dropdown-hover:hover {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-dropdown-cursor {\n  cursor: var(--cursor);\n}\n.zd-dropdown-menu {\n  margin: 0 !important;\n  padding: 0 !important;\n  box-shadow: var(--shadow-8);\n}", map: undefined, media: undefined });
+      inject("data-v-4aa44ac8_0", { source: ".zd-dropdown {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n  padding: 2px;\n}\n.zd-dropdown .zd-dropdown-component {\n  padding: 6px 14px;\n  border-radius: var(--border);\n}\n.zd-dropdown-hover:hover {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-dropdown-cursor {\n  cursor: var(--cursor);\n}\n.zd-dropdown-menu {\n  margin: 0 !important;\n  padding: 0 !important;\n  box-shadow: var(--shadow-8);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -35123,6 +35189,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               _vm.instance.cssStyle,
             ],
             attrs: {
+              id: _vm.instance.name,
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
               "validate-on-blur": "",
               name: _vm.instance.name,
               "persistent-placeholder": true,
@@ -35174,6 +35243,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     {
                                       dragging: _vm.dragging,
                                     },
+                                    {
+                                      "theme--dark":
+                                        (_vm.$vuetify.theme.dark &&
+                                          !_vm.instance.light) ||
+                                        _vm.instance.dark,
+                                    },
+                                    {
+                                      "theme--light":
+                                        !_vm.$vuetify.theme.dark ||
+                                        _vm.instance.light,
+                                    },
                                   ],
                                 },
                                 [
@@ -35274,9 +35354,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             accept: _vm.instance.accept,
             autofocus: _vm.instance.autofocus,
             chips: _vm.instance.chips,
-            counter: !!this.instance.maxFiles
-              ? this.instance.maxFiles
-              : this.instance.showCounter,
+            counter: !!_vm.instance.maxFiles
+              ? _vm.instance.maxFiles
+              : _vm.instance.showCounter,
             "counter-string":
               _vm.$t(_vm.instance.counterString) || "$vuetify.fileInput.counter",
             "counter-size-string":
@@ -35332,7 +35412,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$Y = function (inject) {
       if (!inject) return
-      inject("data-v-a5824dda_0", { source: ".zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text:not(.v-file-input__text--placeholder) {\n  color: var(--zd-font-color);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  border-radius: var(--border);\n  padding: 0 var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip .chip-remove-icon {\n  font-size: var(--icon-size-small);\n  margin-left: var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot {\n  min-height: 24px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  height: 16px;\n  line-height: 15px;\n  font-size: 11px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.with-drag-area {\n  padding-top: calc(var(--drag-area-height) + 17px);\n}\n.zd-file-input.with-drag-area.zd-no-label {\n  padding-top: calc(var(--drag-area-height) + 5px);\n}\n.zd-file-input.with-drag-area.zd-no-label > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 5px);\n  top: calc(-5px - var(--drag-area-height));\n}\n.zd-file-input.with-drag-area.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  text-align: right;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 25px);\n  top: calc(-25px - var(--drag-area-height));\n  right: 0 !important;\n  left: 0 !important;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-label {\n  height: 20px;\n  display: block;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area {\n  width: 100%;\n  height: var(--drag-area-height);\n  border: dashed var(--regular) #c4c4c4;\n  background: #f8f8f8;\n  position: relative;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.dragging {\n  background: #f0f0f0;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content {\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content > span {\n  display: block;\n}\n.zd-file-input.v-input--is-disabled > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  opacity: 0.5;\n}\n.zd-file-input.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  flex-direction: row-reverse;\n}", map: undefined, media: undefined });
+      inject("data-v-01f709ca_0", { source: ".zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text:not(.v-file-input__text--placeholder) {\n  color: var(--zd-font-color);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  border-radius: var(--border);\n  padding: 0 var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip .chip-remove-icon {\n  font-size: var(--icon-size-small);\n  margin-left: var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot {\n  min-height: 24px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  height: 16px;\n  line-height: 15px;\n  font-size: 11px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.with-drag-area {\n  padding-top: calc(var(--drag-area-height) + 17px);\n}\n.zd-file-input.with-drag-area.zd-no-label {\n  padding-top: calc(var(--drag-area-height) + 5px);\n}\n.zd-file-input.with-drag-area.zd-no-label > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 5px);\n  top: calc(-5px - var(--drag-area-height));\n}\n.zd-file-input.with-drag-area.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  text-align: right;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 25px);\n  top: calc(-25px - var(--drag-area-height));\n  right: 0 !important;\n  left: 0 !important;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-label {\n  height: 20px;\n  display: block;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area {\n  width: 100%;\n  height: var(--drag-area-height);\n  border: dashed var(--regular) #c4c4c4;\n  position: relative;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.theme--dark {\n  background: #3c3c3c;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.theme--light {\n  background: #f8f8f8;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.dragging {\n  background: #f0f0f0;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content {\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content > span {\n  display: block;\n}\n.zd-file-input.v-input--is-disabled > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  opacity: 0.5;\n}\n.zd-file-input.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  flex-direction: row-reverse;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -35405,10 +35485,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: 'primary' }),
       __metadata("design:type", String)
   ], ZdFooter.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdFooter.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -35425,10 +35501,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
       __metadata("design:type", Array)
   ], ZdFooter.prototype, "leftSlot", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdFooter.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Number, String] }),
       __metadata("design:type", Object)
@@ -35484,6 +35556,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-footer", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           name: _vm.instance.name,
           app: _vm.instance.app,
           color: _vm.instance.color,
@@ -35503,9 +35576,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
       [
         _vm.instance.namedSlotsIsVisible ||
-        !!this.$slots.leftSlot ||
-        !!this.$slots.centerSlot ||
-        !!this.$slots.rightSlot
+        !!_vm.$slots.leftSlot ||
+        !!_vm.$slots.centerSlot ||
+        !!_vm.$slots.rightSlot
           ? _c(
               "v-col",
               {
@@ -35513,25 +35586,32 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   "zd-footer-slot",
                   {
                     "zd-footer-slot-children":
-                      _vm.instance.children.length || !!this.$slots.leftSlot,
+                      _vm.instance.children.length || !!_vm.$slots.leftSlot,
                   },
                 ],
                 attrs: { cols: "12" },
               },
               [
-                _vm.instance.leftSlot.length || !!this.$slots.leftSlot
+                _vm.instance.leftSlot.length || !!_vm.$slots.leftSlot
                   ? _c(
                       "span",
                       { staticClass: "zd-footer-slot-left" },
                       [
-                        !this.$slots.leftSlot
+                        !_vm.$slots.leftSlot
                           ? _vm._l(
                               _vm.instance.leftSlot,
                               function (child, index) {
                                 return _c(
                                   child.component,
                                   _vm._b(
-                                    { key: index, tag: "component" },
+                                    {
+                                      key: index,
+                                      tag: "component",
+                                      attrs: {
+                                        dark: _vm.instance.dark,
+                                        light: _vm.instance.light,
+                                      },
+                                    },
                                     "component",
                                     child,
                                     false
@@ -35547,19 +35627,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                _vm.instance.centerSlot.length || !!this.$slots.centerSlot
+                _vm.instance.centerSlot.length || !!_vm.$slots.centerSlot
                   ? _c(
                       "span",
                       { ref: "centerSlot", staticClass: "zd-footer-slot-center" },
                       [
-                        !this.$slots.centerSlot
+                        !_vm.$slots.centerSlot
                           ? _vm._l(
                               _vm.instance.centerSlot,
                               function (child, index) {
                                 return _c(
                                   child.component,
                                   _vm._b(
-                                    { key: index, tag: "component" },
+                                    {
+                                      key: index,
+                                      tag: "component",
+                                      attrs: {
+                                        dark: _vm.instance.dark,
+                                        light: _vm.instance.light,
+                                      },
+                                    },
                                     "component",
                                     child,
                                     false
@@ -35575,19 +35662,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                _vm.instance.rightSlot.length || !!this.$slots.rightSlot
+                _vm.instance.rightSlot.length || !!_vm.$slots.rightSlot
                   ? _c(
                       "span",
                       { staticClass: "zd-footer-slot-right" },
                       [
-                        !this.$slots.rightSlot
+                        !_vm.$slots.rightSlot
                           ? _vm._l(
                               _vm.instance.rightSlot,
                               function (child, index) {
                                 return _c(
                                   child.component,
                                   _vm._b(
-                                    { key: index, tag: "component" },
+                                    {
+                                      key: index,
+                                      tag: "component",
+                                      attrs: {
+                                        dark: _vm.instance.dark,
+                                        light: _vm.instance.light,
+                                      },
+                                    },
                                     "component",
                                     child,
                                     false
@@ -35617,7 +35711,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   {
                     key: index,
                     tag: "component",
-                    attrs: { parent: _vm.instance },
+                    attrs: {
+                      dark: _vm.instance.dark,
+                      light: _vm.instance.light,
+                      parent: _vm.instance,
+                    },
                   },
                   "component",
                   child,
@@ -35640,11 +35738,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$X = function (inject) {
       if (!inject) return
-      inject("data-v-e8bcfdd6_0", { source: ".zd-footer-slot[data-v-e8bcfdd6] {\n  display: flex;\n  padding: 0;\n}\n.zd-footer-slot-children[data-v-e8bcfdd6] {\n  padding-bottom: var(--spacing-2);\n}\n.zd-footer-slot-left > *[data-v-e8bcfdd6], .zd-footer-slot-center > *[data-v-e8bcfdd6], .zd-footer-slot-right > *[data-v-e8bcfdd6] {\n  margin: 0 var(--spacing-1);\n}\n.zd-footer-slot-left > *[data-v-e8bcfdd6]:first-child, .zd-footer-slot-center > *[data-v-e8bcfdd6]:first-child, .zd-footer-slot-right > *[data-v-e8bcfdd6]:first-child {\n  margin-left: 0;\n}\n.zd-footer-slot-left > *[data-v-e8bcfdd6]:last-child, .zd-footer-slot-center > *[data-v-e8bcfdd6]:last-child, .zd-footer-slot-right > *[data-v-e8bcfdd6]:last-child {\n  margin-right: 0;\n}\n.zd-footer-slot-center[data-v-e8bcfdd6] {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-footer-slot-right[data-v-e8bcfdd6] {\n  margin-left: auto;\n}", map: undefined, media: undefined });
+      inject("data-v-4015ded1_0", { source: ".zd-footer-slot[data-v-4015ded1] {\n  display: flex;\n  padding: 0;\n}\n.zd-footer-slot-children[data-v-4015ded1] {\n  padding-bottom: var(--spacing-2);\n}\n.zd-footer-slot-left > *[data-v-4015ded1], .zd-footer-slot-center > *[data-v-4015ded1], .zd-footer-slot-right > *[data-v-4015ded1] {\n  margin: 0 var(--spacing-1);\n}\n.zd-footer-slot-left > *[data-v-4015ded1]:first-child, .zd-footer-slot-center > *[data-v-4015ded1]:first-child, .zd-footer-slot-right > *[data-v-4015ded1]:first-child {\n  margin-left: 0;\n}\n.zd-footer-slot-left > *[data-v-4015ded1]:last-child, .zd-footer-slot-center > *[data-v-4015ded1]:last-child, .zd-footer-slot-right > *[data-v-4015ded1]:last-child {\n  margin-right: 0;\n}\n.zd-footer-slot-center[data-v-4015ded1] {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-footer-slot-right[data-v-4015ded1] {\n  margin-left: auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$X = "data-v-e8bcfdd6";
+    const __vue_scope_id__$X = "data-v-4015ded1";
     /* module identifier */
     const __vue_module_identifier__$X = undefined;
     /* functional template */
@@ -35679,11 +35777,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       mounted() {
           this.form = this.$refs.form;
-          this.instance.setViewValidate(this.form.validate);
-          this.instance.setViewResetValidation(this.form.resetValidation);
+          if (this.form) {
+              this.instance.setViewValidate(this.form.validate);
+              this.instance.setViewResetValidation(this.form.resetValidation);
+          }
       }
       submit(event) {
-          if (this.form.validate()) {
+          var _a;
+          if ((_a = this.form) === null || _a === void 0 ? void 0 : _a.validate()) {
               this.$emit('submit', event);
               this.instance.callSubmitEvent(event, this.$el);
           }
@@ -35743,7 +35844,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ref: "form",
         class: _vm.instance.cssClass,
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
         on: {
           submit: function ($event) {
             $event.preventDefault();
@@ -35897,6 +35998,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: ["zd-frame", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [
         _vm.instance.loading
@@ -35922,7 +36024,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$V = function (inject) {
       if (!inject) return
-      inject("data-v-f668c6c6_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
+      inject("data-v-42090dcb_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -35978,6 +36080,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-frame", {
       attrs: {
+        id: _vm.instance.name + "_frame",
         name: _vm.instance.name + "_frame",
         path: _vm.instance.path,
         "instance-object": _vm.instance,
@@ -36032,7 +36135,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               initialized: false,
               visibleData: [],
           };
-          this.debouncedChangeData = debounce__default["default"]((instance, data) => { instance.changeData(data); }, 50);
       }
       mounted() {
           if (this.instance.datasource.watchUrl) {
@@ -36049,7 +36151,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
       }
       changeData(data) {
-          this.debouncedChangeData(this.instance, data);
+          this.instance.changeData(data);
       }
       rowKey(item) {
           return item[this.instance.datasource.uniqueKey];
@@ -36206,8 +36308,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               this.hideColumn(event);
               return;
           }
-          const columnsTmp = this.instance.columns.filter((a) => a.isVisible);
-          let { oldIndex, newIndex } = event;
+          const columnsTmp = this.getColumnsDOMOrder().filter((a) => a.isVisible);
+          let { oldIndex = 0, newIndex = 0 } = event;
           if (this.instance.selectable) {
               oldIndex -= 1;
               newIndex -= 1;
@@ -36219,15 +36321,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.instance.columns = columnsTmp.concat(this.instance.columns.filter((a) => !a.isVisible));
           this.instance.changeLayout(event, this.$el);
       }
+      getColumnsDOMOrder() {
+          return this.instance.columns;
+      }
       checkMove(event) {
-          return !this.instance.selectable || Array.from(event.related.classList).indexOf('selectable') === -1;
+          return event.related.classList.contains('sortHandle');
       }
       hideColumn(event) {
           let columnIndex = Number(event.item.getAttribute('index'));
           if (this.instance.selectable) {
               columnIndex -= 1;
           }
-          const column = this.instance.columns[columnIndex];
+          const column = this.getColumnsDOMOrder()[columnIndex];
           column.isVisible = false;
           this.instance.changeLayout(event, this.$el);
       }
@@ -36451,9 +36556,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Array)
   ], ZdGrid.prototype, "footerSlot", void 0);
   __decorate([
-      PropWatch({ type: String, default: 'white' }),
+      PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdGrid.prototype, "headerBackground", void 0);
+  __decorate([
+      PropWatch({ type: String, default: '' }),
+      __metadata("design:type", String)
+  ], ZdGrid.prototype, "headerCellTextColor", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: undefined }),
       __metadata("design:type", Object)
@@ -36553,8 +36662,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _vm.instance.cssClass,
         { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
       ],
-      style: [_vm.cssColorVars, _vm.instance.cssStyle],
+      style: [
+        _vm.cssColorVars,
+        _vm.instance.cssStyle,
+        _vm.instance.gridHeight
+          ? { height: _vm.$formatSize(_vm.instance.gridHeight) }
+          : {},
+      ],
       attrs: {
+        id: _vm.instance.name,
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
         "fixed-header": "",
         "disable-pagination": "",
         "hide-default-header": "",
@@ -36699,6 +36817,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                           style: {
                                             width:
                                               _vm.calcHeaderCellWidth(column),
+                                            color:
+                                              _vm.instance.headerCellTextColor,
                                           },
                                         },
                                         [
@@ -37309,7 +37429,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$T = function (inject) {
       if (!inject) return
-      inject("data-v-336d017f_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined });
+      inject("data-v-6b8d8274_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -37511,6 +37631,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
+        id: _vm.instance.name,
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
         "fixed-header": "",
         "disable-pagination": "",
         "hide-default-header": "",
@@ -38439,8 +38562,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$S = function (inject) {
       if (!inject) return
-      inject("data-v-be9c362e_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
-  ,inject("data-v-be9c362e_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-72417f9b_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
+  ,inject("data-v-72417f9b_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -38521,10 +38644,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Boolean)
   ], ZdHeader.prototype, "clippedRight", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdHeader.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -38545,10 +38664,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
       __metadata("design:type", Array)
   ], ZdHeader.prototype, "leftSlot", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdHeader.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Number, String] }),
       __metadata("design:type", Object)
@@ -38610,6 +38725,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           name: _vm.instance.name,
           app: _vm.instance.app,
           color: _vm.instance.color,
@@ -38642,12 +38758,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 attrs: { cols: "12" },
               },
               [
-                _vm.instance.leftSlot.length || !!this.$slots.leftSlot
+                _vm.instance.leftSlot.length || !!_vm.$slots.leftSlot
                   ? _c(
                       "span",
                       { staticClass: "zd-header-slot-left" },
                       [
-                        !this.$slots.leftSlot
+                        !_vm.$slots.leftSlot
                           ? _vm._l(
                               _vm.instance.leftSlot,
                               function (child, index) {
@@ -38683,12 +38799,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                _vm.instance.centerSlot.length || !!this.$slots.centerSlot
+                _vm.instance.centerSlot.length || !!_vm.$slots.centerSlot
                   ? _c(
                       "span",
                       { ref: "centerSlot", staticClass: "zd-header-slot-center" },
                       [
-                        !this.$slots.centerSlot
+                        !_vm.$slots.centerSlot
                           ? _vm._l(
                               _vm.instance.centerSlot,
                               function (child, index) {
@@ -38724,12 +38840,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                _vm.instance.rightSlot.length || !!this.$slots.rightSlot
+                _vm.instance.rightSlot.length || !!_vm.$slots.rightSlot
                   ? _c(
                       "span",
                       { staticClass: "zd-header-slot-right" },
                       [
-                        !this.$slots.rightSlot
+                        !_vm.$slots.rightSlot
                           ? _vm._l(
                               _vm.instance.rightSlot,
                               function (child, index) {
@@ -38802,7 +38918,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$R = function (inject) {
       if (!inject) return
-      inject("data-v-3717f0bf_0", { source: ".zd-header-slot {\n  display: flex;\n  padding: 0;\n  align-items: center;\n}\n.zd-header-slot-children {\n  padding-bottom: var(--spacing-2);\n}\n.zd-header-slot-left > *, .zd-header-slot-center > *, .zd-header-slot-right > * {\n  margin: 0 var(--spacing-1);\n  display: inline-flex;\n  vertical-align: middle;\n}\n.zd-header-slot-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-header-slot-right {\n  margin-left: auto;\n}\n.zd-header.padless > .v-toolbar__content {\n  padding: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-27a50a6e_0", { source: ".zd-header-slot {\n  display: flex;\n  padding: 0;\n  align-items: center;\n}\n.zd-header-slot-children {\n  padding-bottom: var(--spacing-2);\n}\n.zd-header-slot-left > *, .zd-header-slot-center > *, .zd-header-slot-right > * {\n  margin: 0 var(--spacing-1);\n  display: inline-flex;\n  vertical-align: middle;\n}\n.zd-header-slot-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-header-slot-right {\n  margin-left: auto;\n}\n.zd-header.padless > .v-toolbar__content {\n  padding: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -38863,7 +38979,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return _vm.footerSlot.length || !!_vm.$slots.default
       ? _c(
           "div",
-          { ref: "footer", staticClass: "zd-grid-footer" },
+          {
+            ref: "footer",
+            staticClass: "zd-grid-footer",
+            attrs: { id: _vm.instance.name + "-footer" },
+          },
           [
             _vm._l(_vm.instance.footerSlot, function (child, index) {
               return _c(
@@ -38972,12 +39092,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c(
       "div",
+      { attrs: { id: _vm.instance.name } },
       [
         _vm.instance.datasource.error
           ? [
               _vm._t("errorSlot"),
               _vm._v(" "),
-              !this.$slots.errorSlot
+              !_vm.$slots.errorSlot
                 ? _vm._l(_vm.instance.errorSlot, function (child, index) {
                     return _c(
                       child.component,
@@ -39007,7 +39128,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 ? [
                     _vm._t("noResultSlot"),
                     _vm._v(" "),
-                    !this.$slots.noResultSlot
+                    !_vm.$slots.noResultSlot
                       ? _vm._l(
                           _vm.instance.noResultSlot,
                           function (child, index) {
@@ -39031,7 +39152,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 : [
                     _vm._t("noDataSlot"),
                     _vm._v(" "),
-                    !this.$slots.noDataSlot
+                    !_vm.$slots.noDataSlot
                       ? _vm._l(_vm.instance.noDataSlot, function (child, index) {
                           return _c(
                             child.component,
@@ -39114,32 +39235,44 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _vm.toolbarSlot.length || !!_vm.$slots.default
-      ? _c("div", { ref: "header", staticClass: "zd-grid-toolbar" }, [
-          _c(
-            "div",
-            { staticClass: "zd-grid-toolbar-slot" },
-            [
-              _vm._l(_vm.instance.toolbarSlot, function (child, index) {
-                return _c(
-                  child.component,
-                  _vm._b(
-                    {
-                      key: index,
-                      tag: "component",
-                      attrs: { parent: _vm.instance },
-                    },
-                    "component",
-                    child,
-                    false
+      ? _c(
+          "div",
+          {
+            ref: "header",
+            staticClass: "zd-grid-toolbar",
+            attrs: {
+              id: _vm.instance.name + "-top",
+              dark: _vm.toolbarSlot.dark,
+              light: _vm.toolbarSlot.light,
+            },
+          },
+          [
+            _c(
+              "div",
+              { staticClass: "zd-grid-toolbar-slot" },
+              [
+                _vm._l(_vm.instance.toolbarSlot, function (child, index) {
+                  return _c(
+                    child.component,
+                    _vm._b(
+                      {
+                        key: index,
+                        tag: "component",
+                        attrs: { parent: _vm.instance },
+                      },
+                      "component",
+                      child,
+                      false
+                    )
                   )
-                )
-              }),
-              _vm._v(" "),
-              _vm._t("default"),
-            ],
-            2
-          ),
-        ])
+                }),
+                _vm._v(" "),
+                _vm._t("default"),
+              ],
+              2
+            ),
+          ]
+        )
       : _vm._e()
   };
   var __vue_staticRenderFns__$O = [];
@@ -39194,10 +39327,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdIcon.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdIcon.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -39214,10 +39343,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdIcon.prototype, "left", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdIcon.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
@@ -39266,6 +39391,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             ],
             class: [_vm.instance.cssClass, "zd-icon"],
             style: _vm.instance.cssStyle,
+            attrs: { id: _vm.instance.name },
           },
           "v-icon",
           {
@@ -39383,7 +39509,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: ["zd-image", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
       },
       [
         _vm.instance.errorImagePath && _vm.instance.validImage !== true
@@ -39471,7 +39597,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$M = function (inject) {
       if (!inject) return
-      inject("data-v-e7f0230c_0", { source: ".zd-image {\n  position: relative;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-6ec874e8_0", { source: ".zd-image {\n  position: relative;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39536,7 +39662,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return _c("zd-number", {
       ref: "instance",
       class: ["zd-increment"],
-      attrs: { name: "increment", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "increment",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$L = [];
@@ -39545,7 +39675,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$L = function (inject) {
       if (!inject) return
-      inject("data-v-6258f45a_0", { source: ".zd-increment.align-right > .v-input__control > .v-input__slot {\n  width: 120px;\n}\n.zd-increment.align-right > .v-input__control > .v-input__slot input {\n  text-align: center;\n}", map: undefined, media: undefined });
+      inject("data-v-608d4765_0", { source: ".zd-increment.align-right > .v-input__control > .v-input__slot {\n  width: 120px;\n}\n.zd-increment.align-right > .v-input__control > .v-input__slot input {\n  text-align: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39593,6 +39723,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [
         _vm._l(_vm.instance.children, function (child, index) {
@@ -39709,6 +39840,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-iterable-columns-button", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           closeOnContentClick: false,
           "offset-y": "",
           "content-class": "zd-iterable-columns-button-options",
@@ -39788,7 +39920,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$J = function (inject) {
       if (!inject) return
-      inject("data-v-23054624_0", { source: ".zd-iterable-columns-button-option {\n  min-height: 32px;\n}\n.zd-iterable-columns-button-options {\n  max-height: 200px;\n  overflow: auto;\n}", map: undefined, media: undefined });
+      inject("data-v-7df9cd1c_0", { source: ".zd-iterable-columns-button-option {\n  min-height: 32px;\n}\n.zd-iterable-columns-button-options {\n  max-height: 200px;\n  overflow: auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39955,6 +40087,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: ["zd-iterable-pagination", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [
         _c("v-pagination", {
@@ -39990,7 +40123,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$I = function (inject) {
       if (!inject) return
-      inject("data-v-54b76118_0", { source: ".zd-iterable-pagination {\n  padding: 0;\n  max-width: calc(100% - 200px);\n  margin-left: 0;\n}\n.zd-iterable-pagination .v-pagination {\n  width: auto;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  box-shadow: none;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  background-color: transparent;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation, .zd-iterable-pagination .v-pagination .v-pagination__more {\n  margin: 0 var(--spacing-1);\n  height: 36px;\n  width: 36px;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  border: solid var(--regular) var(--v-grey-lighten3);\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation .v-icon {\n  font-size: var(--icon-size);\n}\n.zd-iterable-pagination .v-pagination li:first-child .v-pagination__navigation {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-iterable-pagination .v-pagination li:last-child .v-pagination__navigation {\n  margin: 0 0 0 var(--spacing-1);\n}", map: undefined, media: undefined });
+      inject("data-v-7791c13c_0", { source: ".zd-iterable-pagination {\n  padding: 0;\n  max-width: calc(100% - 200px);\n  margin-left: 0;\n}\n.zd-iterable-pagination .v-pagination {\n  width: auto;\n}\n.zd-iterable-pagination .v-pagination.theme--dark .v-pagination__item--active {\n  color: #fff;\n  background: #282828 !important;\n  border-color: #282828 !important;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  box-shadow: none;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  background-color: transparent;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation, .zd-iterable-pagination .v-pagination .v-pagination__more {\n  margin: 0 var(--spacing-1);\n  height: 36px;\n  width: 36px;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  border: solid var(--regular) var(--v-grey-lighten3);\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation .v-icon {\n  font-size: var(--icon-size);\n}\n.zd-iterable-pagination .v-pagination li:first-child .v-pagination__navigation {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-iterable-pagination .v-pagination li:last-child .v-pagination__navigation {\n  margin: 0 0 0 var(--spacing-1);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40240,6 +40373,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ],
       style: _vm.instance.cssStyle,
       attrs: {
+        id: _vm.instance.name,
         "return-object": "",
         "validate-on-blur": "",
         "no-filter": "",
@@ -40316,7 +40450,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
       scopedSlots: _vm._u(
         [
-          _vm.instance.itemBeforeSlot.length || !!this.$slots.itemBeforeSlot
+          _vm.instance.itemBeforeSlot.length || !!_vm.$slots.itemBeforeSlot
             ? {
                 key: "prepend-item",
                 fn: function () {
@@ -40327,6 +40461,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       [
                         _c(
                           "v-list-item",
+                          {
+                            attrs: {
+                              dark: _vm.instance.dark,
+                              light: _vm.instance.light,
+                            },
+                          },
                           [
                             _c(
                               "v-list-item-content",
@@ -40487,7 +40627,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$H = function (inject) {
       if (!inject) return
-      inject("data-v-34404a80_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
+      inject("data-v-16a646ec_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40586,7 +40726,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ref: "instance",
       class: ["zd-iterable-page-size", _vm.instance.cssClass],
       style: _vm.instance.cssStyle,
-      attrs: { name: "iterable-page-size", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "iterable-page-size",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$G = [];
@@ -40595,7 +40739,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$G = function (inject) {
       if (!inject) return
-      inject("data-v-a6392d74_0", { source: ".zd-iterable-page-size {\n  max-width: 80px;\n}\n.zd-iterable-page-size.theme--light {\n  background: white;\n}\n.zd-iterable-page-size.theme--dark {\n  background: #121212;\n}\n.zd-iterable-page-size.zd-input.zd-no-label {\n  margin: 0 0 0 var(--spacing-4);\n}\n.zd-iterable-page-size.v-input {\n  align-items: center;\n}", map: undefined, media: undefined });
+      inject("data-v-2144b958_0", { source: ".zd-iterable-page-size {\n  max-width: 80px;\n}\n.zd-iterable-page-size.theme--light {\n  background: white;\n}\n.zd-iterable-page-size.theme--dark {\n  background: #121212;\n}\n.zd-iterable-page-size.zd-input.zd-no-label {\n  margin: 0 0 0 var(--spacing-4);\n}\n.zd-iterable-page-size.v-input {\n  align-items: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40658,6 +40802,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: ["zd-iterable-page-info", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [_vm._v("\n  " + _vm._s(_vm.instance.iterableComponent.pageText) + "\n")]
     )
@@ -40668,7 +40813,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$F = function (inject) {
       if (!inject) return
-      inject("data-v-3468fd93_0", { source: ".zd-iterable-page-info {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  white-space: nowrap;\n  margin-left: var(--spacing-4);\n  height: 24px;\n  line-height: 24px;\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-8f2a94b6_0", { source: ".zd-iterable-page-info {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  white-space: nowrap;\n  margin-left: var(--spacing-4);\n  height: 24px;\n  line-height: 24px;\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40708,10 +40853,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return index + 1 === this.instance.items.length;
       }
   };
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdList.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -40724,10 +40865,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdList.prototype, "divided", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdList.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -40779,6 +40916,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-list", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           dark: _vm.instance.dark,
           dense: _vm.instance.dense,
           disabled: _vm.instance.disabled,
@@ -40792,7 +40930,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         },
       },
       [
-        !this.$slots.items
+        !_vm.$slots.items
           ? [
               _vm._l(_vm.instance.items, function (item, index) {
                 return [
@@ -40829,7 +40967,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$E = function (inject) {
       if (!inject) return
-      inject("data-v-6ba939cc_0", { source: ".zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
+      inject("data-v-ac169338_0", { source: ".zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40909,7 +41047,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$D = function (inject) {
       if (!inject) return
-      inject("data-v-19195620_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
+      inject("data-v-6cd27a94_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41013,10 +41151,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-list-item", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           disabled: _vm.instance.disabled,
           ripple: _vm.instance.ripple,
           twoLine: _vm.instance.twoLine,
           threeLine: _vm.instance.threeLine,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
         },
         on: {
           click: function ($event) {
@@ -41026,7 +41167,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
       [
         (_vm.instance.leftField || _vm.instance.prependIcon) &&
-        !this.$slots.leftField
+        !_vm.$slots.leftField
           ? _c(
               "div",
               {
@@ -41065,7 +41206,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         }),
         _vm._v(" "),
         (_vm.instance.rightField || _vm.instance.appendIcon) &&
-        !this.$slots.rightField
+        !_vm.$slots.rightField
           ? _c(
               "div",
               {
@@ -41187,6 +41328,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           eager: !_vm.instance.lazyLoad,
           ripple: _vm.instance.ripple,
           disabled: _vm.instance.disabled,
@@ -41204,7 +41346,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 return [
                   _vm._t("leftField"),
                   _vm._v(" "),
-                  _vm.instance.leftField && !this.$slots.leftField
+                  _vm.instance.leftField && !_vm.$slots.leftField
                     ? _c(
                         _vm.instance.leftField.component,
                         _vm._b(
@@ -41247,7 +41389,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 return [
                   _vm._t("rightField"),
                   _vm._v(" "),
-                  _vm.instance.rightField && !this.$slots.rightField
+                  _vm.instance.rightField && !_vm.$slots.rightField
                     ? _c(
                         _vm.instance.rightField.component,
                         _vm._b(
@@ -41290,7 +41432,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           "v-list",
           { class: ["zd-list zd-pl-4 zd-py-0 group-list"] },
           [
-            !this.$slots.items
+            !_vm.$slots.items
               ? _vm._l(_vm.instance.items, function (item) {
                   return _c(
                     item.component,
@@ -41322,7 +41464,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$B = function (inject) {
       if (!inject) return
-      inject("data-v-1066a33a_0", { source: ".zd-list-group .group-list {\n  background-color: inherit;\n}\n.zd-list-group.v-list-item--two-line > .v-list-item, .zd-list-group.v-list-item--three-line > .v-list-item {\n  min-height: inherit;\n}", map: undefined, media: undefined });
+      inject("data-v-a8f366d4_0", { source: ".zd-list-group .group-list {\n  background-color: inherit;\n}\n.zd-list-group.v-list-item--two-line > .v-list-item, .zd-list-group.v-list-item--three-line > .v-list-item {\n  min-height: inherit;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41415,9 +41557,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: [_vm.cssClass],
         style: [_vm.cssStyle],
         attrs: {
+          id: _vm.loading.name,
           opacity: _vm.opacity,
           value: _vm.loading.isVisible,
           "z-index": _vm.zIndex,
+          dark: _vm.loading.dark,
+          light: _vm.loading.light,
         },
       },
       [
@@ -41463,7 +41608,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$A = function (inject) {
       if (!inject) return
-      inject("data-v-588f3078_0", { source: ".text {\n  font-size: var(--zd-font-headline-size);\n  margin-top: 15px;\n}\n.center-div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-flow: column;\n}\n.zd-loading .zd-loading-progress > svg,\n.zd-loading .zd-loading-progress > svg .v-progress-circular__overlay {\n  -webkit-animation-play-state: running !important;\n  animation-play-state: running !important;\n}", map: undefined, media: undefined });
+      inject("data-v-93f52a16_0", { source: ".text {\n  font-size: var(--zd-font-headline-size);\n  margin-top: 15px;\n}\n.center-div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-flow: column;\n}\n.zd-loading .zd-loading-progress > svg,\n.zd-loading .zd-loading-progress > svg .v-progress-circular__overlay {\n  -webkit-animation-play-state: running !important;\n  animation-play-state: running !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41570,14 +41715,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: [_vm.instance.cssClass, "zd-login"],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
       },
       [
         _c(
           "div",
           {
-            staticClass: "layout align-center zd-login",
-            class: "position-" + _vm.instance.layout,
+            class: [
+              "layout",
+              "align-center",
+              "position-" + _vm.instance.layout,
+              "zd-login-content",
+            ],
             style: "background: " + _vm.instance.backgroundStyle + ";",
           },
           [
@@ -41585,7 +41734,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               "v-card",
               {
                 staticClass: "zd-login-card",
-                attrs: { width: _vm.instance.cardWidth },
+                attrs: {
+                  width: _vm.instance.cardWidth,
+                  dark: _vm.instance.dark,
+                  light: _vm.instance.light,
+                },
               },
               [
                 _c("div", { staticClass: "zd-login-toolbar" }, [
@@ -41639,7 +41792,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     )
                   : _vm._e(),
                 _vm._v(" "),
-                _vm.instance.bottomLink.length && !this.$slots.bottomLink
+                _vm.instance.bottomLink.length && !_vm.$slots.bottomLink
                   ? _c(
                       "div",
                       { staticClass: "zd-login-sign-in" },
@@ -41697,7 +41850,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-473f2372_0", { source: ".zd-login {\n  background-size: cover !important;\n  height: 100%;\n}\n@media only screen and (max-width: 730px) {\n.zd-login .zd-login div.zd-login-card {\n    height: 100%;\n    border-radius: unset;\n    width: 100%;\n}\n.zd-login .zd-login .flex {\n    height: 100%;\n}\n}\n@media only screen and (max-width: 960px) {\n.zd-login .zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-right {\n  width: unset;\n  justify-content: flex-end;\n}\n.zd-login .position-right .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-right .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-center {\n  justify-content: center;\n}\n.zd-login .position-center .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 100%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-content {\n  width: 100%;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
+      inject("data-v-557ec43a_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .flex {\n    height: 100%;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-right {\n  width: unset;\n  justify-content: flex-end;\n}\n.zd-login .position-right .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-right .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-center {\n  justify-content: center;\n}\n.zd-login .position-center .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41757,7 +41910,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-button", {
       staticClass: "zd-login-button",
-      attrs: { name: "login-button", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "login-button",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$y = [];
@@ -41830,13 +41987,22 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [
         _vm._l(_vm.instance.children, function (child, index) {
           return _c(
             child.component,
             _vm._b(
-              { key: index, tag: "component", attrs: { parent: _vm.instance } },
+              {
+                key: index,
+                tag: "component",
+                attrs: {
+                  parent: _vm.instance,
+                  dark: _vm.instance.dark,
+                  light: _vm.instance.light,
+                },
+              },
               "component",
               child,
               false
@@ -41929,10 +42095,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdMenu.prototype, "floating", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Object)
-  ], ZdMenu.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: true }),
       __metadata("design:type", Object)
@@ -42023,6 +42185,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             expression: "instance.isVisible",
           },
         ],
+        attrs: { id: _vm.instance.name },
         on: {
           mouseenter: function ($event) {
             return _vm.instance.menuMouseEnter()
@@ -42074,6 +42237,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   app: _vm.instance.app,
                   clipped: _vm.instance.clipped,
                   dark: _vm.instance.dark,
+                  light: _vm.instance.light,
                   fixed: _vm.instance.fixed,
                   floating: _vm.instance.floating,
                   "mini-variant-width": _vm.instance.miniWidth,
@@ -42096,7 +42260,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   [
                     _vm.instance.topSlot.length ||
                     _vm.instance.showSearch ||
-                    !!this.$slots.topSlot
+                    !!_vm.$slots.topSlot
                       ? _c(
                           "span",
                           {
@@ -42123,18 +42287,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                 )
                               : _vm._e(),
                             _vm._v(" "),
-                            !this.$slots.topSlot
+                            !_vm.$slots.topSlot
                               ? _vm._l(_vm.instance.topSlot, function (item) {
                                   return _c(
                                     item.component,
-                                    _vm._g(
-                                      _vm._b(
-                                        { key: item.name, tag: "component" },
-                                        "component",
-                                        item,
-                                        false
-                                      ),
-                                      item.events
+                                    _vm._b(
+                                      { key: item.name, tag: "component" },
+                                      "component",
+                                      item,
+                                      false
                                     )
                                   )
                                 })
@@ -42181,7 +42342,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$w = function (inject) {
       if (!inject) return
-      inject("data-v-72b43690_0", { source: ".zd-menu .v-list .v-list-item .v-list-item__title {\n  font-weight: var(--zd-font-body1-weight);\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n  text-align: left;\n}\n.zd-menu .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {\n  opacity: 0;\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .zd-menu-top-slot {\n  margin-bottom: 10px;\n  display: block;\n}\n.zd-menu.v-navigation-drawer--mini-variant .v-list-item {\n  justify-content: inherit;\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__title {\n  color: var(--v--grey-lighten5);\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--v--grey-lighten5);\n}", map: undefined, media: undefined });
+      inject("data-v-e6c32b74_0", { source: ".zd-menu .v-list .v-list-item .v-list-item__title {\n  font-weight: var(--zd-font-body1-weight);\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n  text-align: left;\n}\n.zd-menu .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {\n  opacity: 0;\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .zd-menu-top-slot {\n  margin-bottom: 10px;\n  display: block;\n}\n.zd-menu.v-navigation-drawer--mini-variant .v-list-item {\n  justify-content: inherit;\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__title {\n  color: var(--v--grey-lighten5);\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--v--grey-lighten5);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42282,7 +42443,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         staticClass: "zd-menu-link",
         class: [{ selected: _vm.instance.isSelected() }, _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
-        attrs: { to: _vm.instance.route, link: "" },
+        attrs: { id: _vm.instance.name, to: _vm.instance.route, link: "" },
         on: {
           click: function ($event) {
             return _vm.instance.click($event)
@@ -42319,11 +42480,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$v = function (inject) {
       if (!inject) return
-      inject("data-v-3f979d99_0", { source: ".zd-menu-link .zd-menu-link-icon[data-v-3f979d99] {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}", map: undefined, media: undefined });
+      inject("data-v-43cb4ac7_0", { source: ".zd-menu-link .zd-menu-link-icon[data-v-43cb4ac7] {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$v = "data-v-3f979d99";
+    const __vue_scope_id__$v = "data-v-43cb4ac7";
     /* module identifier */
     const __vue_module_identifier__$v = undefined;
     /* functional template */
@@ -42431,7 +42592,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           _vm.instance.cssClass,
         ],
         style: _vm.instance.cssStyle,
-        attrs: { "prepend-icon": _vm.$getIcon(_vm.instance.icon) },
+        attrs: {
+          id: _vm.instance.name,
+          "prepend-icon": _vm.$getIcon(_vm.instance.icon),
+        },
         on: { mouseenter: _vm.mouseEnter },
         model: {
           value: _vm.instance.opened,
@@ -42502,7 +42666,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$u = function (inject) {
       if (!inject) return
-      inject("data-v-79c4d25f_0", { source: ".zd-menu-group .v-list-group__header .v-list-group__header__prepend-icon {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}\n.zd-menu-group .zd-menu-group-arrow-icon {\n  position: absolute;\n  top: 10px;\n  font-size: 18px;\n  transform: rotate(-90deg);\n}\n.zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 48px;\n}\n.zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 58px;\n}\n.zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 68px;\n}\n.zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 78px;\n}", map: undefined, media: undefined });
+      inject("data-v-42e27f1e_0", { source: ".zd-menu-group .v-list-group__header .v-list-group__header__prepend-icon {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}\n.zd-menu-group .zd-menu-group-arrow-icon {\n  position: absolute;\n  top: 10px;\n  font-size: 18px;\n  transform: rotate(-90deg);\n}\n.zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 48px;\n}\n.zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 58px;\n}\n.zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 68px;\n}\n.zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 78px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42570,7 +42734,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-button", {
       staticClass: "zd-menu-button",
-      attrs: { name: "menu-button", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "menu-button",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$t = [];
@@ -42637,6 +42805,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         },
       ],
       staticClass: "zd-menu-separator",
+      attrs: { id: _vm.instance.name },
     })
   };
   var __vue_staticRenderFns__$s = [];
@@ -42645,11 +42814,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$s = function (inject) {
       if (!inject) return
-      inject("data-v-3bb57b9d_0", { source: ".zd-menu-separator[data-v-3bb57b9d] {\n  margin-bottom: 4px;\n}", map: undefined, media: undefined });
+      inject("data-v-7486d969_0", { source: ".zd-menu-separator[data-v-7486d969] {\n  margin-bottom: 4px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$s = "data-v-3bb57b9d";
+    const __vue_scope_id__$s = "data-v-7486d969";
     /* module identifier */
     const __vue_module_identifier__$s = undefined;
     /* functional template */
@@ -42713,8 +42882,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           {
             key: modal.name + modal.isVisible,
             attrs: {
+              id: modal.name,
               persistent: modal.persistent,
               fullscreen: modal.fullscreen,
+              dark: modal.dark,
+              light: modal.light,
               "content-class":
                 "zd-modal-content " +
                 _vm.getSizeClass(modal) +
@@ -42793,7 +42965,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$r = function (inject) {
       if (!inject) return
-      inject("data-v-0f378edc_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
+      inject("data-v-3ce1058e_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42861,7 +43033,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-button", {
       staticClass: "zd-modal-close-button",
-      attrs: { name: "modal-close-button", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "modal-close-button",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$q = [];
@@ -42932,7 +43108,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-date", {
       ref: "instance",
-      attrs: { name: "month-picker", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "month-picker",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$p = [];
@@ -42991,7 +43171,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c("zd-text-input", {
       ref: "instance",
-      attrs: { name: "password", "instance-object": _vm.instance },
+      attrs: {
+        id: _vm.instance.name,
+        name: "password",
+        "instance-object": _vm.instance,
+      },
     })
   };
   var __vue_staticRenderFns__$o = [];
@@ -43047,10 +43231,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: 'primary' }),
       __metadata("design:type", String)
   ], ZdProgress.prototype, "color", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdProgress.prototype, "dark", void 0);
   __decorate([
       PropWatch({ type: [Number, String], default: 4 }),
       __metadata("design:type", Object)
@@ -43059,10 +43239,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdProgress.prototype, "indeterminate", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdProgress.prototype, "light", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: [Array, String], default: () => [] }),
       __metadata("design:type", Array)
@@ -43098,6 +43274,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ],
           class: [_vm.instance.cssClass],
           style: _vm.instance.cssStyle,
+          attrs: { id: _vm.instance.name },
           on: {
             click: function ($event) {
               return _vm.click($event)
@@ -43119,11 +43296,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         false
       ),
       [
-        _vm.instance.centerSlot.length || !!this.$slots.centerSlot
+        _vm.instance.centerSlot.length || !!_vm.$slots.centerSlot
           ? _c(
               "div",
               [
-                !this.$slots.centerSlot
+                !_vm.$slots.centerSlot
                   ? _vm._l(_vm.instance.centerSlot, function (child, index) {
                       return _c(
                         child.component,
@@ -43240,6 +43417,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             },
           ],
           style: _vm.instance.cssStyle,
+          attrs: {
+            id: _vm.instance.name,
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+          },
           on: {
             change: function ($event) {
               return _vm.change($event)
@@ -43296,7 +43478,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$m = function (inject) {
       if (!inject) return
-      inject("data-v-d146152a_0", { source: ".zd-radio {\n  margin: 0;\n  padding: 0;\n}\n.zd-radio .v-input--radio-group__input > .v-label {\n  width: 100%;\n}\n.zd-radio .v-label {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size) !important;\n  font-weight: var(--zd-font-body1-weight);\n}\n.zd-radio .v-input--selection-controls__input {\n  height: var(--icon-size);\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-radio.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 0 var(--spacing-2) 0;\n}\n.zd-radio.v-input--radio-group--row .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 var(--spacing-4) 0 0;\n}\n.zd-radio .v-input--selection-controls__ripple {\n  border-radius: 50%;\n  cursor: pointer;\n  height: 24px;\n  position: absolute;\n  transition: inherit;\n  width: 24px;\n  left: -7px;\n  top: calc(50% - 19px);\n  margin: 7px;\n}", map: undefined, media: undefined });
+      inject("data-v-8cea505e_0", { source: ".zd-radio {\n  margin: 0;\n  padding: 0;\n}\n.zd-radio .v-input--radio-group__input > .v-label {\n  width: 100%;\n}\n.zd-radio .v-label {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size) !important;\n  font-weight: var(--zd-font-body1-weight);\n}\n.zd-radio .v-input--selection-controls__input {\n  height: var(--icon-size);\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-radio.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 0 var(--spacing-2) 0;\n}\n.zd-radio.v-input--radio-group--row .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 var(--spacing-4) 0 0;\n}\n.zd-radio .v-input--selection-controls__ripple {\n  border-radius: 50%;\n  cursor: pointer;\n  height: 24px;\n  position: absolute;\n  transition: inherit;\n  width: 24px;\n  left: -7px;\n  top: calc(50% - 19px);\n  margin: 7px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -43464,6 +43646,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         ref: "instance",
+        attrs: { id: _vm.instance.name },
       },
       [
         _c(
@@ -43598,7 +43781,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$l = function (inject) {
       if (!inject) return
-      inject("data-v-478cc6a5_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
+      inject("data-v-692004ba_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -43679,6 +43862,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           class: _vm.instance.cssClass,
           style: _vm.instance.cssStyle,
           attrs: {
+            id: _vm.instance.name,
             name: _vm.instance.name,
             dense: _vm.instance.dense,
             justify: _vm.instance.justify,
@@ -43795,6 +43979,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ref: "instance",
       staticClass: "zd-grid-search",
       attrs: {
+        id: _vm.instance.name,
         name: "zdGridSearch",
         value: _vm.getSearchValue(),
         "instance-object": _vm.instance,
@@ -44090,6 +44275,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ],
       style: _vm.instance.cssStyle,
       attrs: {
+        id: _vm.instance.name,
         "return-object": "",
         "validate-on-blur": "",
         "no-filter": "",
@@ -44454,7 +44640,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$i = function (inject) {
       if (!inject) return
-      inject("data-v-3f9b7ff8_0", { source: ".zd-select-multiple--one-line .v-select__slot .v-select__selections {\n  flex-wrap: nowrap;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections input {\n  position: relative;\n  top: -2px;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
+      inject("data-v-7d99b3b4_0", { source: ".zd-select-multiple--one-line .v-select__slot .v-select__selections {\n  flex-wrap: nowrap;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections input {\n  position: relative;\n  top: -2px;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44566,6 +44752,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdSelectTree.prototype, "disableParentNode", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ validator: (prop) => typeof prop === 'boolean' || prop === null }),
+      __metadata("design:type", Boolean)
+  ], ZdSelectTree.prototype, "preventLoadOnFocus", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Object, default: () => ({}) }),
       __metadata("design:type", Object)
@@ -44651,9 +44841,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             "zd-input-required": _vm.instance.validations.required,
             "zd-select-tree-error": _vm.instance.validationError !== "",
           },
+          {
+            "theme--dark":
+              (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
+              _vm.instance.dark,
+          },
+          { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
         ],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
         on: { click: _vm.click },
       },
       [
@@ -44666,6 +44862,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   "v-icon",
                   {
                     staticClass: "zd-select-tree-prepend-outer-icon",
+                    attrs: { dark: _vm.instance.dark, light: _vm.instance.light },
                     on: {
                       click: function ($event) {
                         return _vm.instance.prependOuterIconClick($event, _vm.$el)
@@ -44684,7 +44881,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             _vm._v(" "),
             _c(
               "div",
-              { staticClass: "zd-select-tree-input-container" },
+              {
+                class: [
+                  "zd-select-tree-input-container",
+                  {
+                    "theme--dark":
+                      (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
+                      _vm.instance.dark,
+                  },
+                  {
+                    "theme--light":
+                      !_vm.$vuetify.theme.dark || _vm.instance.light,
+                  },
+                ],
+              },
               [
                 _vm.instance.label && _vm.instance.showLabel
                   ? _c("zd-text", {
@@ -44731,14 +44941,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     },
                   },
                   model: {
-                    value: _vm.instance.value,
+                    value: _vm.instance.selectValue,
                     callback: function ($$v) {
-                      _vm.$set(_vm.instance, "value", $$v);
+                      _vm.$set(_vm.instance, "selectValue", $$v);
                     },
-                    expression: "instance.value",
+                    expression: "instance.selectValue",
                   },
                 }),
                 _vm._v(" "),
+                !!_vm.instance.datasource && _vm.instance.datasource.loading
+                  ? _c("v-progress-linear", {
+                      staticClass: "zd-select-tree-loading",
+                      attrs: {
+                        active:
+                          !!_vm.instance.datasource &&
+                          _vm.instance.datasource.loading,
+                        indeterminate: "",
+                        absolute: "",
+                        color: "primary",
+                        height: "2",
+                      },
+                    })
+                  : _vm._e(),
+                _vm._v(" "),
                 !_vm.instance.autoHintDetails ||
                 _vm.instance.hint ||
                 _vm.instance.validationError !== ""
@@ -44753,7 +44978,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                             { staticClass: "zd-select-tree-details-message" },
                             [
                               _vm._v(
-                                " \n          " +
+                                "\n          " +
                                   _vm._s(
                                     _vm.instance.validationError ||
                                       _vm.instance.hint
@@ -44801,7 +45026,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$h = function (inject) {
       if (!inject) return
-      inject("data-v-739fe33d_0", { source: ".zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--single .vue-treeselect__option--selected {\n  background: #7725831a;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n}\n.vue-treeselect--single .vue-treeselect__option--selected:hover {\n  background: #7725831a;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
+      inject("data-v-1b189cb7_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--single .vue-treeselect__option--selected {\n  background: #7725831a;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n}\n.vue-treeselect--single .vue-treeselect__option--selected:hover {\n  background: #7725831a;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44890,9 +45115,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             "zd-input-required": _vm.instance.validations.required,
             "zd-select-tree-error": _vm.instance.validationError !== "",
           },
+          {
+            "theme--dark":
+              (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
+              _vm.instance.dark,
+          },
+          { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
         ],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
       },
       [
         _c(
@@ -44971,14 +45202,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     "search-change": _vm.onSearchChange,
                   },
                   model: {
-                    value: _vm.instance.value,
+                    value: _vm.instance.selectValue,
                     callback: function ($$v) {
-                      _vm.$set(_vm.instance, "value", $$v);
+                      _vm.$set(_vm.instance, "selectValue", $$v);
                     },
-                    expression: "instance.value",
+                    expression: "instance.selectValue",
                   },
                 }),
                 _vm._v(" "),
+                !!_vm.instance.datasource && _vm.instance.datasource.loading
+                  ? _c("v-progress-linear", {
+                      staticClass: "zd-select-tree-multiple-loading",
+                      attrs: {
+                        active:
+                          !!_vm.instance.datasource &&
+                          _vm.instance.datasource.loading,
+                        indeterminate: "",
+                        absolute: "",
+                        color: "primary",
+                        height: "2",
+                      },
+                    })
+                  : _vm._e(),
+                _vm._v(" "),
                 !_vm.instance.autoHintDetails ||
                 _vm.instance.hint ||
                 _vm.instance.validationError !== ""
@@ -44993,7 +45239,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                             { staticClass: "zd-select-tree-details-message" },
                             [
                               _vm._v(
-                                " \n          " +
+                                "\n          " +
                                   _vm._s(
                                     _vm.instance.validationError ||
                                       _vm.instance.hint
@@ -45041,7 +45287,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$g = function (inject) {
       if (!inject) return
-      inject("data-v-69409e22_0", { source: ".zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 2px;\n  padding-bottom: 2px;\n  line-height: 15px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}", map: undefined, media: undefined });
+      inject("data-v-2650a72c_0", { source: ".zd-select-tree-multiple-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree-multiple.theme--dark .vue-treeselect__control .vue-treeselect__input {\n  color: #fff;\n}\n.zd-select-tree-multiple.theme--dark .vue-treeselect__menu {\n  background-color: #1e1e1e;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 2px;\n  padding-bottom: 2px;\n  line-height: 15px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45141,7 +45387,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ],
           class: [_vm.instance.cssClass, "zd-speed-dial"],
           style: _vm.instance.cssStyle,
-          attrs: { name: _vm.instance.name },
+          attrs: { id: _vm.instance.name, name: _vm.instance.name },
           scopedSlots: _vm._u([
             {
               key: "activator",
@@ -45278,14 +45524,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
   ], ZdSteppers.prototype, "nonLinear", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdSteppers.prototype, "dark", void 0);
-  __decorate([
-      PropWatch({ type: [Boolean, String], default: false }),
-      __metadata("design:type", Boolean)
-  ], ZdSteppers.prototype, "light", void 0);
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Boolean)
@@ -45321,8 +45559,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         class: ["zd-stepper", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
         attrs: {
+          id: _vm.instance.name,
           "alt-labels": _vm.instance.altLabels,
           vertical: _vm.instance.vertical,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
         },
         model: {
           value: _vm.instance.activeStep,
@@ -45454,11 +45695,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$e = function (inject) {
       if (!inject) return
-      inject("data-v-4ca20fbf_0", { source: ".zd-stepper[data-v-4ca20fbf] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-4ca20fbf] .v-stepper__step__step {\n  margin: 0 var(--spacing-2) 0 0;\n}", map: undefined, media: undefined });
+      inject("data-v-568f9116_0", { source: ".zd-stepper[data-v-568f9116] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-568f9116] .v-stepper__step__step {\n  margin: 0 var(--spacing-2) 0 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$e = "data-v-4ca20fbf";
+    const __vue_scope_id__$e = "data-v-568f9116";
     /* module identifier */
     const __vue_module_identifier__$e = undefined;
     /* functional template */
@@ -45586,7 +45827,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ),
         _vm.instance.cssStyle,
       ],
-      attrs: { name: _vm.instance.name },
+      attrs: { id: _vm.instance.name, name: _vm.instance.name },
       on: {
         click: function ($event) {
           return _vm.mapClick($event)
@@ -45600,7 +45841,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$d = function (inject) {
       if (!inject) return
-      inject("data-v-9a5f4ff8_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
+      inject("data-v-fe67069c_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45660,7 +45901,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c(
       "span",
-      _vm._g({}, Object.assign({}, _vm.$attrs["dropdown-activator"])),
+      _vm._g(
+        { attrs: { id: _vm.instance.name } },
+        Object.assign({}, _vm.$attrs["dropdown-activator"])
+      ),
       [
         _c(
           "v-switch",
@@ -45737,7 +45981,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$c = function (inject) {
       if (!inject) return
-      inject("data-v-270dd452_0", { source: ".zd-switch {\n  margin: 0;\n  padding: 3px 0 0 0;\n}\n.zd-switch .v-label.theme--light {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {\n  box-shadow: var(--shadow-1);\n}\n.zd-switch.zd-no-label .v-label {\n  display: none;\n}\n.zd-switch.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__track {\n  height: var(--icon-size);\n  top: calc(50% - var(--icon-size) / 2);\n}\n.zd-switch.v-input--switch--inset .v-input--selection-controls__ripple {\n  left: calc(-24px + var(--icon-size-small) / 2);\n}\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--selection-controls__ripple,\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--switch__thumb {\n  transform: translate(calc(48px - var(--icon-size-small) - 2 * var(--spacing-1))) !important;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__thumb {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  top: calc(50% - var(--icon-size) / 2 + var(--spacing-1));\n}", map: undefined, media: undefined });
+      inject("data-v-5d4cbb06_0", { source: ".zd-switch {\n  margin: 0;\n  padding: 3px 0 0 0;\n}\n.zd-switch .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {\n  box-shadow: var(--shadow-1);\n}\n.zd-switch.zd-no-label .v-label {\n  display: none;\n}\n.zd-switch.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__track {\n  height: var(--icon-size);\n  top: calc(50% - var(--icon-size) / 2);\n}\n.zd-switch.v-input--switch--inset .v-input--selection-controls__ripple {\n  left: calc(-24px + var(--icon-size-small) / 2);\n}\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--selection-controls__ripple,\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--switch__thumb {\n  transform: translate(calc(48px - var(--icon-size-small) - 2 * var(--spacing-1))) !important;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__thumb {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  top: calc(50% - var(--icon-size) / 2 + var(--spacing-1));\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45818,6 +46062,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         style: _vm.instance.cssStyle,
+        attrs: {
+          id: _vm.instance.name,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
+        },
       },
       [
         _vm.instance.caption.isVisible
@@ -45905,7 +46154,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$b = function (inject) {
       if (!inject) return
-      inject("data-v-23137cf8_0", { source: ".zd-table-fill-width {\n  width: 100%;\n}\n.zd-table-caption {\n  border: var(--regular) solid #dedede;\n  border-bottom: 0;\n  padding: 12px;\n}\ntable.zd-table, .zd-table tr, .zd-table td {\n  border-collapse: collapse;\n}\ntable.zd-table, .zd-table tr, .zd-table td, .zd-table th {\n  border: var(--regular) solid #dedede;\n  padding: 12px;\n  vertical-align: top;\n}", map: undefined, media: undefined });
+      inject("data-v-08f22f82_0", { source: ".zd-table-fill-width {\n  width: 100%;\n}\n.zd-table-caption {\n  border: var(--regular) solid #dedede;\n  border-bottom: 0;\n  padding: 12px;\n}\ntable.zd-table, .zd-table tr, .zd-table td {\n  border-collapse: collapse;\n}\ntable.zd-table, .zd-table tr, .zd-table td, .zd-table th {\n  border: var(--regular) solid #dedede;\n  padding: 12px;\n  vertical-align: top;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45985,13 +46234,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: ["zd-tabs", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
       },
       [
         _c(
           "v-tabs",
           {
-            attrs: { "show-arrows": "" },
+            attrs: {
+              "show-arrows": "",
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
+            },
             on: {
               change: function ($event) {
                 return _vm.change($event)
@@ -46032,6 +46285,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       index: index,
                       isVisible: tab.isVisible,
                       tabTitle: tab.tabTitle,
+                      dark: tab.dark,
+                      light: tab.light,
                     },
                     false
                   )
@@ -46047,6 +46302,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _c(
           "v-tabs-items",
           {
+            attrs: { dark: _vm.instance.dark, light: _vm.instance.light },
             model: {
               value: _vm.instance.activeTab,
               callback: function ($$v) {
@@ -46099,11 +46355,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$a = function (inject) {
       if (!inject) return
-      inject("data-v-ffa5df42_0", { source: ".zd-tabs[data-v-ffa5df42]  .v-tabs-bar,\n.zd-tabs[data-v-ffa5df42]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-ffa5df42]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-ffa5df42]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-ffa5df42]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-ffa5df42]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-ffa5df42]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-ffa5df42]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-ffa5df42]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-ffa5df42]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}", map: undefined, media: undefined });
+      inject("data-v-3cb2ae69_0", { source: ".zd-tabs[data-v-3cb2ae69]  .v-tabs-bar,\n.zd-tabs[data-v-3cb2ae69]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-3cb2ae69]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-3cb2ae69]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-3cb2ae69]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-3cb2ae69]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-3cb2ae69]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-3cb2ae69]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-3cb2ae69]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-3cb2ae69]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$a = "data-v-ffa5df42";
+    const __vue_scope_id__$a = "data-v-3cb2ae69";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */
@@ -46181,7 +46437,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         key: _vm.index,
         class: ["zd-tabs-tab", _vm.cssClass],
         style: _vm.cssStyle,
-        attrs: { name: _vm.tabName, disabled: _vm.disabled },
+        attrs: {
+          id: _vm.instance.name,
+          name: _vm.tabName,
+          disabled: _vm.disabled,
+          dark: _vm.dark,
+          light: _vm.light,
+        },
         on: {
           click: function ($event) {
             return _vm.clickTab($event)
@@ -46204,11 +46466,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$9 = function (inject) {
       if (!inject) return
-      inject("data-v-4bdc9e20_0", { source: ".zd-tabs-tab[data-v-4bdc9e20], .zd-tabs-tab[data-v-4bdc9e20]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-4bdc9e20] {\n  height: auto;\n  min-width: calc(2 * var(--spacing-4));\n  align-items: flex-end;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.zd-tabs-tab-text[data-v-4bdc9e20] {\n  text-transform: none;\n  font-size: var(--zd-font-body1-size);\n  line-height: 15px;\n  margin-bottom: 1px;\n}", map: undefined, media: undefined });
+      inject("data-v-8b2fdfc4_0", { source: ".zd-tabs-tab[data-v-8b2fdfc4], .zd-tabs-tab[data-v-8b2fdfc4]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-8b2fdfc4] {\n  height: auto;\n  min-width: calc(2 * var(--spacing-4));\n  align-items: flex-end;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.zd-tabs-tab-text[data-v-8b2fdfc4] {\n  text-transform: none;\n  font-size: var(--zd-font-body1-size);\n  line-height: 15px;\n  margin-bottom: 1px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$9 = "data-v-4bdc9e20";
+    const __vue_scope_id__$9 = "data-v-8b2fdfc4";
     /* module identifier */
     const __vue_module_identifier__$9 = undefined;
     /* functional template */
@@ -46255,40 +46517,47 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c(
-      "v-tab-item",
-      {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.isVisible,
-            expression: "isVisible",
-          },
-        ],
-        key: _vm.index,
-        staticClass: "zd-tabs-tab-item",
-        attrs: { value: _vm.index },
-      },
+      "div",
+      { attrs: { id: _vm.instance.name } },
       [
         _c(
-          "v-container",
-          { attrs: { fluid: "" } },
+          "v-tab-item",
+          {
+            directives: [
+              {
+                name: "show",
+                rawName: "v-show",
+                value: _vm.isVisible,
+                expression: "isVisible",
+              },
+            ],
+            key: _vm.index,
+            staticClass: "zd-tabs-tab-item",
+            attrs: { value: _vm.index, dark: _vm.dark, light: _vm.light },
+          },
           [
-            _vm._l(_vm.children, function (child, index) {
-              return _c(
-                child.component,
-                _vm._b(
-                  { key: index, tag: "component" },
-                  "component",
-                  child,
-                  false
-                )
-              )
-            }),
-            _vm._v(" "),
-            _vm._t("default"),
+            _c(
+              "v-container",
+              { attrs: { fluid: "" } },
+              [
+                _vm._l(_vm.children, function (child, index) {
+                  return _c(
+                    child.component,
+                    _vm._b(
+                      { key: index, tag: "component" },
+                      "component",
+                      child,
+                      false
+                    )
+                  )
+                }),
+                _vm._v(" "),
+                _vm._t("default"),
+              ],
+              2
+            ),
           ],
-          2
+          1
         ),
       ],
       1
@@ -46300,11 +46569,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$8 = function (inject) {
       if (!inject) return
-      inject("data-v-35fc3cfd_0", { source: ".zd-tabs-tab-item[data-v-35fc3cfd] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-35fc3cfd] {\n  padding: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-6acaffe8_0", { source: ".zd-tabs-tab-item[data-v-6acaffe8] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-6acaffe8] {\n  padding: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$8 = "data-v-35fc3cfd";
+    const __vue_scope_id__$8 = "data-v-6acaffe8";
     /* module identifier */
     const __vue_module_identifier__$8 = undefined;
     /* functional template */
@@ -46373,7 +46642,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           tag: "component",
           class: _vm.instance.cssClass,
           style: _vm.instance.cssStyle,
-          attrs: { name: _vm.instance.name },
+          attrs: {
+            id: _vm.instance.name,
+            name: _vm.instance.name,
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+          },
           on: {
             click: function ($event) {
               return _vm.click($event)
@@ -46390,7 +46664,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               {
                 key: child.name,
                 tag: "component",
-                attrs: { parent: _vm.instance },
+                attrs: {
+                  dark: child.dark,
+                  light: child.light,
+                  parent: _vm.instance,
+                },
               },
               "component",
               child,
@@ -46485,7 +46763,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         class: ["zd-text", _vm.instance.cssClass],
         style: _vm.instance.cssStyle,
-        attrs: { name: _vm.instance.name },
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
         on: { click: _vm.click },
       },
       [
@@ -46539,11 +46817,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$6 = function (inject) {
       if (!inject) return
-      inject("data-v-be483a6a_0", { source: ".zd-text p[data-v-be483a6a] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-73ff320e_0", { source: ".zd-text p[data-v-73ff320e] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$6 = "data-v-be483a6a";
+    const __vue_scope_id__$6 = "data-v-73ff320e";
     /* module identifier */
     const __vue_module_identifier__$6 = undefined;
     /* functional template */
@@ -46674,7 +46952,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 (_vm.instance.reverse ? "right" : _vm.instance.align),
             ],
             style: _vm.instance.cssStyle,
-            attrs: { name: _vm.instance.name },
+            attrs: { id: _vm.instance.name, name: _vm.instance.name },
             on: {
               click: function ($event) {
                 return _vm.click($event)
@@ -46757,7 +47035,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$5 = function (inject) {
       if (!inject) return
-      inject("data-v-1f8d1e6e_0", { source: ".v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-11762f00_0", { source: ".v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -46960,7 +47238,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _c = _vm._self._c || _h;
     return _c(
       "div",
-      { staticClass: "zd-time" },
+      { staticClass: "zd-time", attrs: { id: _vm.instance.name } },
       [
         !_vm.$isMobile()
           ? [
@@ -46982,6 +47260,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     "input-activator": "",
                     "min-width": "290px",
                     transition: "scale-transition",
+                    dark: _vm.instance.dark,
+                    light: _vm.instance.light,
                     "close-on-content-click": false,
                     disabled: _vm.instance.disabled || _vm.instance.readonly,
                   },
@@ -47040,6 +47320,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           max: _vm.pickerMaxTime,
                           min: _vm.pickerMinTime,
                           name: _vm.instance.name,
+                          dark: _vm.instance.dark,
+                          light: _vm.instance.light,
                           value: _vm.pickerValue,
                         },
                         on: {
@@ -47095,7 +47377,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$4 = function (inject) {
       if (!inject) return
-      inject("data-v-91fb7c1e_0", { source: ".zd-time input[type=time] {\n  -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n  display: none;\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
+      inject("data-v-03964b77_0", { source: ".zd-time input[type=time] {\n  -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n  display: none;\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -47198,6 +47480,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       _vm._b(
         {
           style: _vm.instance.cssStyle,
+          attrs: { id: _vm.instance.name },
           scopedSlots: _vm._u(
             [
               {
@@ -47208,21 +47491,22 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     _vm._l(_vm.instance.children, function (child, index) {
                       return _c(
                         child.component,
-                        _vm._g(
-                          _vm._b(
-                            {
-                              key: index,
-                              tag: "component",
-                              attrs: {
-                                "dropdown-activator": dropdown,
-                                parent: _vm.instance.parent,
-                              },
+                        _vm._b(
+                          {
+                            key: index,
+                            tag: "component",
+                            attrs: {
+                              "dropdown-activator": Object.assign(
+                                {},
+                                _vm.$attrs["dropdown-activator"],
+                                dropdown
+                              ),
+                              parent: _vm.instance.parent,
                             },
-                            "component",
-                            child,
-                            false
-                          ),
-                          dropdown
+                          },
+                          "component",
+                          child,
+                          false
                         )
                       )
                     }),
@@ -47264,7 +47548,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$3 = function (inject) {
       if (!inject) return
-      inject("data-v-591aab5c_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
+      inject("data-v-1e32e9cf_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -47426,8 +47710,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             expression: "instance.isVisible",
           },
         ],
-        class: [_vm.instance.cssClass, "zd-tree"],
+        class: [
+          _vm.instance.cssClass,
+          "zd-tree",
+          {
+            "theme--dark":
+              (_vm.$vuetify.theme.dark && !_vm.instance.light) ||
+              _vm.instance.dark,
+          },
+          { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
+        ],
         style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name },
       },
       [
         _c(
@@ -47465,7 +47759,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           "sl-vue-tree",
           {
             ref: "tree",
-            attrs: { allowMultiselect: _vm.instance.allowMultiSelect },
+            attrs: {
+              allowMultiselect: _vm.instance.allowMultiSelect,
+              dark: _vm.instance.dark,
+              light: _vm.instance.lightt,
+            },
             on: {
               drop: _vm.onNodeDrop,
               select: _vm.onNodeSelect,
@@ -47484,15 +47782,24 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         { staticClass: "item-icon" },
                         [
                           node.isLeaf && _vm.instance.itemIconName
-                            ? _c("v-icon", [
-                                _vm._v(
-                                  "\n          " +
-                                    _vm._s(
-                                      _vm.$getIcon(_vm.instance.itemIconName)
-                                    ) +
-                                    "\n        "
-                                ),
-                              ])
+                            ? _c(
+                                "v-icon",
+                                {
+                                  attrs: {
+                                    dark: _vm.instance.dark,
+                                    light: _vm.instance.light,
+                                  },
+                                },
+                                [
+                                  _vm._v(
+                                    "\n          " +
+                                      _vm._s(
+                                        _vm.$getIcon(_vm.instance.itemIconName)
+                                      ) +
+                                      "\n        "
+                                  ),
+                                ]
+                              )
                             : _vm._e(),
                           _vm._v(" "),
                           !node.isLeaf && _vm.instance.groupIconName
@@ -47568,25 +47875,43 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           node.children.length &&
                           node.isExpanded &&
                           _vm.instance.openedIconName
-                            ? _c("v-icon", [
-                                _vm._v(
-                                  _vm._s(
-                                    _vm.$getIcon(_vm.instance.openedIconName)
-                                  ) + "\n        "
-                                ),
-                              ])
+                            ? _c(
+                                "v-icon",
+                                {
+                                  attrs: {
+                                    dark: _vm.instance.dark,
+                                    light: _vm.instance.light,
+                                  },
+                                },
+                                [
+                                  _vm._v(
+                                    _vm._s(
+                                      _vm.$getIcon(_vm.instance.openedIconName)
+                                    ) + "\n        "
+                                  ),
+                                ]
+                              )
                             : _vm._e(),
                           _vm._v(" "),
                           node.children.length &&
                           !node.isExpanded &&
                           _vm.instance.closedIconName
-                            ? _c("v-icon", [
-                                _vm._v(
-                                  _vm._s(
-                                    _vm.$getIcon(_vm.instance.closedIconName)
-                                  ) + "\n        "
-                                ),
-                              ])
+                            ? _c(
+                                "v-icon",
+                                {
+                                  attrs: {
+                                    dark: _vm.instance.dark,
+                                    light: _vm.instance.light,
+                                  },
+                                },
+                                [
+                                  _vm._v(
+                                    _vm._s(
+                                      _vm.$getIcon(_vm.instance.closedIconName)
+                                    ) + "\n        "
+                                  ),
+                                ]
+                              )
                             : _vm._e(),
                         ],
                         1
@@ -47625,7 +47950,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-5cb0749d_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: #77258390;\n  color: white;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: white;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
+      inject("data-v-43967723_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: #77258390;\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -47737,9 +48062,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-tree-grid",
         _vm.instance.cssClass,
         { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
+        {
+          "theme--dark":
+            (_vm.$vuetify.theme.dark && !_vm.instance.light) || _vm.instance.dark,
+        },
+        { "theme--light": !_vm.$vuetify.theme.dark || _vm.instance.light },
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
+        id: _vm.instance.name,
         "fixed-header": "",
         "disable-pagination": "",
         "hide-default-header": "",
@@ -47750,6 +48081,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         search: _vm.instance.datasource.search,
         "show-select": _vm.instance.selectable,
         dense: _vm.instance.dense,
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
         loading: _vm.instance.datasource.loading,
         "item-key": _vm.instance.datasource.uniqueKey,
         "disable-sort": "",
@@ -48304,7 +48637,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                     ],
                                                   },
                                                   [
-                                                    item.tree__children.length > 0
+                                                    (item.tree__children || [])
+                                                      .length > 0
                                                       ? _c(
                                                           "v-icon",
                                                           {
@@ -48524,8 +48858,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1 = function (inject) {
       if (!inject) return
-      inject("data-v-62a43016_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
-  ,inject("data-v-62a43016_1", { source: ".zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
+      inject("data-v-f73c54e0_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
+  ,inject("data-v-f73c54e0_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48727,6 +49061,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
+        id: _vm.instance.name,
         "fixed-header": "",
         "disable-pagination": "",
         "hide-default-header": "",
@@ -48739,6 +49074,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         dense: _vm.instance.dense,
         loading: _vm.instance.datasource.loading,
         "item-key": _vm.instance.datasource.uniqueKey,
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
         "disable-sort": "",
         "disable-filtering": "",
         tabindex: "0",
@@ -49683,8 +50020,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-a1b8604a_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
-  ,inject("data-v-a1b8604a_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-01fa567e_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
+  ,inject("data-v-01fa567e_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49847,7 +50184,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   };
 
   // tslint:disable: variable-name
-  const VueTreeSelect = require('zeedhi-vue-treeselect');
+  const VueTreeSelect = require('@zeedhi/zd-vue-treeselect');
   const Hooper = require('hooper');
   function installComponents(Vue) {
       Object.keys(components).forEach((id) => {
@@ -49971,6 +50308,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
   };
 
+  exports.IconRenderer = IconRenderer;
   exports.ThemeColor = ThemeColor;
   exports.Vuetify = Vuetify;
   exports.ZdAlert = script$1d;