@sme.up/ketchup 10.1.1 → 10.2.0

package/dist/esm/kup-lazy.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-c9246a86.js';
-import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-5fbf0037.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-9b0f4a0d.js';
+import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-6aa0a1c7.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import './kup-dates-da19044e.js';
 
@@ -24,7 +24,7 @@ var KupLazyRender;
     KupLazyRender["BOTH"] = "both";
 })(KupLazyRender || (KupLazyRender = {}));
 
-const kupLazyCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_hor_alignment:var(--kup-lazy-hor-alignment, center);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );--kup_lazy_height:var(--kup-lazy-height, 100%);--kup_lazy_ver_alignment:var(--kup-lazy-ver-alignment, center);--kup_lazy_width:var(--kup-lazy-width, 100%);display:block;height:var(--kup_lazy_height);width:var(--kup_lazy_width);position:relative}#kup-component{align-items:var(--kup_lazy_ver_alignment);display:flex;justify-content:var(--kup_lazy_hor_alignment);height:var(--kup_lazy_height);width:var(--kup_lazy_width)}#kup-component>*{height:var(--kup_lazy_height)}#kup-component kup-data-table{min-width:100%}.kup-loaded,.kup-to-be-loaded{height:var(--kup_lazy_height);width:var(--kup_lazy_width)}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-bottom-aligned){--kup-lazy-ver-alignment:flex-end}:host(.kup-left-aligned){--kup-lazy-hor-alignment:flex-start}:host(.kup-right-aligned){--kup-lazy-hor-alignment:flex-end}:host(.kup-top-aligned){--kup-lazy-ver-alignment:flex-start}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}";
+const kupLazyCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_hor_alignment:var(--kup-lazy-hor-alignment, center);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );--kup_lazy_height:var(--kup-lazy-height, 100%);--kup_lazy_ver_alignment:var(--kup-lazy-ver-alignment, center);--kup_lazy_width:var(--kup-lazy-width, 100%);display:block;height:var(--kup_lazy_height);width:var(--kup_lazy_width);position:relative}#kup-component{align-items:var(--kup_lazy_ver_alignment);display:flex;justify-content:var(--kup_lazy_hor_alignment);height:var(--kup_lazy_height);width:var(--kup_lazy_width)}#kup-component>*{height:var(--kup_lazy_height)}#kup-component kup-data-table{min-width:100%}.kup-loaded,.kup-to-be-loaded{height:var(--kup_lazy_height);width:var(--kup_lazy_width)}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-bottom-aligned){--kup-lazy-ver-alignment:flex-end}:host(.kup-left-aligned){--kup-lazy-hor-alignment:flex-start}:host(.kup-right-aligned){--kup-lazy-hor-alignment:flex-end}:host(.kup-top-aligned){--kup-lazy-ver-alignment:flex-start}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}";
 const KupLazyStyle0 = kupLazyCss;
 
 const KupLazy = class {
@@ -134,39 +134,39 @@ const KupLazy = class {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: '97f1ca2b82116e8b63008292c5509af0c04948e4', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '4085092defe3739995902b7337fcf3c83ae93a75', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: '3d3f813296d36cdcd7d173d9f436e0d552a0673b', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '23e46931d75401379ce83357a9c343c7c720acfd', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: 'c11ebaf638b51de55f75f5743a7346065b45b676', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '5887de2553be51db0d4968c240ce12e1406d0fdb', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '31f0e5169cd260697da6edd1c763db915b8153cf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '65ac92668eb2914e838b8333f7db8b863f500435', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: '38580b00926d228c51e95cc8096bf9da9eb62d63', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ce96fa50c1751e0250799df3cd1090af38022830', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: 'e969df1de6bddaad47c745033e6c67f3cd155067', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '32a60569f176c7e0bda2577c5f28116e6102741f', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: '7cbb43088541b01d6950109dd13e6bdef7d3b30c', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'f852949cabbbe7ce2a15fd1030b0deb221b8771b', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '3990a3b5027d15ba60962352f011efc0bc0bdbc8', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: 'c745d3d21ce3dcc2f6eae81c558cdfb9ddf7856c', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: '8a9ba11c79ebf883afd5b12ff8f3e39d4b82f480', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '9702a12fab43642151e6355525da6fdae9e2552d', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: '39530590dd10736009c375b5f21e8a62b9e9bb6e', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '929b9d6f5a883ae75056635152b971f41b4f7fab', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: 'df4c36c00ca1d05a5157e3ff0f12daf40767bc38', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '1905f0759c4a11e28cf917147426f21b8314df5b', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: 'e0352a356d272be14bbb79539526c0cb72ffcea1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'c2743da82c65cc5a8a8238dda4bbd79a07a4f7e6', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: 'a00db5e970b86023d4cc62559506de942eedd54e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '2c67481c2c0e0ee406a60faed62c484e8cd544b2', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: '490fc3794bf51a697a165784e7c2f3e208e0fb24', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'd6fe5a4e35eb39076669fff9027bc300ac0ea7a9', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: '30a43ea718b74ac8aba142cac7552e27523c825c', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '13e7cfb5c923d8fd2793e88f63ebdd5ea7324535', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: 'ddaca4167f0df39ff99c2eedf51da43e11daa217', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f1277d43c4b879169ef89e57f3212adc3bd1673b', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: '33c37913976e808f144b68baf2dd9bb95d20ac8a', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ef96c0abc3c65121388bb3f55e560f0d3e80ec64', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: 'bac4baf6a31b7f455fb1ec4875c2d01109a136cf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '6766752680a0ece7a570ae86cb7ea7451b2f6768', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -175,14 +175,14 @@ const KupLazy = class {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: 'a6a2e8b0fbb26a782f2bed3fdf114a25547425f0' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'c0d1463f2f6d7abde1954aed56c87727966a421b' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: 'c2dfa45261248077fe82bac49bc08cd43a0952dc', class: className }, h("style", { key: 'a4781852c8d2c3852e14c67c5faea99345101861' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'f54db109ce2ec685dbc25623ba22c2b95d7e1794', id: componentWrapperId }, content)));
+        return (h(Host, { key: '71c1a3aec26a79f50340cb14cf92f79fedd590a1', class: className }, h("style", { key: '41231e59fd53a143644414d9dc15e4be2c7b4715' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '210ea58d84ae6f3ecf2a224cb5e65f74e1b1469f', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

package/dist/esm/kup-magic-box.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, d as getElement } from './index-c9246a86.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, h as KupLanguageGeneric, e as KupDebugCategory, az as kupDropEvent, R as kupDraggableColumnAttr, aA as kupDraggableRowAttr, X as KupDropEventTypes, d as KupThemeColorValues } from './kup-manager-5fbf0037.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, d as getElement } from './index-9b0f4a0d.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, h as KupLanguageGeneric, e as KupDebugCategory, aD as kupDropEvent, W as kupDraggableColumnAttr, aE as kupDraggableRowAttr, _ as KupDropEventTypes, d as KupThemeColorValues } from './kup-manager-6aa0a1c7.js';
 import { a as FButtonStyling } from './f-button-declarations-6c8f8abe.js';
-import { F as FImage } from './f-image-9b15e9ac.js';
+import { F as FImage } from './f-image-a2ecd7c3.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
 import './kup-dates-da19044e.js';
 
@@ -29,7 +29,7 @@ var KupMagicBoxDisplay;
     KupMagicBoxDisplay["TREE"] = "Tree";
 })(KupMagicBoxDisplay || (KupMagicBoxDisplay = {}));
 
-const kupMagicBoxCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{background-color:var(--kup-background-color);color:var(--kup-text-color);display:block;height:300px;min-width:700px;width:700px}#kup-component,.magic-box-wrapper{height:100%;width:100%}.magic-box-wrapper{border:3px dashed var(--kup-border-subtle);box-sizing:border-box;display:flex;flex-direction:column}.actions{align-items:center;background-color:var(--kup-title-background-color);display:inline-flex;height:52px;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.actions kup-button{margin:0.5em}.actions #comp-switcher{margin:auto 0}.actions #close-dialog{position:absolute;margin:0;top:0;right:0;background-color:var(--kup-title-background-color)}.content{box-sizing:border-box;height:100%;margin-top:52px;overflow:auto;transition:background-color 125ms ease}.empty{flex-direction:column;display:flex;text-align:center;justify-content:center;height:100%;width:100%;opacity:0.5;transition:opacity 0.25s ease-out}.empty .f-image{margin:0}.json{font-family:var(--kup-font-family-monospace);margin:0}[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}";
+const kupMagicBoxCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{background-color:var(--kup-background-color);color:var(--kup-text-color);display:block;height:300px;min-width:700px;width:700px}#kup-component,.magic-box-wrapper{height:100%;width:100%}.magic-box-wrapper{border:3px dashed var(--kup-border-subtle);box-sizing:border-box;display:flex;flex-direction:column}.actions{align-items:center;background-color:var(--kup-title-background-color);display:inline-flex;height:52px;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.actions kup-button{margin:0.5em}.actions #comp-switcher{margin:auto 0}.actions #close-dialog{position:absolute;margin:0;top:0;right:0;background-color:var(--kup-title-background-color)}.content{box-sizing:border-box;height:100%;margin-top:52px;overflow:auto;transition:background-color 125ms ease}.empty{flex-direction:column;display:flex;text-align:center;justify-content:center;height:100%;width:100%;opacity:0.5;transition:opacity 0.25s ease-out}.empty .f-image{margin:0}.json{font-family:var(--kup-font-family-monospace);margin:0}[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}";
 const KupMagicBoxStyle0 = kupMagicBoxCss;
 
 const KupMagicBox = class {
@@ -287,11 +287,11 @@ const KupMagicBox = class {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'd912eca82e3c8fa9d683017717f6b818fcf8efc8' }, h("style", { key: '05d15bdfb7fe44b3b04b2b7b5a3810932c2970e4' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'd6f72273ab6ff24705a4a763d4fbd1112a9acc86', id: componentWrapperId }, h("div", { key: '89b9ee1a636d32281e33523b838a3b7ce5cc5aee', class: "magic-box-wrapper" }, h("div", { key: '0a7573d8b552437d8bbd099d396d446fdf93930c', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: 'cb6cc4cba4a22edf36d301be2aa3a27ce9814e6f' }, this.comboboxProps())), h("kup-button", { key: 'd579651fab56d626c8ec3ddb8476ad1166fcf7da', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: 'b7967d1b19d364fba9c2537e4f84eeb3bc773895' }, h("style", { key: 'ea5db3db6214443f320dd0b262649e2ec9336afa' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '0a46ce6cd95b6bd65e890fa8218525b2fd09e19e', id: componentWrapperId }, h("div", { key: 'a43ac82b66e24ba1933694eb8e2495f40e73c458', class: "magic-box-wrapper" }, h("div", { key: 'd3047b7bc7bbbdf445c98a08dad30ad1074e1d76', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: 'aab101139a688cfb9d9d803c790710407eebf8b7' }, this.comboboxProps())), h("kup-button", { key: 'a4604aa7bbf6b81e9c4b02a8bac9fb1164af5dfd', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '2a594ecefdb7753d92e9ae6c56f1dd2dbbacf556', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: 'e484e6690eb7c139ebc7b8b6e976960a2b171623', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: '2cb6be8dde7b96b0bc68a7142ea1c437c0649290', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: '975574be9e898690572df23cac45ef3e29fd31e4', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
     }
     disconnectedCallback() {
         this.kupManager.interact.unregister([