@zeedhi/vuetify 1.101.1 → 1.103.0

package/dist/zd-vuetify.umd.js

@@ -20,7 +20,7 @@
 
   /* @vue/component */
 
-  const Themeable = Vue__default["default"].extend().extend({
+  const Themeable$1 = Vue__default["default"].extend().extend({
     name: 'themeable',
 
     provide() {
@@ -118,8 +118,8 @@
     const vm = { ...context.props,
       ...context.injections
     };
-    const isDark = Themeable.options.computed.isDark.call(vm);
-    return Themeable.options.computed.themeClasses.call({
+    const isDark = Themeable$1.options.computed.isDark.call(vm);
+    return Themeable$1.options.computed.themeClasses.call({
       isDark
     });
   }
@@ -134,7 +134,7 @@
   // Styles
   /* @vue/component */
 
-  var VApp = mixins(Themeable).extend({
+  var VApp = mixins(Themeable$1).extend({
     name: 'v-app',
     props: {
       dark: {
@@ -2472,7 +2472,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VSheet = mixins(BindsAttrs, Colorable, Elevatable, Measurable, Roundable, Themeable).extend({
+  var VSheet = mixins(BindsAttrs, Colorable, Elevatable, Measurable, Roundable, Themeable$1).extend({
     name: 'v-sheet',
     props: {
       outlined: Boolean,
@@ -2766,7 +2766,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   const hasIntersect = typeof window !== 'undefined' && 'IntersectionObserver' in window;
   /* @vue/component */
 
-  var VImg = mixins(VResponsive, Themeable).extend({
+  var VImg = mixins(VResponsive, Themeable$1).extend({
     name: 'v-img',
     directives: {
       intersect: Intersect
@@ -4332,7 +4332,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return /^[mzlhvcsqta]\s*[-+.0-9][^mlhvzcsqta]+/i.test(icon) && /[\dz]$/i.test(icon) && icon.length > 4;
   }
 
-  const VIcon = mixins(BindsAttrs, Colorable, Sizeable, Themeable
+  const VIcon = mixins(BindsAttrs, Colorable, Sizeable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-icon',
@@ -5316,7 +5316,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       isDark() {
         if (this.type && !this.coloredBorder && !this.outlined) return true;
-        return Themeable.options.computed.isDark.call(this);
+        return Themeable$1.options.computed.isDark.call(this);
       }
 
     },
@@ -5594,7 +5594,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VChip = mixins(Colorable, Sizeable, Routable, Themeable, factory$1('chipGroup'), factory$2('inputValue')).extend({
+  var VChip = mixins(Colorable, Sizeable, Routable, Themeable$1, factory$1('chipGroup'), factory$2('inputValue')).extend({
     name: 'v-chip',
     props: {
       active: {
@@ -5753,14 +5753,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Mixins
   /* @vue/component */
 
-  var VThemeProvider = Themeable.extend({
+  var VThemeProvider = Themeable$1.extend({
     name: 'v-theme-provider',
     props: {
       root: Boolean
     },
     computed: {
       isDark() {
-        return this.root ? this.rootIsDark : Themeable.options.computed.isDark.call(this);
+        return this.root ? this.rootIsDark : Themeable$1.options.computed.isDark.call(this);
       }
 
     },
@@ -6730,7 +6730,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$q = mixins(Dependent, Delayable, Returnable, Roundable, Themeable, Menuable);
+  const baseMixins$q = mixins(Dependent, Delayable, Returnable, Roundable, Themeable$1, Menuable);
   /* @vue/component */
 
   var VMenu = baseMixins$q.extend({
@@ -7195,7 +7195,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       Ripple
     },
     props: { ...Colorable.options.props,
-      ...Themeable.options.props,
+      ...Themeable$1.options.props,
       disabled: Boolean,
       ripple: {
         type: Boolean,
@@ -7269,7 +7269,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  var VDivider = Themeable.extend({
+  var VDivider = Themeable$1.extend({
     name: 'v-divider',
     props: {
       inset: Boolean,
@@ -7303,7 +7303,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  var VSubheader = mixins(Themeable
+  var VSubheader = mixins(Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-subheader',
@@ -7411,7 +7411,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$p = mixins(Colorable, Routable, Themeable, factory$1('listItemGroup'), factory$2('inputValue'));
+  const baseMixins$p = mixins(Colorable, Routable, Themeable$1, factory$1('listItemGroup'), factory$2('inputValue'));
   /* @vue/component */
 
   var VListItem = baseMixins$p.extend().extend({
@@ -7791,7 +7791,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   const Proxyable = factory();
 
   // Styles
-  const BaseItemGroup = mixins(Comparable, Proxyable, Themeable).extend({
+  const BaseItemGroup = mixins(Comparable, Proxyable, Themeable$1).extend({
     name: 'base-item-group',
     props: {
       activeClass: {
@@ -8138,7 +8138,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Components
   /* @vue/component */
 
-  var VSelectList = mixins(Colorable, Themeable).extend({
+  var VSelectList = mixins(Colorable, Themeable$1).extend({
     name: 'v-select-list',
     // https://github.com/vuejs/vue/issues/6872
     directives: {
@@ -8370,7 +8370,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VLabel = mixins(Themeable).extend({
+  var VLabel = mixins(Themeable$1).extend({
     name: 'v-label',
     functional: true,
     props: {
@@ -8427,7 +8427,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VMessages = mixins(Colorable, Themeable).extend({
+  var VMessages = mixins(Colorable, Themeable$1).extend({
     name: 'v-messages',
     props: {
       value: {
@@ -8468,7 +8468,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Mixins
-  const baseMixins$n = mixins(Colorable, inject('form'), Themeable);
+  const baseMixins$n = mixins(Colorable, inject('form'), Themeable$1);
   /* @vue/component */
 
   var Validatable = baseMixins$n.extend({
@@ -9001,7 +9001,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VCounter = mixins(Themeable).extend({
+  var VCounter = mixins(Themeable$1).extend({
     name: 'v-counter',
     functional: true,
     props: {
@@ -9074,7 +9074,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     });
   }
 
-  const baseMixins$l = mixins(Colorable, factory$3(['absolute', 'fixed', 'top', 'bottom']), Proxyable, Themeable);
+  const baseMixins$l = mixins(Colorable, factory$3(['absolute', 'fixed', 'top', 'bottom']), Proxyable, Themeable$1);
   /* @vue/component */
 
   var VProgressLinear = baseMixins$l.extend({
@@ -11068,7 +11068,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  var VBadge = mixins(Colorable, factory$3(['left', 'bottom']), Themeable, Toggleable, Transitionable).extend({
+  var VBadge = mixins(Colorable, factory$3(['left', 'bottom']), Themeable$1, Toggleable, Transitionable).extend({
     name: 'v-badge',
     props: {
       avatar: Boolean,
@@ -11444,7 +11444,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  mixins(applicationable('bottom', ['height', 'inputValue']), Colorable, Measurable, factory$2('inputValue'), Proxyable, Scrollable, Themeable
+  mixins(applicationable('bottom', ['height', 'inputValue']), Colorable, Measurable, factory$2('inputValue'), Proxyable, Scrollable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-bottom-navigation',
@@ -11566,7 +11566,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VOverlay = mixins(Colorable, Themeable, Toggleable).extend({
+  var VOverlay = mixins(Colorable, Themeable$1, Toggleable).extend({
     name: 'v-overlay',
     props: {
       absolute: Boolean,
@@ -12191,7 +12191,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   var VBreadcrumbsDivider = createSimpleFunctional('v-breadcrumbs__divider', 'li');
 
   // Styles
-  var VBreadcrumbs = mixins(Themeable
+  var VBreadcrumbs = mixins(Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-breadcrumbs',
@@ -13590,7 +13590,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
 
   // Mixins
-  var CalendarBase = mixins(Colorable, Localable, Mouse, Themeable, Times
+  var CalendarBase = mixins(Colorable, Localable, Mouse, Themeable$1, Times
   /* @vue/component */
   ).extend({
     name: 'calendar-base',
@@ -18275,7 +18275,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   const white = fromHex('#FFFFFF').rgba;
   const black = fromHex('#000000').rgba;
-  var VColorPickerSwatches = mixins(Themeable).extend({
+  var VColorPickerSwatches = mixins(Themeable$1).extend({
     name: 'v-color-picker-swatches',
     props: {
       swatches: {
@@ -18333,7 +18333,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  var VColorPicker = mixins(Elevatable, Themeable).extend({
+  var VColorPicker = mixins(Elevatable, Themeable$1).extend({
     name: 'v-color-picker',
     props: {
       canvasHeight: {
@@ -19424,7 +19424,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Components
   /* @vue/component */
 
-  var VDataIterator = mixins(Mobile, Themeable).extend({
+  var VDataIterator = mixins(Mobile, Themeable$1).extend({
     name: 'v-data-iterator',
     props: { ...VData.options.props,
       itemKey: {
@@ -20190,7 +20190,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
-  var VSimpleTable = mixins(Themeable).extend({
+  var VSimpleTable = mixins(Themeable$1).extend({
     name: 'v-simple-table',
     props: {
       dense: Boolean,
@@ -20907,7 +20907,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  mixins(Returnable, Themeable).extend({
+  mixins(Returnable, Themeable$1).extend({
     name: 'v-edit-dialog',
     props: {
       cancelText: {
@@ -21370,7 +21370,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }[type]);
   });
 
-  var VDatePickerHeader = mixins(Colorable, Localable, Themeable
+  var VDatePickerHeader = mixins(Colorable, Localable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-date-picker-header',
@@ -21508,7 +21508,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return (!allowedFn || allowedFn(date)) && (!min || date >= min.substr(0, 10)) && (!max || date <= max);
   }
 
-  var DatePickerTable = mixins(Colorable, Localable, Themeable
+  var DatePickerTable = mixins(Colorable, Localable, Themeable$1
   /* @vue/component */
   ).extend({
     directives: {
@@ -22004,7 +22004,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   /* @vue/component */
 
-  var VPicker = mixins(Colorable, Elevatable, Themeable).extend({
+  var VPicker = mixins(Colorable, Elevatable, Themeable$1).extend({
     name: 'v-picker',
     props: {
       flat: Boolean,
@@ -22085,7 +22085,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Components
-  var Picker = mixins(Colorable, Elevatable, Themeable
+  var Picker = mixins(Colorable, Elevatable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'picker',
@@ -24025,7 +24025,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$c = mixins(applicationable('left', ['isActive', 'isMobile', 'miniVariant', 'expandOnHover', 'permanent', 'right', 'temporary', 'width']), Colorable, Dependent, Mobile, Overlayable, SSRBootable, Themeable);
+  const baseMixins$c = mixins(applicationable('left', ['isActive', 'isMobile', 'miniVariant', 'expandOnHover', 'permanent', 'right', 'temporary', 'width']), Colorable, Dependent, Mobile, Overlayable, SSRBootable, Themeable$1);
   /* @vue/component */
 
   var VNavigationDrawer = baseMixins$c.extend({
@@ -24809,7 +24809,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   var VPagination = mixins(Colorable, intersectable({
     onVisible: ['init']
-  }), Themeable).extend({
+  }), Themeable$1).extend({
     name: 'v-pagination',
     directives: {
       Resize
@@ -25257,7 +25257,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$8 = mixins(BindsAttrs, Colorable, Rippleable, factory$1('radioGroup'), Themeable);
+  const baseMixins$8 = mixins(BindsAttrs, Colorable, Rippleable, factory$1('radioGroup'), Themeable$1);
   /* @vue/component */
 
   var VRadio = baseMixins$8.extend().extend({
@@ -25643,7 +25643,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VRating = mixins(Colorable, Delayable, Rippleable, Sizeable, Themeable).extend({
+  var VRating = mixins(Colorable, Delayable, Rippleable, Sizeable, Themeable$1).extend({
     name: 'v-rating',
     props: {
       backgroundColor: {
@@ -25863,7 +25863,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Styles
   /* @vue/component */
 
-  var VSkeletonLoader = mixins(Elevatable, Measurable, Themeable).extend({
+  var VSkeletonLoader = mixins(Elevatable, Measurable, Themeable$1).extend({
     name: 'VSkeletonLoader',
     props: {
       boilerplate: Boolean,
@@ -26101,7 +26101,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       // Snackbar is dark by default
       // override themeable logic.
       isDark() {
-        return this.hasBackground ? !this.light : Themeable.options.computed.isDark.call(this);
+        return this.hasBackground ? !this.light : Themeable$1.options.computed.isDark.call(this);
       },
 
       styles() {
@@ -27266,7 +27266,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  mixins(applicationable('bar', ['height', 'window']), Colorable, Themeable
+  mixins(applicationable('bar', ['height', 'window']), Colorable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-system-bar',
@@ -27321,7 +27321,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Extensions
-  var VTabsBar = mixins(BaseSlideGroup, SSRBootable, Themeable
+  var VTabsBar = mixins(BaseSlideGroup, SSRBootable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-tabs-bar',
@@ -27440,7 +27440,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  const baseMixins$4 = mixins(Colorable, Proxyable, Themeable);
+  const baseMixins$4 = mixins(Colorable, Proxyable, Themeable$1);
   var VTabs = baseMixins$4.extend().extend({
     name: 'v-tabs',
     directives: {
@@ -27740,7 +27740,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   // Mixins
   const baseMixins$3 = mixins(Routable, // Must be after routable
   // to overwrite activeClass
-  factory$1('tabsBar'), Themeable);
+  factory$1('tabsBar'), Themeable$1);
   var VTab = baseMixins$3.extend().extend().extend({
     name: 'v-tab',
     props: {
@@ -27943,7 +27943,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Styles
-  var VTimeline = mixins(Themeable
+  var VTimeline = mixins(Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-timeline',
@@ -27981,7 +27981,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Types
-  const baseMixins$1 = mixins(Colorable, Themeable
+  const baseMixins$1 = mixins(Colorable, Themeable$1
   /* @vue/component */
   );
   var VTimelineItem = baseMixins$1.extend().extend({
@@ -28149,7 +28149,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
   });
 
-  var VTimePickerClock = mixins(Colorable, Themeable
+  var VTimePickerClock = mixins(Colorable, Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-time-picker-clock',
@@ -29322,7 +29322,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
 
   // Styles
-  mixins(provide('treeview'), Themeable
+  mixins(provide('treeview'), Themeable$1
   /* @vue/component */
   ).extend({
     name: 'v-treeview',
@@ -37623,6 +37623,417 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       };
   }
 
+  let EditableMixin = class EditableMixin extends Vue__default["default"] {
+      constructor() {
+          super(...arguments);
+          this.inputToFocus = null;
+          this.cellComponents = new Map();
+          /**
+           * Variable to store the ids of the cells to be forced update
+           */
+          this.currentUpdatingIds = [];
+          this.editingComponent = null;
+          this.editingComponentId = null;
+          this.mousedownCalled = false;
+      }
+      mounted() {
+          this.instance.setViewEnterEdit(this.viewEnterEdit);
+      }
+      viewEnterEdit(rowKey, columnName) {
+          const id = rowKey + columnName;
+          const component = this.cellComponents.get(id);
+          if (!component)
+              return;
+          this.enterCompEdit(component, id);
+      }
+      get editedRows() {
+          if (!this.instance.getEditedRows)
+              return [];
+          return this.instance.getEditedRows(false, true);
+      }
+      /**
+       * Watches editedRows and decides which cells should be forced update
+       * Normally only two will be updated each time: the cell that is entering edit mode
+       * and the cell that is leaving edit mode, but it is possible to have more
+       * updates, for example when calling `cancelEditedRows()`, all edited rows must be updated
+       */
+      changeEditedRows(newEditedRows) {
+          if (!newEditedRows)
+              return;
+          const prevUpdatingIds = [...this.currentUpdatingIds];
+          this.currentUpdatingIds = newEditedRows.reduce((result, row) => {
+              const rowKey = row[this.instance.datasource.uniqueKey];
+              const rowIds = [];
+              // reads from the editedRows to know which ids should be updated
+              Object.keys(row).forEach((columnName) => {
+                  const id = rowKey + columnName;
+                  try {
+                      const column = this.instance.getColumn(columnName);
+                      if (!this.cellComponents.get(id) || !this.instance.isEdited(column, row))
+                          return;
+                      rowIds.push(id);
+                  }
+                  catch (e) {
+                      if (!(e instanceof common.ColumnNotFoundError)) {
+                          throw e;
+                      }
+                  }
+              });
+              return [...result, ...rowIds];
+          }, []);
+          const idsToUpdate = [...prevUpdatingIds, ...this.currentUpdatingIds];
+          // forces cell updates
+          setTimeout(() => {
+              idsToUpdate.forEach((id) => {
+                  var _a;
+                  (_a = this.cellComponents.get(id)) === null || _a === void 0 ? void 0 : _a.forceUpdate();
+              });
+          });
+      }
+      changeEditing(editing) {
+          var _a;
+          if (this.instance.singleEdit) {
+              if (editing)
+                  return;
+              this.leaveEdit(this.editingComponent);
+          }
+          // when not in singleEdit mode, all cells should enter or leave edit mode at the same time
+          this.cellComponents.forEach((component) => (editing ? component.enterEdit() : component.leaveEdit()));
+          if (!editing)
+              return;
+          (_a = this.inputToFocus) === null || _a === void 0 ? void 0 : _a.focusInput();
+      }
+      /**
+       * Registers a new component in `cellComponents`
+       * @param id component id
+       * @param component
+       */
+      register(id, component) {
+          const newRegisteredComponents = component;
+          this.cellComponents.set(id, newRegisteredComponents);
+          if (!this.instance.editing)
+              return;
+          // in case a new row is added after the grid enters edit mode,
+          // make the newly mounted fields enter edit mode
+          if (this.instance.singleEdit) {
+              if (id === this.editingComponentId)
+                  this.enterCompEdit(component, id);
+              return;
+          }
+          component.enterEdit();
+      }
+      /**
+       * Makes
+       *  a component enter edit mode, also making the previous editing component
+       * leave edit mode
+       */
+      enterCompEdit(component, id) {
+          if (!this.instance.singleEdit)
+              return;
+          this.leaveEdit(this.editingComponent);
+          this.editingComponent = component;
+          this.editingComponentId = id;
+          this.enterEdit(component);
+      }
+      leaveEdit(component) {
+          if (!component)
+              return;
+          component.leaveEdit();
+      }
+      enterEdit(component) {
+          component.enterEdit();
+          component.focusInput();
+      }
+      isCellEditable(row, column, canEdit) {
+          const rowKey = this.rowKey(row);
+          const cellsApplied = (this.instance.cellsApplied[rowKey] || {})[column.name];
+          return Object.assign(Object.assign({}, column), cellsApplied).editable && canEdit;
+      }
+      isEdited(column, row) {
+          return this.instance.isEdited(column, row);
+      }
+      isValid(column, row) {
+          return this.instance.isValid(column, row);
+      }
+      getEditableComponent(column, row, cellProps) {
+          return this.instance.getEditableComponent(column, row, cellProps, {});
+      }
+      cellClick(row, column, event, canEdit = true, componentId = '') {
+          this.mousedownCalled = false;
+          if (!this.instance.doubleClickEdit || !column.editable) {
+              this.callCellClick(row, column, event, canEdit, componentId);
+              return;
+          }
+          this.$doubleClick(() => this.instance.cellClickEvent(row, column, event, this.$el), () => this.callCellClick(row, column, event, canEdit, componentId), event);
+      }
+      callCellClick(row, column, event, canEdit, componentId) {
+          const component = this.cellComponents.get(componentId);
+          if (!this.instance.editing && component) {
+              this.inputToFocus = component;
+          }
+          if (component)
+              this.enterCompEdit(component, componentId);
+          this.instance.cellClick(row, column, event, this.$el, canEdit);
+      }
+      editableCellFocus(component, id, row, column) {
+          this.instance.selectCell(row, column);
+          if (this.mousedownCalled && this.instance.singleEdit) {
+              this.mousedownCalled = false;
+              return;
+          }
+          this.enterCompEdit(component, id);
+      }
+      editableMousedown() {
+          this.mousedownCalled = true;
+      }
+      getVisibleValue(row, column) {
+          return this.instance.getVisibleValue(row, column);
+      }
+      cellFocus(row, column) {
+          this.instance.selectCell(row, column);
+          if (!this.instance.singleEdit)
+              return;
+          this.leaveEdit(this.editingComponent);
+      }
+      fieldFocusout({ event, component }) {
+          if (!this.instance.singleEdit)
+              return;
+          setTimeout(() => {
+              if (!event.target || !(event.target instanceof HTMLElement))
+                  return;
+              const isComponentFocused = event.target.contains(document.activeElement);
+              if (!isComponentFocused)
+                  component.leaveEdit();
+          });
+      }
+      enterEditEvent(row, column, event) {
+          this.instance.inlineEdit(row, column, event, this.$el);
+      }
+  };
+  __decorate([
+      vuePropertyDecorator.Watch('editedRows', { immediate: true, deep: true }),
+      __metadata("design:type", Function),
+      __metadata("design:paramtypes", [Array]),
+      __metadata("design:returntype", void 0)
+  ], EditableMixin.prototype, "changeEditedRows", null);
+  __decorate([
+      vuePropertyDecorator.Watch('instance.editing'),
+      __metadata("design:type", Function),
+      __metadata("design:paramtypes", [Boolean]),
+      __metadata("design:returntype", void 0)
+  ], EditableMixin.prototype, "changeEditing", null);
+  EditableMixin = __decorate([
+      Component__default["default"]
+  ], EditableMixin);
+  var EditableMixin$1 = EditableMixin;
+
+  /**
+   * Mixin for tabular components that can be navigated using keyboard keys,
+   * Grids in general
+   */
+  let NavigableTableMixin = class NavigableTableMixin extends Vue__default["default"] {
+      constructor() {
+          super(...arguments);
+          // selector for input-type elements that are not disabled, or elements with tabindex
+          this.focusableSelector = 'button:not([disabled]), a:not([disabled]), input:not([disabled]), select:not([disabled])'
+              + ', textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+      }
+      mounted() {
+          this.instance.setViewNavigate(this.viewNavigate);
+      }
+      viewNavigate(direction, event) {
+          if (direction === 'up') {
+              this.navigateVertical(true);
+              return;
+          }
+          if (direction === 'down') {
+              this.navigateVertical(false);
+              return;
+          }
+          if (direction === 'right') {
+              this.navigateRight(event);
+              return;
+          }
+          this.navigateLeft(event);
+      }
+      navigateRight(event) {
+          if (!this.instance.cellSelection)
+              return;
+          event === null || event === void 0 ? void 0 : event.preventDefault();
+          const tdNode = this.getTdNode(document.activeElement);
+          if (!tdNode)
+              return;
+          let { nextElementSibling } = tdNode;
+          if (!nextElementSibling) {
+              const trNode = tdNode.parentElement;
+              if (!trNode)
+                  return;
+              let nextTr;
+              do {
+                  nextTr = trNode.nextElementSibling;
+                  if (!nextTr)
+                      return;
+              } while (!this.isElementVisible(nextTr));
+              [nextElementSibling] = nextTr.children;
+          }
+          this.focusElement(nextElementSibling);
+      }
+      navigateLeft(event) {
+          if (!this.instance.cellSelection)
+              return;
+          event === null || event === void 0 ? void 0 : event.preventDefault();
+          const tdNode = this.getTdNode(document.activeElement);
+          if (!tdNode)
+              return;
+          let { previousElementSibling } = tdNode;
+          if (!previousElementSibling) {
+              const trNode = tdNode.parentElement;
+              if (!trNode)
+                  return;
+              let previousTr;
+              do {
+                  previousTr = trNode.previousElementSibling;
+                  if (!previousTr)
+                      return;
+              } while (!this.isElementVisible(previousTr));
+              previousElementSibling = previousTr.children[previousTr.children.length - 1];
+          }
+          this.focusElement(previousElementSibling);
+      }
+      isElementVisible(element) {
+          const style = window.getComputedStyle(element);
+          const isVisible = style.display !== 'none';
+          return isVisible;
+      }
+      /**
+       * Focus an element or its first focusable children
+       * @param element element to be focused
+       */
+      focusElement(element) {
+          if (!element)
+              return;
+          const focusableChild = element.querySelector(this.focusableSelector);
+          const nextFocusableElement = focusableChild && this.isElementVisible(focusableChild) ? focusableChild : element;
+          nextFocusableElement.focus({ preventScroll: true });
+          if (nextFocusableElement instanceof HTMLInputElement)
+              nextFocusableElement.select();
+      }
+      getTdNode(element) {
+          if (!element)
+              return null;
+          if (element.nodeName === 'TD')
+              return element;
+          return this.getTdNode(element.parentElement);
+      }
+      getArrayFromElementTag(tagName, node) {
+          if (node)
+              return Array.from(node.getElementsByTagName(tagName));
+          return [];
+      }
+      getArrayFromTdElement(node) {
+          return this.getArrayFromElementTag('TD', node);
+      }
+      getArrayFromTrElement(node) {
+          return this.getArrayFromElementTag('TR', node).filter(this.isElementVisible);
+      }
+      findNextTd(up, trIndex, tdIndex, trCollection) {
+          if ((up && trIndex <= 0) || (!up && trIndex >= trCollection.length - 1)) {
+              return undefined;
+          }
+          const nextTr = trCollection[up ? trIndex - 1 : trIndex + 1];
+          const index = Math.min(tdIndex, nextTr.childElementCount - 1);
+          const nextTd = this.getArrayFromTdElement(nextTr)[index];
+          return nextTd;
+      }
+      navigateVertical(up) {
+          var _a;
+          const hasActive = (_a = this.$el.querySelector('tbody')) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+          // if not cellSelection and activeElement is not inside tbody, should navigate from datasource
+          if (!this.instance.cellSelection && !hasActive) {
+              this.instance.navigateDatasource(up);
+              return;
+          }
+          const tdNode = this.getTdNode(document.activeElement);
+          const trNode = tdNode === null || tdNode === void 0 ? void 0 : tdNode.parentElement;
+          if (!tdNode || !trNode)
+              return;
+          const tdIndex = this.getArrayFromTdElement(trNode).indexOf(tdNode);
+          const trCollection = this.getArrayFromTrElement(trNode.parentElement);
+          const trIndex = trCollection.indexOf(trNode);
+          const nextElement = this.findNextTd(up, trIndex, tdIndex, trCollection);
+          if (!nextElement)
+              return;
+          this.focusElement(nextElement);
+      }
+  };
+  NavigableTableMixin = __decorate([
+      Component__default["default"]
+  ], NavigableTableMixin);
+  var NavigableTableMixin$1 = NavigableTableMixin;
+
+  let ThemeableMixin = class ThemeableMixin extends vuePropertyDecorator.Vue {
+      constructor() {
+          super(...arguments);
+          this.themeableProvide = {
+              isDark: false,
+          };
+      }
+      // Provide
+      get providedTheme() {
+          return this.themeableProvide;
+      }
+      get isDark() {
+          var _a, _b;
+          if (((_a = this.instance) === null || _a === void 0 ? void 0 : _a.dark) === true || this.dark === true) {
+              // explicitly dark
+              return true;
+          }
+          if (((_b = this.instance) === null || _b === void 0 ? void 0 : _b.light) === true || this.light === true) {
+              // explicitly light
+              return false;
+          }
+          // inherit from parent, or default false if there is none
+          return this.themeInject.isDark;
+      }
+      handler(newVal, oldVal) {
+          if (newVal !== oldVal) {
+              this.themeableProvide.isDark = this.isDark;
+          }
+      }
+  };
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Boolean)
+  ], ThemeableMixin.prototype, "dark", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
+      __metadata("design:type", Boolean)
+  ], ThemeableMixin.prototype, "light", void 0);
+  __decorate([
+      vuePropertyDecorator.Provide('theme'),
+      __metadata("design:type", Object),
+      __metadata("design:paramtypes", [])
+  ], ThemeableMixin.prototype, "providedTheme", null);
+  __decorate([
+      vuePropertyDecorator.Inject({
+          from: 'theme',
+          default: () => ({
+              isDark: false,
+          }),
+      }),
+      __metadata("design:type", Object)
+  ], ThemeableMixin.prototype, "themeInject", void 0);
+  __decorate([
+      vuePropertyDecorator.Watch('isDark', { immediate: true }),
+      __metadata("design:type", Function),
+      __metadata("design:paramtypes", [Boolean, Boolean]),
+      __metadata("design:returntype", void 0)
+  ], ThemeableMixin.prototype, "handler", null);
+  ThemeableMixin = __decorate([
+      vuePropertyDecorator.Component
+  ], ThemeableMixin);
+  var Themeable = ThemeableMixin;
+
   var ZdComponent_1;
   /**
    * Base component for all components.
@@ -37849,6 +38260,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdComponent = ZdComponent_1 = __decorate([
       vuePropertyDecorator.Component({
           inheritAttrs: false,
+          mixins: [Themeable],
       })
   ], ZdComponent);
   var ZdComponent$1 = ZdComponent;
@@ -38179,7 +38591,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-3f4c4dc6_0", { source: ".zd-alert-wrapper {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n}\n.zd-alert .v-snack__wrapper {\n  transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.25s cubic-bezier(0.4, 0, 0.2, 1);\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-6058e0ea_0", { source: ".zd-alert-wrapper {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n}\n.zd-alert .v-snack__wrapper {\n  transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.25s cubic-bezier(0.4, 0, 0.2, 1);\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 */
@@ -38503,7 +38915,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1A = function (inject) {
       if (!inject) return
-      inject("data-v-2629f836_0", { source: ".zd-apex-chart.zd-apex-chart-drilled svg text.apexcharts-title-text {\n  transform: translateX(20px);\n}\n.zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-toolbar > div {\n  transform: scale(0.8) !important;\n}\n.zd-apex-chart.theme--light .apexcharts-toolbar > div > .v-icon {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip {\n  background: #fdfdfd !important;\n  border: 1px solid #fdfdfd !important;\n  color: #3b3b3b !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #eee !important;\n  color: #3b3b3b !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--light .apexcharts-title-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip {\n  background: #eee !important;\n  border: 1px solid #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-toolbar > div > .v-icon {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip {\n  background: #1e1e1e !important;\n  border: 1px solid #1e1e1e !important;\n  color: #b8b8b8 !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #101010 !important;\n  color: #b8b8b8 !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-title-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip {\n  background: #101010 !important;\n  border: 1px solid #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #252525 !important;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  position: relative;\n  overflow: hidden !important;\n}\n.apexcharts-container .zd-apex-charts-drill-button {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}", map: undefined, media: undefined });
+      inject("data-v-2ee81ad3_0", { source: ".zd-apex-chart.zd-apex-chart-drilled svg text.apexcharts-title-text {\n  transform: translateX(20px);\n}\n.zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-toolbar > div {\n  transform: scale(0.8) !important;\n}\n.zd-apex-chart.theme--light .apexcharts-toolbar > div > .v-icon {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip {\n  background: #fdfdfd !important;\n  border: 1px solid #fdfdfd !important;\n  color: #3b3b3b !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #eee !important;\n  color: #3b3b3b !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--light .apexcharts-title-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip {\n  background: #eee !important;\n  border: 1px solid #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-toolbar > div > .v-icon {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip {\n  background: #1e1e1e !important;\n  border: 1px solid #1e1e1e !important;\n  color: #b8b8b8 !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #101010 !important;\n  color: #b8b8b8 !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-title-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip {\n  background: #101010 !important;\n  border: 1px solid #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #252525 !important;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  position: relative;\n  overflow: hidden !important;\n}\n.apexcharts-container .zd-apex-charts-drill-button {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -38611,7 +39023,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1z = function (inject) {
       if (!inject) return
-      inject("data-v-b09b8d98_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-6ee768a2_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 */
@@ -38743,7 +39155,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1y = function (inject) {
       if (!inject) return
-      inject("data-v-771f13b0_0", { source: ".v-breadcrumbs {\n  padding: 0;\n}\n.v-breadcrumbs li:nth-child(2n) {\n  padding: 0 var(--spacing-2);\n}\n.v-breadcrumbs.zd-breadcrumbs--small li {\n  font-size: var(--zd-font-caption-size);\n}\n.v-breadcrumbs li {\n  font-size: var(--zd-font-body1-size);\n}\n.v-breadcrumbs--large li {\n  font-size: var(--zd-font-body3-size);\n}", map: undefined, media: undefined });
+      inject("data-v-9d92e4c4_0", { source: ".v-breadcrumbs {\n  padding: 0;\n}\n.v-breadcrumbs li:nth-child(2n) {\n  padding: 0 var(--spacing-2);\n}\n.v-breadcrumbs.zd-breadcrumbs--small li {\n  font-size: var(--zd-font-caption-size);\n}\n.v-breadcrumbs li {\n  font-size: var(--zd-font-body1-size);\n}\n.v-breadcrumbs--large li {\n  font-size: var(--zd-font-body3-size);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -38987,7 +39399,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1x = function (inject) {
       if (!inject) return
-      inject("data-v-44e2f37c_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-1);\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-left: var(--spacing-1);\n}", map: undefined, media: undefined });
+      inject("data-v-ba89842c_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-1);\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-left: var(--spacing-1);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39180,7 +39592,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1w = function (inject) {
       if (!inject) return
-      inject("data-v-687d3642_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-47ffa594_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 */
@@ -39409,7 +39821,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1v = function (inject) {
       if (!inject) return
-      inject("data-v-0d2cd214_0", { source: ".zd-card {\n  padding: var(--spacing-4);\n  overflow: auto;\n}\n.zd-card::before {\n  content: none;\n}\n.zd-card.zd-card-cursor-auto {\n  cursor: auto;\n}\n.zd-card.v-sheet.v-card {\n  border-radius: var(--border);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined) {\n  box-shadow: var(--shadow-3);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined).v-card--raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-card.v-sheet.v-card--hover:focus, .zd-card.v-sheet.v-card--hover:hover {\n  box-shadow: var(--shadow-5);\n}\n.zd-card.v-sheet.v-card.v-sheet--outlined {\n  border: var(--regular) solid var(--v-secondary-base);\n}", map: undefined, media: undefined });
+      inject("data-v-d79e2170_0", { source: ".zd-card {\n  padding: var(--spacing-4);\n  overflow: auto;\n}\n.zd-card::before {\n  content: none;\n}\n.zd-card.zd-card-cursor-auto {\n  cursor: auto;\n}\n.zd-card.v-sheet.v-card {\n  border-radius: var(--border);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined) {\n  box-shadow: var(--shadow-3);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined).v-card--raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-card.v-sheet.v-card--hover:focus, .zd-card.v-sheet.v-card--hover:hover {\n  box-shadow: var(--shadow-5);\n}\n.zd-card.v-sheet.v-card.v-sheet--outlined {\n  border: var(--regular) solid var(--v-secondary-base);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39998,7 +40410,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1u = function (inject) {
       if (!inject) return
-      inject("data-v-302f5b51_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+      inject("data-v-a0f1b2ba_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide > .row {\n  height: 100%;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40301,7 +40713,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1t = function (inject) {
       if (!inject) return
-      inject("data-v-82aee8da_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 });
+      inject("data-v-6fe4c6fe_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 */
@@ -40481,7 +40893,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1s = function (inject) {
       if (!inject) return
-      inject("data-v-4a5e4134_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 });
+      inject("data-v-6d42d558_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 */
@@ -40695,7 +41107,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1r = function (inject) {
       if (!inject) return
-      inject("data-v-5ff7d808_0", { source: ".v-chip:not(.zd-chip-reverse) .zd-chip-label {\n  margin: 0;\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:first-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:last-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:first-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:last-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .v-chip__close.v-icon,\n.v-chip.zd-chip-reverse .v-chip__content .v-avatar {\n  margin: 0;\n}\n.v-chip.v-size--default {\n  height: auto;\n  padding: 6px var(--spacing-2);\n  font-size: 12px;\n  line-height: normal;\n}\n.v-chip.v-size--default .v-chip__close.v-icon {\n  font-size: var(--spacing-4) !important;\n}\n.v-chip.v-size--default .v-chip__close.v-icon.v-icon--right, .v-chip.v-size--default .v-chip__close.v-icon.v-icon--left {\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar {\n  height: auto !important;\n  min-width: auto !important;\n  width: auto !important;\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar .v-icon {\n  font-size: var(--spacing-4);\n}", map: undefined, media: undefined });
+      inject("data-v-4420aa5a_0", { source: ".v-chip:not(.zd-chip-reverse) .zd-chip-label {\n  margin: 0;\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:first-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:last-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:first-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:last-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .v-chip__close.v-icon,\n.v-chip.zd-chip-reverse .v-chip__content .v-avatar {\n  margin: 0;\n}\n.v-chip.v-size--default {\n  height: auto;\n  padding: 6px var(--spacing-2);\n  font-size: 12px;\n  line-height: normal;\n}\n.v-chip.v-size--default .v-chip__close.v-icon {\n  font-size: var(--spacing-4) !important;\n}\n.v-chip.v-size--default .v-chip__close.v-icon.v-icon--right, .v-chip.v-size--default .v-chip__close.v-icon.v-icon--left {\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar {\n  height: auto !important;\n  min-width: auto !important;\n  width: auto !important;\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar .v-icon {\n  font-size: var(--spacing-4);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40962,7 +41374,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1q = function (inject) {
       if (!inject) return
-      inject("data-v-7d646d52_0", { source: ".zd-code-editor {\n  position: relative;\n  display: flex;\n  overflow: auto;\n}\n.zd-code-editor-clipboard-button {\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 {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button {\n  opacity: 1;\n}\n.zd-code-editor-container {\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  width: 100%;\n}\n.zd-code-editor-container.line-numbers {\n  background: linear-gradient(to right, var(--v-grey-lighten4), var(--v-grey-lighten4) 40px, var(--v-grey-lighten5) 40px, var(--v-grey-lighten5));\n}\n.zd-code-editor-container:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers {\n  min-height: 45px;\n  width: 40px;\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  left: 0;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre {\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-clipboard-button {\n  background-color: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-lighten4);\n  font-size: 18px;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container {\n  border: solid var(--regular) var(--v-grey-darken3);\n  background: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre {\n  text-shadow: 0 1px #2c2c2c;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.property, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.tag, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.boolean, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.number, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.constant, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.symbol, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.deleted {\n  color: #ff6fd3;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.atrule, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-value, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.keyword {\n  color: #00acf6;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.function, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.class-name {\n  color: #ff7692;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.selector, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-name, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.string, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.char, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.builtin, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.inserted {\n  color: #77b300;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.operator {\n  background: none;\n}", map: undefined, media: undefined });
+      inject("data-v-7279da40_0", { source: ".zd-code-editor {\n  position: relative;\n  display: flex;\n  overflow: auto;\n}\n.zd-code-editor-clipboard-button {\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 {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button {\n  opacity: 1;\n}\n.zd-code-editor-container {\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  width: 100%;\n}\n.zd-code-editor-container.line-numbers {\n  background: linear-gradient(to right, var(--v-grey-lighten4), var(--v-grey-lighten4) 40px, var(--v-grey-lighten5) 40px, var(--v-grey-lighten5));\n}\n.zd-code-editor-container:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers {\n  min-height: 45px;\n  width: 40px;\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  left: 0;\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre {\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-clipboard-button {\n  background-color: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-lighten4);\n  font-size: 18px;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container {\n  border: solid var(--regular) var(--v-grey-darken3);\n  background: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre {\n  text-shadow: 0 1px #2c2c2c;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.property, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.tag, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.boolean, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.number, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.constant, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.symbol, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.deleted {\n  color: #ff6fd3;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.atrule, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-value, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.keyword {\n  color: #00acf6;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.function, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.class-name {\n  color: #ff7692;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.selector, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-name, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.string, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.char, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.builtin, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.inserted {\n  color: #77b300;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.operator {\n  background: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41428,7 +41840,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1o = function (inject) {
       if (!inject) return
-      inject("data-v-1b69304c_0", { source: ".zd-collapse-card.tile, .zd-collapse-card.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .zd-collapse-card.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.zd-collapse-card > div:first-child.v-expansion-panel, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.zd-collapse-card > div:first-child.v-expansion-panel::before, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.zd-collapse-card > div:first-child.v-expansion-panel.outlined, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel.raised, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-header, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .zd-collapse-card > 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.zd-collapse-card--flat > div:first-child.v-expansion-panel, .zd-collapse-card--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .zd-collapse-card--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .zd-collapse-card.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-c0084ec4_0", { source: ".zd-collapse-card.tile, .zd-collapse-card.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .zd-collapse-card.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.zd-collapse-card > div:first-child.v-expansion-panel, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.zd-collapse-card > div:first-child.v-expansion-panel::before, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.zd-collapse-card > div:first-child.v-expansion-panel.outlined, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel.raised, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-header, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .zd-collapse-card > 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.zd-collapse-card > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .zd-collapse-card > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .zd-collapse-card > 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.zd-collapse-card--flat > div:first-child.v-expansion-panel, .zd-collapse-card--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .zd-collapse-card--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .zd-collapse-card.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .zd-collapse-card.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 */
@@ -41555,15 +41967,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           return _c(
             child.component,
             _vm._b(
-              {
-                key: index,
-                tag: "component",
-                attrs: {
-                  dark: _vm.instance.dark,
-                  light: _vm.instance.light,
-                  parent: _vm.instance,
-                },
-              },
+              { key: index, tag: "component", attrs: { parent: _vm.instance } },
               "component",
               child,
               false
@@ -41582,11 +41986,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1n = function (inject) {
       if (!inject) return
-      inject("data-v-77ffafc6_0", { source: ".zd-container[data-v-77ffafc6] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
+      inject("data-v-48ddf0f7_0", { source: ".zd-container[data-v-48ddf0f7] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$1n = "data-v-77ffafc6";
+    const __vue_scope_id__$1n = "data-v-48ddf0f7";
     /* module identifier */
     const __vue_module_identifier__$1n = undefined;
     /* functional template */
@@ -41827,7 +42231,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               _vm.instance.cssClass,
               "zd-input",
               "zd-text-input",
-              _vm.theme,
               {
                 "zd-dense": _vm.instance.dense,
                 "zd-no-border": !_vm.instance.showBorder,
@@ -41970,7 +42373,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1m = function (inject) {
       if (!inject) return
-      inject("data-v-0a009f59_0", { source: ".zd-text-input__affix, .v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix, .v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-grey-lighten2);\n  font-size: var(--zd-font-body2-size);\n  line-height: 15px;\n  padding: 3px 0 4px 0;\n}\n.zd-input.v-input.v-input--is-readonly > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-input.v-input.v-input--is-readonly.theme--dark > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-darken2);\n}\n.v-input.zd-text-input {\n  padding-top: var(--spacing-4);\n}\n.v-input.zd-text-input .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__prepend-outer, .v-input.zd-text-input .v-input__append-outer {\n  margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input .v-input__append-inner, .v-input.zd-text-input .v-input__prepend-inner {\n  padding: 0;\n  margin: 0;\n  align-self: unset;\n}\n.v-input.zd-text-input .v-input__prepend-outer .v-icon, .v-input.zd-text-input .v-input__append-outer .v-icon, .v-input.zd-text-input .v-input__append-inner .v-icon, .v-input.zd-text-input .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  padding-left: var(--spacing-2);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__slot {\n  position: static;\n}\n.v-input.zd-text-input.v-text-field--reverse > .v-input__control > .v-input__slot label {\n  left: auto !important;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append {\n  align-items: center;\n  display: inline-flex;\n  flex: 1 0 auto;\n  justify-content: center;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix {\n  padding-right: var(--spacing-2);\n}\n.v-input.zd-text-input.zd-text-input--prepend-icon > .v-input__control > .v-input__slot > .v-input__prepend-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-input--append-icon > .v-input__control > .v-input__slot > .v-input__append-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer, .v-input.zd-text-input.zd-dense .v-input__append-outer {\n  margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-inner .v-icon, .v-input.zd-text-input.zd-dense .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-text-input.zd-dense .v-input__slot .v-text-field__prefix {\n  height: auto;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__append-inner:last-child,\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__prepend-inner:first-child {\n  margin: 0;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot input {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-text-input.zd-color-type > .v-input__control > .v-input__slot input {\n  padding: 0;\n  cursor: pointer;\n  max-height: 22px;\n}\n.v-input.zd-text-input.zd-color-type:not(.zd-dense) > .v-input__control > .v-input__slot input {\n  max-height: 34px;\n}\n.v-input.zd-text-input.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-text-input.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}", map: undefined, media: undefined });
+      inject("data-v-3746c0d2_0", { source: ".zd-text-input__affix, .v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix, .v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-grey-lighten2);\n  font-size: var(--zd-font-body2-size);\n  line-height: 15px;\n  padding: 3px 0 4px 0;\n}\n.zd-input.v-input.v-input--is-readonly > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-input.v-input.v-input--is-readonly.theme--dark > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-darken2);\n}\n.v-input.zd-text-input {\n  padding-top: var(--spacing-4);\n}\n.v-input.zd-text-input .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__prepend-outer, .v-input.zd-text-input .v-input__append-outer {\n  margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input .v-input__append-inner, .v-input.zd-text-input .v-input__prepend-inner {\n  padding: 0;\n  margin: 0;\n  align-self: unset;\n}\n.v-input.zd-text-input .v-input__prepend-outer .v-icon, .v-input.zd-text-input .v-input__append-outer .v-icon, .v-input.zd-text-input .v-input__append-inner .v-icon, .v-input.zd-text-input .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  padding-left: var(--spacing-2);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__slot {\n  position: static;\n}\n.v-input.zd-text-input.v-text-field--reverse > .v-input__control > .v-input__slot label {\n  left: auto !important;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append {\n  align-items: center;\n  display: inline-flex;\n  flex: 1 0 auto;\n  justify-content: center;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix {\n  padding-right: var(--spacing-2);\n}\n.v-input.zd-text-input.zd-text-input--prepend-icon > .v-input__control > .v-input__slot > .v-input__prepend-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-input--append-icon > .v-input__control > .v-input__slot > .v-input__append-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer, .v-input.zd-text-input.zd-dense .v-input__append-outer {\n  margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-inner .v-icon, .v-input.zd-text-input.zd-dense .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-text-input.zd-dense .v-input__slot .v-text-field__prefix {\n  height: auto;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__append-inner:last-child,\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__prepend-inner:first-child {\n  margin: 0;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot input {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-text-input.zd-color-type > .v-input__control > .v-input__slot input {\n  padding: 0;\n  cursor: pointer;\n  max-height: 22px;\n}\n.v-input.zd-text-input.zd-color-type:not(.zd-dense) > .v-input__control > .v-input__slot input {\n  max-height: 34px;\n}\n.v-input.zd-text-input.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-text-input.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42621,7 +43024,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-c5ea8082_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n  padding: 0px !important;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 10px;\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  overflow: auto;\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-d1d24cde_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n  padding: 0px !important;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 10px;\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  overflow: auto;\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 */
@@ -43143,7 +43546,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-7d2512b2_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+      inject("data-v-283e6fa0_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -43660,7 +44063,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1h = function (inject) {
       if (!inject) return
-      inject("data-v-137a58b0_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+      inject("data-v-90db400c_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -43831,7 +44234,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-7c872d6e_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}\n.exit {\n  color: var(--v-primary-base);\n}", map: undefined, media: undefined });
+      inject("data-v-3c8e42b7_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}\n.exit {\n  color: var(--v-primary-base);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44167,7 +44570,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1e = function (inject) {
       if (!inject) return
-      inject("data-v-a72721fe_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-acfe543a_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  z-index: 250 !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44694,7 +45097,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1d = function (inject) {
       if (!inject) return
-      inject("data-v-8ee0fc5a_0", { source: ".zd-file-input {\n  min-width: 100px;\n}\n.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: 8px;\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.v-size--x-small {\n  height: 15px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\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 {\n  padding: 0 var(--spacing-1);\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  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\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  min-width: 50px;\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 .zd-theme-font-body-mobile {\n  width: 100%;\n  font-size: clamp(14px, 2vw, 20px);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  white-space: normal;\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: #7c7c7c;\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}\n.zd-file-input.theme--light > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87);\n}\n.zd-file-input.theme--dark > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background: #555;\n  color: #fff;\n}", map: undefined, media: undefined });
+      inject("data-v-8ff829b6_0", { source: ".zd-file-input {\n  min-width: 100px;\n}\n.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: 8px;\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.v-size--x-small {\n  height: 15px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\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 {\n  padding: 0 var(--spacing-1);\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  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\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  min-width: 50px;\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 .zd-theme-font-body-mobile {\n  width: 100%;\n  font-size: clamp(14px, 2vw, 20px);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  white-space: normal;\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: #7c7c7c;\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}\n.zd-file-input.theme--light > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87);\n}\n.zd-file-input.theme--dark > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background: #555;\n  color: #fff;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45011,11 +45414,11 @@ 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-aba711be_0", { source: ".zd-footer-slot[data-v-aba711be] {\n  display: flex;\n  padding: 0;\n}\n.zd-footer-slot-children[data-v-aba711be] {\n  padding-bottom: var(--spacing-2);\n}\n.zd-footer-slot-left > *[data-v-aba711be], .zd-footer-slot-center > *[data-v-aba711be], .zd-footer-slot-right > *[data-v-aba711be] {\n  margin: 0 var(--spacing-1);\n}\n.zd-footer-slot-left > *[data-v-aba711be]:first-child, .zd-footer-slot-center > *[data-v-aba711be]:first-child, .zd-footer-slot-right > *[data-v-aba711be]:first-child {\n  margin-left: 0;\n}\n.zd-footer-slot-left > *[data-v-aba711be]:last-child, .zd-footer-slot-center > *[data-v-aba711be]:last-child, .zd-footer-slot-right > *[data-v-aba711be]:last-child {\n  margin-right: 0;\n}\n.zd-footer-slot-center[data-v-aba711be] {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-footer-slot-right[data-v-aba711be] {\n  margin-left: auto;\n}", map: undefined, media: undefined });
+      inject("data-v-678c8f73_0", { source: ".zd-footer-slot[data-v-678c8f73] {\n  display: flex;\n  padding: 0;\n}\n.zd-footer-slot-children[data-v-678c8f73] {\n  padding-bottom: var(--spacing-2);\n}\n.zd-footer-slot-left > *[data-v-678c8f73], .zd-footer-slot-center > *[data-v-678c8f73], .zd-footer-slot-right > *[data-v-678c8f73] {\n  margin: 0 var(--spacing-1);\n}\n.zd-footer-slot-left > *[data-v-678c8f73]:first-child, .zd-footer-slot-center > *[data-v-678c8f73]:first-child, .zd-footer-slot-right > *[data-v-678c8f73]:first-child {\n  margin-left: 0;\n}\n.zd-footer-slot-left > *[data-v-678c8f73]:last-child, .zd-footer-slot-center > *[data-v-678c8f73]:last-child, .zd-footer-slot-right > *[data-v-678c8f73]:last-child {\n  margin-right: 0;\n}\n.zd-footer-slot-center[data-v-678c8f73] {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-footer-slot-right[data-v-678c8f73] {\n  margin-left: auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$1c = "data-v-aba711be";
+    const __vue_scope_id__$1c = "data-v-678c8f73";
     /* module identifier */
     const __vue_module_identifier__$1c = undefined;
     /* functional template */
@@ -45243,7 +45646,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-076cbf35_0", { source: ".zd-form {\n  padding: 0 4px 4px 4px;\n}\n.zd-form > .row {\n  height: 100%;\n  align-content: flex-start;\n  margin: 0 -12px;\n}\n.zd-form > .row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
+      inject("data-v-2e0f5087_0", { source: ".zd-form {\n  padding: 0 4px 4px 4px;\n}\n.zd-form > .row {\n  height: 100%;\n  align-content: flex-start;\n  margin: 0 -12px;\n}\n.zd-form > .row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45412,7 +45815,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1a = function (inject) {
       if (!inject) return
-      inject("data-v-1b1fa5e4_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  margin: var(--spacing-4) auto;\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
+      inject("data-v-3f7f6960_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  margin: var(--spacing-4) auto;\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45482,7 +45885,7 @@ 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-19f33cc2_0", { source: ".zd-frame-page {\n  display: block;\n  height: 100% !important;\n}", map: undefined, media: undefined });
+      inject("data-v-5079d814_0", { source: ".zd-frame-page {\n  display: block;\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45577,378 +45980,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ], ZdIterable);
   var ZdIterable$1 = ZdIterable;
 
-  const ThemeColor = (component, color = '') => {
-      if (color[0] === '#')
-          return color;
-      const parts = color.split(' ');
-      let theme;
-      let idx;
-      idx = parts.indexOf('light');
-      if (idx !== -1) {
-          theme = component.$vuetify.theme.themes.light;
-          parts.splice(idx, 1);
-      }
-      else {
-          idx = parts.indexOf('dark');
-          if (idx !== -1) {
-              theme = component.$vuetify.theme.themes.dark;
-              parts.splice(idx, 1);
-          }
-          else {
-              theme = component.$vuetify.theme.currentTheme;
-          }
-      }
-      return theme[parts[0]] || parts[0];
-  };
-
-  let EditableMixin = class EditableMixin extends Vue__default["default"] {
-      constructor() {
-          super(...arguments);
-          this.inputToFocus = null;
-          this.cellComponents = new Map();
-          /**
-           * Variable to store the ids of the cells to be forced update
-           */
-          this.currentUpdatingIds = [];
-          this.editingComponent = null;
-          this.editingComponentId = null;
-          this.mousedownCalled = false;
-      }
-      mounted() {
-          this.instance.setViewEnterEdit(this.viewEnterEdit);
-      }
-      viewEnterEdit(rowKey, columnName) {
-          const id = rowKey + columnName;
-          const component = this.cellComponents.get(id);
-          if (!component)
-              return;
-          this.enterCompEdit(component, id);
-      }
-      get editedRows() {
-          if (!this.instance.getEditedRows)
-              return [];
-          return this.instance.getEditedRows(false, true);
-      }
-      /**
-       * Watches editedRows and decides which cells should be forced update
-       * Normally only two will be updated each time: the cell that is entering edit mode
-       * and the cell that is leaving edit mode, but it is possible to have more
-       * updates, for example when calling `cancelEditedRows()`, all edited rows must be updated
-       */
-      changeEditedRows(newEditedRows) {
-          if (!newEditedRows)
-              return;
-          const prevUpdatingIds = [...this.currentUpdatingIds];
-          this.currentUpdatingIds = newEditedRows.reduce((result, row) => {
-              const rowKey = row[this.instance.datasource.uniqueKey];
-              const rowIds = [];
-              // reads from the editedRows to know which ids should be updated
-              Object.keys(row).forEach((columnName) => {
-                  const id = rowKey + columnName;
-                  try {
-                      const column = this.instance.getColumn(columnName);
-                      if (!this.cellComponents.get(id) || !this.instance.isEdited(column, row))
-                          return;
-                      rowIds.push(id);
-                  }
-                  catch (e) {
-                      if (!(e instanceof common.ColumnNotFoundError)) {
-                          throw e;
-                      }
-                  }
-              });
-              return [...result, ...rowIds];
-          }, []);
-          const idsToUpdate = [...prevUpdatingIds, ...this.currentUpdatingIds];
-          // forces cell updates
-          setTimeout(() => {
-              idsToUpdate.forEach((id) => {
-                  var _a;
-                  (_a = this.cellComponents.get(id)) === null || _a === void 0 ? void 0 : _a.forceUpdate();
-              });
-          });
-      }
-      changeEditing(editing) {
-          var _a;
-          if (this.instance.singleEdit) {
-              if (editing)
-                  return;
-              this.leaveEdit(this.editingComponent);
-          }
-          // when not in singleEdit mode, all cells should enter or leave edit mode at the same time
-          this.cellComponents.forEach((component) => (editing ? component.enterEdit() : component.leaveEdit()));
-          if (!editing)
-              return;
-          (_a = this.inputToFocus) === null || _a === void 0 ? void 0 : _a.focusInput();
-      }
-      /**
-       * Registers a new component in `cellComponents`
-       * @param id component id
-       * @param component
-       */
-      register(id, component) {
-          const newRegisteredComponents = component;
-          this.cellComponents.set(id, newRegisteredComponents);
-          if (!this.instance.editing)
-              return;
-          // in case a new row is added after the grid enters edit mode,
-          // make the newly mounted fields enter edit mode
-          if (this.instance.singleEdit) {
-              if (id === this.editingComponentId)
-                  this.enterCompEdit(component, id);
-              return;
-          }
-          component.enterEdit();
-      }
-      /**
-       * Makes
-       *  a component enter edit mode, also making the previous editing component
-       * leave edit mode
-       */
-      enterCompEdit(component, id) {
-          if (!this.instance.singleEdit)
-              return;
-          this.leaveEdit(this.editingComponent);
-          this.editingComponent = component;
-          this.editingComponentId = id;
-          this.enterEdit(component);
-      }
-      leaveEdit(component) {
-          if (!component)
-              return;
-          component.leaveEdit();
-      }
-      enterEdit(component) {
-          component.enterEdit();
-          component.focusInput();
-      }
-      isCellEditable(row, column, canEdit) {
-          const rowKey = this.rowKey(row);
-          const cellsApplied = (this.instance.cellsApplied[rowKey] || {})[column.name];
-          return Object.assign(Object.assign({}, column), cellsApplied).editable && canEdit;
-      }
-      isEdited(column, row) {
-          return this.instance.isEdited(column, row);
-      }
-      isValid(column, row) {
-          return this.instance.isValid(column, row);
-      }
-      getEditableComponent(column, row, cellProps) {
-          return this.instance.getEditableComponent(column, row, cellProps, {});
-      }
-      cellClick(row, column, event, canEdit = true, componentId = '') {
-          this.mousedownCalled = false;
-          if (!this.instance.doubleClickEdit || !column.editable) {
-              this.callCellClick(row, column, event, canEdit, componentId);
-              return;
-          }
-          this.$doubleClick(() => this.instance.cellClickEvent(row, column, event, this.$el), () => this.callCellClick(row, column, event, canEdit, componentId), event);
-      }
-      callCellClick(row, column, event, canEdit, componentId) {
-          const component = this.cellComponents.get(componentId);
-          if (!this.instance.editing && component) {
-              this.inputToFocus = component;
-          }
-          if (component)
-              this.enterCompEdit(component, componentId);
-          this.instance.cellClick(row, column, event, this.$el, canEdit);
-      }
-      editableCellFocus(component, id, row, column) {
-          this.instance.selectCell(row, column);
-          if (this.mousedownCalled && this.instance.singleEdit) {
-              this.mousedownCalled = false;
-              return;
-          }
-          this.enterCompEdit(component, id);
-      }
-      editableMousedown() {
-          this.mousedownCalled = true;
-      }
-      getVisibleValue(row, column) {
-          return this.instance.getVisibleValue(row, column);
-      }
-      cellFocus(row, column) {
-          this.instance.selectCell(row, column);
-          if (!this.instance.singleEdit)
-              return;
-          this.leaveEdit(this.editingComponent);
-      }
-      fieldFocusout({ event, component }) {
-          if (!this.instance.singleEdit)
-              return;
-          setTimeout(() => {
-              if (!event.target || !(event.target instanceof HTMLElement))
-                  return;
-              const isComponentFocused = event.target.contains(document.activeElement);
-              if (!isComponentFocused)
-                  component.leaveEdit();
-          });
-      }
-      enterEditEvent(row, column, event) {
-          this.instance.inlineEdit(row, column, event, this.$el);
-      }
-  };
-  __decorate([
-      vuePropertyDecorator.Watch('editedRows', { immediate: true, deep: true }),
-      __metadata("design:type", Function),
-      __metadata("design:paramtypes", [Array]),
-      __metadata("design:returntype", void 0)
-  ], EditableMixin.prototype, "changeEditedRows", null);
-  __decorate([
-      vuePropertyDecorator.Watch('instance.editing'),
-      __metadata("design:type", Function),
-      __metadata("design:paramtypes", [Boolean]),
-      __metadata("design:returntype", void 0)
-  ], EditableMixin.prototype, "changeEditing", null);
-  EditableMixin = __decorate([
-      Component__default["default"]
-  ], EditableMixin);
-  var EditableMixin$1 = EditableMixin;
-
-  /**
-   * Mixin for tabular components that can be navigated using keyboard keys,
-   * Grids in general
-   */
-  let NavigableTableMixin = class NavigableTableMixin extends Vue__default["default"] {
-      constructor() {
-          super(...arguments);
-          // selector for input-type elements that are not disabled, or elements with tabindex
-          this.focusableSelector = 'button:not([disabled]), a:not([disabled]), input:not([disabled]), select:not([disabled])'
-              + ', textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-      }
-      mounted() {
-          this.instance.setViewNavigate(this.viewNavigate);
-      }
-      viewNavigate(direction, event) {
-          if (direction === 'up') {
-              this.navigateVertical(true);
-              return;
-          }
-          if (direction === 'down') {
-              this.navigateVertical(false);
-              return;
-          }
-          if (direction === 'right') {
-              this.navigateRight(event);
-              return;
-          }
-          this.navigateLeft(event);
-      }
-      navigateRight(event) {
-          if (!this.instance.cellSelection)
-              return;
-          event === null || event === void 0 ? void 0 : event.preventDefault();
-          const tdNode = this.getTdNode(document.activeElement);
-          if (!tdNode)
-              return;
-          let { nextElementSibling } = tdNode;
-          if (!nextElementSibling) {
-              const trNode = tdNode.parentElement;
-              if (!trNode)
-                  return;
-              let nextTr;
-              do {
-                  nextTr = trNode.nextElementSibling;
-                  if (!nextTr)
-                      return;
-              } while (!this.isElementVisible(nextTr));
-              [nextElementSibling] = nextTr.children;
-          }
-          this.focusElement(nextElementSibling);
-      }
-      navigateLeft(event) {
-          if (!this.instance.cellSelection)
-              return;
-          event === null || event === void 0 ? void 0 : event.preventDefault();
-          const tdNode = this.getTdNode(document.activeElement);
-          if (!tdNode)
-              return;
-          let { previousElementSibling } = tdNode;
-          if (!previousElementSibling) {
-              const trNode = tdNode.parentElement;
-              if (!trNode)
-                  return;
-              let previousTr;
-              do {
-                  previousTr = trNode.previousElementSibling;
-                  if (!previousTr)
-                      return;
-              } while (!this.isElementVisible(previousTr));
-              previousElementSibling = previousTr.children[previousTr.children.length - 1];
-          }
-          this.focusElement(previousElementSibling);
-      }
-      isElementVisible(element) {
-          const style = window.getComputedStyle(element);
-          const isVisible = style.display !== 'none';
-          return isVisible;
-      }
-      /**
-       * Focus an element or its first focusable children
-       * @param element element to be focused
-       */
-      focusElement(element) {
-          if (!element)
-              return;
-          const focusableChild = element.querySelector(this.focusableSelector);
-          const nextFocusableElement = focusableChild && this.isElementVisible(focusableChild) ? focusableChild : element;
-          nextFocusableElement.focus({ preventScroll: true });
-          if (nextFocusableElement instanceof HTMLInputElement)
-              nextFocusableElement.select();
-      }
-      getTdNode(element) {
-          if (!element)
-              return null;
-          if (element.nodeName === 'TD')
-              return element;
-          return this.getTdNode(element.parentElement);
-      }
-      getArrayFromElementTag(tagName, node) {
-          if (node)
-              return Array.from(node.getElementsByTagName(tagName));
-          return [];
-      }
-      getArrayFromTdElement(node) {
-          return this.getArrayFromElementTag('TD', node);
-      }
-      getArrayFromTrElement(node) {
-          return this.getArrayFromElementTag('TR', node).filter(this.isElementVisible);
-      }
-      findNextTd(up, trIndex, tdIndex, trCollection) {
-          if ((up && trIndex <= 0) || (!up && trIndex >= trCollection.length - 1)) {
-              return undefined;
-          }
-          const nextTr = trCollection[up ? trIndex - 1 : trIndex + 1];
-          const index = Math.min(tdIndex, nextTr.childElementCount - 1);
-          const nextTd = this.getArrayFromTdElement(nextTr)[index];
-          return nextTd;
-      }
-      navigateVertical(up) {
-          var _a;
-          const hasActive = (_a = this.$el.querySelector('tbody')) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
-          // if not cellSelection and activeElement is not inside tbody, should navigate from datasource
-          if (!this.instance.cellSelection && !hasActive) {
-              this.instance.navigateDatasource(up);
-              return;
-          }
-          const tdNode = this.getTdNode(document.activeElement);
-          const trNode = tdNode === null || tdNode === void 0 ? void 0 : tdNode.parentElement;
-          if (!tdNode || !trNode)
-              return;
-          const tdIndex = this.getArrayFromTdElement(trNode).indexOf(tdNode);
-          const trCollection = this.getArrayFromTrElement(trNode.parentElement);
-          const trIndex = trCollection.indexOf(trNode);
-          const nextElement = this.findNextTd(up, trIndex, tdIndex, trCollection);
-          if (!nextElement)
-              return;
-          this.focusElement(nextElement);
-      }
-  };
-  NavigableTableMixin = __decorate([
-      Component__default["default"]
-  ], NavigableTableMixin);
-  var NavigableTableMixin$1 = NavigableTableMixin;
-
   /**
    * Grid component
    */
@@ -46390,11 +46421,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               this.updateScrollData(data);
           }
       }
+      getBackgroundColor() {
+          if (this.instance.backgroundColor && this.instance.backgroundColor !== 'transparent') {
+              return this.instance.backgroundColor;
+          }
+          return '';
+      }
+      getThemeBackground(background) {
+          if (background && background !== 'transparent')
+              return background;
+          if (this.isDark) {
+              return '#1e1e1e';
+          }
+          return '#ffffff';
+      }
       get cssColorVars() {
-          const bgColor = this.theme === 'theme--dark' ? '#1e1e1e' : '#ffffff';
+          const bgColor = this.getBackgroundColor();
+          const themeBackground = this.getThemeBackground(bgColor);
           return {
-              '--current-row-color': this.$solidColor(ThemeColor(this, 'primary'), 0.25, bgColor),
-              '--current-row-hover-color': this.$solidColor(ThemeColor(this, 'primary'), 0.19, bgColor),
+              '--theme-background-color': themeBackground,
+              '--background-color': bgColor,
           };
       }
       checkOverflow(event, columnOverflow) {
@@ -46504,7 +46550,7 @@ 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: '' }),
+      PropWatch({ type: String }),
       __metadata("design:type", String)
   ], ZdGrid.prototype, "headerBackground", void 0);
   __decorate([
@@ -46546,6 +46592,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdGrid.prototype, "fillHeight", void 0);
+  __decorate([
+      PropWatch({ type: [String], default: 'transparent' }),
+      __metadata("design:type", String)
+  ], ZdGrid.prototype, "backgroundColor", void 0);
   __decorate([
       vuePropertyDecorator.Prop({
           type: [String, Function],
@@ -46799,7 +46849,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "zd-table-cell",
                                     "selectable",
                                     "zd-table-fixed-column",
-                                    _vm.theme,
                                   ],
                                   style:
                                     "background-color: " +
@@ -46862,7 +46911,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         "zd-table-fixed-column-action":
                                           column.actionFixed,
                                       },
-                                      _vm.theme,
                                       "text-" + column.align,
                                       _vm.instance.datasource.getOrderByColumn(
                                         column.name
@@ -47021,7 +47069,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                 disabled: _vm.instance.callDisableSelection(item),
                                 isSelected: isSelected,
                                 cellSelection: _vm.instance.cellSelection,
-                                theme: _vm.theme,
                               },
                               on: {
                                 click: function ($event) {
@@ -47067,7 +47114,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                       "zd-table-fixed-column-action":
                                                         column.actionFixed,
                                                     },
-                                                    _vm.theme,
                                                   ],
                                                   cellStyle: [
                                                     {
@@ -47171,7 +47217,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                       "zd-table-fixed-column-action":
                                                         column.actionFixed,
                                                     },
-                                                    _vm.theme,
                                                   ],
                                                   cellStyle: [
                                                     {
@@ -47327,7 +47372,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$18 = function (inject) {
       if (!inject) return
-      inject("data-v-05d537a6_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !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  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.text-center .zd-table-header-cell {\n  justify-content: center;\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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid .zd-table-fixed-column.theme--light {\n  background: #f7f7f7;\n}\n.zd-grid .zd-table-fixed-column.theme--dark {\n  background: #3c3c3c;\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
+      inject("data-v-451d2414_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  --current-row-color: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 25%);\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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  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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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 .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-name {\n  opacity: 0.7;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-sort-order {\n  color: var(--zd-font-color);\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 20%) !important;\n}\n.zd-grid.theme--light {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), black 4%);\n}\n.zd-grid.theme--light .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--light tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), black 6%) !important;\n}\n.zd-grid.theme--light tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--light tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), white 22%);\n}\n.zd-grid.theme--dark .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), white 30%) !important;\n}\n.zd-grid.theme--dark tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--dark tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.v-data-table {\n  background-color: var(--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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -47571,7 +47616,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "zd-table-cell",
                                     "selectable",
                                     "zd-table-fixed-column",
-                                    _vm.theme,
                                   ],
                                   style:
                                     "background-color: " +
@@ -47642,7 +47686,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                             "zd-table-fixed-column-action":
                                               column.actionFixed,
                                           },
-                                          _vm.theme,
                                           "text-" + column.align,
                                           _vm.instance.datasource.getOrderByColumn(
                                             column.name
@@ -47811,7 +47854,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                   _vm.instance.callDisableSelection(item),
                                 isSelected: isSelected,
                                 cellSelection: _vm.instance.cellSelection,
-                                theme: _vm.theme,
                               },
                               on: {
                                 click: function ($event) {
@@ -47868,7 +47910,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                     "zd-table-fixed-column-action":
                                                       column.actionFixed,
                                                   },
-                                                  _vm.theme,
                                                 ],
                                                 cellStyle: [
                                                   {
@@ -48018,7 +48059,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                       "zd-table-fixed-column-action":
                                                         column.actionFixed,
                                                     },
-                                                    _vm.theme,
                                                   ],
                                                   cellStyle: [
                                                     {
@@ -48174,8 +48214,8 @@ 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-2cb6905b_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !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  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.text-center .zd-table-header-cell {\n  justify-content: center;\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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid .zd-table-fixed-column.theme--light {\n  background: #f7f7f7;\n}\n.zd-grid .zd-table-fixed-column.theme--dark {\n  background: #3c3c3c;\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-  ,inject("data-v-2cb6905b_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-right .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-text {\n  flex-direction: row-reverse !important;\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.text-center .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-text {\n  flex-direction: column !important;\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  flex: 1;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-switch .v-input__slot, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-switch .v-input__slot {\n  margin-bottom: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-grid-cell-content, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-grid-cell-content {\n  flex: 1;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-edit-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-edit-icon {\n  align-self: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .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: flex;\n  flex: 1;\n  height: 20px;\n  flex-direction: row !important;\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 {\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:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text: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  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-e41512ac_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  --current-row-color: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 25%);\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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  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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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 .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-name {\n  opacity: 0.7;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-sort-order {\n  color: var(--zd-font-color);\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 20%) !important;\n}\n.zd-grid.theme--light {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), black 4%);\n}\n.zd-grid.theme--light .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--light tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), black 6%) !important;\n}\n.zd-grid.theme--light tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--light tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), white 22%);\n}\n.zd-grid.theme--dark .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), white 30%) !important;\n}\n.zd-grid.theme--dark tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--dark tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.v-data-table {\n  background-color: var(--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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+  ,inject("data-v-e41512ac_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-right .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-text {\n  flex-direction: row-reverse !important;\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.text-center .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-text {\n  flex-direction: column !important;\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  flex: 1;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-switch .v-input__slot, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-switch .v-input__slot {\n  margin-bottom: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-grid-cell-content, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-grid-cell-content {\n  flex: 1;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-edit-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-edit-icon {\n  align-self: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .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: flex;\n  flex: 1;\n  height: 20px;\n  flex-direction: row !important;\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 {\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:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text: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  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48541,7 +48581,7 @@ 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-28313a58_0", { source: ".zd-header.theme--light.v-app-bar.v-toolbar.v-sheet {\n  background-color: #fff;\n}\n.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-cfd5aa7c_0", { source: ".zd-header.theme--light.v-app-bar.v-toolbar.v-sheet {\n  background-color: #fff;\n}\n.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 */
@@ -48603,7 +48643,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdGridFooter.prototype, "instance", void 0);
   ZdGridFooter = __decorate([
-      Component__default["default"]
+      Component__default["default"]({
+          mixins: [Themeable],
+      })
   ], ZdGridFooter);
   var script$$ = ZdGridFooter;
 
@@ -48865,7 +48907,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdGridTop.prototype, "instance", void 0);
   ZdGridTop = __decorate([
-      Component__default["default"]
+      Component__default["default"]({
+          mixins: [Themeable],
+      })
   ], ZdGridTop);
   var script$Z = ZdGridTop;
 
@@ -48883,11 +48927,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           {
             ref: "header",
             staticClass: "zd-grid-toolbar",
-            attrs: {
-              id: _vm.instance.name + "-top",
-              dark: _vm.toolbarSlot.dark,
-              light: _vm.toolbarSlot.light,
-            },
+            attrs: { id: _vm.instance.name + "-top" },
           },
           [
             _c(
@@ -48991,7 +49031,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:returntype", void 0)
   ], ZdGridAction.prototype, "change", null);
   ZdGridAction = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridAction);
   var script$Y = ZdGridAction;
 
@@ -49033,7 +49075,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-05e1c745_0", { source: "\n.zd-grid-action {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n", map: undefined, media: undefined });
+      inject("data-v-7c27c7d2_0", { source: "\n.zd-grid-action {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49133,7 +49175,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:returntype", void 0)
   ], ZdGridCell.prototype, "rowChange", null);
   ZdGridCell = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridCell);
   var ZdGridCell$1 = ZdGridCell;
 
@@ -49274,7 +49318,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:returntype", void 0)
   ], ZdGridCellContent.prototype, "changeValue", null);
   ZdGridCellContent = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridCellContent);
   var script$X = ZdGridCellContent;
 
@@ -49321,7 +49367,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$10 = function (inject) {
       if (!inject) return
-      inject("data-v-f2b8af8e_0", { source: ".zd-grid-cell-content {\n  align-items: center;\n  align-self: center;\n}\n.zd-grid-cell-content:focus-visible {\n  outline: none;\n}", map: undefined, media: undefined });
+      inject("data-v-f188c3ea_0", { source: ".zd-grid-cell-content {\n  align-items: center;\n  align-self: center;\n}\n.zd-grid-cell-content:focus-visible {\n  outline: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49382,7 +49428,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdGridCellEdit.prototype, "component", void 0);
   ZdGridCellEdit = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridCellEdit);
   var script$W = ZdGridCellEdit;
 
@@ -49417,7 +49465,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-1404f463_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
+      inject("data-v-8ac2f596_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49751,7 +49799,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-4f83bc6d_0", { source: ".zd-grid-editable-cell-content {\n  height: 100%;\n  align-content: center;\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n}\n.zd-grid-editable-cell-content:focus-visible {\n  outline: none;\n}", map: undefined, media: undefined });
+      inject("data-v-5dc95e82_0", { source: ".zd-grid-editable-cell-content {\n  height: 100%;\n  align-content: center;\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n}\n.zd-grid-editable-cell-content:focus-visible {\n  outline: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49948,7 +49996,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:returntype", void 0)
   ], ZdGridEditableCellContent.prototype, "rowChange", null);
   ZdGridEditableCellContent = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridEditableCellContent);
   var script$U = ZdGridEditableCellContent;
 
@@ -50039,7 +50089,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-2b69faae_0", { source: ".zd-grid-editable-cell-content {\n  height: 100%;\n  align-content: center;\n  display: flex;\n  flex-flow: row;\n}\n.zd-grid-editable-cell-content:focus-visible {\n  outline: none;\n}", map: undefined, media: undefined });
+      inject("data-v-1c7fe897_0", { source: ".zd-grid-editable-cell-content {\n  height: 100%;\n  align-content: center;\n  display: flex;\n  flex-flow: row;\n}\n.zd-grid-editable-cell-content:focus-visible {\n  outline: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -50074,7 +50124,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdGridHelper.prototype, "helperText", void 0);
   ZdGridHelper = __decorate([
-      Component__default["default"]
+      Component__default["default"]({
+          mixins: [Themeable],
+      })
   ], ZdGridHelper);
   var script$T = ZdGridHelper;
 
@@ -50216,7 +50268,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Boolean)
   ], ZdGridColumnHeader.prototype, "resizeColumns", void 0);
   ZdGridColumnHeader = __decorate([
-      Component__default["default"]
+      Component__default["default"]({
+          mixins: [Themeable],
+      })
   ], ZdGridColumnHeader);
   var script$S = ZdGridColumnHeader;
 
@@ -50383,7 +50437,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Number)
   ], ZdGridSortIcon.prototype, "orderIndex", void 0);
   ZdGridSortIcon = __decorate([
-      Component__default["default"]
+      Component__default["default"]({
+          mixins: [Themeable],
+      })
   ], ZdGridSortIcon);
   var script$R = ZdGridSortIcon;
 
@@ -50478,7 +50534,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Object)
   ], ZdGridRow.prototype, "classes", void 0);
   ZdGridRow = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridRow);
   var script$Q = ZdGridRow;
 
@@ -50585,12 +50643,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Boolean, default: false }),
       __metadata("design:type", Boolean)
   ], ZdGridCheckbox.prototype, "indeterminate", void 0);
-  __decorate([
-      vuePropertyDecorator.Prop({ type: String, required: true }),
-      __metadata("design:type", String)
-  ], ZdGridCheckbox.prototype, "theme", void 0);
   ZdGridCheckbox = __decorate([
-      vuePropertyDecorator.Component
+      vuePropertyDecorator.Component({
+          mixins: [Themeable],
+      })
   ], ZdGridCheckbox);
   var script$P = ZdGridCheckbox;
 
@@ -50611,7 +50667,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               "selectable",
               "zd-table-fixed-column",
               { "zd-table-cell--is-current": _vm.isCurrent },
-              _vm.theme,
             ],
             attrs: { tabindex: _vm.cellSelection ? 0 : "" },
             on: { focusin: _vm.focusin, focusout: _vm.focusout },
@@ -50827,7 +50882,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-43d6e80c_0", { source: ".zd-grid-cell-wrapper {\n  display: flex;\n  gap: 0.75rem;\n}\n.zd-grid-cell-align-right {\n  justify-content: end;\n}\n.zd-grid-cell-align-left {\n  justify-content: start;\n}\n.zd-grid-cell-align-center {\n  justify-content: center;\n}", map: undefined, media: undefined });
+      inject("data-v-0bad4efa_0", { source: ".zd-grid-cell-wrapper {\n  display: flex;\n  gap: 0.75rem;\n}\n.zd-grid-cell-align-right {\n  justify-content: end;\n}\n.zd-grid-cell-align-left {\n  justify-content: start;\n}\n.zd-grid-cell-align-center {\n  justify-content: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -51345,7 +51400,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$Q = function (inject) {
       if (!inject) return
-      inject("data-v-596ad2a8_0", { source: ".zd-image {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n.zd-image img {\n  height: 100%;\n  width: 100%;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-3acb0afe_0", { source: ".zd-image {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n.zd-image img {\n  height: 100%;\n  width: 100%;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -51422,7 +51477,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$P = function (inject) {
       if (!inject) return
-      inject("data-v-30a77ca4_0", { source: ".zd-increment.align-right > .v-input__control > .v-input__slot {\n  width: 120px;\n}\n.zd-increment.align-right > .v-input__control > .v-input__slot input {\n  text-align: center;\n}", map: undefined, media: undefined });
+      inject("data-v-58630b00_0", { source: ".zd-increment.align-right > .v-input__control > .v-input__slot {\n  width: 120px;\n}\n.zd-increment.align-right > .v-input__control > .v-input__slot input {\n  text-align: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -51626,6 +51681,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdIterableComponentRender.prototype, "fillHeight", void 0);
+  __decorate([
+      PropWatch({ type: [Boolean, String], default: true }),
+      __metadata("design:type", Object)
+  ], ZdIterableComponentRender.prototype, "showLoading", void 0);
   ZdIterableComponentRender = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterableComponentRender);
@@ -51693,7 +51752,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 "div",
                 { staticClass: "zd-display-flex zd-flex-wrap" },
                 [
-                  _vm.instance.datasource.loading
+                  _vm.instance.showLoading && _vm.instance.datasource.loading
                     ? _c("v-progress-circular", {
                         staticClass: "zd-frame",
                         attrs: {
@@ -51851,11 +51910,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$N = function (inject) {
       if (!inject) return
-      inject("data-v-543a2c06_0", { source: ".zd-iterable-component-render[data-v-543a2c06] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.zd-iterable-component-render .error--text[data-v-543a2c06],\n.zd-iterable-component-render .no--data[data-v-543a2c06] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.zd-iterable-component-render .no--data[data-v-543a2c06] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.zd-iterable-component-render .zd-iterable-toolbar[data-v-543a2c06] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-component-render .zd-iterable-content[data-v-543a2c06] {\n  overflow: auto;\n}\n.zd-iterable-component-render .zd-iterable-footer[data-v-543a2c06] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-5ee859a2_0", { source: ".zd-iterable-component-render[data-v-5ee859a2] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.zd-iterable-component-render .error--text[data-v-5ee859a2],\n.zd-iterable-component-render .no--data[data-v-5ee859a2] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.zd-iterable-component-render .no--data[data-v-5ee859a2] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.zd-iterable-component-render .zd-iterable-toolbar[data-v-5ee859a2] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-component-render .zd-iterable-content[data-v-5ee859a2] {\n  overflow: auto;\n}\n.zd-iterable-component-render .zd-iterable-footer[data-v-5ee859a2] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$N = "data-v-543a2c06";
+    const __vue_scope_id__$N = "data-v-5ee859a2";
     /* module identifier */
     const __vue_module_identifier__$N = undefined;
     /* functional template */
@@ -52017,7 +52076,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-13e9f9c3_0", { source: ".zd-iterable-columns-button-option {\n  min-height: 32px;\n}\n.zd-iterable-columns-button-options {\n  max-height: 200px;\n  overflow: auto;\n}", map: undefined, media: undefined });
+      inject("data-v-a76d519e_0", { source: ".zd-iterable-columns-button-option {\n  min-height: 32px;\n}\n.zd-iterable-columns-button-options {\n  max-height: 200px;\n  overflow: auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -52223,7 +52282,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$L = function (inject) {
       if (!inject) return
-      inject("data-v-eab50c5e_0", { source: ".zd-iterable-pagination {\n  padding: 0;\n  margin-left: 0;\n  display: flex;\n  gap: 0;\n  align-items: center;\n  width: 100%;\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: 2rem;\n  width: 2rem;\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\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-64362c36_0", { source: ".zd-iterable-pagination {\n  padding: 0;\n  margin-left: 0;\n  display: flex;\n  gap: 0;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-pagination .v-pagination.theme--light .v-pagination__item, .zd-iterable-pagination .v-pagination.theme--light .v-pagination__navigation {\n  color: var(--zd-font-color);\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  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: 2rem;\n  width: 2rem;\n  white-space: nowrap;\n  display: flex;\n  justify-content: center;\n  align-items: center;\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 */
@@ -52262,6 +52321,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
            * Input width value updated on focus
            */
           this.inputWidth = 0;
+          this.isSelectVisible = true;
+          this.isDisconnected = true;
           this.selectFormatterFn = core.FormatterParserProvider.getFormatter('ZdSelect');
       }
       mounted() {
@@ -52272,6 +52333,65 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.componentRef.onScroll = this.onScroll;
           this.applyAutofocus();
       }
+      /**
+       * Register intersectionObserver to detect when element position changes
+       */
+      registerObserver() {
+          const element = this.componentRef.$el;
+          if (!this.observer) {
+              const observer = this.createObserver();
+              if (!observer)
+                  return;
+              this.observer = observer;
+          }
+          if (!this.instance.closeOnScroll)
+              return;
+          this.isDisconnected = false;
+          this.observer.observe(element);
+      }
+      createObserver() {
+          const { menu } = this.componentRef.$refs;
+          if (this.instance.attach || !menu.activatorFixed)
+              return null;
+          const element = this.componentRef.$el;
+          let lastPosition = element.getBoundingClientRect();
+          // when element position changes, should hide the menu
+          const detectScroll = () => {
+              if (!this.isSelectVisible || this.isDisconnected)
+                  return;
+              const currentPosition = element.getBoundingClientRect();
+              if (currentPosition.top !== lastPosition.top) {
+                  this.setMenuVisibility('hide');
+                  lastPosition = currentPosition;
+              }
+              requestAnimationFrame(detectScroll);
+          };
+          const observer = new IntersectionObserver((entries) => {
+              const { isIntersecting } = entries[0];
+              this.isSelectVisible = isIntersecting;
+              requestAnimationFrame(detectScroll);
+          }, {
+              threshold: [0],
+          });
+          return observer;
+      }
+      disconnectObserver() {
+          if (!this.observer)
+              return;
+          const element = this.componentRef.$el;
+          this.isDisconnected = true;
+          this.observer.unobserve(element);
+      }
+      changeCloseOnScroll(value) {
+          if (value) {
+              this.registerObserver();
+              return;
+          }
+          this.disconnectObserver();
+      }
+      destroyed() {
+          this.disconnectObserver();
+      }
       applyAutofocus() {
           if (this.instance.autofocus && this.componentRef) {
               this.componentRef.focus();
@@ -52333,8 +52453,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               return;
           this.inputWidth = this.componentRef.$el.offsetWidth;
           this.componentRef.isFocused = true;
-          this.componentRef.isMenuActive = !this.instance.readonly && !this.instance.disabled;
+          this.setMenuVisibility(!this.instance.readonly && !this.instance.disabled);
           this.focus(event);
+          if (!this.observer) {
+              this.$nextTick(() => {
+                  this.registerObserver();
+              });
+          }
       }
       selectKeydown(event) {
           if (this.instance.autoSelection
@@ -52393,6 +52518,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           // Update menu position
           this.$nextTick(this.componentRef.updateMenuDimensions);
       }
+      setMenuVisibility(visibility) {
+          this.componentRef.isMenuActive = visibility && visibility !== 'hide';
+      }
   };
   __decorate([
       PropWatch({ type: String, default: 'expand' }),
@@ -52482,6 +52610,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: String, default: '' }),
       __metadata("design:type", String)
   ], ZdSelect.prototype, "dataValueOutFormName", void 0);
+  __decorate([
+      PropWatch({ type: [String, Boolean], default: true }),
+      __metadata("design:type", Boolean)
+  ], ZdSelect.prototype, "closeOnScroll", void 0);
+  __decorate([
+      vuePropertyDecorator.Watch('instance.closeOnScroll'),
+      __metadata("design:type", Function),
+      __metadata("design:paramtypes", [Boolean]),
+      __metadata("design:returntype", void 0)
+  ], ZdSelect.prototype, "changeCloseOnScroll", null);
   __decorate([
       vuePropertyDecorator.Watch('instance.datasource.data.length'),
       __metadata("design:type", Function),
@@ -52830,7 +52968,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$K = function (inject) {
       if (!inject) return
-      inject("data-v-8a29c9ba_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:not(.theme--dark) {\n  color: var(--zd-font-color);\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  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-e65a378c_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  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.theme--light {\n  color: var(--zd-font-color);\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:not(.theme--dark) {\n  color: var(--zd-font-color);\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  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 */
@@ -52941,7 +53079,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$J = function (inject) {
       if (!inject) return
-      inject("data-v-15c517aa_0", { source: ".zd-iterable-page-size {\n  max-width: 80px;\n}\n.zd-iterable-page-size.theme--light {\n  background: white;\n}\n.zd-iterable-page-size.theme--dark {\n  background: #121212;\n}\n.zd-iterable-page-size.v-input {\n  align-items: center;\n}", map: undefined, media: undefined });
+      inject("data-v-5838b15a_0", { source: ".zd-iterable-page-size {\n  max-width: 80px;\n}\n.zd-iterable-page-size.v-input {\n  align-items: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -53015,7 +53153,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-54ebff05_0", { source: ".zd-iterable-page-info {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  white-space: nowrap;\n  margin-left: var(--spacing-4);\n  height: 24px;\n  line-height: 24px;\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-40653276_0", { source: ".zd-iterable-page-info {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  white-space: nowrap;\n  margin-left: var(--spacing-4);\n  height: 24px;\n  line-height: 24px;\n}\n.zd-iterable-page-info.theme--light {\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -53207,7 +53345,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-2c0c830c_0", { source: ".zd-list {\n  overflow: auto;\n}\n.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-d9ac9d30_0", { source: ".zd-list {\n  overflow: auto;\n}\n.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 */
@@ -53287,7 +53425,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-4bee83b8_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
+      inject("data-v-f2c894dc_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -53728,7 +53866,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-3a515040_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-eaa8b59c_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 */
@@ -53873,7 +54011,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$D = function (inject) {
       if (!inject) return
-      inject("data-v-93f52a16_0", { source: ".text {\n  font-size: var(--zd-font-headline-size);\n  margin-top: 15px;\n}\n.center-div {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-flow: column;\n}\n.zd-loading .zd-loading-progress > svg,\n.zd-loading .zd-loading-progress > svg .v-progress-circular__overlay {\n  -webkit-animation-play-state: running !important;\n  animation-play-state: running !important;\n}", map: undefined, media: undefined });
+      inject("data-v-2b7c6163_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 */
@@ -54145,7 +54283,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-2045fd32_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n.zd-login .zd-login-card {\n  z-index: 1;\n}\n.zd-login .zd-login-flat-card {\n  margin: 0px !important;\n  height: 100%;\n  border-radius: 0px !important;\n}\n.zd-login .zd-login-background-image {\n  z-index: 0;\n}\n.zd-login .background-div {\n  background-position-x: left !important;\n  background-size: cover !important;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by {\n  z-index: 1;\n}\n.zd-login .zd-login-powered-by-card {\n  z-index: 1;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .zd-login-flat-card {\n    margin: 0px !important;\n    height: 100% !important;\n    border-radius: 0px !important;\n}\n.zd-login .flex {\n    height: 100%;\n}\n.zd-login .background-div {\n    position: absolute;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-left .zd-login-background-image {\n  position: absolute;\n  right: 0px;\n  height: 100%;\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-right .zd-login-background-image {\n  position: absolute;\n  left: 0px;\n  height: 100%;\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 .position-center .backgroud-div {\n  position: absolute !important;\n}\n.zd-login .position-center .zd-login-background-image {\n  position: absolute;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
+      inject("data-v-f80f35f8_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n.zd-login .zd-login-card {\n  z-index: 1;\n}\n.zd-login .zd-login-flat-card {\n  margin: 0px !important;\n  height: 100%;\n  border-radius: 0px !important;\n}\n.zd-login .zd-login-background-image {\n  z-index: 0;\n}\n.zd-login .background-div {\n  background-position-x: left !important;\n  background-size: cover !important;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by {\n  z-index: 1;\n}\n.zd-login .zd-login-powered-by-card {\n  z-index: 1;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .zd-login-flat-card {\n    margin: 0px !important;\n    height: 100% !important;\n    border-radius: 0px !important;\n}\n.zd-login .flex {\n    height: 100%;\n}\n.zd-login .background-div {\n    position: absolute;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-left .zd-login-background-image {\n  position: absolute;\n  right: 0px;\n  height: 100%;\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-right .zd-login-background-image {\n  position: absolute;\n  left: 0px;\n  height: 100%;\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 .position-center .backgroud-div {\n  position: absolute !important;\n}\n.zd-login .position-center .zd-login-background-image {\n  position: absolute;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -54824,7 +54962,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-7a1f3ca2_0", { source: ".zd-menu-tooltip {\n  z-index: 999;\n}\n.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.v-navigation-drawer--is-mobile div > .zd-menu-top-slot {\n  display: block !important;\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-57d26f81_0", { source: ".zd-menu-tooltip {\n  z-index: 999;\n}\n.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.v-navigation-drawer--is-mobile div > .zd-menu-top-slot {\n  display: block !important;\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 */
@@ -54974,11 +55112,11 @@ 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-a9b0e756_0", { source: ".zd-menu-link .zd-menu-link-icon[data-v-a9b0e756] {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}", map: undefined, media: undefined });
+      inject("data-v-3ab85327_0", { source: ".zd-menu-link .zd-menu-link-icon[data-v-3ab85327] {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$y = "data-v-a9b0e756";
+    const __vue_scope_id__$y = "data-v-3ab85327";
     /* module identifier */
     const __vue_module_identifier__$y = undefined;
     /* functional template */
@@ -55174,7 +55312,7 @@ 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-24208f06_0", { source: ".zd-menu-group .v-list-group__header .v-list-group__header__prepend-icon {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}\n.zd-menu-group .zd-menu-group-arrow-icon {\n  position: absolute;\n  top: 10px;\n  font-size: 18px;\n  transform: rotate(-90deg);\n}\n.zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 48px;\n}\n.zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 58px;\n}\n.zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 68px;\n}\n.zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 78px;\n}", map: undefined, media: undefined });
+      inject("data-v-d928842a_0", { source: ".zd-menu-group .v-list-group__header .v-list-group__header__prepend-icon {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}\n.zd-menu-group .zd-menu-group-arrow-icon {\n  position: absolute;\n  top: 10px;\n  font-size: 18px;\n  transform: rotate(-90deg);\n}\n.zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 48px;\n}\n.zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 58px;\n}\n.zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 68px;\n}\n.zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 78px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -55322,11 +55460,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$v = function (inject) {
       if (!inject) return
-      inject("data-v-1c5453c1_0", { source: ".zd-menu-separator[data-v-1c5453c1] {\n  margin-bottom: 4px;\n}", map: undefined, media: undefined });
+      inject("data-v-5ec3ae2f_0", { source: ".zd-menu-separator[data-v-5ec3ae2f] {\n  margin-bottom: 4px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$v = "data-v-1c5453c1";
+    const __vue_scope_id__$v = "data-v-5ec3ae2f";
     /* module identifier */
     const __vue_module_identifier__$v = undefined;
     /* functional template */
@@ -55674,7 +55812,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$u = function (inject) {
       if (!inject) return
-      inject("data-v-3de0e7d7_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\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  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
+      inject("data-v-1b6b5629_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\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  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -56207,7 +56345,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$p = function (inject) {
       if (!inject) return
-      inject("data-v-cd8d9baa_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-6bcaed19_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 */
@@ -56513,7 +56651,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$o = function (inject) {
       if (!inject) return
-      inject("data-v-e3a5edf8_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
+      inject("data-v-ef92721c_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -56658,7 +56796,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$n = function (inject) {
       if (!inject) return
-      inject("data-v-e2373b1c_0", { source: ".zd-row.row {\n  margin: 0 -12px;\n}\n.zd-row.row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
+      inject("data-v-5a64f244_0", { source: ".zd-row.row {\n  margin: 0 -12px;\n}\n.zd-row.row.row--dense {\n  margin: 0 -4px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -56758,7 +56896,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-3a30d9cc_0", { source: ".zd-search {\n  width: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-e5e49bc4_0", { source: ".zd-search {\n  width: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -56964,7 +57102,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$l = function (inject) {
       if (!inject) return
-      inject("data-v-9dbfb210_0", { source: ".zd-list {\n  overflow: auto;\n}\n.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-bdd76f34_0", { source: ".zd-list {\n  overflow: auto;\n}\n.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 */
@@ -57727,7 +57865,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$k = function (inject) {
       if (!inject) return
-      inject("data-v-7bb88de0_0", { source: ".zd-select-multiple-container {\n  height: auto;\n  min-height: auto;\n  max-height: none;\n  display: flex;\n  flex: 0 0 100%;\n  flex-direction: row;\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n  position: relative;\n  min-width: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 5px var(--spacing-1) 5px 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections input, .zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.zd-dense.zd-input.v-input > .v-input__control > .v-input__slot input {\n  padding: 0 4px;\n}\n.zd-select-multiple.zd-dense.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple.zd-dense.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}\n.zd-select-multiple--checkbox-all {\n  margin: 0;\n  padding: 0;\n}\n.zd-select-multiple--checkbox-all .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}", map: undefined, media: undefined });
+      inject("data-v-0b9dfdce_0", { source: ".zd-select-multiple-container {\n  height: auto;\n  min-height: auto;\n  max-height: none;\n  display: flex;\n  flex: 0 0 100%;\n  flex-direction: row;\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n  position: relative;\n  min-width: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 5px var(--spacing-1) 5px 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections input, .zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.zd-dense.zd-input.v-input > .v-input__control > .v-input__slot input {\n  padding: 0 4px;\n}\n.zd-select-multiple.zd-dense.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple.zd-dense.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}\n.zd-select-multiple--checkbox-all {\n  margin: 0;\n  padding: 0;\n}\n.zd-select-multiple--checkbox-all .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}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -58200,7 +58338,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$j = function (inject) {
       if (!inject) return
-      inject("data-v-32b0dae8_0", { source: ".zd-select-tree-loading {\n  margin-top: -2px;\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  padding-bottom: 2px;\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\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 {\n  color: rgba(0, 0, 0, 0.54);\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  position: relative;\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--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__menu-container .vue-treeselect__tip {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.vue-treeselect__menu-container .vue-treeselect__tip .vue-treeselect__tip-text {\n  font-size: var(--zd-font-body1-size);\n  font-family: \"Roboto\", sans-serif;\n  line-height: 2;\n  color: var(--zd-font-color);\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}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__tip-text {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}\n.vue-treeselect__menu-container .vue-treeselect__check-mark,\n.vue-treeselect__menu-container .vue-treeselect__minus-mark {\n  left: -2px;\n  top: -2px;\n}", map: undefined, media: undefined });
+      inject("data-v-ea8d3f8c_0", { source: ".zd-select-tree-loading {\n  margin-top: -2px;\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  padding-bottom: 2px;\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\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 {\n  color: rgba(0, 0, 0, 0.54);\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  position: relative;\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--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__menu-container .vue-treeselect__tip {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.vue-treeselect__menu-container .vue-treeselect__tip .vue-treeselect__tip-text {\n  font-size: var(--zd-font-body1-size);\n  font-family: \"Roboto\", sans-serif;\n  line-height: 2;\n  color: var(--zd-font-color);\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}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__tip-text {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}\n.vue-treeselect__menu-container .vue-treeselect__check-mark,\n.vue-treeselect__menu-container .vue-treeselect__minus-mark {\n  left: -2px;\n  top: -2px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -58596,8 +58734,8 @@ 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-2ed2dc21_0", { source: ".zd-select-tree-loading {\n  margin-top: -2px;\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  padding-bottom: 2px;\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\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 {\n  color: rgba(0, 0, 0, 0.54);\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  position: relative;\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--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__menu-container .vue-treeselect__tip {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.vue-treeselect__menu-container .vue-treeselect__tip .vue-treeselect__tip-text {\n  font-size: var(--zd-font-body1-size);\n  font-family: \"Roboto\", sans-serif;\n  line-height: 2;\n  color: var(--zd-font-color);\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}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__tip-text {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}\n.vue-treeselect__menu-container .vue-treeselect__check-mark,\n.vue-treeselect__menu-container .vue-treeselect__minus-mark {\n  left: -2px;\n  top: -2px;\n}", map: undefined, media: undefined })
-  ,inject("data-v-2ed2dc21_1", { 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: 0;\n  padding-bottom: 0;\n  line-height: 15px;\n}\n.vue-treeselect__menu-container .select-all {\n  height: 40px;\n  min-height: 40px;\n  padding-left: 37px;\n}\n.vue-treeselect__menu-container .select-all .v-icon.mdi-checkbox-marked {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .select-all .v-list-item__content {\n  height: 40px;\n}\n.vue-treeselect__menu-container .select-all .v-list-item__action {\n  margin: 0 13px 0 0;\n}\n.vue-treeselect__menu-container .select-all .v-list-item__title {\n  height: auto;\n  padding: 0;\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}\n.vue-treeselect__limit-tip {\n  padding-top: 0;\n}\n.vue-treeselect__limit-tip-text {\n  padding: 0;\n  margin: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-366edfe2_0", { source: ".zd-select-tree-loading {\n  margin-top: -2px;\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  padding-bottom: 2px;\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\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 {\n  color: rgba(0, 0, 0, 0.54);\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  position: relative;\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--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__menu-container .vue-treeselect__tip {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.vue-treeselect__menu-container .vue-treeselect__tip .vue-treeselect__tip-text {\n  font-size: var(--zd-font-body1-size);\n  font-family: \"Roboto\", sans-serif;\n  line-height: 2;\n  color: var(--zd-font-color);\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}\n.vue-treeselect__menu .vue-treeselect__list > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__tip-text {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}\n.vue-treeselect__menu-container .vue-treeselect__check-mark,\n.vue-treeselect__menu-container .vue-treeselect__minus-mark {\n  left: -2px;\n  top: -2px;\n}", map: undefined, media: undefined })
+  ,inject("data-v-366edfe2_1", { 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: 0;\n  padding-bottom: 0;\n  line-height: 15px;\n}\n.vue-treeselect__menu-container .select-all {\n  height: 40px;\n  min-height: 40px;\n  padding-left: 37px;\n}\n.vue-treeselect__menu-container .select-all .v-icon.mdi-checkbox-marked {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .select-all .v-list-item__content {\n  height: 40px;\n}\n.vue-treeselect__menu-container .select-all .v-list-item__action {\n  margin: 0 13px 0 0;\n}\n.vue-treeselect__menu-container .select-all .v-list-item__title {\n  height: auto;\n  padding: 0;\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}\n.vue-treeselect__limit-tip {\n  padding-top: 0;\n}\n.vue-treeselect__limit-tip-text {\n  padding: 0;\n  margin: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -59001,11 +59139,11 @@ 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-7b629196_0", { source: ".zd-stepper[data-v-7b629196] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-7b629196] .v-stepper__step__step {\n  margin: 0 var(--spacing-2) 0 0;\n}", map: undefined, media: undefined });
+      inject("data-v-56d89123_0", { source: ".zd-stepper[data-v-56d89123] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-56d89123] .v-stepper__step__step {\n  margin: 0 var(--spacing-2) 0 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$g = "data-v-7b629196";
+    const __vue_scope_id__$g = "data-v-56d89123";
     /* module identifier */
     const __vue_module_identifier__$g = undefined;
     /* functional template */
@@ -59029,6 +59167,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       undefined
     );
 
+  const ThemeColor = (component, color = '') => {
+      if (color[0] === '#')
+          return color;
+      const parts = color.split(' ');
+      let theme;
+      let idx;
+      idx = parts.indexOf('light');
+      if (idx !== -1) {
+          theme = component.$vuetify.theme.themes.light;
+          parts.splice(idx, 1);
+      }
+      else {
+          idx = parts.indexOf('dark');
+          if (idx !== -1) {
+              theme = component.$vuetify.theme.themes.dark;
+              parts.splice(idx, 1);
+          }
+          else {
+              theme = component.$vuetify.theme.currentTheme;
+          }
+      }
+      return theme[parts[0]] || parts[0];
+  };
+
   /**
    * SvgMap component
    */
@@ -59303,7 +59465,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$f = function (inject) {
       if (!inject) return
-      inject("data-v-0131628e_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map__container {\n  height: 100%;\n  width: 100%;\n}\n.zd-svg-map__tooltip {\n  position: absolute;\n  pointer-events: none;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
+      inject("data-v-a2c60b08_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map__container {\n  height: 100%;\n  width: 100%;\n}\n.zd-svg-map__tooltip {\n  position: absolute;\n  pointer-events: none;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -59450,7 +59612,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-c800e3dc_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 });
+      inject("data-v-7fc49d00_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 */
@@ -59664,7 +59826,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$d = function (inject) {
       if (!inject) return
-      inject("data-v-2eb5aab8_0", { source: ".zd-table-container {\n  overflow: auto;\n}\n.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-12ba47ec_0", { source: ".zd-table-container {\n  overflow: auto;\n}\n.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 */
@@ -59912,11 +60074,11 @@ 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-83547962_0", { source: ".zd-tabs[data-v-83547962] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar,\n.zd-tabs[data-v-83547962]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-83547962]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-83547962]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+      inject("data-v-0ac5dd3d_0", { source: ".zd-tabs[data-v-0ac5dd3d] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-bar,\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-0ac5dd3d]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$c = "data-v-83547962";
+    const __vue_scope_id__$c = "data-v-0ac5dd3d";
     /* module identifier */
     const __vue_module_identifier__$c = undefined;
     /* functional template */
@@ -60023,11 +60185,11 @@ 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-8b2fdfc4_0", { source: ".zd-tabs-tab[data-v-8b2fdfc4], .zd-tabs-tab[data-v-8b2fdfc4]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-8b2fdfc4] {\n  height: auto;\n  min-width: calc(2 * var(--spacing-4));\n  align-items: flex-end;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n.zd-tabs-tab-text[data-v-8b2fdfc4] {\n  text-transform: none;\n  font-size: var(--zd-font-body1-size);\n  line-height: 15px;\n  margin-bottom: 1px;\n}", map: undefined, media: undefined });
+      inject("data-v-aff81920_0", { source: ".zd-tabs-tab[data-v-aff81920], .zd-tabs-tab[data-v-aff81920]:before {\n  border-radius: var(--border) var(--border) 0 0;\n}\n.zd-tabs-tab[data-v-aff81920] {\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-aff81920] {\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__$b = "data-v-8b2fdfc4";
+    const __vue_scope_id__$b = "data-v-aff81920";
     /* module identifier */
     const __vue_module_identifier__$b = undefined;
     /* functional template */
@@ -60129,11 +60291,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-2fa11af6_0", { source: ".zd-tabs-tab-item[data-v-2fa11af6] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-2fa11af6] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-2fa11af6] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-2fa11af6] {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-35fecd73_0", { source: ".zd-tabs-tab-item[data-v-35fecd73] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-35fecd73] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-35fecd73] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-35fecd73] {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$a = "data-v-2fa11af6";
+    const __vue_scope_id__$a = "data-v-35fecd73";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */
@@ -60412,11 +60574,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-5147c205_0", { source: ".zd-text p[data-v-5147c205] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-3f65afd7_0", { source: ".zd-text p[data-v-3f65afd7] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$8 = "data-v-5147c205";
+    const __vue_scope_id__$8 = "data-v-3f65afd7";
     /* module identifier */
     const __vue_module_identifier__$8 = undefined;
     /* functional template */
@@ -60686,7 +60848,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$7 = function (inject) {
       if (!inject) return
-      inject("data-v-bb45089a_0", { source: ".v-input.zd-textarea {\n  height: 100%;\n  overflow-x: hidden;\n}\n.v-input.zd-textarea > .v-input__control {\n  height: 100%;\n}\n.v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n  flex: 1 1 auto;\n}\n.v-input.zd-textarea > .v-input__control > .v-input__slot .v-text-field__slot {\n  height: 100%;\n  box-sizing: border-box;\n}\n.v-input.zd-textarea > .v-input__control > .v-text-field__details {\n  flex: 0 0 auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-de33ebbe_0", { source: ".v-input.zd-textarea {\n  height: 100%;\n  overflow-x: hidden;\n}\n.v-input.zd-textarea > .v-input__control {\n  height: 100%;\n}\n.v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n  flex: 1 1 auto;\n}\n.v-input.zd-textarea > .v-input__control > .v-input__slot .v-text-field__slot {\n  height: 100%;\n  box-sizing: border-box;\n}\n.v-input.zd-textarea > .v-input__control > .v-text-field__details {\n  flex: 0 0 auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -60727,14 +60889,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           textInput.validate(false);
       }
       mounted() {
-          const textInput = this.$refs.textInputInstance.$children[0].$el.getElementsByTagName('input')[0];
-          textInput.addEventListener('blur', () => {
-              if (!this.$isMobile()) {
-                  this.instance.showTimePicker = false;
+          if (this.$refs.textInputInstance) {
+              const textInput = this.$refs.textInputInstance.$children[0].$el.getElementsByTagName('input')[0];
+              textInput.addEventListener('blur', () => {
+                  if (!this.$isMobile()) {
+                      this.instance.showTimePicker = false;
+                  }
+              });
+              if (this.$isMobile()) {
+                  this.setMobileProps(textInput);
               }
-          });
-          if (this.$isMobile()) {
-              this.setMobileProps(textInput);
           }
       }
       setMobileProps(input) {
@@ -61111,7 +61275,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$6 = function (inject) {
       if (!inject) return
-      inject("data-v-e8f3b86c_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-69bd5438_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 */
@@ -61288,7 +61452,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$5 = function (inject) {
       if (!inject) return
-      inject("data-v-5602ce22_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: normal;\n  word-wrap: break-word;\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
+      inject("data-v-d0cc467e_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  white-space: normal;\n  word-wrap: break-word;\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -61418,7 +61582,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-311cf5ac_0", { source: ".zd-tree-checkbox {\n  display: inline-block;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n.zd-tree-checkbox > .v-input--selection-controls__input {\n  margin-right: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-cd9b79cc_0", { source: ".zd-tree-checkbox {\n  display: inline-block;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n.zd-tree-checkbox > .v-input--selection-controls__input {\n  margin-right: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -61499,7 +61663,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$3 = function (inject) {
       if (!inject) return
-      inject("data-v-8af4c54c_0", { source: "\n.zd-tree-after-title {\n  position: absolute;\n}\n", map: undefined, media: undefined });
+      inject("data-v-096017c8_0", { source: "\n.zd-tree-after-title {\n  position: absolute;\n}\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -62043,7 +62207,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-454cbe22_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n  overflow: auto;\n}\n.zd-tree-toolbar {\n  display: flex;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n  display: flex;\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: var(--current-row-color);\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:hover {\n  background: var(--current-row-hover-color) !important;\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: 0px 1px 0px 1px;\n  padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n  padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n  cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n  padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n  padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
+      inject("data-v-25964841_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n  overflow: auto;\n}\n.zd-tree-toolbar {\n  display: flex;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n  display: flex;\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: var(--current-row-color);\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:hover {\n  background: var(--current-row-hover-color) !important;\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: 0px 1px 0px 1px;\n  padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n  padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n  cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n  padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n  padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -62208,7 +62372,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-grid",
         "zd-tree-grid",
         _vm.instance.cssClass,
-        _vm.theme,
         { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [
@@ -62303,7 +62466,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "zd-table-cell",
                                     "selectable",
                                     "zd-table-fixed-column",
-                                    _vm.theme,
                                   ],
                                   style:
                                     "background-color: " +
@@ -62366,7 +62528,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         "zd-table-fixed-column-action":
                                           column.actionFixed,
                                       },
-                                      _vm.theme,
                                       "text-" + column.align,
                                       _vm.instance.datasource.getOrderByColumn(
                                         column.name
@@ -62536,7 +62697,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                 isSelected: isSelected,
                                 cellSelection: _vm.instance.cellSelection,
                                 indeterminate: _vm.isIndeterminate(item),
-                                theme: _vm.theme,
                               },
                               on: {
                                 click: function ($event) {
@@ -62589,7 +62749,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                         "zd-table-fixed-column-action":
                                                           column.actionFixed,
                                                       },
-                                                      _vm.theme,
                                                       {
                                                         first:
                                                           headerIndex === 0 ||
@@ -62734,7 +62893,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                         "zd-table-fixed-column-action":
                                                           column.actionFixed,
                                                       },
-                                                      _vm.theme,
                                                     ],
                                                     cellStyle: [
                                                       {
@@ -62880,8 +63038,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-1a2c46eb_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !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  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.text-center .zd-table-header-cell {\n  justify-content: center;\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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid .zd-table-fixed-column.theme--light {\n  background: #f7f7f7;\n}\n.zd-grid .zd-table-fixed-column.theme--dark {\n  background: #3c3c3c;\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-  ,inject("data-v-1a2c46eb_1", { source: ".zd-tree-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n  display: inline-block;\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 24px !important;\n}\n.zd-tree-grid .zd-tree-grid-expand-action {\n  height: 100%;\n  display: inline-grid;\n  justify-content: end;\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-4d8b79d5_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  --current-row-color: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 25%);\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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  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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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 .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-name {\n  opacity: 0.7;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-sort-order {\n  color: var(--zd-font-color);\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 20%) !important;\n}\n.zd-grid.theme--light {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), black 4%);\n}\n.zd-grid.theme--light .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--light tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), black 6%) !important;\n}\n.zd-grid.theme--light tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--light tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), white 22%);\n}\n.zd-grid.theme--dark .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), white 30%) !important;\n}\n.zd-grid.theme--dark tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--dark tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.v-data-table {\n  background-color: var(--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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+  ,inject("data-v-4d8b79d5_1", { source: ".zd-tree-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n  display: inline-block;\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 24px !important;\n}\n.zd-tree-grid .zd-tree-grid-expand-action {\n  height: 100%;\n  display: inline-grid;\n  justify-content: end;\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 */
@@ -63113,7 +63271,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     "zd-table-cell",
                                     "selectable",
                                     "zd-table-fixed-column",
-                                    _vm.theme,
                                   ],
                                   style:
                                     "background-color: " +
@@ -63178,7 +63335,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                               column.actionFixed,
                                             "zd-table-fixed-column": column.fixed,
                                           },
-                                          _vm.theme,
                                           "text-" + column.align,
                                           _vm.instance.datasource.getOrderByColumn(
                                             column.name
@@ -63356,7 +63512,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                 isSelected: isSelected,
                                 cellSelection: _vm.instance.cellSelection,
                                 indeterminate: _vm.isIndeterminate(item),
-                                theme: _vm.theme,
                               },
                               on: {
                                 click: function ($event) {
@@ -63429,7 +63584,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                       "zd-table-fixed-column-action":
                                                         column.actionFixed,
                                                     },
-                                                    _vm.theme,
                                                   ],
                                                   cellStyle: [
                                                     {
@@ -63752,8 +63906,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-6971e664_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table .zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !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  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.text-center .zd-table-header-cell {\n  justify-content: center;\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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid .zd-table-fixed-column.theme--light {\n  background: #f7f7f7;\n}\n.zd-grid .zd-table-fixed-column.theme--dark {\n  background: #3c3c3c;\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
-  ,inject("data-v-6971e664_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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  flex: 1;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-grid-cell-content, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-grid-cell-content {\n  flex: 1;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .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-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-tree-grid-editable-cell-wrapper, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-tree-grid-editable-cell-wrapper {\n  display: flex;\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  width: 100%;\n  padding: 0 0.5rem;\n  position: relative;\n  display: flex;\n  flex: 1;\n  height: 1.25rem;\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: 0;\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: 0;\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 {\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:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text: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: 23px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 46px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 69px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 92px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 115px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 138px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 161px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 184px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 207px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 230px;\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  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-374fb6d8_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  --current-row-color: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 25%);\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\n  overflow-y: var(--overflow-y-style);\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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  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: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\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 .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-name {\n  opacity: 0.7;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.theme--light .zd-table-cell-sort-order {\n  color: var(--zd-font-color);\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 5;\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: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\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: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column {\n  position: sticky !important;\n  left: 0;\n  z-index: 3;\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 td.zd-table-cell.zd-table-fixed-column {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid table tbody tr.current:hover {\n  background: color-mix(in srgb, var(--theme-background-color), var(--v-primary-base) 20%) !important;\n}\n.zd-grid.theme--light {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), black 4%);\n}\n.zd-grid.theme--light .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--light tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), black 6%) !important;\n}\n.zd-grid.theme--light tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--light tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark {\n  --fixed-column-color: color-mix(in srgb, var(--theme-background-color), black 3%);\n  --row-active-color: color-mix(in srgb, var(--theme-background-color), white 22%);\n}\n.zd-grid.theme--dark .zd-table-fixed-column-action {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid.theme--dark tbody tr:hover {\n  background: color-mix(in srgb, var(--theme-background-color), white 30%) !important;\n}\n.zd-grid.theme--dark tbody tr.active {\n  background: var(--row-active-color) !important;\n}\n.zd-grid.theme--dark tbody .zd-table-fixed-column {\n  background-color: var(--fixed-column-color);\n}\n.zd-grid:not(.zd-grid--cell-selection) tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid .zd-table-cell:focus-visible {\n  outline: none;\n}\n.zd-grid .zd-table-cell.zd-table-cell--is-current {\n  background: var(--current-row-color);\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.v-data-table {\n  background-color: var(--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.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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+  ,inject("data-v-374fb6d8_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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  flex: 1;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-grid-cell-content, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-grid-cell-content {\n  flex: 1;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .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-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-tree-grid-editable-cell-wrapper, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-tree-grid-editable-cell-wrapper {\n  display: flex;\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  width: 100%;\n  padding: 0 0.5rem;\n  position: relative;\n  display: flex;\n  flex: 1;\n  height: 1.25rem;\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: 0;\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: 0;\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 {\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:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text: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: 23px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 46px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 69px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 92px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 115px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 138px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 161px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 184px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 207px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 230px;\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  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -64297,6 +64451,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   exports.NavigableTableMixin = NavigableTableMixin$1;
   exports.PropWatch = PropWatch;
   exports.ThemeColor = ThemeColor;
+  exports.Themeable = Themeable;
   exports.Vuetify = Vuetify;
   exports.ZdAlert = script$1q;
   exports.ZdApexChart = script$1p;