@yoobic/yobi 8.3.7 → 8.4.0-1

package/dist/design-system/yoo-form-feed-preview.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, h } from './index-b1ce6cd4.js';
-import { s as setValidator } from './form-input-helpers-d0eac0dd.js';
-import './overlays-670969b7.js';
+import { r as registerInstance, i as createEvent, h } from './index-24530c1f.js';
+import { s as setValidator } from './form-input-helpers-9d428369.js';
+import './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-214cd526.js';
-import './common-helpers-2339195f.js';
+import './index-0621f7f2.js';
+import './common-helpers-980d9808.js';
 
 const formFeedPreviewCss = ":host{width:100%;height:100%}:host .readonly{border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-04, 0.25rem)}";
 

package/dist/design-system/yoo-form-feedback.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
 import { a as isNumber } from './lodash-653c0bcd.js';
-import { g as getAppContext } from './common-helpers-2339195f.js';
-import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
+import { g as getAppContext } from './common-helpers-980d9808.js';
+import { s as setValidator, a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
 import { f as feedbackValues } from './index-2319a076.js';
-import { t as translate, cC as getConfidenceDescriptionKey } from './overlays-670969b7.js';
+import { t as translate, cC as getConfidenceDescriptionKey } from './overlays-54d1b9f8.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-filter-date.entry.js

@@ -1,8 +1,8 @@
-import { h, r as registerInstance, i as createEvent } from './index-b1ce6cd4.js';
+import { h, r as registerInstance, i as createEvent } from './index-24530c1f.js';
 import { F as FormFilterDateOperator } from './index-eec8505b.js';
-import './index-214cd526.js';
+import './index-0621f7f2.js';
 import { A as isEqual } from './lodash-653c0bcd.js';
-import { t as translate, ak as dateFormat } from './overlays-670969b7.js';
+import { t as translate, ak as dateFormat } from './overlays-54d1b9f8.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const Option = ({ animated, selected, size, text, onToggle }, children) => (h("div", { class: "option" },

package/dist/design-system/yoo-form-filter-number.entry.js

@@ -1,8 +1,8 @@
-import { h, r as registerInstance, i as createEvent } from './index-b1ce6cd4.js';
+import { h, r as registerInstance, i as createEvent } from './index-24530c1f.js';
 import { w as FormFilterNumberOperator } from './index-eec8505b.js';
-import './index-214cd526.js';
+import './index-0621f7f2.js';
 import { A as isEqual } from './lodash-653c0bcd.js';
-import { t as translate } from './overlays-670969b7.js';
+import { t as translate } from './overlays-54d1b9f8.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const Option = ({ animated, selected, size, text, onToggle }, children) => (h("div", { class: "option" },

package/dist/design-system/yoo-form-filter-text.entry.js

@@ -1,8 +1,8 @@
-import { h, r as registerInstance, i as createEvent } from './index-b1ce6cd4.js';
+import { h, r as registerInstance, i as createEvent } from './index-24530c1f.js';
 import { x as FormFilterTextOperator } from './index-eec8505b.js';
-import './index-214cd526.js';
+import './index-0621f7f2.js';
 import { A as isEqual } from './lodash-653c0bcd.js';
-import { t as translate } from './overlays-670969b7.js';
+import { t as translate } from './overlays-54d1b9f8.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formFilterTextCss = ":host{--dialog-max-height:initial;--dialog-position:initial;--dialog-width:initial}:host yoo-form-input{grid-column:2/2;width:11rem}:host .option{display:grid;grid-template-rows:repeat(2, auto);grid-template-columns:auto 1fr;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--spacing-08, 0.5rem);-moz-column-gap:var(--spacing-08, 0.5rem);column-gap:var(--spacing-08, 0.5rem)}:host .options{display:grid;margin-bottom:var(--spacing-08, 0.5rem)}:host([size=small]) yoo-form-input,:host([size=medium]) yoo-form-input{margin-top:var(--spacing-04, 0.25rem)}:host([size=small]) .options,:host([size=medium]) .options{gap:var(--spacing-08, 0.5rem)}:host([size=large]) yoo-form-input{margin-top:var(--spacing-08, 0.5rem)}:host([size=large]) .options{gap:var(--spacing-16, 1rem)}";

package/dist/design-system/yoo-form-filter.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
-import { i as isElementInViewport } from './common-helpers-2339195f.js';
-import { Q as findParent, Z as translateMulti, t as translate } from './overlays-670969b7.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
+import { i as isElementInViewport } from './common-helpers-980d9808.js';
+import { Q as findParent, Z as translateMulti, t as translate } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-form-footer.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
 import { a as isNumber } from './lodash-653c0bcd.js';
-import { g as getButton } from './button.factory-e7756a54.js';
-import { n as hideShowTabbar, g as getAppContext } from './common-helpers-2339195f.js';
-import { A as isWeb, en as getTimeOneLetterFormat } from './overlays-670969b7.js';
-import './index-5fd9749f.js';
+import { g as getButton } from './button.factory-8cf707c5.js';
+import { n as hideShowTabbar, g as getAppContext } from './common-helpers-980d9808.js';
+import { A as isWeb, en as getTimeOneLetterFormat } from './overlays-54d1b9f8.js';
+import './index-8788bbf4.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/design-system/yoo-form-formula.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, h } from './index-b1ce6cd4.js';
-import { s as setValidator } from './form-input-helpers-d0eac0dd.js';
-import './overlays-670969b7.js';
+import { r as registerInstance, i as createEvent, h } from './index-24530c1f.js';
+import { s as setValidator } from './form-input-helpers-9d428369.js';
+import './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-214cd526.js';
-import './common-helpers-2339195f.js';
+import './index-0621f7f2.js';
+import './common-helpers-980d9808.js';
 
 const formFormulaCss = ":host .readonly{padding:0.5rem 0.5rem 0 0}";
 

package/dist/design-system/yoo-form-hotzones-creator.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
 import { s as setPlugins, p as plugin_annotate, a as appendDefaultEditor, c as createDefaultImageReader, b as createDefaultImageWriter, d as createDefaultShapePreprocessor, l as locale_en_gb, e as plugin_annotate_locale_en_gb, m as markup_editor_locale_en_gb } from './pintura-864b441f.js';
-import { K as getCssColor, bo as hexToRgbArray, t as translate, Z as translateMulti } from './overlays-670969b7.js';
+import { K as getCssColor, bo as hexToRgbArray, t as translate, Z as translateMulti } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-form-hotzones.entry.js

@@ -1,35 +1,41 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
-import { g as getFromOfflineStorage } from './localForage-705e6c3b.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
+import { A as isEqual } from './lodash-653c0bcd.js';
+import { g as getFromOfflineStorage } from './localForage-c32f0e70.js';
 import { a as isElementInsideContainer, c as calcCoordPercentage } from './annotations-helpers-628a8ae3.js';
-import { g as getAppContext } from './common-helpers-2339195f.js';
-import { s as showWarningBanner } from './draggable-tags-helpers-379028ae.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
-import { aS as gsapTo, aR as Draggable, bk as getMedia, z as showModal, p as closeModal, ap as replaceAllLinks, ax as parseMarkDown, Z as translateMulti, A as isWeb, t as translate, bl as isPointInsidePlan } from './overlays-670969b7.js';
-import './lodash-653c0bcd.js';
+import { g as getAppContext } from './common-helpers-980d9808.js';
+import { s as showWarningBanner } from './draggable-tags-helpers-177c5425.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
+import { aS as gsapTo, aR as Draggable, bk as getMedia, z as showModal, p as closeModal, ap as replaceAllLinks, ax as parseMarkDown, Z as translateMulti, A as isWeb, t as translate, bl as isPointInsidePlan } from './overlays-54d1b9f8.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-eec8505b.js';
 
-const formHotzonesCss = ".hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{display:block;max-width:25rem;margin:0 auto}:host .image{margin:0 auto;background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host .image.flipped .inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host .image .inner-container{width:100%;height:100%;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.8s;transition:-webkit-transform 0.8s;transition:transform 0.8s;transition:transform 0.8s, -webkit-transform 0.8s}:host .image .inner-container .flip-box-front,:host .image .inner-container .flip-box-back{width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .image .inner-container .flip-box-back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host .image .inner-container yoo-img{position:relative;border-radius:var(--border-radius-08, 0.5rem)}:host .image .inner-container .hotzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));border-color:var(--app-color, #5a30f4);border-style:solid;border-width:var(--border-width-02, 0.125rem);border-radius:var(--border-radius-04, 0.25rem);cursor:pointer;-webkit-transition:background-color 250ms ease-in-out;transition:background-color 250ms ease-in-out}:host .image .inner-container .hotzone.revealed{background-color:var(--success-20, rgba(58, 167, 109, 0.2));border-color:var(--success, #3aa76d)}:host([detailed-view]){background:transparent !important}:host([detailed-view]) main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;max-width:30rem;margin:0 auto;overflow:scroll}:host([detailed-view]) main #content yoo-img{--border-radius:var(--border-radius-08, 0.5rem)}:host([detailed-view]) main #content #description{padding:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);text-align:center}:host([detailed-view]) main #content #description p{padding-bottom:var(--spacing-64, 4rem)}:host([detailed-view]) main #description,:host([detailed-view]) main yoo-img{padding:0 var(--spacing-32, 2rem)}:host([detailed-view]) main #done{position:absolute;bottom:0;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host([detailed-view]) main #done yoo-button{width:50%;margin:var(--spacing-16, 1rem) auto}:host(.web) main{height:calc(100% - 3.5rem)}:host([type=hotzone]) yoo-icon[name=gps]{margin:var(--spacing-08, 0.5rem) auto;cursor:move}:host(.modal-view){max-width:inherit}:host([readonly]){position:relative;margin:inherit}:host([readonly]) yoo-icon[name=gps]{position:absolute;margin:0;cursor:auto}:host([readonly]) .image .inner-container div.hotzone{display:-ms-flexbox;display:flex;cursor:auto}:host([animated]) .image-container{--image-index:0;-webkit-transform:translateY(100vh);transform:translateY(100vh);-webkit-animation-name:slide-up;animation-name:slide-up;-webkit-animation-duration:0.4s;animation-duration:0.4s;-webkit-animation-timing-function:var(--ease-out-quad);animation-timing-function:var(--ease-out-quad);-webkit-animation-delay:calc(0.5s + var(--image-index) * 0.1s);animation-delay:calc(0.5s + var(--image-index) * 0.1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}";
+const formHotzonesCss = ".hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{--hotzones-color:unset;--inner-max-width:100%}:host yoo-banner{height:0}:host main{position:relative;max-width:var(--inner-max-width);height:-webkit-max-content;height:-moz-max-content;height:max-content;margin:0 auto}:host main .image{margin:0 auto;background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host main .image.flipped .inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host main .image .inner-container{width:100%;height:100%;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.8s;transition:-webkit-transform 0.8s;transition:transform 0.8s;transition:transform 0.8s, -webkit-transform 0.8s}:host main .image .inner-container .flip-box-front,:host main .image .inner-container .flip-box-back{width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host main .image .inner-container .flip-box-back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host main .image .inner-container yoo-img{position:relative;border-radius:var(--border-radius-08, 0.5rem)}:host main .image .inner-container .hotzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));border-color:var(--app-color, #5a30f4);border-style:solid;border-width:var(--border-width-02, 0.125rem);border-radius:var(--border-radius-04, 0.25rem);cursor:pointer;-webkit-transition:background-color 250ms ease-in-out;transition:background-color 250ms ease-in-out}:host main .image .inner-container .hotzone.revealed{background-color:var(--success-20, rgba(58, 167, 109, 0.2)) !important;border-color:var(--success, #3aa76d) !important}:host([detailed-view]){background:transparent !important}:host([detailed-view]) main{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;max-width:30rem;margin:0 auto;overflow:hidden auto}:host([detailed-view]) main #content yoo-img{--border-radius:var(--border-radius-08, 0.5rem)}:host([detailed-view]) main #content #description{padding:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);text-align:center}:host([detailed-view]) main #content #description p{padding-bottom:var(--spacing-64, 4rem)}:host([detailed-view]) main #description,:host([detailed-view]) main yoo-img{padding:0 var(--spacing-32, 2rem)}:host([detailed-view]) main #done{position:absolute;bottom:0;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}:host([detailed-view]) main #done yoo-button{width:50%;margin:var(--spacing-16, 1rem) auto}:host([type=hotzone]){--initial-target-top-pos:calc(100% + var(--spacing-16, 1rem));--initial-target-left-pos:calc(50% - var(--spacing-24, 1.5rem))}:host([type=hotzone]) yoo-icon[name=gps]{position:absolute;top:var(--initial-target-top-pos);left:var(--initial-target-left-pos);cursor:move}:host([readonly]) yoo-icon[name=gps]{cursor:auto}:host([readonly]) .image .inner-container div.hotzone{display:-ms-flexbox;display:flex;cursor:auto}";
 
 const YooFormHotzonesComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.validityChanged = createEvent(this, "validityChanged", 7);
     this.inputChanged = createEvent(this, "inputChanged", 7);
-    this.hotzones = [];
     this.animated = true;
     this.validity = false;
+    this.required = false;
+    this.hotzones = [];
     this.flipImage = false;
   }
+  onValueChanged() {
+    this.isHotZones && this.validate();
+  }
   async onImageChanged() {
     this.imageSrc = await this.getImageSrc();
     this.flipImage = !!this.imageSrc;
+    this.flipImage && this.resetTarget();
     !this.imageSrc && forceUpdate(this);
     this.init();
   }
-  onHotzonesChanged() {
+  onHotzonesChanged(nv, ov) {
     showWarningBanner(this.host, !this.isHotZones && this.hotzones.some(({ description, image }) => !(description || image)), 'NOEMPTYVALUES');
+    !isEqual(nv, ov) && this.resetTarget();
   }
   onIsVisibleChanged() {
     if (this.isVisible) {
@@ -37,11 +43,15 @@ const YooFormHotzonesComponent = class {
       this.init();
     }
   }
-  onValidityChanged() {
+  validate() {
+    var _a, _b, _c, _d;
+    this.validity =
+      !this.required ||
+        (this.isHotZones
+          ? this.value && 'x' in this.value && 'y' in this.value
+          : ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length));
     this.validityChanged.emit(this.validity);
-  }
-  onFlipImageChanged() {
-    !this.flipImage && !this.readonly && this.resetTarget();
+    return this.validity;
   }
   get isHotZones() {
     return this.type === 'hotzone';
@@ -54,16 +64,22 @@ const YooFormHotzonesComponent = class {
     this.init();
   }
   init() {
-    this.flipImage && setTimeout(() => {
-      this.initDraggableTarget();
-      this.hotzones.forEach(hotzone => hotzone.revealed = false);
-      this.flipImage = false;
-    }, 500);
-  }
-  resetTarget() {
-    this.validity = false;
-    this.value = null;
-    gsapTo(this.targetElement, .25, { x: 0, y: 0 });
+    this.flipImage &&
+      setTimeout(() => {
+        this.initDraggableTarget();
+        this.hotzones.forEach((hotzone) => (hotzone.revealed = false));
+        this.flipImage = false;
+      }, 500);
+  }
+  async resetTarget() {
+    if (this.isHotZones) {
+      await gsapTo(this.targetElement, 0.25, {
+        top: getComputedStyle(this.host).getPropertyValue('--initial-target-top-pos'),
+        left: getComputedStyle(this.host).getPropertyValue('--initial-target-left-pos')
+      });
+      this.value = null;
+      setValueAndValidateInput(this.value, this);
+    }
   }
   initDraggableTarget() {
     const dragEndAction = async () => {
@@ -72,23 +88,17 @@ const YooFormHotzonesComponent = class {
         this.resetTarget();
       }
       else {
-        const getTargetCenterPosition = (axis) => {
-          const targetBound = this.targetElement.getBoundingClientRect();
-          const offsetPercentage = ((targetBound[axis === 'x' ? 'width' : 'height'] / 2) / containerBound[axis === 'x' ? 'width' : 'height']) * 100;
-          return calcCoordPercentage(containerBound, this.targetElement, axis) + offsetPercentage;
-        };
-        this.validity = true;
+        const getTargetCenterPosition = (axis) => calcCoordPercentage(containerBound, this.targetElement, axis);
         this.value = {
           x: getTargetCenterPosition('x'),
           y: getTargetCenterPosition('y')
         };
-        if (!this.livePreview) {
-          setValueAndValidateInput(this.value, this);
-        }
+        setValueAndValidateInput(this.value, this);
       }
     };
     if (this.targetElement && !this.readonly) {
       return new Draggable(this.targetElement, {
+        type: 'top, left',
         bound: this.imageElement,
         cursor: 'grab',
         zIndexBoost: false,
@@ -97,37 +107,38 @@ const YooFormHotzonesComponent = class {
     }
   }
   async getImageSrc() {
-    return getMedia((await getFromOfflineStorage(this.image)), { forceCookieUrlParam: true });
+    return getMedia(await getFromOfflineStorage(this.image), { forceCookieUrlParam: true });
   }
   async showZoneDetails(hotzone) {
-    var _a, _b, _c, _d;
     const { description, image } = hotzone || {};
     if (description || image) {
-      await showModal('yoo-form-hotzones', { detailedView: true, selectedHotspot: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
+      await showModal('yoo-form-hotzones', { detailedView: true, selectedHotzone: hotzone }, 'bg-dark-40', 'scaleEnterAnimation', 'scaleLeaveAnimation', true);
       hotzone.revealed = true;
     }
-    this.validity = ((_b = (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.filter(({ revealed }) => revealed)) === null || _b === void 0 ? void 0 : _b.length) === ((_d = (_c = this.hotzones) === null || _c === void 0 ? void 0 : _c.filter(({ description, image }) => description || image)) === null || _d === void 0 ? void 0 : _d.length);
-    !this.validity && forceUpdate(this);
+    this.validate();
+    this.inputChanged.emit();
+    (!this.validity || !this.required) && forceUpdate(this);
   }
   renderZones() {
     var _a;
-    return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map(hotzone => {
+    return (_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.map((hotzone) => {
       const { style, revealed, description, image } = hotzone || {};
       const { x, y } = style || {};
       const isValid = this.isHotZones || !!(description || image);
-      return isValid && h("div", { class: { hotzone: true, revealed, hidden: !this.readonly && this.isHotZones }, style: {
+      return (isValid && (h("div", { class: { hotzone: true, revealed, hidden: !this.readonly && this.isHotZones }, style: {
           left: x,
           top: y,
           ...hotzone.style,
-          ...(!revealed && !this.readonly && {
+          ...(!revealed &&
+            !this.readonly && {
             backgroundColor: this.hotzonesColor + '66',
             borderColor: this.hotzonesColor
           })
-        }, onClick: () => !this.isHotZones && this.showZoneDetails(hotzone) });
+        }, onClick: () => !this.isHotZones && this.showZoneDetails(hotzone) })));
     });
   }
   renderDetailedView() {
-    const { description, image } = this.selectedHotspot || {};
+    const { description, image } = this.selectedHotzone || {};
     return [
       h("yoo-navbar", { class: "transparent" }, h("yoo-icon", { slot: "start", name: "close", onClick: () => closeModal(null) })),
       h("main", null, h("section", { id: "content" }, image && h("yoo-img", { src: image, contained: true, instant: true, ignoreHeight: true }), description && h("div", { id: "description", innerHTML: replaceAllLinks(parseMarkDown(translateMulti(description)), true) })), h("section", { id: "done" }, h("yoo-button", { onClick: () => closeModal(null), color: "app-color", size: isWeb(this.host) ? 'medium' : 'large' }, translate('YOOBICDONE'))))
@@ -135,45 +146,49 @@ const YooFormHotzonesComponent = class {
   }
   renderTarget() {
     var _a;
-    return this.isHotZones && !!this.imageSrc && h("yoo-icon", { name: "gps", size: "extra-large", style: {
+    return (this.isHotZones &&
+      !!this.imageSrc && (h("yoo-icon", { name: "gps", size: "extra-large", style: {
         ...(!this.readonly && { fill: this.hotzonesColor }),
         ...(this.value && {
           left: `${this.value.x}%`,
           top: `${this.value.y}%`
         })
-      }, ...(this.readonly ? {
-        color: ((_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.some(({ style }) => {
-          const { x, y, width, height } = style || {};
-          return isPointInsidePlan({
-            x: parseFloat(x),
-            y: parseFloat(y),
-            width: parseFloat(width),
-            height: parseFloat(height)
-          }, this.value);
-        })) ? 'success' : 'danger'
-      } : !this.hotzonesColor && {
-        color: 'app-color'
-      }), ref: (el) => (this.targetElement = el) });
+      }, ...(this.readonly
+        ? {
+          color: ((_a = this.hotzones) === null || _a === void 0 ? void 0 : _a.some(({ style }) => {
+            const { x, y, width, height } = style || {};
+            return isPointInsidePlan({
+              x: parseFloat(x),
+              y: parseFloat(y),
+              width: parseFloat(width),
+              height: parseFloat(height)
+            }, this.value);
+          }))
+            ? 'success'
+            : 'danger'
+        }
+        : !this.hotzonesColor && {
+          color: 'app-color'
+        }), ref: (el) => (this.targetElement = el) })));
   }
   renderImage() {
-    return !!this.imageSrc && h("section", { class: {
-        image: true,
-        flipped: this.animated && !!this.flipImage && !this.readonly
-      } }, h("div", { class: "inner-container" }, h("section", { class: "flip-box-front" }, h("yoo-img", { allowCloudinary: false, ref: e => this.imageElement = e, contained: true, src: this.imageSrc }), this.renderZones()), h("section", { class: "flip-box-back" })));
+    return (!!this.imageSrc && (h("section", { class: { image: true, flipped: this.animated && !!this.flipImage && !this.readonly } }, h("div", { class: "inner-container" }, h("section", { class: "flip-box-front" }, h("yoo-img", { allowCloudinary: false, ref: (e) => (this.imageElement = e), contained: true, src: this.imageSrc }), this.renderZones()), h("section", { class: "flip-box-back" })))));
   }
   renderBanner() {
-    return this.livePreview && h("yoo-banner", null, h("p", { slot: "content" }));
+    return this.livePreview && !this.readonly && h("yoo-banner", null, h("p", { slot: "content" }));
+  }
+  renderMain() {
+    return h("main", null, this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]);
   }
   render() {
-    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.renderBanner(), this.detailedView ? this.renderDetailedView() : [this.renderImage(), this.renderTarget()]));
+    return (h(Host, { class: { 'swiper-no-swiping': true, ...getAppContext(this.host) } }, this.renderBanner(), this.renderMain()));
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "value": ["onValueChanged"],
     "image": ["onImageChanged"],
     "hotzones": ["onHotzonesChanged"],
-    "isVisible": ["onIsVisibleChanged"],
-    "validity": ["onValidityChanged"],
-    "flipImage": ["onFlipImageChanged"]
+    "isVisible": ["onIsVisibleChanged"]
   }; }
 };
 YooFormHotzonesComponent.style = formHotzonesCss;

package/dist/design-system/yoo-form-iframe-dialog.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
-import { p as closeModal } from './overlays-670969b7.js';
+import { r as registerInstance, h } from './index-24530c1f.js';
+import './index-0621f7f2.js';
+import { p as closeModal } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-form-image-collection.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
-import './index-d2dc366e.js';
-import { o as openImageDetailFromRTE } from './common-helpers-2339195f.js';
-import { g as getFromOfflineStorage } from './localForage-705e6c3b.js';
-import { z as showModal, bk as getMedia, p as closeModal, ap as replaceAllLinks, ax as parseMarkDown, Z as translateMulti, A as isWeb, t as translate } from './overlays-670969b7.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
+import './index-d1359600.js';
+import { o as openImageDetailFromRTE } from './common-helpers-980d9808.js';
+import { g as getFromOfflineStorage } from './localForage-c32f0e70.js';
+import { z as showModal, bk as getMedia, p as closeModal, ap as replaceAllLinks, ax as parseMarkDown, Z as translateMulti, A as isWeb, t as translate } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './_commonjsHelpers-f4d11124.js';
 import './index-eec8505b.js';
@@ -50,9 +50,9 @@ const YooFormImageCollectionComponent = class {
   }
   renderImages() {
     var _a;
-    return h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map(({ revealed, image, description }, i) => {
-      return h("section", { class: "image", ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.imageClicked({ revealed, image, description }, i) }, h("yoo-img", { src: getMedia(image), type: "background" }), revealed && [h("yoo-icon", { name: "check", color: "app-color", size: "medium" }), h("div", { id: "overlay" })]);
-    }));
+    return (h("section", { id: "gallery" }, (_a = this.images) === null || _a === void 0 ? void 0 : _a.map(({ revealed, image, description }, i) => {
+      return (h("section", { class: "image", ...(this.animated && { style: { '--image-index': i.toString() } }), onClick: () => this.imageClicked({ revealed, image, description }, i) }, h("yoo-img", { src: getMedia(image), type: "background" }), revealed && [h("yoo-icon", { name: "check", color: "app-color", size: "medium" }), h("div", { id: "overlay" })]));
+    })));
   }
   renderDetailedView() {
     var _a, _b;

package/dist/design-system/yoo-form-image-tagging-creator.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement$1 } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement$1 } from './index-24530c1f.js';
+import './index-0621f7f2.js';
 import { b as isAnnotationValid, d as getElement, e as getAnnotationPositionStyle } from './annotations-helpers-628a8ae3.js';
-import { g as getAppContext } from './common-helpers-2339195f.js';
-import { s as setDotIndexes, h as hideAllDotTooltips, c as createDot, g as getDotInnerElement, a as showDotTooltip, b as getDotToolTipElement, d as hideAllUnFocusedTooltips, f as formatAnnotationForExport, e as saveTooltipContent, r as reorderDotIndexes, i as deleteDot, j as deleteEmptyDots } from './draggable-dots-helpers-7b668c5a.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
-import { aQ as getUUID, aT as gsapSet, aS as gsapTo, aR as Draggable, bp as isTranslationKey, t as translate } from './overlays-670969b7.js';
+import { g as getAppContext } from './common-helpers-980d9808.js';
+import { s as setDotIndexes, h as hideAllDotTooltips, c as createDot, g as getDotInnerElement, a as showDotTooltip, b as getDotToolTipElement, d as hideAllUnFocusedTooltips, f as formatAnnotationForExport, e as saveTooltipContent, r as reorderDotIndexes, i as deleteDot, j as deleteEmptyDots } from './draggable-dots-helpers-6700d1de.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
+import { aQ as getUUID, aT as gsapSet, aS as gsapTo, aR as Draggable, bp as isTranslationKey, t as translate } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';

package/dist/design-system/yoo-form-image-tagging.entry.js

@@ -1,18 +1,18 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-24530c1f.js';
+import './index-0621f7f2.js';
 import { A as isEqual } from './lodash-653c0bcd.js';
-import './index-d2dc366e.js';
-import { i as initTags } from './index-d695a733.js';
+import './index-d1359600.js';
+import { i as initTags, T as Tags } from './index-ac42012a.js';
 import { g as getPercentPositionStyle } from './annotations-helpers-628a8ae3.js';
-import { g as getAppContext } from './common-helpers-2339195f.js';
-import { s as showWarningBanner, h as hasDuplicates, c as checkArray, f as filterDuplicateEntries } from './draggable-tags-helpers-379028ae.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
-import { Z as translateMulti, bk as getMedia, t as translate } from './overlays-670969b7.js';
-import { g as getFromOfflineStorage } from './localForage-705e6c3b.js';
+import { s as showWarningBanner, h as hasDuplicates, c as checkArray, f as filterDuplicateEntries } from './draggable-tags-helpers-177c5425.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
+import { Z as translateMulti, bk as getMedia, t as translate } from './overlays-54d1b9f8.js';
+import { g as getFromOfflineStorage } from './localForage-c32f0e70.js';
 import './index-eec8505b.js';
+import './common-helpers-980d9808.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const formImageTaggingCss = ":host{display:block;overflow:visible}:host yoo-banner{height:0}:host yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host .image{background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host .image.flipped .inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host .image .inner-container{position:relative;width:100%;height:100%;margin:0 auto;text-align:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.8s;transition:-webkit-transform 0.8s;transition:transform 0.8s;transition:transform 0.8s, -webkit-transform 0.8s}:host .image .inner-container .flip-box-front,:host .image .inner-container .flip-box-back{width:100%;height:100%;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host .image .inner-container .flip-box-back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host .image .inner-container .image-overlay,:host .image .inner-container yoo-img{border-radius:var(--border-radius-08, 0.5rem)}:host .image .inner-container .image-overlay{position:absolute;top:0;width:100%;height:100%;background-color:var(--dark-10, rgba(0, 0, 0, 0.1));opacity:0;-webkit-transition:opacity 350ms ease-in-out;transition:opacity 350ms ease-in-out}:host .image .inner-container .dropzone-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2rem;height:2rem}:host .image .inner-container .dropzone-container .dropzone{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:1.75rem;height:1.75rem;background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));-webkit-transition:background-color 250ms ease-in-out;transition:background-color 250ms ease-in-out}:host .image .inner-container .dropzone-container .dropzone[hit]{background-color:var(--app-color, #5a30f4)}:host .instructions{margin:var(--spacing-32, 2rem) 0 0;color:var(--stable, #adadad)}:host section.tags{margin-top:var(--spacing-16, 1rem);white-space:nowrap}:host section.tags .dropzone{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;min-height:5rem;margin:calc(var(--spacing-08, 0.5rem) / -2) calc(var(--spacing-08, 0.5rem) / -2)}:host section.tags .dropzone>*{margin:calc(var(--spacing-08, 0.5rem) / 2) calc(var(--spacing-08, 0.5rem) / 2)}:host([animated]) .dropzone-container{-webkit-transition:all 250ms linear;transition:all 250ms linear}:host([animated]) .dropzone-container[hidden]{-webkit-transform:scale(0);transform:scale(0)}:host(.web:not(.live-preview)){text-align:center}:host(.web:not(.live-preview)) .image-container{max-width:40vw}";
+const formImageTaggingCss = ":host{display:block}:host yoo-banner{height:0}:host yoo-tag{position:relative;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host #image{background-color:transparent;-webkit-perspective:1000px;perspective:1000px}:host #image.flipped .inner-container{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image .inner-container{position:relative;width:100%;height:100%;margin:0 auto;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:-webkit-transform 0.75s;transition:-webkit-transform 0.75s;transition:transform 0.75s;transition:transform 0.75s, -webkit-transform 0.75s}:host #image .inner-container .flip-box-front,:host #image .inner-container .flip-box-back{width:100%;height:100%;background-color:var(--light, #ffffff);-webkit-backface-visibility:hidden;backface-visibility:hidden}:host #image .inner-container .flip-box-back{z-index:1;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}:host #image .inner-container #overlay,:host #image .inner-container yoo-img{border-radius:var(--border-radius-08, 0.5rem)}:host #image .inner-container .dropzone{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem);background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-02, 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1))}:host(:not([readonly])) main::-webkit-scrollbar{display:none}:host(:not([readonly])) #image #overlay{position:absolute;top:0;width:100%;height:100%;background-color:var(--dark-10, rgba(0, 0, 0, 0.1));opacity:0;-webkit-transition:opacity 350ms ease-in-out;transition:opacity 350ms ease-in-out}:host(:not([readonly])) #image .dropzone[hit]{background-color:var(--app-color, #5a30f4)}:host(:not([readonly])) #instructions{margin:var(--spacing-32, 2rem) 0 0;padding:var(--spacing-08, 0.5rem);color:var(--stable, #adadad)}:host(:not([readonly])) #zone-tags{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:baseline;align-content:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:5rem;padding:var(--spacing-08, 0.5rem);white-space:nowrap;border:var(--border-width-01, 0.0625rem) solid transparent;border-radius:var(--border-radius-08, 0.5rem)}:host(:not([readonly])) #zone-tags[hit]{background-color:var(--stable-ultralight, #fafafa);border:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(:not([readonly])) #zone-tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host([animated]) .dropzone{-webkit-transition:all 250ms linear;transition:all 250ms linear}:host([animated]) .dropzone[hidden]{-webkit-transform:scale(0);transform:scale(0)}";
 
 const YooFormImageTaggingComponent = class {
   constructor(hostRef) {
@@ -57,10 +57,11 @@ const YooFormImageTaggingComponent = class {
       var _a;
       this.showImageOverlay(false);
       this.value = ((_a = this.tags.getDroppedValues(true)) === null || _a === void 0 ? void 0 : _a.map(ua => this.values.find(v => ua === translateMulti(v)))) || [];
-      !this.livePreview && setValueAndValidateInput(this.value, this);
+      setValueAndValidateInput(this.value, this);
     };
     return {
       clickToDrop: true,
+      dragAndScroll: true,
       onFirstTagAnimationFinished: () => this.flipImage = false,
       getColorTag: (tagValue) => this.getColorTag(tagValue),
       pressTagExtraAction: () => this.showImageOverlay(),
@@ -101,8 +102,8 @@ const YooFormImageTaggingComponent = class {
     this.flipImage && setTimeout(() => {
       var _a, _b;
       !((_b = (_a = this.tags) === null || _a === void 0 ? void 0 : _a.tags) === null || _b === void 0 ? void 0 : _b.length) && (this.tags = initTags(this.tagConfig, this.zonesConfig));
+      Tags.prepareAutoScroll(this.host);
       this.flipImage = false;
-      showWarningBanner(this.host, hasDuplicates(this.values));
     }, 500);
   }
   async getImageSrc() {
@@ -124,25 +125,28 @@ const YooFormImageTaggingComponent = class {
     }
   }
   renderImageContainer() {
-    return !!this.image && h("section", { class: { image: true, flipped: this.animated && !!this.flipImage && !this.readonly } }, h("div", { class: "inner-container" }, h("section", { class: "flip-box-front" }, h("yoo-img", { allowCloudinary: false, contained: true, src: this.imageSrc }), h("div", { class: "image-overlay", ref: (element) => (this.imageOverlayElement = element) }), this.renderDropzones()), h("section", { class: "flip-box-back" })));
+    return !!this.image && h("section", { id: "image", class: { flipped: this.animated && !!this.flipImage && !this.readonly } }, h("div", { class: "inner-container" }, h("section", { class: "flip-box-front" }, h("yoo-img", { allowCloudinary: false, contained: true, src: this.imageSrc }), !this.readonly && h("div", { id: "overlay", ref: (element) => (this.imageOverlayElement = element) }), this.renderDropzones()), h("section", { class: "flip-box-back" })));
   }
   renderDropzones() {
     var _a, _b;
     return (_b = (_a = filterDuplicateEntries(this.annotations, 'text')) === null || _a === void 0 ? void 0 : _a.map(a => ({ ...a, type: 'dot' }))) === null || _b === void 0 ? void 0 : _b.map((a, i) => {
-      return !!a && h("div", { class: "dropzone-container", style: getPercentPositionStyle(a), hidden: this.animated && !this.readonly && this.flipImage }, h("div", { class: "dropzone", id: `zone-${i}` }));
+      return !!a && h("div", { class: "dropzone", id: `zone-${i}`, style: getPercentPositionStyle(a), hidden: this.animated && !this.readonly && this.flipImage });
     });
   }
   renderInstruction() {
-    return h("p", { class: "instructions" }, translate(this.placeholder));
+    return h("section", { id: "instructions" }, translate(this.placeholder));
   }
   renderTagsZone() {
-    return h("section", { class: "tags" }, h("div", { class: "dropzone", id: "zone-tags" }));
+    return h("section", { class: "dropzone", id: "zone-tags" });
   }
   renderBanner() {
     return this.livePreview && !this.readonly && h("yoo-banner", null, h("p", { slot: "content" }));
   }
+  renderMain() {
+    return h("main", null, this.renderImageContainer(), !this.readonly && [this.renderInstruction(), this.renderTagsZone()]);
+  }
   render() {
-    return (h(Host, { class: { ...getAppContext(this.host), 'live-preview': this.livePreview } }, this.renderBanner(), this.renderImageContainer(), !this.readonly && this.renderInstruction(), !this.readonly && this.renderTagsZone()));
+    return (h(Host, null, this.renderBanner(), this.renderMain()));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/design-system/yoo-form-incentive-participants.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, i as createEvent, h } from './index-b1ce6cd4.js';
+import { r as registerInstance, i as createEvent, h } from './index-24530c1f.js';
 import { n as IncentivePartType, i as IncentiveType } from './index-eec8505b.js';
 
 const YooFormIncentiveParticipantsComponent = class {

package/dist/design-system/yoo-form-incentive-targets.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
-import { a as setValueAndValidateInput } from './form-input-helpers-d0eac0dd.js';
-import { aQ as getUUID, t as translate } from './overlays-670969b7.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h } from './index-24530c1f.js';
+import './index-0621f7f2.js';
+import { a as setValueAndValidateInput } from './form-input-helpers-9d428369.js';
+import { aQ as getUUID, t as translate } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
-import './common-helpers-2339195f.js';
+import './common-helpers-980d9808.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const formIncentiveTargetsCss = ":host .inner-container{margin-bottom:var(--spacing-24, 1.5rem)}:host .header-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:var(--spacing-16, 1rem);padding-bottom:var(--spacing-08, 0.5rem);font-weight:bold;font-size:var(--font-size-20, 1.25rem);border-bottom:solid 1px var(--stable-light, #f1f1f1)}:host .title-container{display:-ms-flexbox;display:flex;margin-bottom:var(--spacing-08, 0.5rem)}:host .title-container yoo-form-input-container{-ms-flex:0.5;flex:0.5;padding-right:var(--spacing-32, 2rem)}:host .add-bloc-container{display:-ms-flexbox;display:flex;padding-right:var(--spacing-32, 2rem)}:host .add-bloc-container yoo-button{-ms-flex:0.5;flex:0.5}";

package/dist/design-system/yoo-form-input-comments.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-b1ce6cd4.js';
-import './index-214cd526.js';
-import { a7 as getUserDisplayName } from './overlays-670969b7.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-24530c1f.js';
+import './index-0621f7f2.js';
+import { a7 as getUserDisplayName } from './overlays-54d1b9f8.js';
 import './lodash-653c0bcd.js';
 import './index-eec8505b.js';
 import './_commonjsHelpers-f4d11124.js';