@gataca/qr 4.0.0 → 4.0.2

package/dist/collection/components/gataca-qr/gataca-qr.js

@@ -125,7 +125,7 @@ export class GatacaQR {
   renderQRSection() {
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
-        return this.renderRetryButton();
+        return this.renderQR(this.getLink(), true);
       case RESULT_STATUS.ONGOING:
         return this.renderQR(this.getLink(), true);
       case RESULT_STATUS.EXPIRED:
@@ -142,13 +142,13 @@ export class GatacaQR {
     }
   }
   renderSuccess() {
-    return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel });
+    return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   renderRetryButton(errorMessage) {
-    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this) }));
+    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this), style: this === null || this === void 0 ? void 0 : this.qrStyle }));
   }
   renderReadQR(readQrMessages) {
-    return h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this) });
+    return (h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this), style: this.qrStyle }));
   }
   renderQR(value, useLogo, sizeQR) {
     return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
@@ -157,15 +157,17 @@ export class GatacaQR {
     return h(QR, { value: value, useLogo: useLogo && this.logoSize !== 0, qrType: this.qrType, size: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     return (h("div", { class: "popUpContainer" }, h("div", { class: `is-visible modal-window ${this.hideModalTexts ? '' : 'large-modal'} ${this.hideModalBoxShadow ? 'noBoxShadow' : ''}`, style: {
         width: (this.modalWidth - 2).toString() + 'px',
-        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
+        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+        backgroundColor: ((_b = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _b === void 0 ? void 0 : _b.bgColor) ? (_c = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _c === void 0 ? void 0 : _c.bgColor : 'white',
+        boxShadow: ((_d = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _d === void 0 ? void 0 : _d.boxShadow) ? (_e = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _e === void 0 ? void 0 : _e.boxShadow : '0px 3px 10px rgba(48, 48, 48, 0.1);'
       }, onClick: (event) => {
         event.stopPropagation();
       } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? 'hidenText' : ''}` }, h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || '#1e1e20' } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand modalText" }, this.byBrandLabel, ' ', h("span", null, h("img", { src: logoGataca })))), this.result !== RESULT_STATUS.SUCCESS && !this.hideQrModalDescription && h("p", { class: "qrDescription modalText" }, this.qrModalDescription)), h("div", { class: "qrSection", style: {
         width: this.modalWidth.toString() + 'px',
-        height: this.modalWidth ? ((_b = this.modalWidth) === null || _b === void 0 ? void 0 : _b.toString()) + 'px' : ''
+        height: this.modalWidth ? ((_f = this.modalWidth) === null || _f === void 0 ? void 0 : _f.toString()) + 'px' : ''
       } }, this.renderQRSection())))));
   }
   static get is() { return "gataca-qr"; }
@@ -881,7 +883,7 @@ export class GatacaQR {
         "mutable": false,
         "complexType": {
           "original": "qrStyle",
-          "resolved": "{ color: string; bgColor: string; }",
+          "resolved": "{ color: string; bgColor: string; alertBgColor?: string; alertBorderColor?: string; boxShadow?: string; }",
           "references": {
             "qrStyle": {
               "location": "local"

package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.js

@@ -1018,7 +1018,7 @@ export class GatacaSSIButton {
         "mutable": false,
         "complexType": {
           "original": "qrStyle",
-          "resolved": "{ color: string; bgColor: string; }",
+          "resolved": "{ color: string; bgColor: string; alertBgColor?: string; alertBorderColor?: string; boxShadow?: string; }",
           "references": {
             "qrStyle": {
               "location": "import",

package/dist/components/gat-icon-check.js

@@ -21,10 +21,8 @@ var RESULT_STATUS;
   RESULT_STATUS[RESULT_STATUS["READ"] = 5] = "READ";
 })(RESULT_STATUS || (RESULT_STATUS = {}));
 
-const gatIconRefreshSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDRWMTBIMTciIHN0cm9rZT0iIzhCOEI4QiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIwLjQ4OTkgMTVDMTkuODM5OSAxNi44Mzk5IDE4LjYwOTQgMTguNDE4NyAxNi45ODQgMTkuNDk4NUMxNS4zNTg2IDIwLjU3ODMgMTMuNDI2MyAyMS4xMDA2IDExLjQ3ODMgMjAuOTg2NkM5LjUzMDI2IDIwLjg3MjYgNy42NzIwMyAyMC4xMjg2IDYuMTgzNjMgMTguODY2N0M0LjY5NTI0IDE3LjYwNDcgMy42NTczIDE1Ljg5MzIgMy4yMjYyNSAxMy45OTAxQzIuNzk1MTkgMTIuMDg2OSAyLjk5NDM2IDEwLjA5NTIgMy43OTM3NCA4LjMxNTA4QzQuNTkzMTMgNi41MzQ5NiA1Ljk0OTQyIDUuMDYyODggNy42NTgyMyA0LjEyMDY1QzkuMzY3MDUgMy4xNzg0MyAxMS4zMzU4IDIuODE3MTEgMTMuMjY3OCAzLjA5MTE2QzE1LjE5OTkgMy4zNjUyIDE2Ljk5MDUgNC4yNTk3NSAxOC4zNjk5IDUuNjQwMDFMMjIuOTk5OSAxMCIgc3Ryb2tlPSIjOEI4QjhCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
-
 const gatIconAlertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjI5MDggMy44NjAyTDEuODIwNzUgMTguMDAwMkMxLjY0NjEyIDE4LjMwMjYgMS41NTM3MiAxOC42NDU1IDEuNTUyNzQgMTguOTk0N0MxLjU1MTc2IDE5LjM0MzkgMS42NDIyNCAxOS42ODczIDEuODE1MTggMTkuOTkwN0MxLjk4ODEyIDIwLjI5NDEgMi4yMzc0OCAyMC41NDcgMi41Mzg0NiAyMC43MjQxQzIuODM5NDQgMjAuOTAxMiAzLjE4MTU1IDIwLjk5NjQgMy41MzA3NSAyMS4wMDAySDIwLjQ3MDhDMjAuODIgMjAuOTk2NCAyMS4xNjIxIDIwLjkwMTIgMjEuNDYzIDIwLjcyNDFDMjEuNzY0IDIwLjU0NyAyMi4wMTM0IDIwLjI5NDEgMjIuMTg2MyAxOS45OTA3QzIyLjM1OTMgMTkuNjg3MyAyMi40NDk3IDE5LjM0MzkgMjIuNDQ4OCAxOC45OTQ3QzIyLjQ0NzggMTguNjQ1NSAyMi4zNTU0IDE4LjMwMjYgMjIuMTgwOCAxOC4wMDAyTDEzLjcxMDggMy44NjAyQzEzLjUzMjUgMy41NjYzMSAxMy4yODE1IDMuMzIzMzIgMTIuOTgxOSAzLjE1NDY5QzEyLjY4MjQgMi45ODYwNSAxMi4zNDQ1IDIuODk3NDYgMTIuMDAwOCAyLjg5NzQ2QzExLjY1NyAyLjg5NzQ2IDExLjMxOTEgMi45ODYwNSAxMS4wMTk2IDMuMTU0NjlDMTAuNzIgMy4zMjMzMiAxMC40NjkgMy41NjYzMSAxMC4yOTA4IDMuODYwMlYzLjg2MDJaIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiA5VjEzIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiAxN0gxMi4wMSIgc3Ryb2tlPSIjQ0QyQjMxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
 
 const gatIconCheckSvg = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUyIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgNTIgNTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjI2IiBjeT0iMjYuNjcxOSIgcj0iMjYiIGZpbGw9IiMzRDlBNTAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zOC41MiAxNy43NDk1QzM5LjU4MDUgMTguODA5OSAzOS41ODA1IDIwLjUyOTMgMzguNTIgMjEuNTg5OEwyMy41ODQ2IDM2LjUyNTFDMjIuNTI0MiAzNy41ODU2IDIwLjgwNDggMzcuNTg1NiAxOS43NDQzIDM2LjUyNTFMMTIuOTU1NSAyOS43MzYzQzExLjg5NSAyOC42NzU5IDExLjg5NSAyNi45NTY1IDEyLjk1NTUgMjUuODk2QzE0LjAxNiAyNC44MzU1IDE1LjczNTQgMjQuODM1NSAxNi43OTU4IDI1Ljg5NkwyMS42NjQ1IDMwLjc2NDdMMzQuNjc5NyAxNy43NDk1QzM1Ljc0MDIgMTYuNjg5IDM3LjQ1OTUgMTYuNjg5IDM4LjUyIDE3Ljc0OTVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
 
-export { RESULT_STATUS as R, gatIconAlertSvg as a, base64UrlEncode as b, checkMobile as c, gatIconCheckSvg as d, gatIconRefreshSvg as g };
+export { RESULT_STATUS as R, gatIconCheckSvg as a, base64UrlEncode as b, checkMobile as c, gatIconAlertSvg as g };

package/dist/components/gataca-qr2.js

@@ -1,14 +1,16 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { l as logoGatacaSvg, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
-import { g as gatIconRefreshSvg, a as gatIconAlertSvg, d as gatIconCheckSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-check.js';
+import { g as gatIconAlertSvg, a as gatIconCheckSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-check.js';
 
 const QR = (props) => {
   const { value, useLogo, logoSrc, size, qrType, style } = props;
   return h("gataca-qrdisplay", { qrData: value, rounded: true, qrType: qrType, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc, qrColor: style === null || style === void 0 ? void 0 : style.color, bgColor: style === null || style === void 0 ? void 0 : style.bgColor });
 };
 
-const AnimatedLoader = () => {
-  return (h("div", { class: "containerLoader" },
+const AnimatedLoader = (props) => {
+  const { color = '#4745B7' } = props;
+  const style = { '--loader-color': color };
+  return (h("div", { class: "containerLoader", style: style },
     h("div", { class: "loader" },
       h("div", { class: "loader__item loader__item__1" }),
       h("div", { class: "loader__item loader__item__2" }),
@@ -23,52 +25,67 @@ const AnimatedLoader = () => {
 const ReadQR = (props) => {
   var _a;
   const { modalWidth, readQrMessages, renderQR, url, sizeQR, style } = props;
+  const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
+  const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
   return (h("div", { class: "blured", style: {
       width: (modalWidth - 48).toString() + 'px',
       height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
       backgroundColor: style === null || style === void 0 ? void 0 : style.bgColor,
-      color: style === null || style === void 0 ? void 0 : style.color
+      color: style === null || style === void 0 ? void 0 : style.color,
+      border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
     } },
-    h("div", { id: "notify" },
-      h(AnimatedLoader, null),
-      h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
+    h("div", { id: "notify", style: bgStyle },
+      h(AnimatedLoader, { color: style === null || style === void 0 ? void 0 : style.color }),
+      h("p", { class: "notify-text", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
         readQrMessages.title,
-        " "),
-      h("p", { class: "notify-text bold" }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)),
+        ' '),
+      h("p", { class: "notify-text bold", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)),
     h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
 };
 
+const RefreshIcon = (props) => {
+  const { height = 24, width = 24, color } = props;
+  const strokeColor = color ? color : '#8B8B8B';
+  return (h("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M23 4V10H17", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+    h("path", { d: "M20.4899 15C19.8399 16.8399 18.6094 18.4187 16.984 19.4985C15.3586 20.5783 13.4263 21.1006 11.4783 20.9866C9.53026 20.8726 7.67203 20.1286 6.18363 18.8667C4.69524 17.6047 3.6573 15.8932 3.22625 13.9901C2.79519 12.0869 2.99436 10.0952 3.79374 8.31508C4.59313 6.53496 5.94942 5.06288 7.65823 4.12065C9.36705 3.17843 11.3358 2.81711 13.2678 3.09116C15.1999 3.3652 16.9905 4.25975 18.3699 5.64001L22.9999 10", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+
 const RetryButton = (props) => {
   var _a;
-  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;
+  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, style, display, renderRetryQR } = props;
+  const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
+  const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
+  const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
+  const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
   return (h("div", { class: "reload", style: {
       width: (modalWidth - 48).toString() + 'px',
-      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
+      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+      border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
     } },
-    h("div", { id: "notify", onClick: () => display() },
-      h("img", { src: gatIconRefreshSvg, height: 24, width: 24 }),
-      h("p", { class: "notify-text" },
+    h("div", { id: "notify", onClick: () => display(), style: bgStyle },
+      h(RefreshIcon, { color: style === null || style === void 0 ? void 0 : style.color, height: 24, width: 24 }),
+      h("p", { class: "notify-text", style: color },
         clickInsideBoxLabel,
-        " "),
-      errorMessage ? h("p", { class: "notify-text bold" }, refreshQrLabel) : h("p", { class: "notify-text bold" }, scanQrLabel),
-      errorMessage && (h("div", { class: "alert", style: {
-          width: (modalWidth - 48).toString() + 'px'
-        } },
+        ' '),
+      errorMessage ? (h("p", { class: "notify-text bold", style: color }, refreshQrLabel)) : (h("p", { class: "notify-text bold", style: color }, scanQrLabel)),
+      errorMessage && (h("div", { class: "alert", style: Object.assign(Object.assign({ width: (modalWidth - 48).toString() + 'px' }, alertBgStyle), { border: `1px solid ${alertBorderColor}` }) },
         h("img", { src: gatIconAlertSvg, height: 24, width: 24 }),
-        h("p", null, errorMessage)))),
+        h("p", { style: { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' } }, errorMessage)))),
     h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
 };
 
 const Success = (props) => {
-  const { modalHeight, successLoginLabel } = props;
+  const { modalHeight, successLoginLabel, style } = props;
+  const colorStyle = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' };
   return (h("div", { class: 'success', style: {
       height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + 'px' : '300px'
     } },
     h("img", { src: gatIconCheckSvg, height: 52, width: 52 }),
-    h("p", { class: "successMsg" }, successLoginLabel)));
+    h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
 };
 
-const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:12px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>img{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background:transparent;border-radius:2px}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{background:#4745B7}100%{background:#CCCBF8}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
+const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:20px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>svg{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background-color:var(--loader-color, #4745B7);border-radius:2px;--to-opacity:1;opacity:var(--to-opacity)}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);--to-opacity:calc(1 - (0 / 8));animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);--to-opacity:calc(1 - (1 / 8));animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);--to-opacity:calc(1 - (2 / 8));animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);--to-opacity:calc(1 - (3 / 8));animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);--to-opacity:calc(1 - (4 / 8));animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);--to-opacity:calc(1 - (5 / 8));animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);--to-opacity:calc(1 - (6 / 8));animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);--to-opacity:calc(1 - (7 / 8));animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{opacity:1}100%{opacity:var(--to-opacity)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
 
 const DEEP_LINK_PREFIX = 'https://api.gataca.io/qr/redirect.html';
 //Default values
@@ -189,7 +206,7 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   renderQRSection() {
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
-        return this.renderRetryButton();
+        return this.renderQR(this.getLink(), true);
       case RESULT_STATUS.ONGOING:
         return this.renderQR(this.getLink(), true);
       case RESULT_STATUS.EXPIRED:
@@ -206,13 +223,13 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   renderSuccess() {
-    return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel });
+    return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   renderRetryButton(errorMessage) {
-    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this) }));
+    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this), style: this === null || this === void 0 ? void 0 : this.qrStyle }));
   }
   renderReadQR(readQrMessages) {
-    return h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this) });
+    return (h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this), style: this.qrStyle }));
   }
   renderQR(value, useLogo, sizeQR) {
     return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
@@ -221,15 +238,17 @@ const GatacaQR = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return h(QR, { value: value, useLogo: useLogo && this.logoSize !== 0, qrType: this.qrType, size: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     return (h("div", { class: "popUpContainer" }, h("div", { class: `is-visible modal-window ${this.hideModalTexts ? '' : 'large-modal'} ${this.hideModalBoxShadow ? 'noBoxShadow' : ''}`, style: {
         width: (this.modalWidth - 2).toString() + 'px',
-        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
+        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+        backgroundColor: ((_b = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _b === void 0 ? void 0 : _b.bgColor) ? (_c = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _c === void 0 ? void 0 : _c.bgColor : 'white',
+        boxShadow: ((_d = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _d === void 0 ? void 0 : _d.boxShadow) ? (_e = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _e === void 0 ? void 0 : _e.boxShadow : '0px 3px 10px rgba(48, 48, 48, 0.1);'
       }, onClick: (event) => {
         event.stopPropagation();
       } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? 'hidenText' : ''}` }, h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || '#1e1e20' } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand modalText" }, this.byBrandLabel, ' ', h("span", null, h("img", { src: logoGatacaSvg })))), this.result !== RESULT_STATUS.SUCCESS && !this.hideQrModalDescription && h("p", { class: "qrDescription modalText" }, this.qrModalDescription)), h("div", { class: "qrSection", style: {
         width: this.modalWidth.toString() + 'px',
-        height: this.modalWidth ? ((_b = this.modalWidth) === null || _b === void 0 ? void 0 : _b.toString()) + 'px' : ''
+        height: this.modalWidth ? ((_f = this.modalWidth) === null || _f === void 0 ? void 0 : _f.toString()) + 'px' : ''
       } }, this.renderQRSection())))));
   }
   static get style() { return gatacaQrCss; }

package/dist/components/gataca-qrws2.js

@@ -1,6 +1,6 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { l as logoGatacaSvg, d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
-import { d as gatIconCheckSvg, g as gatIconRefreshSvg, a as gatIconAlertSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-check.js';
+import { a as gatIconCheckSvg, g as gatIconAlertSvg, R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './gat-icon-check.js';
 
 const Success = (props) => {
   const { modalHeight, successLoginLabel } = props;
@@ -11,6 +11,8 @@ const Success = (props) => {
     h("p", { class: "successMsg" }, successLoginLabel)));
 };
 
+const gatIconRefreshSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDRWMTBIMTciIHN0cm9rZT0iIzhCOEI4QiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIwLjQ4OTkgMTVDMTkuODM5OSAxNi44Mzk5IDE4LjYwOTQgMTguNDE4NyAxNi45ODQgMTkuNDk4NUMxNS4zNTg2IDIwLjU3ODMgMTMuNDI2MyAyMS4xMDA2IDExLjQ3ODMgMjAuOTg2NkM5LjUzMDI2IDIwLjg3MjYgNy42NzIwMyAyMC4xMjg2IDYuMTgzNjMgMTguODY2N0M0LjY5NTI0IDE3LjYwNDcgMy42NTczIDE1Ljg5MzIgMy4yMjYyNSAxMy45OTAxQzIuNzk1MTkgMTIuMDg2OSAyLjk5NDM2IDEwLjA5NTIgMy43OTM3NCA4LjMxNTA4QzQuNTkzMTMgNi41MzQ5NiA1Ljk0OTQyIDUuMDYyODggNy42NTgyMyA0LjEyMDY1QzkuMzY3MDUgMy4xNzg0MyAxMS4zMzU4IDIuODE3MTEgMTMuMjY3OCAzLjA5MTE2QzE1LjE5OTkgMy4zNjUyIDE2Ljk5MDUgNC4yNTk3NSAxOC4zNjk5IDUuNjQwMDFMMjIuOTk5OSAxMCIgc3Ryb2tlPSIjOEI4QjhCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
+
 const RetryButton = (props) => {
   var _a;
   const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;

package/dist/esm/{gat-icon-check-c188cd29.js → gat-icon-check-7320c81b.js}

@@ -25,10 +25,8 @@ var qrCodeStyling = createCommonjsModule(function (module, exports) {
 
 const QRCodeStyling = /*@__PURE__*/getDefaultExportFromCjs(qrCodeStyling);
 
-const gatIconRefreshSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDRWMTBIMTciIHN0cm9rZT0iIzhCOEI4QiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIwLjQ4OTkgMTVDMTkuODM5OSAxNi44Mzk5IDE4LjYwOTQgMTguNDE4NyAxNi45ODQgMTkuNDk4NUMxNS4zNTg2IDIwLjU3ODMgMTMuNDI2MyAyMS4xMDA2IDExLjQ3ODMgMjAuOTg2NkM5LjUzMDI2IDIwLjg3MjYgNy42NzIwMyAyMC4xMjg2IDYuMTgzNjMgMTguODY2N0M0LjY5NTI0IDE3LjYwNDcgMy42NTczIDE1Ljg5MzIgMy4yMjYyNSAxMy45OTAxQzIuNzk1MTkgMTIuMDg2OSAyLjk5NDM2IDEwLjA5NTIgMy43OTM3NCA4LjMxNTA4QzQuNTkzMTMgNi41MzQ5NiA1Ljk0OTQyIDUuMDYyODggNy42NTgyMyA0LjEyMDY1QzkuMzY3MDUgMy4xNzg0MyAxMS4zMzU4IDIuODE3MTEgMTMuMjY3OCAzLjA5MTE2QzE1LjE5OTkgMy4zNjUyIDE2Ljk5MDUgNC4yNTk3NSAxOC4zNjk5IDUuNjQwMDFMMjIuOTk5OSAxMCIgc3Ryb2tlPSIjOEI4QjhCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
-
 const gatIconAlertSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjI5MDggMy44NjAyTDEuODIwNzUgMTguMDAwMkMxLjY0NjEyIDE4LjMwMjYgMS41NTM3MiAxOC42NDU1IDEuNTUyNzQgMTguOTk0N0MxLjU1MTc2IDE5LjM0MzkgMS42NDIyNCAxOS42ODczIDEuODE1MTggMTkuOTkwN0MxLjk4ODEyIDIwLjI5NDEgMi4yMzc0OCAyMC41NDcgMi41Mzg0NiAyMC43MjQxQzIuODM5NDQgMjAuOTAxMiAzLjE4MTU1IDIwLjk5NjQgMy41MzA3NSAyMS4wMDAySDIwLjQ3MDhDMjAuODIgMjAuOTk2NCAyMS4xNjIxIDIwLjkwMTIgMjEuNDYzIDIwLjcyNDFDMjEuNzY0IDIwLjU0NyAyMi4wMTM0IDIwLjI5NDEgMjIuMTg2MyAxOS45OTA3QzIyLjM1OTMgMTkuNjg3MyAyMi40NDk3IDE5LjM0MzkgMjIuNDQ4OCAxOC45OTQ3QzIyLjQ0NzggMTguNjQ1NSAyMi4zNTU0IDE4LjMwMjYgMjIuMTgwOCAxOC4wMDAyTDEzLjcxMDggMy44NjAyQzEzLjUzMjUgMy41NjYzMSAxMy4yODE1IDMuMzIzMzIgMTIuOTgxOSAzLjE1NDY5QzEyLjY4MjQgMi45ODYwNSAxMi4zNDQ1IDIuODk3NDYgMTIuMDAwOCAyLjg5NzQ2QzExLjY1NyAyLjg5NzQ2IDExLjMxOTEgMi45ODYwNSAxMS4wMTk2IDMuMTU0NjlDMTAuNzIgMy4zMjMzMiAxMC40NjkgMy41NjYzMSAxMC4yOTA4IDMuODYwMlYzLjg2MDJaIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiA5VjEzIiBzdHJva2U9IiNDRDJCMzEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMiAxN0gxMi4wMSIgc3Ryb2tlPSIjQ0QyQjMxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
 
 const gatIconCheckSvg = 'data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjUyIiBoZWlnaHQ9IjUzIiB2aWV3Qm94PSIwIDAgNTIgNTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjI2IiBjeT0iMjYuNjcxOSIgcj0iMjYiIGZpbGw9IiMzRDlBNTAiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zOC41MiAxNy43NDk1QzM5LjU4MDUgMTguODA5OSAzOS41ODA1IDIwLjUyOTMgMzguNTIgMjEuNTg5OEwyMy41ODQ2IDM2LjUyNTFDMjIuNTI0MiAzNy41ODU2IDIwLjgwNDggMzcuNTg1NiAxOS43NDQzIDM2LjUyNTFMMTIuOTU1NSAyOS43MzYzQzExLjg5NSAyOC42NzU5IDExLjg5NSAyNi45NTY1IDEyLjk1NTUgMjUuODk2QzE0LjAxNiAyNC44MzU1IDE1LjczNTQgMjQuODM1NSAxNi43OTU4IDI1Ljg5NkwyMS42NjQ1IDMwLjc2NDdMMzQuNjc5NyAxNy43NDk1QzM1Ljc0MDIgMTYuNjg5IDM3LjQ1OTUgMTYuNjg5IDM4LjUyIDE3Ljc0OTVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K';
 
-export { QRCodeStyling as Q, gatIconAlertSvg as a, gatIconCheckSvg as b, gatIconRefreshSvg as g, logoGatacaSvg as l };
+export { QRCodeStyling as Q, gatIconCheckSvg as a, gatIconAlertSvg as g, logoGatacaSvg as l };

package/dist/esm/gataca-autoqr.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-2be54f32.js';
+import { r as registerInstance, c as createEvent, h } from './index-055790a7.js';
 
 const gatacaAutoqrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.buttonContainer{display:inline-block;text-align:right;padding:10px;position:relative}.gatacaButtonWrapper{margin:8px}.gatacaButtonWrapper .gatacaButton{display:flex;min-width:100px;padding:8px 8px;background-color:white;font-size:12px;font-family:\"Work Sans\", sans-serif;letter-spacing:1px;font-weight:2;justify-content:space-between;align-items:center;border-radius:6px;border:1px solid rgba(24, 27, 94, 0.5);color:rgba(24, 27, 94, 0.8);box-shadow:0px 1px 3px rgba(48, 48, 48, 0.15);cursor:pointer}.gatacaButtonWrapper .gatacaButton>span{margin-right:10px}.gatacaButtonWrapper .gatacaButton:hover{box-shadow:0px 2px 8px rgba(48, 48, 48, 0.1)}.gatacaButtonWrapper .buttonText{text-align:right;font-size:8px;color:rgba(24, 27, 94, 0.5);font-family:\"Helvetica Neue\", sans-serif;letter-spacing:1px;padding-right:8px;font-weight:1}.gatacaButtonWrapper .buttonImg{height:25px;width:25px;margin:0;margin-right:20px}";
 

package/dist/esm/gataca-qr_3.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, c as createEvent } from './index-2be54f32.js';
-import { Q as QRCodeStyling, l as logoGatacaSvg, g as gatIconRefreshSvg, a as gatIconAlertSvg, b as gatIconCheckSvg } from './gat-icon-check-c188cd29.js';
+import { r as registerInstance, h, c as createEvent } from './index-055790a7.js';
+import { Q as QRCodeStyling, l as logoGatacaSvg, g as gatIconAlertSvg, a as gatIconCheckSvg } from './gat-icon-check-7320c81b.js';
 import { R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './utils-21ffcc1e.js';
 
 const GatacaQRDisplay = class {
@@ -54,8 +54,10 @@ const QR = (props) => {
   return h("gataca-qrdisplay", { qrData: value, rounded: true, qrType: qrType, size: size, "logo-size": useLogo ? 0.33 : 0, "logo-src": logoSrc, qrColor: style === null || style === void 0 ? void 0 : style.color, bgColor: style === null || style === void 0 ? void 0 : style.bgColor });
 };
 
-const AnimatedLoader = () => {
-  return (h("div", { class: "containerLoader" },
+const AnimatedLoader = (props) => {
+  const { color = '#4745B7' } = props;
+  const style = { '--loader-color': color };
+  return (h("div", { class: "containerLoader", style: style },
     h("div", { class: "loader" },
       h("div", { class: "loader__item loader__item__1" }),
       h("div", { class: "loader__item loader__item__2" }),
@@ -70,52 +72,67 @@ const AnimatedLoader = () => {
 const ReadQR = (props) => {
   var _a;
   const { modalWidth, readQrMessages, renderQR, url, sizeQR, style } = props;
+  const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
+  const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
   return (h("div", { class: "blured", style: {
       width: (modalWidth - 48).toString() + 'px',
       height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
       backgroundColor: style === null || style === void 0 ? void 0 : style.bgColor,
-      color: style === null || style === void 0 ? void 0 : style.color
+      color: style === null || style === void 0 ? void 0 : style.color,
+      border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
     } },
-    h("div", { id: "notify" },
-      h(AnimatedLoader, null),
-      h("p", { class: "notify-text" }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
+    h("div", { id: "notify", style: bgStyle },
+      h(AnimatedLoader, { color: style === null || style === void 0 ? void 0 : style.color }),
+      h("p", { class: "notify-text", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 :
         readQrMessages.title,
-        " "),
-      h("p", { class: "notify-text bold" }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)),
+        ' '),
+      h("p", { class: "notify-text bold", style: color }, readQrMessages === null || readQrMessages === void 0 ? void 0 : readQrMessages.description)),
     h("div", { id: "qrwait" }, renderQR(url, false, sizeQR))));
 };
 
+const RefreshIcon = (props) => {
+  const { height = 24, width = 24, color } = props;
+  const strokeColor = color ? color : '#8B8B8B';
+  return (h("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M23 4V10H17", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+    h("path", { d: "M20.4899 15C19.8399 16.8399 18.6094 18.4187 16.984 19.4985C15.3586 20.5783 13.4263 21.1006 11.4783 20.9866C9.53026 20.8726 7.67203 20.1286 6.18363 18.8667C4.69524 17.6047 3.6573 15.8932 3.22625 13.9901C2.79519 12.0869 2.99436 10.0952 3.79374 8.31508C4.59313 6.53496 5.94942 5.06288 7.65823 4.12065C9.36705 3.17843 11.3358 2.81711 13.2678 3.09116C15.1999 3.3652 16.9905 4.25975 18.3699 5.64001L22.9999 10", stroke: strokeColor, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};
+
 const RetryButton = (props) => {
   var _a;
-  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;
+  const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, style, display, renderRetryQR } = props;
+  const bgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.bgColor) ? style === null || style === void 0 ? void 0 : style.bgColor : 'white' };
+  const alertBgStyle = { backgroundColor: (style === null || style === void 0 ? void 0 : style.alertBgColor) ? style === null || style === void 0 ? void 0 : style.alertBgColor : '#ffdedf' };
+  const alertBorderColor = { borderColor: (style === null || style === void 0 ? void 0 : style.alertBorderColor) ? style === null || style === void 0 ? void 0 : style.alertBorderColor : '#ee888c' };
+  const color = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#707074' };
   return (h("div", { class: "reload", style: {
       width: (modalWidth - 48).toString() + 'px',
-      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
+      height: modalWidth ? ((_a = (modalWidth - 48)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+      border: (style === null || style === void 0 ? void 0 : style.color) ? `1px dashed ${style === null || style === void 0 ? void 0 : style.color}` : `1px dashed #a1a1a1`
     } },
-    h("div", { id: "notify", onClick: () => display() },
-      h("img", { src: gatIconRefreshSvg, height: 24, width: 24 }),
-      h("p", { class: "notify-text" },
+    h("div", { id: "notify", onClick: () => display(), style: bgStyle },
+      h(RefreshIcon, { color: style === null || style === void 0 ? void 0 : style.color, height: 24, width: 24 }),
+      h("p", { class: "notify-text", style: color },
         clickInsideBoxLabel,
-        " "),
-      errorMessage ? h("p", { class: "notify-text bold" }, refreshQrLabel) : h("p", { class: "notify-text bold" }, scanQrLabel),
-      errorMessage && (h("div", { class: "alert", style: {
-          width: (modalWidth - 48).toString() + 'px'
-        } },
+        ' '),
+      errorMessage ? (h("p", { class: "notify-text bold", style: color }, refreshQrLabel)) : (h("p", { class: "notify-text bold", style: color }, scanQrLabel)),
+      errorMessage && (h("div", { class: "alert", style: Object.assign(Object.assign({ width: (modalWidth - 48).toString() + 'px' }, alertBgStyle), { border: `1px solid ${alertBorderColor}` }) },
         h("img", { src: gatIconAlertSvg, height: 24, width: 24 }),
-        h("p", null, errorMessage)))),
+        h("p", { style: { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' } }, errorMessage)))),
     h("div", { id: "qrwait" }, renderRetryQR(waitingStartSessionLabel))));
 };
 
 const Success = (props) => {
-  const { modalHeight, successLoginLabel } = props;
+  const { modalHeight, successLoginLabel, style } = props;
+  const colorStyle = { color: (style === null || style === void 0 ? void 0 : style.color) ? style === null || style === void 0 ? void 0 : style.color : '#1e1e20' };
   return (h("div", { class: 'success', style: {
       height: modalHeight ? (modalHeight === null || modalHeight === void 0 ? void 0 : modalHeight.toString()) + 'px' : '300px'
     } },
     h("img", { src: gatIconCheckSvg, height: 52, width: 52 }),
-    h("p", { class: "successMsg" }, successLoginLabel)));
+    h("p", { class: "successMsg", style: colorStyle }, successLoginLabel)));
 };
 
-const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:12px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>img{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background:transparent;border-radius:2px}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{background:#4745B7}100%{background:#CCCBF8}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
+const gatacaQrCss = "@import url(\"https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.brandSection{padding-top:5px;display:flex;align-items:center}.brandSection .gatacaImgSmall{height:13px;width:13px;margin:0;margin-right:10px}.popUpContainer .large-modal{width:300px;min-height:350px}.popUpContainer .modal-window{position:relative;border-radius:6px;overflow:hidden;color:rgba(24, 27, 94, 0.8);box-shadow:0px 3px 10px rgba(48, 48, 48, 0.1);display:flex;flex-direction:column;justify-content:space-between;align-items:center;display:flex;z-index:1001;padding:1px;background-color:white;border-radius:12px;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;visibility:hidden;opacity:0}.popUpContainer .modal-window__content{width:100%;height:100%;text-align:left}.popUpContainer .modal-window__content .hidenText{display:none}.popUpContainer .modal-window .modalText{font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px;margin-top:10px;letter-spacing:1px}.popUpContainer .modal-window .qrTitleContainer{padding:14px 24px;padding-bottom:0px}.popUpContainer .modal-window .qrTitle{font-size:20px;font-weight:600;line-height:23.5px}.popUpContainer .modal-window .qrDescription{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074}.popUpContainer .modal-window .bold{font-weight:700}.popUpContainer .modal-window .qrBrand{margin-top:4px;font-size:14px;font-weight:400;line-height:16.5px;display:flex;align-items:center}.popUpContainer .modal-window .qrBrand img{margin-left:5px;height:12px}.popUpContainer .modal-window .qr-section{width:252px;height:252px}.popUpContainer .noBoxShadow{box-shadow:none}.popUpContainer .is-visible{opacity:1;visibility:visible}.is-transparent{opacity:0}.success{display:flex;height:300px;flex-direction:column;justify-content:center;align-items:center;padding:0px}.success>img{padding-bottom:12px}.success>.successMsg{line-height:23.5px;color:var(--neutral-1000, #1e1e20);text-align:center;font-family:\"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:24px}.reload,.blured{height:252px;width:252px;border:1px dashed #a1a1a1;border-radius:20px;position:relative;top:24px;margin:0 24px 24px;display:flex;overflow:hidden;justify-content:center;align-items:center}#qrwait{display:flex;justify-content:center}#qrwait,#notify{width:100%;height:100%;top:0;left:0;border-radius:20px}#notify{z-index:10;position:absolute;justify-self:center;justify-items:center;justify-content:center;align-items:center;align-content:center;display:flex;flex-direction:column;box-sizing:border-box;padding:20px;background:rgba(255, 255, 255, 0.95)}#notify>svg{padding-bottom:12px}.alert{display:flex;flex-direction:row;justify-content:start;width:252px;position:absolute;bottom:0px;border:1px solid #ee888c;background:#ffdedf;border-radius:11px;box-sizing:border-box;padding:12px;align-items:center;gap:12px}.alert>img{margin:0}.alert>p{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;margin-top:0;line-height:16px;color:#1e1e20}.notify-text{font-family:\"Poppins\", \"Ubuntu\", \"Work Sans\", \"Helvetica Neue\", sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:16px;color:#707074;text-align:center}.containerLoader{display:flex;justify-content:center;align-items:center;width:30px;height:30px;margin-bottom:12px}.loader{position:relative;margin-left:0 !important}.loader__item{position:absolute;width:9.68px;height:4px;background-color:var(--loader-color, #4745B7);border-radius:2px;--to-opacity:1;opacity:var(--to-opacity)}.loader__item__1{transform:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-webkit-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-moz-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);-o-animation:translate(2.5846212025px, 5.4246212025px) rotate(45deg);--to-opacity:calc(1 - (0 / 8));animation:blink 0.8333333333s linear 0.1041666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.1041666667s infinite;-moz-animation:blink 0.8333333333s linear 0.1041666667s infinite;-o-animation:blink 0.8333333333s linear 0.1041666667s infinite}.loader__item__2{transform:translate(-4.84px, 8.5px) rotate(90deg);-webkit-animation:translate(-4.84px, 8.5px) rotate(90deg);-moz-animation:translate(-4.84px, 8.5px) rotate(90deg);-o-animation:translate(-4.84px, 8.5px) rotate(90deg);--to-opacity:calc(1 - (1 / 8));animation:blink 0.8333333333s linear 0.2083333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.2083333333s infinite;-moz-animation:blink 0.8333333333s linear 0.2083333333s infinite;-o-animation:blink 0.8333333333s linear 0.2083333333s infinite}.loader__item__3{transform:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-webkit-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-moz-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);-o-animation:translate(-12.2646212025px, 5.4246212025px) rotate(135deg);--to-opacity:calc(1 - (2 / 8));animation:blink 0.8333333333s linear 0.3125s infinite;-webkit-animation:blink 0.8333333333s linear 0.3125s infinite;-moz-animation:blink 0.8333333333s linear 0.3125s infinite;-o-animation:blink 0.8333333333s linear 0.3125s infinite}.loader__item__4{transform:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-webkit-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-moz-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);-o-animation:translate(-15.3399999992px, -1.9999999999px) rotate(180deg);--to-opacity:calc(1 - (3 / 8));animation:blink 0.8333333333s linear 0.4166666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.4166666667s infinite;-moz-animation:blink 0.8333333333s linear 0.4166666667s infinite;-o-animation:blink 0.8333333333s linear 0.4166666667s infinite}.loader__item__5{transform:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-webkit-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-moz-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);-o-animation:translate(-12.2646210959px, -9.4246211842px) rotate(225deg);--to-opacity:calc(1 - (4 / 8));animation:blink 0.8333333333s linear 0.5208333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.5208333333s infinite;-moz-animation:blink 0.8333333333s linear 0.5208333333s infinite;-o-animation:blink 0.8333333333s linear 0.5208333333s infinite}.loader__item__6{transform:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-webkit-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-moz-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);-o-animation:translate(-4.8399941857px, -12.499998805px) rotate(270deg);--to-opacity:calc(1 - (5 / 8));animation:blink 0.8333333333s linear 0.625s infinite;-webkit-animation:blink 0.8333333333s linear 0.625s infinite;-moz-animation:blink 0.8333333333s linear 0.625s infinite;-o-animation:blink 0.8333333333s linear 0.625s infinite}.loader__item__7{transform:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-webkit-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-moz-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);-o-animation:translate(2.5847915061px, -9.4245803212px) rotate(315deg);--to-opacity:calc(1 - (6 / 8));animation:blink 0.8333333333s linear 0.7291666667s infinite;-webkit-animation:blink 0.8333333333s linear 0.7291666667s infinite;-moz-animation:blink 0.8333333333s linear 0.7291666667s infinite;-o-animation:blink 0.8333333333s linear 0.7291666667s infinite}.loader__item__8{transform:translate(5.6631628524px, -1.99913122px) rotate(360deg);-webkit-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-moz-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);-o-animation:translate(5.6631628524px, -1.99913122px) rotate(360deg);--to-opacity:calc(1 - (7 / 8));animation:blink 0.8333333333s linear 0.8333333333s infinite;-webkit-animation:blink 0.8333333333s linear 0.8333333333s infinite;-moz-animation:blink 0.8333333333s linear 0.8333333333s infinite;-o-animation:blink 0.8333333333s linear 0.8333333333s infinite}.loader__item__8{max-width:8.5px}@keyframes blink{0%{opacity:1}100%{opacity:var(--to-opacity)}}@keyframes rotate{0%{transform:rotate(0deg)}100%{background:rotate(360deg)}}";
 
 const DEEP_LINK_PREFIX = 'https://api.gataca.io/qr/redirect.html';
 //Default values
@@ -236,7 +253,7 @@ const GatacaQR = class {
   renderQRSection() {
     switch (this.result) {
       case RESULT_STATUS.NOT_STARTED:
-        return this.renderRetryButton();
+        return this.renderQR(this.getLink(), true);
       case RESULT_STATUS.ONGOING:
         return this.renderQR(this.getLink(), true);
       case RESULT_STATUS.EXPIRED:
@@ -253,13 +270,13 @@ const GatacaQR = class {
     }
   }
   renderSuccess() {
-    return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel });
+    return h(Success, { modalHeight: this === null || this === void 0 ? void 0 : this.modalHeight, successLoginLabel: this === null || this === void 0 ? void 0 : this.successLoginLabel, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   renderRetryButton(errorMessage) {
-    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this) }));
+    return (h(RetryButton, { errorMessage: errorMessage, modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, clickInsideBoxLabel: this === null || this === void 0 ? void 0 : this.clickInsideBoxLabel, refreshQrLabel: this === null || this === void 0 ? void 0 : this.refreshQrLabel, scanQrLabel: this === null || this === void 0 ? void 0 : this.scanQrLabel, waitingStartSessionLabel: this === null || this === void 0 ? void 0 : this.waitingStartSessionLabel, display: this.display.bind(this), renderRetryQR: this.renderRetryQR.bind(this), style: this === null || this === void 0 ? void 0 : this.qrStyle }));
   }
   renderReadQR(readQrMessages) {
-    return h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this) });
+    return (h(ReadQR, { modalWidth: this === null || this === void 0 ? void 0 : this.modalWidth, readQrMessages: readQrMessages, url: this.getLink(), sizeQR: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, renderQR: this.renderQR.bind(this), style: this.qrStyle }));
   }
   renderQR(value, useLogo, sizeQR) {
     return h(QR, { value: value, qrType: this.qrType, useLogo: useLogo && this.logoSize !== 0, size: sizeQR || (this === null || this === void 0 ? void 0 : this.qrSize) || undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
@@ -268,15 +285,17 @@ const GatacaQR = class {
     return h(QR, { value: value, useLogo: useLogo && this.logoSize !== 0, qrType: this.qrType, size: (this === null || this === void 0 ? void 0 : this.qrSize) ? (this === null || this === void 0 ? void 0 : this.qrSize) - 50 : undefined, logoSrc: this === null || this === void 0 ? void 0 : this.logoSrc, style: this === null || this === void 0 ? void 0 : this.qrStyle });
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     return (h("div", { class: "popUpContainer" }, h("div", { class: `is-visible modal-window ${this.hideModalTexts ? '' : 'large-modal'} ${this.hideModalBoxShadow ? 'noBoxShadow' : ''}`, style: {
         width: (this.modalWidth - 2).toString() + 'px',
-        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : ''
+        height: this.modalHeight ? ((_a = (this.modalHeight - 2)) === null || _a === void 0 ? void 0 : _a.toString()) + 'px' : '',
+        backgroundColor: ((_b = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _b === void 0 ? void 0 : _b.bgColor) ? (_c = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _c === void 0 ? void 0 : _c.bgColor : 'white',
+        boxShadow: ((_d = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _d === void 0 ? void 0 : _d.boxShadow) ? (_e = this === null || this === void 0 ? void 0 : this.qrStyle) === null || _e === void 0 ? void 0 : _e.boxShadow : '0px 3px 10px rgba(48, 48, 48, 0.1);'
       }, onClick: (event) => {
         event.stopPropagation();
       } }, h("div", { class: "modal-window__content" }, h("div", { class: `qrTitleContainer ${this.hideModalTexts ? 'hidenText' : ''}` }, h("p", { class: "qrTitle modalText", style: { color: this.modalTitleColor || '#1e1e20' } }, this.qrModalTitle), !this.hideBrandTitle && (h("p", { class: "qrBrand modalText" }, this.byBrandLabel, ' ', h("span", null, h("img", { src: logoGatacaSvg })))), this.result !== RESULT_STATUS.SUCCESS && !this.hideQrModalDescription && h("p", { class: "qrDescription modalText" }, this.qrModalDescription)), h("div", { class: "qrSection", style: {
         width: this.modalWidth.toString() + 'px',
-        height: this.modalWidth ? ((_b = this.modalWidth) === null || _b === void 0 ? void 0 : _b.toString()) + 'px' : ''
+        height: this.modalWidth ? ((_f = this.modalWidth) === null || _f === void 0 ? void 0 : _f.toString()) + 'px' : ''
       } }, this.renderQRSection())))));
   }
 };

package/dist/esm/gataca-qrws.entry.js

@@ -1,5 +1,5 @@
-import { h, r as registerInstance, c as createEvent } from './index-2be54f32.js';
-import { b as gatIconCheckSvg, g as gatIconRefreshSvg, a as gatIconAlertSvg, l as logoGatacaSvg } from './gat-icon-check-c188cd29.js';
+import { h, r as registerInstance, c as createEvent } from './index-055790a7.js';
+import { a as gatIconCheckSvg, g as gatIconAlertSvg, l as logoGatacaSvg } from './gat-icon-check-7320c81b.js';
 import { R as RESULT_STATUS, c as checkMobile, b as base64UrlEncode } from './utils-21ffcc1e.js';
 
 const Success = (props) => {
@@ -11,6 +11,8 @@ const Success = (props) => {
     h("p", { class: "successMsg" }, successLoginLabel)));
 };
 
+const gatIconRefreshSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzIDRWMTBIMTciIHN0cm9rZT0iIzhCOEI4QiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTIwLjQ4OTkgMTVDMTkuODM5OSAxNi44Mzk5IDE4LjYwOTQgMTguNDE4NyAxNi45ODQgMTkuNDk4NUMxNS4zNTg2IDIwLjU3ODMgMTMuNDI2MyAyMS4xMDA2IDExLjQ3ODMgMjAuOTg2NkM5LjUzMDI2IDIwLjg3MjYgNy42NzIwMyAyMC4xMjg2IDYuMTgzNjMgMTguODY2N0M0LjY5NTI0IDE3LjYwNDcgMy42NTczIDE1Ljg5MzIgMy4yMjYyNSAxMy45OTAxQzIuNzk1MTkgMTIuMDg2OSAyLjk5NDM2IDEwLjA5NTIgMy43OTM3NCA4LjMxNTA4QzQuNTkzMTMgNi41MzQ5NiA1Ljk0OTQyIDUuMDYyODggNy42NTgyMyA0LjEyMDY1QzkuMzY3MDUgMy4xNzg0MyAxMS4zMzU4IDIuODE3MTEgMTMuMjY3OCAzLjA5MTE2QzE1LjE5OTkgMy4zNjUyIDE2Ljk5MDUgNC4yNTk3NSAxOC4zNjk5IDUuNjQwMDFMMjIuOTk5OSAxMCIgc3Ryb2tlPSIjOEI4QjhCIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';
+
 const RetryButton = (props) => {
   var _a;
   const { errorMessage, modalWidth, clickInsideBoxLabel, refreshQrLabel, scanQrLabel, waitingStartSessionLabel, display, renderRetryQR } = props;

package/dist/esm/gataca-ssibuttonws.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-2be54f32.js';
+import { r as registerInstance, c as createEvent, h } from './index-055790a7.js';
 
 const gatacaSsibuttonwsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.buttonContainer{display:inline-block;text-align:right;padding:10px;position:relative}.gatacaButtonWrapper{margin:8px}.gatacaButtonWrapper .gatacaButton{display:flex;min-width:100px;padding:8px 8px;background-color:white;font-size:12px;font-family:\"Work Sans\", sans-serif;letter-spacing:1px;font-weight:2;justify-content:space-between;align-items:center;border-radius:6px;border:1px solid rgba(24, 27, 94, 0.5);color:rgba(24, 27, 94, 0.8);box-shadow:0px 1px 3px rgba(48, 48, 48, 0.15);cursor:pointer}.gatacaButtonWrapper .gatacaButton>span{margin-right:10px}.gatacaButtonWrapper .gatacaButton:hover{box-shadow:0px 2px 8px rgba(48, 48, 48, 0.1)}.gatacaButtonWrapper .buttonText{text-align:right;font-size:8px;color:rgba(24, 27, 94, 0.5);font-family:\"Helvetica Neue\", sans-serif;letter-spacing:1px;padding-right:8px;font-weight:1}.gatacaButtonWrapper .buttonImg{height:25px;width:25px;margin:0;margin-right:20px}";
 

package/dist/esm/gatacaqr.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-2be54f32.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-055790a7.js';
 
 /*
  Stencil Client Patch Browser v2.19.3 | MIT Licensed | https://stenciljs.com