@yoobic/yobi 8.3.1-0 → 8.3.1-11

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.css

@@ -208,6 +208,16 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host h1, :host p {
   margin: 0;
 }
+:host yoo-navbar {
+  --bottom-shadow: 0;
+}
+:host yoo-navbar:not(.device-preview) {
+  --top-container-padding: 0;
+  --center-padding: 0;
+}
+:host yoo-navbar.no-heading {
+  --top-container-min-height: auto;
+}
 :host .outer-container {
   display: flex;
   flex-direction: column;

package/dist/collection/components/form-creator/form-creator-live-preview/form-creator-live-preview.js

@@ -38,6 +38,19 @@ export class YooFormCreatorLivePreviewComponent {
     return h("div", { class: "language-selector" },
       h("yoo-form-autocomplete", { value: this.selectedLanguage, values: getTranslateLanguageKeys(this.availableLanguages), onInputChanged: (ev) => this.onLanguageChanged(ev), idOnly: true, entityType: "language", useTranslate: true, displayType: "card-list", forceHideSearch: true, iconPrefix: "feed", size: "medium" }));
   }
+  renderHeader() {
+    var _a;
+    return [
+      h("yoo-header", null,
+        h("yoo-navbar", { class: { 'no-heading': this.hideHeading } },
+          h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
+            !this.hideHeading && h("div", { class: "heading" },
+              this.mode === 'fullscreen' && this.renderFullscreenHeader(),
+              this.mode === 'panel' && this.renderPanelHeader()),
+            ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
+            this.showDevices && this.renderSubheader())))
+    ];
+  }
   renderFullscreenHeader() {
     return [
       h("div", { class: { title: true, 'align-left': !this.closable } }, translate(this.fullscreenHeading || 'LIVEPREVIEW')),
@@ -87,20 +100,15 @@ export class YooFormCreatorLivePreviewComponent {
         h("yoo-device", { class: "mobile app-creator-device", deviceEntry: this.selectedDevice, scaledContainerSelector: ".columns-container", resizeOnUpdate: this.mode === 'fullscreen' },
           h("div", { class: "form-dynamic-container" },
             this.missionDescriptionTitle && (h("yoo-header", null,
-              h("yoo-navbar", null,
+              h("yoo-navbar", { class: "device-preview" },
                 h("yoo-truncate", null, translateMulti(this.missionDescriptionTitle))))),
             h("div", { class: "slot-container" },
               h("slot", { name: "livePreview" })))))));
   }
   render() {
-    var _a;
     return (h(Host, { class: { panel: this.mode === 'panel', ...getAppContext(this.host) } },
+      this.renderHeader(),
       h("div", { class: { 'outer-container': true, 'not-closable': !this.closable } },
-        !this.hideHeading && h("div", { class: "heading" },
-          this.mode === 'fullscreen' && this.renderFullscreenHeader(),
-          this.mode === 'panel' && this.renderPanelHeader()),
-        ((_a = this.availableLanguages) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.renderLanguageSelector(),
-        this.showDevices && this.renderSubheader(),
         this.renderContent(),
         !!this.logo && (h("div", { class: "image-container" },
           h("yoo-img", { src: this.logo, cloudinaryOptions: { pad: true }, svgOptions: { afterLoad: (_, svgString) => replaceSVGColors(svgString) } }))),

package/dist/collection/feature-communicate/chat/card-chat/card-chat.css

@@ -210,7 +210,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   border-bottom: var(--border-width-01, 0.0625rem) solid var(--stable-alt-40, rgba(208, 208, 208, 0.4));
 }
 :host #content {
-  width: 100%;
+  width: calc(100% - var(--spacing-64, 4rem));
+  overflow: hidden;
 }
 :host #content #heading {
   display: flex;
@@ -236,6 +237,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   gap: var(--spacing-04, 0.25rem);
   align-items: center;
   width: 100%;
+  overflow: hidden;
 }
 :host #content #message yoo-truncated-line {
   width: 100%;

package/dist/collection/feature-communicate/chat/chat/chat.css

@@ -350,7 +350,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: var(--spacing-32, 2rem);
   height: var(--spacing-32, 2rem);
   padding-right: var(--spacing-16, 1rem);
-  --stroke-width-circle: var(--spacing-04, 0.25rem);
+  --stroke-width-circle: 6;
 }
 :host .heading-container {
   width: calc(100% - var(--logo-05, 3rem));

package/dist/collection/feature-learn/learning/lesson-detail-card/lesson-detail-card.css

@@ -283,6 +283,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --svg-width: 1.8rem;
   --svg-height: 1.8rem;
   --progress-bar-color: var(--app-color, #5a30f4);
+  --stroke-width-circle: 2;
   padding: 0 var(--spacing-08, 0.5rem);
 }
 :host .card-container .content-container .footer .time-indicator .time-text {

package/dist/collection/feature-learn/learning/lesson-question-result/lesson-question-result.css

@@ -330,10 +330,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: calc(var(--safe-area-inset-top) + var(--spacing-32, 2rem));
 }
 :host .answers {
-  width: 100%;
-  padding-bottom: var(--spacing-16, 1rem);
+  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
 }
 :host .answers .title {
-  padding: var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);
+  padding-bottom: var(--spacing-08, 0.5rem);
   font-size: var(--font-size-24, 1.5rem);
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.css

@@ -226,22 +226,18 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   --line-height: initial;
 }
 :host .outer-container .progress {
-  display: flex;
-  justify-content: space-between;
-}
-:host .outer-container .progress .quick-task-progress {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--spacing-16, 1rem) auto;
   align-items: center;
   max-width: 12rem;
 }
-:host .outer-container .progress .quick-task-progress yoo-progress-bar {
-  --svg-width: 1rem;
+:host .outer-container .progress yoo-progress-bar {
   --trail-bar-color: var(--app-color-20, rgba(90, 48, 244, 0.2));
 }
-:host .outer-container .progress .quick-task-progress yoo-truncate {
+:host .outer-container .progress yoo-truncate {
   margin: 0 var(--spacing-08, 0.5rem);
 }
-:host .outer-container .progress .quick-task-progress yoo-truncate.app-color {
+:host .outer-container .progress yoo-truncate.app-color {
   color: var(--app-color, #5a30f4);
 }
 :host .outer-container .tags yoo-tag {
@@ -250,22 +246,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host .outer-container .progress-separator {
   margin-bottom: var(--spacing-08, 0.5rem);
-  border-bottom: 1px solid var(--announcement-color);
-}
-
-:host(.campaign-photos-mission-details) .outer-container {
-  color: #fff;
-  background-color: transparent;
-}
-:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-progress-bar {
-  --trail-bar-color: var(--light-40, rgba(255, 255, 255, 0.4));
-  --progress-bar-color: var(--light, #ffffff);
-}
-:host(.campaign-photos-mission-details) .outer-container .progress .quick-task-progress yoo-truncate {
-  color: var(--light, #ffffff);
-}
-:host(.campaign-photos-mission-details) .outer-container .progress-separator {
-  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-background-color);
+  border-bottom: var(--border-width-01, 0.0625rem) solid var(--announcement-color);
 }
 
 :host(.feed) {
@@ -308,4 +289,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   color: var(--light, #ffffff);
   font-size: var(--font-size-16, 1rem);
   background-color: var(--announcement-color);
+}
+
+:host([is-preview]) .outer-container .progress .quick-task-progress yoo-progress-bar {
+  --svg-width: 1.5rem;
 }

package/dist/collection/feature-operate/mission/announcement-heading/announcement-heading.js

@@ -71,10 +71,9 @@ export class YooAnnouncementHeadingComponent {
     const renderProgress = ((_b = (_a = this.announcement.todo) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.length) > 0;
     if ((announcementProgress === null || announcementProgress === void 0 ? void 0 : announcementProgress.value) >= 0 && renderProgress) {
       return h("div", { class: "progress" },
-        h("div", { class: "quick-task-progress" },
-          h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
-          h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
-            h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max })))));
+        h("yoo-progress-bar", { class: "app-color", shape: "circle", hideProgressValue: true, value: announcementProgress.value, metric: announcementProgress.unit, maxValue: announcementProgress.max }),
+        h("yoo-truncate", { class: "app-color", style: { cssText: '--max-lines: 1' } },
+          h("span", null, translate('ACTIONSCOMPLETED', { smart_count: announcementProgress.value, total: announcementProgress.max }))));
     }
   }
   renderDueDate(dueDate) {
@@ -176,7 +175,7 @@ export class YooAnnouncementHeadingComponent {
         "text": ""
       },
       "attribute": "is-preview",
-      "reflect": false
+      "reflect": true
     },
     "viewAllHandler": {
       "type": "unknown",

package/dist/collection/feature-operate/mission/card-inbox/card-inbox.css

@@ -253,8 +253,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .outer-container .content yoo-progress-bar {
   --font-size-16: var(--font-size-12, 0.75rem);
   --progress-bar-color: var(--app-color, #5a30f4);
-  --svg-width: 1rem;
-  --stroke-width-circle: 2;
+  --svg-width: var(--spacing-16, 1rem);
   margin: 0;
 }
 :host .outer-container .content .tags {

package/dist/collection/feature-operate/mission/healthscore/healthscore.css

@@ -382,7 +382,6 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 }
 :host([display-mode=large]) .overview yoo-progress-bar {
   --stroke-width-circle: 6;
-  --svg-width: calc(100% - var(--spacing-04));
   --progress-value-font-size: var(--font-size-54, 3.375rem);
 }
 :host([display-mode=large]) .overview yoo-progress-bar[metric=points].show-bar-points {

package/dist/collection/feature-operate/mission/mission-heading/mission-heading.css

@@ -239,7 +239,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-right: var(--spacing-08, 0.5rem);
 }
 :host .sub-heading .action-plan-progress {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--spacing-16, 1rem) auto;
   align-items: center;
   max-width: 12rem;
 }

package/dist/collection/feature-platform/login/login/login.css

@@ -210,19 +210,17 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   height: 100%;
 }
-.outer-login-container h1, .outer-login-container h3 {
+.outer-login-container .login-main-title, .outer-login-container .login-sub-title {
   font-weight: 900;
 }
-.outer-login-container h1 {
-  font-size: 2.25rem;
+.outer-login-container .login-main-title {
+  margin: 0;
   transition: all ease-in-out 0.2s;
 }
-.outer-login-container h3 {
+.outer-login-container .login-sub-title {
   width: fit-content;
-  max-width: 80%;
   margin-top: 0;
   margin-bottom: 0.875rem;
-  font-size: var(--font-size-24, 1.5rem);
   transition: all ease-in-out 0.2s;
 }
 .outer-login-container .content-container {
@@ -253,7 +251,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   padding-top: var(--spacing-96, 6rem);
 }
 
-@media screen and (max-height: 699px) {
+@media screen and (max-height: 649px) {
   .outer-login-container:not(.emulated).keyboard-closed .content-container {
     padding-top: 0;
   }
@@ -440,10 +438,12 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   width: 100%;
   margin-top: var(--spacing-24, 1.5rem);
   text-align: center;
+  transform: scale(100%) translateY(0);
   transition: all ease-in-out 0.2s;
 }
-.outer-login-container .header h1 {
+.outer-login-container .header .login-main-title {
   margin: 0;
+  padding: 0 0.3rem;
 }
 .outer-login-container .header img {
   max-width: 80%;
@@ -454,7 +454,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 6rem;
   max-height: 6rem;
 }
-.outer-login-container[is-whitelabel] .header h1 {
+.outer-login-container[is-whitelabel] .header .login-main-title {
   display: none;
 }
 
@@ -481,7 +481,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   .outer-login-container:not(.emulated) .header img {
     margin: 2rem 0;
   }
-  .outer-login-container:not(.emulated) .header h1 {
+  .outer-login-container:not(.emulated) .header .login-main-title {
     display: none;
   }
   .outer-login-container:not(.emulated) #error-alert {
@@ -512,7 +512,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     height: 4rem;
     max-height: 4rem;
   }
-  .outer-login-container[is-whitelabel]:not(.emulated) header h1 {
+  .outer-login-container[is-whitelabel]:not(.emulated) header .login-main-title {
     display: none;
   }
   .outer-login-container[is-whitelabel]:not(.emulated) header img {
@@ -531,7 +531,7 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 4rem;
   max-height: 4rem;
 }
-.outer-login-container[is-whitelabel].emulated header h1 {
+.outer-login-container[is-whitelabel].emulated header .login-main-title {
   display: none;
 }
 .outer-login-container[is-whitelabel].emulated header img {
@@ -588,19 +588,39 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
     margin-top: var(--spacing-32, 2rem);
   }
 }
+@media screen and (max-height: 739px) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
+    margin-top: var(--spacing-16, 1rem);
+  }
+}
 @media screen and (max-height: 699px) {
-  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header h1 {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header img {
+    margin-top: var(--spacing-08, 0.5rem);
+    margin-bottom: var(--spacing-08, 0.5rem);
+  }
+}
+@media screen and (max-height: 649px) {
+  .outer-login-container:not([is-whitelabel]).keyboard-closed:not(.emulated) .header .login-main-title {
     display: none;
   }
 }
-@media screen and (max-height: 665px) {
-  .outer-login-container.keyboard-closed:not(.emulated) .header h1,
+@media screen and (max-height: 599px) {
+  .outer-login-container.keyboard-closed:not(.emulated) .header .login-main-title,
 .outer-login-container.keyboard-closed:not(.emulated) .header img {
     display: none;
   }
 }
 @media screen and (max-height: 500px) {
   .outer-login-container.keyboard-open:not(.emulated) .header {
+    transform: scale(80%) translateY(-10%);
+  }
+  .outer-login-container.keyboard-open:not(.emulated) .header img {
+    margin-top: var(--spacing-32, 2rem);
+  }
+}
+@media screen and (max-height: 400px) {
+  .outer-login-container.keyboard-open:not(.emulated) .header .login-main-title,
+.outer-login-container.keyboard-open:not(.emulated) .header img {
     display: none;
   }
 }
@@ -805,26 +825,27 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   }
 }
 @media screen and (max-width: 899px) {
-  .outer-login-container:not([is-whitelabel]) .main-content h3 {
+  .outer-login-container:not([is-whitelabel]) .main-content .login-sub-title {
     display: none;
   }
 
-  .outer-login-container.focused h3 {
+  .outer-login-container.focused .login-sub-title {
     transform: scale(1.2) translateX(10%);
   }
 }
-.outer-login-container.emulated:not([is-whitelabel]) .main-content h3 {
+.outer-login-container.emulated:not([is-whitelabel]) .main-content .login-sub-title {
   display: none;
 }
-.outer-login-container.emulated.focused h3 {
+.outer-login-container.emulated.focused .login-sub-title {
   transform: scale(1.2) translateX(10%);
 }
 
 .outer-login-container .sidepanel {
   margin-right: var(--spacing-64, 4rem);
 }
-.outer-login-container .sidepanel h1 {
+.outer-login-container .sidepanel .login-main-title {
   margin-top: 0;
+  margin-bottom: var(--spacing-24, 1.5rem);
 }
 
 @media screen and (min-width: 1000px) {

package/dist/collection/feature-platform/login/login/parts/Header.js

@@ -1,5 +1,6 @@
 import { isWeb, translate } from '@shared/utils';
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const Header = ({ logo, title, textColor, error, closeClick }) => [
   error && (h("yoo-banner", { id: "error-alert", class: {
       'center header': true,
@@ -17,5 +18,5 @@ export const Header = ({ logo, title, textColor, error, closeClick }) => [
       h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP'))))),
   h("header", { class: "header" },
     h("img", { src: logo, alt: "app logo" }),
-    h("h1", { style: { color: textColor } }, title))
+    h(LoginTitle, { style: { color: textColor }, title: title }))
 ];

package/dist/collection/feature-platform/login/login/parts/LoginTitle.js

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core';
+export const LoginTitle = ({ style = {}, title, type = 'main' }) => {
+  if (type === 'main') {
+    style.fontSize = title.length > 60 ? '18px' : title.length > 50 ? '24px' : title.length > 36 ? '28px' : title.length > 30 ? '32px' : '36px';
+  }
+  else {
+    style.fontSize = title.length > 40 ? '12px' : title.length > 30 ? '14px' : title.length > 25 ? '18px' : title.length > 18 ? '20px' : '24px';
+  }
+  return type === 'main' ? (h("h1", { class: 'login-main-title', style: style }, title)) : (h("h3", { class: 'login-sub-title', style: style }, title));
+};

package/dist/collection/feature-platform/login/login/parts/MainContent.js

@@ -1,5 +1,6 @@
 import { translate } from '@shared/utils';
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const MainContent = ({ subtitle, textColor }, children) => (h("div", { class: "main-content" },
-  h("h3", { style: { color: textColor } }, translate(subtitle)),
+  h(LoginTitle, { style: { color: textColor }, title: translate(subtitle), type: "sub" }),
   children));

package/dist/collection/feature-platform/login/login/parts/Sidepanel.js

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { LoginTitle } from './LoginTitle';
 export const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel" },
-  h("h1", { style: { color: textColor } }, title),
+  h(LoginTitle, { style: { color: textColor }, title: title }),
   image && h("img", { src: image })));

package/dist/collection/feature-platform/login/reset-password/reset-password.css

@@ -225,8 +225,11 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 15rem;
   margin-top: var(--spacing-08, 0.5rem);
 }
-:host yoo-form-input {
+:host yoo-form-input-container {
   display: block;
   max-width: 18.75rem;
   margin: auto;
+}
+:host yoo-form-input-container.web {
+  font-size: var(--font-size-12, 0.75rem);
 }

package/dist/collection/feature-platform/login/reset-password/reset-password.js

@@ -52,13 +52,13 @@ export class YooResetPasswordComponent {
   }
   renderRequest() {
     return [
-      !!this.instruction && h("p", null, this.instruction),
+      !!this.instruction && h("p", { style: { maxWidth: '350px', margin: '0 auto' } }, this.instruction),
       h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
-      h("yoo-form-input-container", { field: { title: translate('YOOBICUSERNAME') }, hideOptional: true, hideLabel: true },
-        h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
-          //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
+      h("yoo-form-input-container", { field: { title: 'YOOBICUSERNAME' }, hideOptional: true, useUppercaseLabel: true },
+        h("yoo-form-input", { ref: (el) => (this.emailInput = el), iconPrefixColor: 'app-color', validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'), 
+          //! Do not set up onInputBlur without confirming on mobile device. We don't want to have to press submit more than once
           size: isWeb(this.host) ? 'medium' : 'large' })),
-      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
+      h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, this.isMagicLink ? translate('YOOBICMAGICLINK') : translate('YOOBICRESETPASSWORD'))
     ];
   }
   renderResetForm() {
@@ -80,6 +80,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'newpassword',
             placeholder: 'NEWPASSWORD',
             required: true,
@@ -88,6 +89,7 @@ export class YooResetPasswordComponent {
           },
           {
             type: FormFieldType.password,
+            iconPrefixColor: 'app-color',
             name: 'verify',
             placeholder: 'CONFIRMPASSWORD',
             required: true,
@@ -97,9 +99,9 @@ export class YooResetPasswordComponent {
         ]
       }
     ];
-    return h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
+    return (h("yoo-form-dynamic", { class: "margin-top", animated: false, slides: slides, showRecap: false, showSave: true, skipValidation: true, onDataChanged: (ev) => this.onDataChanged(ev), onFormValidityChanged: (ev) => this.onValidityChanged(ev), onSave: () => this.onSubmit() },
       h("div", { slot: "footer" },
-        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT'))));
+        h("yoo-button", { size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, onClick: () => this.onSubmit() }, translate('SUBMIT')))));
   }
   render() {
     return h("div", null, this.token ? this.renderResetForm() : this.renderRequest());

package/dist/design-system/{button.factory-b5d12504.js → button.factory-8372bcb4.js}

@@ -1,6 +1,6 @@
-import './index-cbd1e19e.js';
+import './index-a61fa6a9.js';
 import { h } from './index-becca019.js';
-import { Z as translateMulti } from './overlays-a665f9cf.js';
+import { Z as translateMulti } from './overlays-d9ef0a1c.js';
 
 const getButton = (button) => {
   return !button.isVisible || button.isVisible() ? (h("yoo-button", { class: button.cssClass, color: button.color || 'light', type: button.type || 'button', size: button.size || 'medium', shape: button.shape || 'rectangular', fill: button.fill || 'solid', rippleType: button.rippleType || 'bounded', disabled: button.disabled === null ? false : button.disabled, animated: button.animated === null ? true : button.animated, onClick: button.handler },

package/dist/{esm/camera-helpers-4df3bcd7.js → design-system/camera-helpers-3ecb08a1.js}

@@ -1,5 +1,5 @@
-import { co as cordova, cp as AwesomeCordovaNativePlugin, cq as cordovaPropertyGet, cr as cordovaPropertySet, cs as registerPlugin, a3 as getSession, ct as isIonic, j as isNativeMobile, cu as Device, k as isAndroid, H as isIOS, cv as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-a665f9cf.js';
-import './index-007c7dcf.js';
+import { co as cordova, cp as AwesomeCordovaNativePlugin, cq as cordovaPropertyGet, cr as cordovaPropertySet, cs as registerPlugin, a3 as getSession, ct as isIonic, j as isNativeMobile, cu as Device, k as isAndroid, H as isIOS, cv as getMediaDevices, z as showModal, y as getModalAnimation, A as isWeb } from './overlays-d9ef0a1c.js';
+import './index-abd62f7b.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -243,7 +243,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-c57e9513.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-45ede75c.js').then(m => new m.CameraWeb()),
 });
 
 var MediaPictureOptions;

package/dist/design-system/{chat-helpers-e43af661.js → chat-helpers-16b20973.js}

@@ -1,6 +1,6 @@
-import './index-007c7dcf.js';
+import './index-abd62f7b.js';
 import { i as isArray } from './lodash-f6e59a8e.js';
-import { am as is24Hour, an as isFile, ao as replaceAtTagToMentionTag, ap as replaceAllLinks, Z as translateMulti } from './overlays-a665f9cf.js';
+import { am as is24Hour, an as isFile, ao as replaceAtTagToMentionTag, ap as replaceAllLinks, Z as translateMulti } from './overlays-d9ef0a1c.js';
 
 /**
  * Get the proper data format for a single message aswell as grouped messages

package/dist/{esm/common-helpers-1a55e28c.js → design-system/common-helpers-4b9004c1.js}

@@ -1,5 +1,5 @@
-import { y as getModalAnimation, t as translate, z as showModal, A as isWeb, C as debounce, D as querySelectorDeep$1, j as isNativeMobile, S as ScreenOrientation, F as findDevice, G as isIphoneX, l as isIpadPro, n as isTablet, h as isFullScreenFalse, H as isIOS, k as isAndroid, I as setAnimation, J as animations, K as getCssColor, Y as YOOBICON_ENTITIES_MAP, L as startOf, M as isDateBefore, N as dateDiffInCalendarDays, O as isDateAfter, P as getAsyncExtraData, Q as findParent, R as isNativeFilePath, T as cleanupWKWebViewFilePath, U as Cloudinary, V as getProtocol, W as CloudinaryGradientLayer } from './overlays-a665f9cf.js';
-import './index-007c7dcf.js';
+import { y as getModalAnimation, t as translate, z as showModal, A as isWeb, C as debounce, D as querySelectorDeep$1, j as isNativeMobile, S as ScreenOrientation, F as findDevice, G as isIphoneX, l as isIpadPro, n as isTablet, h as isFullScreenFalse, H as isIOS, k as isAndroid, I as setAnimation, J as animations, K as getCssColor, Y as YOOBICON_ENTITIES_MAP, L as startOf, M as isDateBefore, N as dateDiffInCalendarDays, O as isDateAfter, P as getAsyncExtraData, Q as findParent, R as isNativeFilePath, T as cleanupWKWebViewFilePath, U as Cloudinary, V as getProtocol, W as CloudinaryGradientLayer } from './overlays-d9ef0a1c.js';
+import './index-abd62f7b.js';
 import { C as get } from './lodash-f6e59a8e.js';
 
 function getDefaultModalAnimation(host) {