@zeedhi/vuetify 1.38.1 → 1.40.0

package/dist/zd-vuetify.umd.js

@@ -2215,7 +2215,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
   Vuetify.install = install;
   Vuetify.installed = false;
-  Vuetify.version = "2.5.10";
+  Vuetify.version = "2.5.14";
   Vuetify.config = {
     silent: false
   };
@@ -2514,7 +2514,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
-  function inserted$3(el, binding) {
+  function inserted$3(el, binding, vnode) {
     if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return;
     const modifiers = binding.modifiers || {};
     const value = binding.value;
@@ -2526,32 +2526,36 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       options: {}
     };
     const observer = new IntersectionObserver((entries = [], observer) => {
-      /* istanbul ignore if */
-      if (!el._observe) return; // Just in case, should never fire
+      var _el$_observe;
+
+      const _observe = (_el$_observe = el._observe) == null ? void 0 : _el$_observe[vnode.context._uid];
+
+      if (!_observe) return; // Just in case, should never fire
 
       const isIntersecting = entries.some(entry => entry.isIntersecting); // If is not quiet or has already been
       // initted, invoke the user callback
 
-      if (handler && (!modifiers.quiet || el._observe.init) && (!modifiers.once || isIntersecting || !el._observe.init)) {
+      if (handler && (!modifiers.quiet || _observe.init) && (!modifiers.once || isIntersecting || _observe.init)) {
         handler(entries, observer, isIntersecting);
       }
 
-      if (isIntersecting && modifiers.once) unbind$4(el);else el._observe.init = true;
+      if (isIntersecting && modifiers.once) unbind$4(el, binding, vnode);else _observe.init = true;
     }, options);
-    el._observe = {
+    el._observe = Object(el._observe);
+    el._observe[vnode.context._uid] = {
       init: false,
       observer
     };
     observer.observe(el);
   }
 
-  function unbind$4(el) {
-    /* istanbul ignore if */
-    if (!el._observe) return;
-
-    el._observe.observer.unobserve(el);
+  function unbind$4(el, binding, vnode) {
+    var _el$_observe2;
 
-    delete el._observe;
+    const observe = (_el$_observe2 = el._observe) == null ? void 0 : _el$_observe2[vnode.context._uid];
+    if (!observe) return;
+    observe.observer.unobserve(el);
+    delete el._observe[vnode.context._uid];
   }
 
   const Intersect = {
@@ -3161,7 +3165,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
-  function inserted$2(el, binding) {
+  function inserted$2(el, binding, vnode) {
     const {
       self = false
     } = binding.modifiers || {};
@@ -3173,7 +3177,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     const target = self ? el : binding.arg ? document.querySelector(binding.arg) : window;
     if (!target) return;
     target.addEventListener('scroll', handler, options);
-    el._onScroll = {
+    el._onScroll = Object(el._onScroll);
+    el._onScroll[vnode.context._uid] = {
       handler,
       options,
       // Don't reference self
@@ -3181,15 +3186,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     };
   }
 
-  function unbind$3(el) {
-    if (!el._onScroll) return;
+  function unbind$3(el, binding, vnode) {
+    var _el$_onScroll;
+
+    if (!((_el$_onScroll = el._onScroll) != null && _el$_onScroll[vnode.context._uid])) return;
     const {
       handler,
       options,
       target = el
-    } = el._onScroll;
+    } = el._onScroll[vnode.context._uid];
     target.removeEventListener('scroll', handler, options);
-    delete el._onScroll;
+    delete el._onScroll[vnode.context._uid];
   }
 
   const Scroll = {
@@ -3364,7 +3371,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return isActive(e);
   }
 
-  function directive$1(e, el, binding) {
+  function directive$1(e, el, binding, vnode) {
     const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
     el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
       checkIsActive(e, binding) && handler && handler(e);
@@ -3386,7 +3393,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     // sure that the root element is
     // available, iOS does not support
     // clicks on body
-    inserted(el, binding) {
+    inserted(el, binding, vnode) {
       const onClick = e => directive$1(e, el, binding);
 
       const onMousedown = e => {
@@ -3397,32 +3404,45 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         app.addEventListener('click', onClick, true);
         app.addEventListener('mousedown', onMousedown, true);
       });
-      el._clickOutside = {
-        lastMousedownWasOutside: true,
+
+      if (!el._clickOutside) {
+        el._clickOutside = {
+          lastMousedownWasOutside: true
+        };
+      }
+
+      el._clickOutside[vnode.context._uid] = {
         onClick,
         onMousedown
       };
     },
 
-    unbind(el) {
+    unbind(el, binding, vnode) {
       if (!el._clickOutside) return;
       handleShadow(el, app => {
-        if (!app || !el._clickOutside) return;
-        app.removeEventListener('click', el._clickOutside.onClick, true);
-        app.removeEventListener('mousedown', el._clickOutside.onMousedown, true);
+        var _el$_clickOutside;
+
+        if (!app || !((_el$_clickOutside = el._clickOutside) != null && _el$_clickOutside[vnode.context._uid])) return;
+        const {
+          onClick,
+          onMousedown
+        } = el._clickOutside[vnode.context._uid];
+        app.removeEventListener('click', onClick, true);
+        app.removeEventListener('mousedown', onMousedown, true);
       });
-      delete el._clickOutside;
+      delete el._clickOutside[vnode.context._uid];
     }
 
   };
 
-  function inserted$1(el, binding) {
+  function inserted$1(el, binding, vnode) {
     const callback = binding.value;
     const options = binding.options || {
       passive: true
     };
     window.addEventListener('resize', callback, options);
-    el._onResize = {
+    el._onResize = Object(el._onResize);
+    el._onResize[vnode.context._uid] = {
       callback,
       options
     };
@@ -3432,14 +3452,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }
   }
 
-  function unbind$2(el) {
-    if (!el._onResize) return;
+  function unbind$2(el, binding, vnode) {
+    var _el$_onResize;
+
+    if (!((_el$_onResize = el._onResize) != null && _el$_onResize[vnode.context._uid])) return;
     const {
       callback,
       options
-    } = el._onResize;
+    } = el._onResize[vnode.context._uid];
     window.removeEventListener('resize', callback, options);
-    delete el._onResize;
+    delete el._onResize[vnode.context._uid];
   }
 
   const Resize = {
@@ -4818,6 +4840,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     watch: {
       $route: 'onRouteChange'
     },
+
+    mounted() {
+      this.onRouteChange();
+    },
+
     methods: {
       click(e) {
         this.$emit('click', e);
@@ -4883,16 +4910,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       onRouteChange() {
         if (!this.to || !this.$refs.link || !this.$route) return;
         const activeClass = `${this.activeClass} ${this.proxyClass || ''}`.trim();
-        const path = `_vnode.data.class.${activeClass}`;
+        const exactActiveClass = `${this.exactActiveClass} ${this.proxyClass || ''}`.trim() || activeClass;
+        const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass);
         this.$nextTick(() => {
           /* istanbul ignore else */
-          if (getObjectValueByPath(this.$refs.link, path)) {
+          if (!getObjectValueByPath(this.$refs.link, path) === this.isActive) {
             this.toggle();
           }
         });
       },
 
-      toggle: () => {}
+      toggle() {
+        this.isActive = !this.isActive;
+      }
+
     }
   });
 
@@ -5455,14 +5486,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
         if (context.props.hideOnLeave) {
           data.on.leave = mergeTransitions(data.on.leave, el => {
-            el._initialDisplay = [el.style.display, el.style.getPropertyPriority('display')];
             el.style.setProperty('display', 'none', 'important');
           });
-          data.on.afterLeave = mergeTransitions(data.on.afterLeave, el => {
-            if (el) {
-              el._initialDisplay ? el.style.setProperty('display', ...el._initialDisplay) : el.style.removeProperty('display');
-            }
-          });
         }
 
         return h(tag, mergeData(context.data, data), context.children);
@@ -6166,6 +6191,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     if (type === 'boolean' || type === 'string') return true;
     return val.nodeType === Node.ELEMENT_NODE;
   }
+
+  function removeActivator(activator) {
+    activator.forEach(node => {
+      node.elm && node.elm.parentNode && node.elm.parentNode.removeChild(node.elm);
+    });
+  }
   /* @vue/component */
 
 
@@ -6220,23 +6251,32 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     },
 
     beforeDestroy() {
-      // IE11 Fix
-      try {
-        if (this.$refs.content && this.$refs.content.parentNode) {
-          this.$refs.content.parentNode.removeChild(this.$refs.content);
-        }
+      if (this.$refs.content && this.$refs.content.parentNode) {
+        this.$refs.content.parentNode.removeChild(this.$refs.content);
+      }
+    },
 
-        if (this.activatorNode) {
-          const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode];
-          activator.forEach(node => {
-            node.elm && node.elm.parentNode && node.elm.parentNode.removeChild(node.elm);
+    destroyed() {
+      if (this.activatorNode) {
+        const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode];
+
+        if (this.$el.isConnected) {
+          // Component has been destroyed but the element still exists, we must be in a transition
+          // Wait for the transition to finish before cleaning up the detached activator
+          const observer = new MutationObserver(list => {
+            if (list.some(record => Array.from(record.removedNodes).includes(this.$el))) {
+              observer.disconnect();
+              removeActivator(activator);
+            }
+          });
+          observer.observe(this.$el.parentNode, {
+            subtree: false,
+            childList: true
           });
+        } else {
+          removeActivator(activator);
         }
-      } catch (e) {
-        console.log(e);
       }
-      /* eslint-disable-line no-console */
-
     },
 
     methods: {
@@ -7029,7 +7069,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       getTiles() {
         if (!this.$refs.content) return;
-        this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item'));
+        this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item, .v-divider, .v-subheader'));
       },
 
       mouseEnterHandler() {
@@ -7474,6 +7514,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         }
 
         return attrs;
+      },
+
+      toggle() {
+        if (this.to && this.inputValue === undefined) {
+          this.isActive = !this.isActive;
+        }
+
+        this.$emit('change');
       }
 
     },
@@ -7504,7 +7552,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         active: this.isActive,
         toggle: this.toggle
       }) : this.$slots.default;
-      return h(tag, this.setTextColor(this.color, data), children);
+      return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children);
     }
 
   });
@@ -8973,20 +9021,27 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   function intersectable(options) {
     return Vue__default["default"].extend({
       name: 'intersectable',
+      data: () => ({
+        isIntersecting: false
+      }),
 
       mounted() {
         Intersect.inserted(this.$el, {
           name: 'intersect',
           value: this.onObserve
-        });
+        }, this.$vnode);
       },
 
       destroyed() {
-        Intersect.unbind(this.$el);
+        Intersect.unbind(this.$el, {
+          name: 'intersect',
+          value: this.onObserve
+        }, this.$vnode);
       },
 
       methods: {
         onObserve(entries, observer, isIntersecting) {
+          this.isIntersecting = isIntersecting;
           if (!isIntersecting) return;
 
           for (let i = 0, length = options.onVisible.length; i < length; i++) {
@@ -9478,7 +9533,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       // #11533
       this.$watch(() => this.labelValue, this.setLabelWidth);
       this.autofocus && this.tryAutofocus();
-      requestAnimationFrame(() => this.isBooted = true);
+      requestAnimationFrame(() => {
+        this.isBooted = true;
+        requestAnimationFrame(() => {
+          if (!this.isIntersecting) {
+            this.onResize();
+          }
+        });
+      });
     },
 
     methods: {
@@ -10400,7 +10462,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         if (!menu) return; // If menu is active, allow default
         // listIndex change from menu
 
-        if (this.isMenuActive && keyCode !== keyCodes.tab) {
+        if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(keyCode)) {
           this.$nextTick(() => {
             menu.changeListIndex(e);
             this.$emit('update:list-index', menu.listIndex);
@@ -10784,11 +10846,27 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         // TODO: How is the watcher triggered
         // for duplicate items? no idea
         if (val === oldVal) return;
-        this.setMenuIndex(-1);
+
+        if (!this.autoSelectFirst) {
+          const preSelectedItem = oldVal[this.$refs.menu.listIndex];
+
+          if (preSelectedItem) {
+            this.setMenuIndex(val.findIndex(i => i === preSelectedItem));
+          } else {
+            this.setMenuIndex(-1);
+          }
+
+          this.$emit('update:list-index', this.$refs.menu.listIndex);
+        }
+
         this.$nextTick(() => {
           if (!this.internalSearch || val.length !== 1 && !this.autoSelectFirst) return;
           this.$refs.menu.getTiles();
-          this.setMenuIndex(0);
+
+          if (this.autoSelectFirst && val.length) {
+            this.setMenuIndex(0);
+            this.$emit('update:list-index', this.$refs.menu.listIndex);
+          }
         });
       },
 
@@ -11530,6 +11608,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       if (this.isActive) children.push(this.genContent());
       return h('div', {
         staticClass: 'v-overlay',
+        on: this.$listeners,
         class: this.classes,
         style: this.styles
       }, children);
@@ -11642,20 +11721,31 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       hasScrollbar(el) {
         if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
         const style = window.getComputedStyle(el);
-        return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight;
+        return (['auto', 'scroll'].includes(style.overflowY) || el.tagName === 'SELECT') && el.scrollHeight > el.clientHeight || ['auto', 'scroll'].includes(style.overflowX) && el.scrollWidth > el.clientWidth;
       },
 
-      shouldScroll(el, delta) {
+      shouldScroll(el, e) {
         if (el.hasAttribute('data-app')) return false;
-        const alreadyAtTop = el.scrollTop === 0;
-        const alreadyAtBottom = el.scrollTop + el.clientHeight === el.scrollHeight;
+        const dir = e.shiftKey || e.deltaX ? 'x' : 'y';
+        const delta = dir === 'y' ? e.deltaY : e.deltaX || e.deltaY;
+        let alreadyAtStart;
+        let alreadyAtEnd;
+
+        if (dir === 'y') {
+          alreadyAtStart = el.scrollTop === 0;
+          alreadyAtEnd = el.scrollTop + el.clientHeight === el.scrollHeight;
+        } else {
+          alreadyAtStart = el.scrollLeft === 0;
+          alreadyAtEnd = el.scrollLeft + el.clientWidth === el.scrollWidth;
+        }
+
         const scrollingUp = delta < 0;
         const scrollingDown = delta > 0;
-        if (!alreadyAtTop && scrollingUp) return true;
-        if (!alreadyAtBottom && scrollingDown) return true;
+        if (!alreadyAtStart && scrollingUp) return true;
+        if (!alreadyAtEnd && scrollingDown) return true;
 
-        if (alreadyAtTop || alreadyAtBottom) {
-          return this.shouldScroll(el.parentNode, delta);
+        if (alreadyAtStart || alreadyAtEnd) {
+          return this.shouldScroll(el.parentNode, e);
         }
 
         return false;
@@ -11673,7 +11763,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       checkPath(e) {
         const path = composedPath(e);
-        const delta = e.deltaY;
 
         if (e.type === 'keydown' && path[0] === document.body) {
           const dialog = this.$refs.dialog; // getSelection returns null in firefox in some edge cases, can be ignored
@@ -11681,7 +11770,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const selected = window.getSelection().anchorNode;
 
           if (dialog && this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
-            return !this.shouldScroll(dialog, delta);
+            return !this.shouldScroll(dialog, e);
           }
 
           return true;
@@ -11692,7 +11781,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           if (el === document) return true;
           if (el === document.documentElement) return true;
           if (el === this.$refs.content) return true;
-          if (this.hasScrollbar(el)) return !this.shouldScroll(el, delta);
+          if (this.hasScrollbar(el)) return !this.shouldScroll(el, e);
         }
 
         return true;
@@ -11872,8 +11961,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
         this.$nextTick(() => {
           this.$nextTick(() => {
-            this.previousActiveElement = document.activeElement;
-            this.$refs.content.focus();
+            if (!this.$refs.content.contains(document.activeElement)) {
+              this.previousActiveElement = document.activeElement;
+              this.$refs.content.focus();
+            }
+
             this.bind();
           });
         });
@@ -12261,7 +12353,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               // This block of code aims to make sure touchEvent is always dispatched from the element that is being pointed at
 
 
-              if (e instanceof TouchEvent) {
+              if (e && 'touches' in e) {
                 var _e$target, _e$target2;
 
                 const currentTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
@@ -13879,13 +13971,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           const name = this.eventNameFunction(event, timedEvent);
 
           if (event.start.hasTime) {
+            const eventSummaryClass = 'v-event-summary';
+
             if (timedEvent) {
               const time = timeSummary();
               const delimiter = singline ? ', ' : '<br>';
-              return `<strong>${name}</strong>${delimiter}${time}`;
+              return `<span class="${eventSummaryClass}"><strong>${name}</strong>${delimiter}${time}</span>`;
             } else {
               const time = formatTime(event.start, true);
-              return `<strong>${time}</strong> ${name}`;
+              return `<span class="${eventSummaryClass}"><strong>${time}</strong> ${name}</span>`;
             }
           }
 
@@ -14607,19 +14701,22 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         return this.$createElement('div', {
           key: day.date,
           staticClass: 'v-calendar-daily__day',
-          class: this.getRelativeClasses(day)
-        }, [...this.genDayIntervals(index, day), ...this.genDayBody(day)]);
+          class: this.getRelativeClasses(day),
+          on: this.getDefaultMouseEventHandlers(':time', e => {
+            return this.getSlotScope(this.getTimestampAtEvent(e, day));
+          })
+        }, [...this.genDayIntervals(index), ...this.genDayBody(day)]);
       },
 
       genDayBody(day) {
         return getSlot(this, 'day-body', () => this.getSlotScope(day)) || [];
       },
 
-      genDayIntervals(index, day) {
-        return this.intervals[index].map(i => this.genDayInterval(i, day));
+      genDayIntervals(index) {
+        return this.intervals[index].map(this.genDayInterval);
       },
 
-      genDayInterval(interval, day) {
+      genDayInterval(interval) {
         const height = convertToUnit(this.intervalHeight);
         const styler = this.intervalStyle || this.intervalStyleDefault;
         const data = {
@@ -14628,10 +14725,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           style: {
             height,
             ...styler(interval)
-          },
-          on: this.getDefaultMouseEventHandlers(':time', e => {
-            return this.getSlotScope(this.getTimestampAtEvent(e, day));
-          })
+          }
         };
         const children = getSlot(this, 'interval', () => this.getSlotScope(interval));
         return this.$createElement('div', data, children);
@@ -18487,11 +18581,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         this.$nextTick(this.updateSelf);
       },
 
-      onFilteredItemsChanged(val, oldVal) {
-        if (!this.autoSelectFirst) return;
-        VAutocomplete.options.methods.onFilteredItemsChanged.call(this, val, oldVal);
-      },
-
       onKeyDown(e) {
         const keyCode = e.keyCode;
 
@@ -24750,7 +24839,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
 
       onClick: BaseItemGroup.options.methods.onClick
+    },
+
+    render(h) {
+      const vnode = VInput.options.render.call(this, h);
+
+      this._b(vnode.data, 'div', this.attrs$);
+
+      return vnode;
     }
+
   });
 
   // Styles
@@ -25111,7 +25209,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.thumbPressed = true;
         }
 
-        this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value);
+        if (this.activeThumb === null) {
+          this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value);
+        }
+
         this.setInternalValue(value);
       },
 
@@ -27249,20 +27350,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
 
     },
-
-    mounted() {
-      this.onRouteChange();
-    },
-
     methods: {
       click(e) {
-        // If user provides an
+        // Prevent keyboard actions
+        // from children elements
+        // within disabled tabs
+        if (this.disabled) {
+          e.preventDefault();
+          return;
+        } // If user provides an
         // actual link, do not
         // prevent default
+
+
         if (this.href && this.href.indexOf('#') > -1) e.preventDefault();
         if (e.detail) this.$el.blur();
         this.$emit('click', e);
         this.to || this.toggle();
+      },
+
+      toggle() {
+        // VItemGroup treats a change event as a click
+        if (!this.isActive) {
+          this.$emit('change');
+        }
       }
 
     },
@@ -29445,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)
@@ -29630,6 +29749,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([
           {
@@ -29701,7 +29822,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-2ff1b977_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 */
@@ -29760,9 +29881,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);
       }
+      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([
       PropWatch({ type: String, default: 'line' }),
@@ -29862,7 +29999,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-6f4c7f6c_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 */
@@ -29940,6 +30077,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         style: _vm.instance.cssStyle,
         attrs: {
           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,
@@ -29964,7 +30103,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-721a366c_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 */
@@ -30007,10 +30146,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)
@@ -30027,10 +30162,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)
@@ -30156,10 +30287,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)
@@ -30200,10 +30327,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)
@@ -30276,7 +30399,11 @@ 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: {
+              name: _vm.instance.name,
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
+            },
             on: {
               click: function ($event) {
                 return _vm.click($event)
@@ -30346,7 +30473,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-4ef72194_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 */
@@ -30402,10 +30529,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)
@@ -30414,10 +30537,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)
@@ -30485,7 +30604,11 @@ 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: {
+            name: _vm.instance.name,
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+          },
           on: {
             change: function ($event) {
               return _vm.change()
@@ -30542,7 +30665,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-dc14b8a0_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 */
@@ -30591,10 +30714,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)
@@ -30623,10 +30742,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)
@@ -30887,10 +31002,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)
@@ -30915,10 +31026,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)
@@ -31413,10 +31520,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)
@@ -31433,10 +31536,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)
@@ -31574,6 +31673,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) {
@@ -31623,7 +31724,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-b8fd6dc4_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 */
@@ -31799,7 +31900,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-ad17a11c_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 */
@@ -32120,7 +32221,12 @@ 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,
       },
@@ -32229,11 +32335,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-4fffbcc6_0", { source: ".zd-code-editor[data-v-4fffbcc6] {\n  position: relative;\n}\n.zd-code-editor-clipboard-button[data-v-4fffbcc6] {\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-4fffbcc6] {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button[data-v-4fffbcc6] {\n  opacity: 1;\n}\n.zd-code-editor-container[data-v-4fffbcc6] {\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-4fffbcc6]:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers[data-v-4fffbcc6] {\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-4fffbcc6] {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre[data-v-4fffbcc6] {\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-4fffbcc6] {\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-4fffbcc6] {\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-4fffbcc6";
     /* module identifier */
     const __vue_module_identifier__$19 = undefined;
     /* functional template */
@@ -32543,7 +32649,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 () {
@@ -32564,9 +32670,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 () {
@@ -32600,7 +32704,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,
@@ -32662,7 +32766,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-c3d045c2_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 */
@@ -32744,7 +32848,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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
@@ -32763,11 +32875,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-32e0e921_0", { source: ".zd-container[data-v-32e0e921] {\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-32e0e921";
     /* module identifier */
     const __vue_module_identifier__$16 = undefined;
     /* functional template */
@@ -33465,6 +33577,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           { "zd-pa-0": _vm.instance.removePadding },
         ],
         attrs: {
+          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),
@@ -33541,7 +33655,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),
                         },
@@ -33604,7 +33718,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-404a75cd_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 */
@@ -33710,6 +33824,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') {
@@ -34373,6 +34488,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         attrs: {
           "max-width": _vm.dialog.maxWidth,
           persistent: _vm.dialog.persistent,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
         },
         model: {
           value: _vm.dialog.isVisible,
@@ -34461,7 +34578,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-33718270_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 */
@@ -34498,18 +34615,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)
@@ -34697,6 +34806,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,
@@ -34785,7 +34896,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-9ce8f0c2_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 */
@@ -35012,6 +35123,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               _vm.instance.cssStyle,
             ],
             attrs: {
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
               "validate-on-blur": "",
               name: _vm.instance.name,
               "persistent-placeholder": true,
@@ -35063,6 +35176,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,
+                                    },
                                   ],
                                 },
                                 [
@@ -35163,9 +35287,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":
@@ -35221,7 +35345,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-5040ba1c_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 */
@@ -35294,10 +35418,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)
@@ -35314,10 +35434,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)
@@ -35392,9 +35508,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",
               {
@@ -35402,25 +35518,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
@@ -35436,19 +35559,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
@@ -35464,19 +35594,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
@@ -35506,7 +35643,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,
@@ -35529,11 +35670,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-26287a82_0", { source: ".zd-footer-slot[data-v-26287a82] {\n  display: flex;\n  padding: 0;\n}\n.zd-footer-slot-children[data-v-26287a82] {\n  padding-bottom: var(--spacing-2);\n}\n.zd-footer-slot-left > *[data-v-26287a82], .zd-footer-slot-center > *[data-v-26287a82], .zd-footer-slot-right > *[data-v-26287a82] {\n  margin: 0 var(--spacing-1);\n}\n.zd-footer-slot-left > *[data-v-26287a82]:first-child, .zd-footer-slot-center > *[data-v-26287a82]:first-child, .zd-footer-slot-right > *[data-v-26287a82]:first-child {\n  margin-left: 0;\n}\n.zd-footer-slot-left > *[data-v-26287a82]:last-child, .zd-footer-slot-center > *[data-v-26287a82]:last-child, .zd-footer-slot-right > *[data-v-26287a82]:last-child {\n  margin-right: 0;\n}\n.zd-footer-slot-center[data-v-26287a82] {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-footer-slot-right[data-v-26287a82] {\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-26287a82";
     /* module identifier */
     const __vue_module_identifier__$X = undefined;
     /* functional template */
@@ -36095,8 +36236,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;
@@ -36108,15 +36249,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);
       }
@@ -36340,9 +36484,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)
@@ -36442,8 +36590,16 @@ 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: {
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
         "fixed-header": "",
         "disable-pagination": "",
         "hide-default-header": "",
@@ -36588,6 +36744,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                           style: {
                                             width:
                                               _vm.calcHeaderCellWidth(column),
+                                            color:
+                                              _vm.instance.headerCellTextColor,
                                           },
                                         },
                                         [
@@ -37198,7 +37356,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}\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-baad9074_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 */
@@ -37400,6 +37558,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
         "fixed-header": "",
         "disable-pagination": "",
         "hide-default-header": "",
@@ -38328,8 +38488,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}\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-733aaa89_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-733aaa89_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 */
@@ -38410,10 +38570,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)
@@ -38434,10 +38590,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)
@@ -38531,12 +38683,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) {
@@ -38572,12 +38724,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) {
@@ -38613,12 +38765,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) {
@@ -38691,7 +38843,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-489cc01b_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 */
@@ -38866,7 +39018,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ? [
               _vm._t("errorSlot"),
               _vm._v(" "),
-              !this.$slots.errorSlot
+              !_vm.$slots.errorSlot
                 ? _vm._l(_vm.instance.errorSlot, function (child, index) {
                     return _c(
                       child.component,
@@ -38896,7 +39048,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) {
@@ -38920,7 +39072,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,
@@ -39003,32 +39155,40 @@ 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: { 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 = [];
@@ -39083,10 +39243,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)
@@ -39103,10 +39259,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)
@@ -39879,7 +40031,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-81399cac_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 */
@@ -40205,7 +40357,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 () {
@@ -40216,6 +40368,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",
@@ -40376,7 +40534,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-7c1de2f8_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 */
@@ -40597,10 +40755,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)
@@ -40613,10 +40767,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)
@@ -40681,7 +40831,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 [
@@ -40718,7 +40868,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-13d9c4d2_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 */
@@ -40906,6 +41056,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           ripple: _vm.instance.ripple,
           twoLine: _vm.instance.twoLine,
           threeLine: _vm.instance.threeLine,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
         },
         on: {
           click: function ($event) {
@@ -40915,7 +41067,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",
               {
@@ -40954,7 +41106,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",
               {
@@ -41093,7 +41245,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(
@@ -41136,7 +41288,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(
@@ -41179,7 +41331,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,
@@ -41211,7 +41363,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-1ebcd268_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 */
@@ -41307,6 +41459,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           opacity: _vm.opacity,
           value: _vm.loading.isVisible,
           "z-index": _vm.zIndex,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
         },
       },
       [
@@ -41352,7 +41506,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-27f0fe30_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 */
@@ -41474,7 +41628,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" }, [
@@ -41528,7 +41686,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" },
@@ -41586,7 +41744,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-703aafa2_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 });
 
     };
     /* scoped */
@@ -41725,7 +41883,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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
@@ -41818,10 +41984,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)
@@ -41963,6 +42125,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,
@@ -41985,7 +42148,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",
                           {
@@ -42012,18 +42175,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
                                     )
                                   )
                                 })
@@ -42070,7 +42230,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-1dc7a318_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 */
@@ -42604,6 +42764,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             attrs: {
               persistent: modal.persistent,
               fullscreen: modal.fullscreen,
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
               "content-class":
                 "zd-modal-content " +
                 _vm.getSizeClass(modal) +
@@ -42682,7 +42844,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-06753b8a_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 */
@@ -42936,10 +43098,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)
@@ -42948,10 +43106,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)
@@ -43008,11 +43162,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,
@@ -43129,6 +43283,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             },
           ],
           style: _vm.instance.cssStyle,
+          attrs: { dark: _vm.instance.dark, light: _vm.instance.light },
           on: {
             change: function ($event) {
               return _vm.change($event)
@@ -43185,7 +43340,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-1c5de123_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 */
@@ -44455,6 +44610,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)
@@ -44540,6 +44699,12 @@ 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 },
@@ -44555,6 +44720,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)
@@ -44573,7 +44739,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", {
@@ -44620,14 +44799,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 !== ""
@@ -44642,7 +44836,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
@@ -44690,7 +44884,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-bf4ba0b6_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 */
@@ -44779,6 +44973,12 @@ 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 },
@@ -44860,14 +45060,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 !== ""
@@ -44882,7 +45097,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
@@ -44930,7 +45145,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-95e04dcc_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 */
@@ -45167,14 +45382,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)
@@ -45212,6 +45419,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         attrs: {
           "alt-labels": _vm.instance.altLabels,
           vertical: _vm.instance.vertical,
+          dark: _vm.instance.dark,
+          light: _vm.instance.light,
         },
         model: {
           value: _vm.instance.activeStep,
@@ -45343,11 +45552,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-ef4d4672_0", { source: ".zd-stepper[data-v-ef4d4672] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-ef4d4672] .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-ef4d4672";
     /* module identifier */
     const __vue_module_identifier__$e = undefined;
     /* functional template */
@@ -45626,7 +45835,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-01c88107_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 */
@@ -45707,6 +45916,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         ],
         style: _vm.instance.cssStyle,
+        attrs: { dark: _vm.instance.dark, light: _vm.instance.light },
       },
       [
         _vm.instance.caption.isVisible
@@ -45794,7 +46004,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-fbbfef20_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 */
@@ -45880,7 +46090,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _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)
@@ -45921,6 +46135,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
                   )
@@ -45936,6 +46152,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) {
@@ -45988,11 +46205,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-00c27d52_0", { source: ".zd-tabs[data-v-00c27d52]  .v-tabs-bar,\n.zd-tabs[data-v-00c27d52]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-00c27d52]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-00c27d52]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-00c27d52]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-00c27d52]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-00c27d52]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-00c27d52]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-00c27d52]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-00c27d52]  .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-00c27d52";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */
@@ -46070,7 +46287,12 @@ 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: {
+          name: _vm.tabName,
+          disabled: _vm.disabled,
+          dark: _vm.dark,
+          light: _vm.light,
+        },
         on: {
           click: function ($event) {
             return _vm.clickTab($event)
@@ -46093,11 +46315,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-79bfcbe8_0", { source: ".zd-tabs-tab[data-v-79bfcbe8], .zd-tabs-tab[data-v-79bfcbe8]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-79bfcbe8] {\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-79bfcbe8] {\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-79bfcbe8";
     /* module identifier */
     const __vue_module_identifier__$9 = undefined;
     /* functional template */
@@ -46156,7 +46378,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         key: _vm.index,
         staticClass: "zd-tabs-tab-item",
-        attrs: { value: _vm.index },
+        attrs: { value: _vm.index, dark: _vm.dark, light: _vm.light },
       },
       [
         _c(
@@ -46189,11 +46411,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-645f6d33_0", { source: ".zd-tabs-tab-item[data-v-645f6d33] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-645f6d33] {\n  padding: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$8 = "data-v-35fc3cfd";
+    const __vue_scope_id__$8 = "data-v-645f6d33";
     /* module identifier */
     const __vue_module_identifier__$8 = undefined;
     /* functional template */
@@ -46262,7 +46484,11 @@ 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: {
+            name: _vm.instance.name,
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+          },
           on: {
             click: function ($event) {
               return _vm.click($event)
@@ -46279,7 +46505,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,
@@ -46871,6 +47101,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,
                   },
@@ -46929,6 +47161,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: {
@@ -46984,7 +47218,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-4ecda11e_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 */
@@ -47315,7 +47549,16 @@ 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,
       },
       [
@@ -47354,7 +47597,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,
@@ -47373,15 +47620,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
@@ -47457,25 +47713,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
@@ -47514,7 +47788,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-37eb0be3_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 */
@@ -47626,6 +47900,11 @@ 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: {
@@ -47639,6 +47918,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": "",
@@ -48193,7 +48474,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",
                                                           {
@@ -48413,8 +48695,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}\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-37d4b7fe_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-37d4b7fe_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 */
@@ -48628,6 +48910,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",
@@ -49572,8 +49856,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}\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-a13440da_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-a13440da_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 */