@unissey-web/sdk-react 5.4.0 → 5.5.0-rc.1

package/dist/index.d.ts

@@ -68,6 +68,7 @@ declare const RecorderWithoutVersion: _lit_labs_react.ReactWebComponent<Recorder
     onRecordInterrupted: string;
     onRecordCompleted: string;
     onActiveChallenge: string;
+    onNotification: string;
 }>;
 type RecorderProps = React.ComponentProps<typeof RecorderWithoutVersion>;
 declare const VideoRecorder: React.ForwardRefExoticComponent<RecorderProps & React.RefAttributes<Recorder>>;

package/dist/index.js

@@ -316,7 +316,7 @@ var t;const i=window,s$1=i.trustedTypes,e$3=s$1?s$1.createPolicy("lit-html",{cre
  * SPDX-License-Identifier: BSD-3-Clause
  */var l$3,o$4;let s$4 = class s extends u$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=D$1(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1);}render(){return T$1}};s$4.finalized=!0,s$4._$litElement$=!0,null===(l$3=globalThis.litElementHydrateSupport)||void 0===l$3||l$3.call(globalThis,{LitElement:s$4});const n$4=globalThis.litElementPolyfillSupport;null==n$4||n$4({LitElement:s$4});(null!==(o$4=globalThis.litElementVersions)&&void 0!==o$4?o$4:globalThis.litElementVersions=[]).push("3.3.3");
 
-var _templateObject$j, _templateObject2$a, _templateObject3$6, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject0$5, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75;
+var _templateObject$j, _templateObject2$a, _templateObject3$6, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject0$5, _templateObject1$5, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60, _templateObject61, _templateObject62, _templateObject63, _templateObject64, _templateObject65, _templateObject66, _templateObject67, _templateObject68, _templateObject69, _templateObject70, _templateObject71, _templateObject72, _templateObject73, _templateObject74, _templateObject75, _templateObject76, _templateObject77;
 var recorderVars = {
   borderRadius: i$1(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["var(--uni-recorder-border-radius, 10px)"]))),
   buttonsMargin: i$1(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["var(--uni-recorder-buttons-margin, 30px 0)"]))),
@@ -375,42 +375,44 @@ var fileUploadVars = {
   width: i$1(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["var(--uni-file-upload-width, 80%)"]))),
   height: i$1(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["var(--uni-file-upload-height, 80%)"]))),
   border: i$1(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["var(--uni-file-upload-border, dashed 2px #eee)"]))),
-  backgroundColor: i$1(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["var(--uni-file-upload-bg-color, #fafafa)"]))),
-  textColor: i$1(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-color, #ccc)"]))),
-  textFontSize: i$1(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-font-size, 20px)"]))),
-  errorTextColor: i$1(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-color, #333)"]))),
-  errorTextFontSize: i$1(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-font-size, 16px)"])))
+  focusOutline: i$1(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["var(--uni-file-upload-focus-outline, 2px solid #3b54f0)"]))),
+  backgroundColor: i$1(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["var(--uni-file-upload-bg-color, #fafafa)"]))),
+  textColor: i$1(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-color, #ccc)"]))),
+  textFontSize: i$1(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["var(--uni-file-upload-txt-font-size, 20px)"]))),
+  errorTextColor: i$1(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-color, #333)"]))),
+  errorTextFontSize: i$1(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["var(--uni-file-upload-err-txt-font-size, 16px)"])))
 };
 var buttonsVars = {
-  padding: i$1(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["var(--uni-btn-padding, 8px 15px)"]))),
-  border: i$1(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["var(--uni-btn-border, solid 1px)"]))),
-  borderRadius: i$1(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["var(--uni-btn-border-radius, 7px)"]))),
-  fontSize: i$1(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["var(--uni-btn-font-size, 14px)"]))),
-  textTransform: i$1(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["var(--uni-btn-text-transform, normal)"]))),
-  outlinedBorders: i$1(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["var(--uni-btn-border-outlined, solid 1px)"]))),
-  btnLabelMargin: i$1(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["var(--uni-btn-label-margin, 10px 0px)"]))),
-  btnDisabledBgColor: i$1(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["var(--uni-btn-disabled-bg-color, #eee)"]))),
-  smWidth: i$1(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["var(--uni-btn-sm-width, 250px)"])))
+  padding: i$1(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["var(--uni-btn-padding, 8px 15px)"]))),
+  border: i$1(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["var(--uni-btn-border, solid 1px)"]))),
+  borderRadius: i$1(_templateObject54 || (_templateObject54 = _taggedTemplateLiteral(["var(--uni-btn-border-radius, 7px)"]))),
+  fontSize: i$1(_templateObject55 || (_templateObject55 = _taggedTemplateLiteral(["var(--uni-btn-font-size, 14px)"]))),
+  focusOutline: i$1(_templateObject56 || (_templateObject56 = _taggedTemplateLiteral(["var(--uni-btn-focus-outline, 3px solid #3b54f0)"]))),
+  textTransform: i$1(_templateObject57 || (_templateObject57 = _taggedTemplateLiteral(["var(--uni-btn-text-transform, normal)"]))),
+  outlinedBorders: i$1(_templateObject58 || (_templateObject58 = _taggedTemplateLiteral(["var(--uni-btn-border-outlined, solid 1px)"]))),
+  btnLabelMargin: i$1(_templateObject59 || (_templateObject59 = _taggedTemplateLiteral(["var(--uni-btn-label-margin, 10px 0px)"]))),
+  btnDisabledBgColor: i$1(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["var(--uni-btn-disabled-bg-color, #eee)"]))),
+  smWidth: i$1(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["var(--uni-btn-sm-width, 250px)"])))
 };
 var directionCardsVars = {
-  padding: i$1(_templateObject60 || (_templateObject60 = _taggedTemplateLiteral(["var(--uni-card-padding, 8px 4%)"]))),
-  margin: i$1(_templateObject61 || (_templateObject61 = _taggedTemplateLiteral(["var(--uni-card-margin, 0px)"]))),
-  width: i$1(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["var(--uni-card-width, 92%)"]))),
-  radius: i$1(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["var(--uni-card-border-radius, 20px)"]))),
-  fontSize: i$1(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["var(--uni-card-font-size, 16px)"]))),
-  fontWeight: i$1(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["var(--uni-card-font-weight, normal)"]))),
-  textMarginLeft: i$1(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["var(--uni-card-text-margin-left, 25px)"]))),
-  iconHeight: i$1(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["var(--uni-card-icon-height, 55px)"]))),
-  iconWidth: i$1(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["var(--uni-card-icon-width, auto)"]))),
-  backgroundColor: i$1(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["var(--uni-card-bg-color, #f2f5f8)"])))
+  padding: i$1(_templateObject62 || (_templateObject62 = _taggedTemplateLiteral(["var(--uni-card-padding, 8px 4%)"]))),
+  margin: i$1(_templateObject63 || (_templateObject63 = _taggedTemplateLiteral(["var(--uni-card-margin, 0px)"]))),
+  width: i$1(_templateObject64 || (_templateObject64 = _taggedTemplateLiteral(["var(--uni-card-width, 92%)"]))),
+  radius: i$1(_templateObject65 || (_templateObject65 = _taggedTemplateLiteral(["var(--uni-card-border-radius, 20px)"]))),
+  fontSize: i$1(_templateObject66 || (_templateObject66 = _taggedTemplateLiteral(["var(--uni-card-font-size, 16px)"]))),
+  fontWeight: i$1(_templateObject67 || (_templateObject67 = _taggedTemplateLiteral(["var(--uni-card-font-weight, normal)"]))),
+  textMarginLeft: i$1(_templateObject68 || (_templateObject68 = _taggedTemplateLiteral(["var(--uni-card-text-margin-left, 25px)"]))),
+  iconHeight: i$1(_templateObject69 || (_templateObject69 = _taggedTemplateLiteral(["var(--uni-card-icon-height, 55px)"]))),
+  iconWidth: i$1(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["var(--uni-card-icon-width, auto)"]))),
+  backgroundColor: i$1(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["var(--uni-card-bg-color, #f2f5f8)"])))
 };
 var retryResultVars = {
-  retriesColor: i$1(_templateObject70 || (_templateObject70 = _taggedTemplateLiteral(["var(--uni-retry-result-retries-color, grey)"]))),
-  fontSizeMd: i$1(_templateObject71 || (_templateObject71 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-md, 22px)"]))),
-  lineHeightMd: i$1(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-md, 24px)"]))),
-  fontSizeSm: i$1(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-sm, 16px)"]))),
-  lineHeightSm: i$1(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-sm, 18px)"]))),
-  iconWidth: i$1(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["var(--uni-retry-result-icon-width, 150px)"])))
+  retriesColor: i$1(_templateObject72 || (_templateObject72 = _taggedTemplateLiteral(["var(--uni-retry-result-retries-color, grey)"]))),
+  fontSizeMd: i$1(_templateObject73 || (_templateObject73 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-md, 22px)"]))),
+  lineHeightMd: i$1(_templateObject74 || (_templateObject74 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-md, 24px)"]))),
+  fontSizeSm: i$1(_templateObject75 || (_templateObject75 = _taggedTemplateLiteral(["var(--uni-retry-result-font-size-sm, 16px)"]))),
+  lineHeightSm: i$1(_templateObject76 || (_templateObject76 = _taggedTemplateLiteral(["var(--uni-retry-result-line-height-sm, 18px)"]))),
+  iconWidth: i$1(_templateObject77 || (_templateObject77 = _taggedTemplateLiteral(["var(--uni-retry-result-icon-width, 150px)"])))
 };
 
 var _templateObject$i, _templateObject2$9, _templateObject3$5, _templateObject4$5, _templateObject5$5;
@@ -450,7 +452,7 @@ Button$1.properties = {
     type: Boolean
   }
 };
-Button$1.styles = i$1(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n    @media screen and (max-width: 576px) {\n      .btn {\n        width: ", ";\n      }\n    }\n\n    :host {\n    }\n\n    .btn {\n      display: inline-block;\n      align-items: center;\n      vertical-align: top;\n      padding: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n      font-size: ", ";\n      text-transform: ", ";\n    }\n\n    .btn:hover {\n      background-color: ", ";\n    }\n\n    .btn:disabled {\n      cursor: default;\n      background-color: ", ";\n      border-color: ", ";\n    }\n\n    .btn-outlined {\n      color: ", ";\n      background-color: ", ";\n      border: ", ";\n    }\n\n    .btn-outlined:hover {\n      background-color: ", ";\n    }\n\n    .box {\n      display: block;\n      text-align: center;\n    }\n\n    .label {\n      margin: 0 10px;\n    }\n\n    .item-center {\n      display: inline-block;\n      vertical-align: middle;\n    }\n  "])), buttonsVars.smWidth, buttonsVars.padding, buttonsVars.border, defaultVars.colors.primary, buttonsVars.borderRadius, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.fontSize, buttonsVars.textTransform, defaultVars.colors.primaryLighter, buttonsVars.btnDisabledBgColor, buttonsVars.btnDisabledBgColor, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.outlinedBorders, buttonsVars.btnDisabledBgColor);
+Button$1.styles = i$1(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n    @media screen and (max-width: 576px) {\n      .btn {\n        width: ", ";\n      }\n    }\n\n    :host {\n    }\n\n    .btn {\n      display: inline-block;\n      align-items: center;\n      vertical-align: top;\n      padding: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n      font-size: ", ";\n      text-transform: ", ";\n    }\n\n    .btn:hover {\n      background-color: ", ";\n    }\n\n    .btn:focus {\n      outline: ", ";\n    }\n\n    .btn:disabled {\n      cursor: default;\n      background-color: ", ";\n      border-color: ", ";\n    }\n\n    .btn-outlined {\n      color: ", ";\n      background-color: ", ";\n      border: ", ";\n    }\n\n    .btn-outlined:hover {\n      background-color: ", ";\n    }\n\n    .box {\n      display: block;\n      text-align: center;\n    }\n\n    .label {\n      margin: 0 10px;\n    }\n\n    .item-center {\n      display: inline-block;\n      vertical-align: middle;\n    }\n  "])), buttonsVars.smWidth, buttonsVars.padding, buttonsVars.border, defaultVars.colors.primary, buttonsVars.borderRadius, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.fontSize, buttonsVars.textTransform, defaultVars.colors.primaryLighter, buttonsVars.focusOutline, buttonsVars.btnDisabledBgColor, buttonsVars.btnDisabledBgColor, defaultVars.colors.primary, defaultVars.colors.white, buttonsVars.outlinedBorders, buttonsVars.btnDisabledBgColor);
 customElements.define("uni-button", Button$1);
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -459,6 +461,20 @@ function commonjsRequire (path) {
 	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
 
+var KEY_ENTER = "Enter";
+var KEY_SPACE = "Space";
+
+//add new isMobileDevice() function from sdk-js;
+function isMobileDevice() {
+  var navigator = window.navigator;
+  var check = false;
+  (function (a) {
+    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
+    // @ts-ignore  ('window.opera' is not officially defined. Actually only on Opera.)
+  })(navigator.userAgent || navigator.vendor || window.opera);
+  return check;
+}
+
 var imageCaptureDirections$1 = {
   document: "Take a picture of your ID document",
   face: "Position your document so that your face is clearly visible",
@@ -510,10 +526,18 @@ var videoRecorder$1 = {
   },
   rotationWhileCapturingErrorMessage: "Please don't rotate the device during acquisition.",
   activeChallengeMessages: {
-    rotateLeft: 'Turn head to the <strong font-size: 18px">left</strong>',
-    rotateRight: 'Turn head to the <strong font-size: 18px">right</strong>',
-    rotateUp: 'Turn head <strong font-size: 18px">up</strong>',
-    rotateDown: 'Turn head <strong font-size: 18px">down</strong>'
+    rotateLeft: 'Turn head to the <strong style="font-size: 18px">left</strong>',
+    rotateRight: 'Turn head to the <strong style="font-size: 18px">right</strong>',
+    rotateUp: 'Turn head <strong style="font-size: 18px">up</strong>',
+    rotateDown: 'Turn head <strong style="font-size: 18px">down</strong>'
+  },
+  accessibility: {
+    flipCamera: "Switch camera",
+    turnLeft: "Turn left",
+    turnRight: "Turn right",
+    turnUp: "Turn up",
+    turnDown: "Turn down",
+    videoFeed: "Camera feed for identity verification"
   }
 };
 var pictureRecorder$1 = {
@@ -577,13 +601,13 @@ var EN = {
 };
 
 var name$1 = "@unissey-web/web-components";
-var version$1 = "5.4.0";
+var version$1 = "5.5.0-rc.1";
 var description$1 = "";
 var module$1 = "./dist/index.js";
 var typings$1 = "./dist/index.d.ts";
 var scripts$1 = {
 	dev: "start-storybook -p 6006 --ci --https --ssl-cert https/certificate.crt --ssl-key https/privateKey.key",
-	"dev:server": "rimraf ./dev-server/dist && rollup --config rollup.dev.mjs",
+	"dev:server": "rimraf ./dev-server/dist && rollup --config rollup.dev.mjs --silent --watch",
 	"build:base": "npm run build:types && npm run build:pkg",
 	"build:types": "tsc",
 	"build:pkg": "rimraf dist && rimraf dist-iife && rollup --config --silent",
@@ -644,7 +668,7 @@ var buildPacked = {exports: {}};
 }(buildPacked, buildPacked.exports));
 
 var _templateObject$g;
-var cameraStyle = i$1(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  .container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    width: ", ";\n  }\n\n  .hints,\n  .instructions,\n  .errors,\n  .flip-icon-container,\n  .face-hints {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .face-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .top-hints {\n    margin-bottom: 20px;\n  }\n\n  .bottom-hints {\n    margin-top: 20px;\n    min-height: 18px;\n  }\n\n  .spinner {\n    z-index: -1;\n    width: 100%;\n    height: 400px;\n  }\n\n  .flip-icon-container {\n    z-index: 6;\n  }\n\n  .flip-icon {\n    position: absolute;\n    bottom: 5%;\n    left: 5d%;\n  }\n\n  .hints {\n    z-index: 3;\n  }\n\n  .instructions {\n    z-index: 4;\n  }\n\n  .errors {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 3;\n\n    border-radius: 10px;\n  }\n\n  .errors .message {\n    display: inline-block;\n    width: 70%;\n    background-color: ", ";\n    color: var(--uni-light-color, #fff);\n    padding: 7px 15px;\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .item-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .buttons {\n    text-align: center;\n    width: 100%;\n\n    margin: ", ";\n  }\n\n  .buttons-item {\n    display: inline-block;\n    padding: 7px;\n  }\n\n  .ac-arrow-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .ac-arrow-hint {\n    position: absolute;\n    bottom: -40%;\n    transform: scale(0.65);\n    width: 100%;\n    height: 100%;\n    object-fit: none;\n    overflow: visible;\n    display: block;\n  }\n\n  @media screen and (max-width: 576px) {\n    .buttons-item {\n      width: 95%;\n    }\n\n    .buttons {\n      margin-top: 15px;\n    }\n  }\n"])), recorderVars.videoWidth, defaultVars.colors.error, recorderVars.buttonsMargin);
+var cameraStyle = i$1(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n  .container {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .wrapper {\n    position: relative;\n    top: 0;\n    left: 0;\n    width: ", ";\n  }\n\n  .hints,\n  .instructions,\n  .errors,\n  .flip-icon-container,\n  .face-hints {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .face-hints {\n    width: 100%;\n    height: 100%;\n    z-index: 5;\n  }\n\n  .top-hints {\n    margin-bottom: 20px;\n  }\n\n  .bottom-hints {\n    margin-top: 20px;\n    min-height: 18px;\n  }\n\n  .spinner {\n    z-index: -1;\n    width: 100%;\n    height: 400px;\n  }\n\n  .flip-icon-container {\n    z-index: 6;\n  }\n\n  .flip-icon {\n    position: absolute;\n    bottom: 5%;\n    left: 5%;\n    min-width: 44px;\n    min-height: 44px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n\n  .hints {\n    z-index: 3;\n  }\n\n  .instructions {\n    z-index: 4;\n  }\n\n  .errors {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    z-index: 3;\n\n    border-radius: 10px;\n  }\n\n  .errors .message {\n    display: inline-block;\n    width: 70%;\n    background-color: ", ";\n    color: var(--uni-light-color, #fff);\n    padding: 7px 15px;\n    border-radius: 5px;\n    text-align: center;\n  }\n\n  .item-center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .buttons {\n    text-align: center;\n    width: 100%;\n\n    margin: ", ";\n  }\n\n  .buttons-item {\n    display: inline-block;\n    padding: 7px;\n  }\n\n  .ac-arrow-container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .ac-arrow-hint {\n    position: absolute;\n    bottom: -40%;\n    transform: scale(0.65);\n    width: 100%;\n    height: 100%;\n    object-fit: none;\n    overflow: visible;\n    display: block;\n  }\n\n  @media screen and (max-width: 576px) {\n    .buttons-item {\n      width: 95%;\n    }\n\n    .buttons {\n      margin-top: 15px;\n    }\n  }\n"])), recorderVars.videoWidth, defaultVars.colors.error, recorderVars.buttonsMargin);
 
 var _templateObject$f;
 var fadeAnimation = i$1(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n  @keyframes fade {\n    from {\n      width: 25px;\n      margin-left: 0%;\n      margin-top: 0%;\n      opacity: 1;\n    }\n    to {\n      width: 30px;\n      margin-left: -2%;\n      margin-top: -2%;\n      opacity: 0;\n    }\n  }\n\n  .icon {\n    width: 25px;\n    animation-name: fade;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n"])));
@@ -1011,17 +1035,6 @@ var FlipCameraIcon = /*#__PURE__*/function (_LitElement) {
 }(s$4);
 customElements.define("uni-flip-camera-icon", FlipCameraIcon);
 
-//add new isMobileDevice() function from sdk-js;
-function isMobileDevice() {
-  var navigator = window.navigator;
-  var check = false;
-  (function (a) {
-    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4))) check = true;
-    // @ts-ignore  ('window.opera' is not officially defined. Actually only on Opera.)
-  })(navigator.userAgent || navigator.vendor || window.opera);
-  return check;
-}
-
 var TICK_MS = 50;
 var ProgressBarSequencer = /*#__PURE__*/function () {
   function ProgressBarSequencer(options) {
@@ -1156,6 +1169,80 @@ var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECA
 
 var img = "data:image/png;base64,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";
 
+/**
+ * This class ensures that a stream of continuous notifications is processed at a controlled rate, preventing rapid-fire announcements.
+ * - When a notification is being processed (i.e., the calculated delay is running), any new notification overwrites the buffered item, effectively discarding intermediate events.
+ * - Processing for the next notification only begins after the full delay of the previous one has completed.
+ * - Dispatches an 'onNotification' event when the system is free.
+ */
+var NotificationThrottler = /*#__PURE__*/function () {
+  /**
+   * @param notificationCallback The function that executes UI changes
+   * @param readRate The time in milliseconds (ms) estimated to read one character.
+   * @param targetElement The HTML element to dispatch the 'onNotification' event from.
+   */
+  function NotificationThrottler(notificationCallback) {
+    var _this = this;
+    var readRate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+    var targetElement = arguments.length > 2 ? arguments[2] : undefined;
+    _classCallCheck(this, NotificationThrottler);
+    this.nextNotification = null;
+    this.isProcessing = false;
+    this.readRate = void 0;
+    this.notificationCallback = void 0;
+    this.targetElement = void 0;
+    this.processCycleEnd = function () {
+      if (_this.nextNotification === null) {
+        _this.isProcessing = false;
+      } else {
+        var _notification = _this.nextNotification;
+        _this.nextNotification = null;
+        _this.execAndDelay(_notification).then(_this.processCycleEnd);
+      }
+    };
+    this.notificationCallback = notificationCallback;
+    this.readRate = readRate;
+    this.targetElement = targetElement;
+  }
+  return _createClass(NotificationThrottler, [{
+    key: "setReadRate",
+    value: function setReadRate(rate) {
+      this.readRate = rate;
+    }
+  }, {
+    key: "execAndDelay",
+    value: function execAndDelay(notification) {
+      var duration = this.readRate * notification.message.length;
+      this.notificationCallback(notification);
+      this.targetElement.dispatchEvent(new CustomEvent("onNotification", {
+        detail: notification
+      }));
+      return new Promise(function (resolve) {
+        setTimeout(resolve, duration);
+      });
+    }
+  }, {
+    key: "getIsProcessing",
+    value: function getIsProcessing() {
+      return this.isProcessing;
+    }
+
+    /**
+     * Receive continuous event data.
+     */
+  }, {
+    key: "sendNotification",
+    value: function sendNotification(notification) {
+      if (this.isProcessing) {
+        this.nextNotification = notification;
+      } else {
+        this.isProcessing = true;
+        this.execAndDelay(notification).then(this.processCycleEnd);
+      }
+    }
+  }]);
+}();
+
 var _templateObject$h, _templateObject2$8, _templateObject3$4, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$4, _templateObject8$4;
 var Recorder = /*#__PURE__*/function (_LitElement) {
   function Recorder() {
@@ -1195,7 +1282,10 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.disconnected = false;
     _this.initSessionInprogress = false;
     // Indicate which hint to display on recorder screen
+    // It is a state variable, so it triggers a re render on change
     _this.hints = "nil";
+    // It is a class variable, that does not trigger a re render
+    _this.internalHints = void 0;
     // Error message
     _this.error = "";
     // Indicate if a record session is running
@@ -1217,6 +1307,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.acActiveActionIndex = 0;
     _this.acNumberOfActions = 0;
     _this.acProgressBarValues = [];
+    _this.notificationThrotler = void 0;
     _this.sdkJsListener_status = function (status) {
       var _this$shadowRoot, _this$shadowRoot2;
       _this.sdkJsStatus = status;
@@ -1251,18 +1342,25 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     _this.sdkJsListener_faceInfo = function (type, value) {
       switch (type) {
         case buildPacked.exports.FaceInfoType.BAD_POS:
-          _this.handleBadFacePos(value);
+          _this.internalHints = _this.handleBadFacePos(value);
           break;
         case buildPacked.exports.FaceInfoType.TOO_FAR:
-          _this.hints = "closer";
+          _this.internalHints = "closer";
           break;
         case buildPacked.exports.FaceInfoType.GOOD_POS:
-          _this.hints = "perfect";
+          _this.internalHints = "perfect";
           break;
         case buildPacked.exports.FaceInfoType.FACE_VALID:
-          _this.hints = "record";
+          _this.internalHints = "record";
           break;
       }
+      if (_this.internalHints) {
+        var message = _this.getString(["hints", _this.internalHints]);
+        if (message) _this.notificationThrotler.sendNotification({
+          type: "info",
+          message: message
+        });
+      }
     };
     _this.handleError = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
       var _this$shadowRoot3, _this$session;
@@ -1288,7 +1386,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
     }));
     _this.sdkJsListener_issue = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(type, value) {
-        var forbiddenActionMessages, cameraErrorMessages, _t;
+        var forbiddenActionMessages, cameraErrorMessages, message, _t;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.n) {
             case 0:
@@ -1302,37 +1400,42 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
                 "1": _this.getString(["cameraErrorMessages", "permissionDenied"]),
                 "2": _this.getString(["cameraErrorMessages", "openFailed"])
               };
+              message = undefined;
               _t = type;
               _context2.n = _t === buildPacked.exports.IssueType.NO_FACE ? 1 : _t === buildPacked.exports.IssueType.FORBIDDEN_ACTION ? 2 : _t === buildPacked.exports.IssueType.CAMERA_ERROR ? 3 : _t === buildPacked.exports.IssueType.MOVE ? 4 : _t === buildPacked.exports.IssueType.UNSUPPORTED_FACE_DETECTOR ? 5 : 6;
               break;
             case 1:
-              _this.displayError(_this.getString(["errors", "noFace"]));
+              message = _this.getString(["errors", "noFace"]);
               _this.faceDetectionFails = true;
               return _context2.a(3, 6);
             case 2:
               if (Object.keys(forbiddenActionMessages).includes("".concat(value))) {
-                _this.displayError(forbiddenActionMessages["".concat(value)]);
+                message = forbiddenActionMessages["".concat(value)];
               } else {
-                _this.displayError(_this.getString(["forbiddenActionMessages", "default"]));
+                message = _this.getString(["forbiddenActionMessages", "default"]);
               }
               return _context2.a(3, 6);
             case 3:
               if (Object.keys(cameraErrorMessages).includes("".concat(value))) {
-                _this.displayError(cameraErrorMessages["".concat(value)]);
+                message = cameraErrorMessages["".concat(value)];
               } else {
-                _this.displayError(_this.getString(["cameraErrorMessages", "default"]));
+                message = _this.getString(["cameraErrorMessages", "default"]);
               }
               return _context2.a(3, 6);
             case 4:
               if (value === 7) {
-                _this.displayError(_this.getString(["rotationWhileCapturingErrorMessage"]));
+                message = _this.getString(["rotationWhileCapturingErrorMessage"]);
               }
               return _context2.a(3, 6);
             case 5:
-              _this.displayError(_this.getString(["errors", "unsupportedFaceDetector"]));
+              message = _this.getString(["errors", "unsupportedFaceDetector"]);
               return _context2.a(3, 6);
             case 6:
               if (_this.acSequenceStarted) _this.acSequenceStarted = false;
+              if (message) _this.notificationThrotler.sendNotification({
+                type: "error",
+                message: message
+              });
               _context2.n = 7;
               return _this.handleError();
             case 7:
@@ -1440,6 +1543,15 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
       };
     }();
     _this.addEventListener("startCapture", _this.capture.bind(_this));
+    var DEFAULT_READ_RATE = 100; // ms
+
+    _this.notificationThrotler = new NotificationThrottler(function (notification) {
+      if (notification.type === "error") {
+        _this.displayError(notification.message);
+      } else if (_this.internalHints) {
+        _this.hints = _this.internalHints;
+      }
+    }, DEFAULT_READ_RATE, _this);
     return _this;
   }
   _inherits(Recorder, _LitElement);
@@ -1593,6 +1705,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "updated",
     value: function updated(_changedProperties) {
+      var _this$getString, _this$getString2, _this$getString3, _this$getString4;
       var presetChanged = _changedProperties.has("preset");
       var configChanged = _changedProperties.has("config");
       var faceCheckerChanged = _changedProperties.has("faceChecker");
@@ -1613,16 +1726,16 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         if (_container) {
           switch (this.acCurrentAction) {
             case "left":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img$3, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString = this.getString(["accessibility", "turnLeft"])) !== null && _this$getString !== void 0 ? _this$getString : "Turn left", "\" src=").concat(img$3, " />");
               break;
             case "right":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img$2, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString2 = this.getString(["accessibility", "turnRight"])) !== null && _this$getString2 !== void 0 ? _this$getString2 : "Turn right", "\" src=").concat(img$2, " />");
               break;
             case "up":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img$1, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString3 = this.getString(["accessibility", "turnUp"])) !== null && _this$getString3 !== void 0 ? _this$getString3 : "Turn up", "\" src=").concat(img$1, " />");
               break;
             case "down":
-              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"Arrow\" src=".concat(img, " />");
+              _container.innerHTML = "<img class=\"ac-arrow-hint\" alt=\"".concat((_this$getString4 = this.getString(["accessibility", "turnDown"])) !== null && _this$getString4 !== void 0 ? _this$getString4 : "Turn down", "\" src=").concat(img, " />");
               break;
             default:
               _container.innerHTML = "";
@@ -1645,6 +1758,10 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         _this$config$iadConfi2,
         _this2 = this;
       _superPropGet(Recorder, "connectedCallback", this, 3)([]);
+      var readRate = this.getAttribute("read-rate");
+      if (readRate !== null && !isNaN(Number(readRate))) {
+        this.notificationThrotler.setReadRate(Number(readRate));
+      }
       this.disconnected = false;
       this.initSdkJs();
       this.sequencer = new ProgressBarSequencer({
@@ -1725,9 +1842,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
         check: faceCheckerValue
       };
       if (((_sessionConfig$iadCon = sessionConfig.iadConfig) === null || _sessionConfig$iadCon === void 0 ? void 0 : _sessionConfig$iadCon.mode) === buildPacked.exports.IadMode.SUBSTANTIAL || !!((_sessionConfig$iadCon2 = sessionConfig.iadConfig) !== null && _sessionConfig$iadCon2 !== void 0 && _sessionConfig$iadCon2.activeChallengeConfig)) {
-        var _this$getString, _this$getString2, _this$getString3, _this$getString4, _sessionConfig$iadCon3, _sessionConfig$iadCon4, _sessionConfig$iadCon5, _sessionConfig$iadCon6, _sessionConfig$iadCon7, _sessionConfig$iadCon8, _sessionConfig$iadCon9;
+        var _this$getString5, _this$getString6, _this$getString7, _this$getString8, _sessionConfig$iadCon3, _sessionConfig$iadCon4, _sessionConfig$iadCon5, _sessionConfig$iadCon6, _sessionConfig$iadCon7, _sessionConfig$iadCon8, _sessionConfig$iadCon9;
         // configure active challenge
-        this.instructions = [(_this$getString = this.getString(["activeChallengeMessages", "rotateLeft"])) !== null && _this$getString !== void 0 ? _this$getString : "undefined action", (_this$getString2 = this.getString(["activeChallengeMessages", "rotateRight"])) !== null && _this$getString2 !== void 0 ? _this$getString2 : "undefined action", (_this$getString3 = this.getString(["activeChallengeMessages", "rotateUp"])) !== null && _this$getString3 !== void 0 ? _this$getString3 : "undefined action", (_this$getString4 = this.getString(["activeChallengeMessages", "rotateDown"])) !== null && _this$getString4 !== void 0 ? _this$getString4 : "undefined action"];
+        this.instructions = [(_this$getString5 = this.getString(["activeChallengeMessages", "rotateLeft"])) !== null && _this$getString5 !== void 0 ? _this$getString5 : "undefined action", (_this$getString6 = this.getString(["activeChallengeMessages", "rotateRight"])) !== null && _this$getString6 !== void 0 ? _this$getString6 : "undefined action", (_this$getString7 = this.getString(["activeChallengeMessages", "rotateUp"])) !== null && _this$getString7 !== void 0 ? _this$getString7 : "undefined action", (_this$getString8 = this.getString(["activeChallengeMessages", "rotateDown"])) !== null && _this$getString8 !== void 0 ? _this$getString8 : "undefined action"];
         sessionConfig.iadConfig.activeChallengeConfig = {
           maxSecondsBetweenActions: (_sessionConfig$iadCon3 = (_sessionConfig$iadCon4 = sessionConfig.iadConfig.activeChallengeConfig) === null || _sessionConfig$iadCon4 === void 0 ? void 0 : _sessionConfig$iadCon4.maxSecondsBetweenActions) !== null && _sessionConfig$iadCon3 !== void 0 ? _sessionConfig$iadCon3 : 8,
           // client customisation or default (8 seconds)
@@ -1777,7 +1894,7 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
       var _initSession = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
         var _this$shadowRoot6,
           _this4 = this;
-        var videoContainer, _this$shadowRoot7, _this$shadowRoot8, _this$session3, sessionConfig, _this$session4, sessionInfos, acquisitionTime, activeChallengeNumActions, _this$sequencer7, _this$config$iadConfi3, _this$config$iadConfi4, canvasElem, videoElem, recorderReadyEvent;
+        var videoContainer, _this$shadowRoot7, _this$shadowRoot8, _this$session3, sessionConfig, _this$session4, sessionInfos, acquisitionTime, activeChallengeNumActions, _this$sequencer7, _this$config$iadConfi3, _this$config$iadConfi4, canvasElem, videoElem, _this$getString9, recorderReadyEvent;
         return _regenerator().w(function (_context8) {
           while (1) switch (_context8.n) {
             case 0:
@@ -1851,6 +1968,9 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
               }
               canvasElem = (_this$shadowRoot7 = this.shadowRoot) === null || _this$shadowRoot7 === void 0 ? void 0 : _this$shadowRoot7.getElementById(buildPacked.exports.CANVAS_ELEMENT_ID);
               videoElem = (_this$shadowRoot8 = this.shadowRoot) === null || _this$shadowRoot8 === void 0 ? void 0 : _this$shadowRoot8.getElementById(buildPacked.exports.VIDEO_ELEMENT_ID);
+              if (videoElem) {
+                videoElem.setAttribute("aria-label", (_this$getString9 = this.getString(["accessibility", "videoFeed"])) !== null && _this$getString9 !== void 0 ? _this$getString9 : "Camera feed for identity verification");
+              }
               recorderReadyEvent = new CustomEvent("recorderReady", {
                 detail: {
                   recorderElmt: this,
@@ -1885,20 +2005,15 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
       };
       switch (value) {
         case values.front:
-          this.hints = "closer";
-          break;
+          return "closer";
         case values.left:
-          this.hints = "left";
-          break;
+          return "left";
         case values.right:
-          this.hints = "right";
-          break;
+          return "right";
         case values.down:
-          this.hints = "down";
-          break;
+          return "down";
         case values.up:
-          this.hints = "up";
-          break;
+          return "up";
       }
     }
   }, {
@@ -1972,11 +2087,20 @@ var Recorder = /*#__PURE__*/function (_LitElement) {
   }, {
     key: "render",
     value: function render() {
-      var _this$acActiveActionI;
+      var _this$acActiveActionI,
+        _this5 = this,
+        _this$getString0;
+      var retryButtonLabel = this.willRetryCapture ? this.getString(["retry"]) : this.getString(["capture"]);
+
       // not necessary : this.strings = { ...this.defaultStrings, ...this.strings };
-      return x$2(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n      <div class=\"container\" id=\"container\">\n        <div id=\"top-hints\" class=\"top-hints\">\n          <slot name=\"ac-top-hints\">\n            ", "\n          </slot>\n        </div>\n        <div class=\"wrapper\" id=\"wrapper\">\n          <div id=\"face-hints\" class=\"face-hints\">\n            <slot name=\"ac-face-hints\">\n              <div id=\"ac-arrow-container\" class=\"ac-arrow-container\"></div>\n            </slot>\n          </div>\n\n          ", "\n\n          <uni-overlay-hints\n            class=\"hints item-center\"\n            hints=\"", "\"\n            strings=\"", "\"\n          ></uni-overlay-hints>\n\n          <div id=\"spinner\" class=\"spinner item-center\" style=\"display: none\">\n            <uni-spinner></uni-spinner>\n          </div>\n          <div class=\"errors\" id=\"errors\">\n            <span class=\"message\">", "</span>\n          </div>\n        </div>\n        <div id=\"bottom-hints\" class=\"bottom-hints\">\n          <slot name=\"ac-bottom-hints\"><span id=\"ac-message-container\"></span> </slot>\n          <div class=\"ac-bottom-hints\">", "</div>\n        </div>\n        <div class=\"buttons\" id=\"buttons\">\n          <div class=\"buttons-item\">\n            <slot name=\"left\"></slot>\n          </div>\n\n          <div class=\"buttons-item\">\n            <!-- Display record/retry button -->\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), this.acSequenceStarted ? x$2(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n                  <uni-progress-bar-group\n                    count=\"", "\"\n                    .values=\"", "\"\n                    active-index=\"", "\"\n                  ></uni-progress-bar-group>\n                "])), this.acNumberOfActions, this.acProgressBarValues, (_this$acActiveActionI = this.acActiveActionIndex) !== null && _this$acActiveActionI !== void 0 ? _this$acActiveActionI : -1) : x$2(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral([""]))), isMobileDevice() && (
+      return x$2(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n      <div class=\"container\" id=\"container\">\n        <div id=\"top-hints\" class=\"top-hints\">\n          <slot name=\"ac-top-hints\">\n            ", "\n          </slot>\n        </div>\n        <div class=\"wrapper\" id=\"wrapper\">\n          <div id=\"face-hints\" class=\"face-hints\">\n            <slot name=\"ac-face-hints\">\n              <div id=\"ac-arrow-container\" class=\"ac-arrow-container\"></div>\n            </slot>\n          </div>\n\n          ", "\n\n          <uni-overlay-hints\n            class=\"hints item-center\"\n            hints=\"", "\"\n            strings=\"", "\"\n          ></uni-overlay-hints>\n\n          <div id=\"spinner\" class=\"spinner item-center\" style=\"display: none\">\n            <uni-spinner></uni-spinner>\n          </div>\n          <div class=\"errors\" id=\"errors\">\n            <span class=\"message\" id=\"sdk-error\" aria-live=\"assertive\">", "</span>\n          </div>\n        </div>\n        <div id=\"bottom-hints\" class=\"bottom-hints\">\n          <slot name=\"ac-bottom-hints\"><span id=\"ac-message-container\"></span></slot>\n          <div class=\"ac-bottom-hints\">\n            <span id=\"pos-hint\" role=\"alert\" aria-live=\"assertive\">", "</span>\n          </div>\n        </div>\n        <div class=\"buttons\" id=\"buttons\">\n          <div class=\"buttons-item\">\n            <slot name=\"left\"></slot>\n          </div>\n\n          <div class=\"buttons-item\">\n            <!-- Display record/retry button -->\n            ", "\n          </div>\n        </div>\n      </div>\n    "])), this.acSequenceStarted ? x$2(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n                  <uni-progress-bar-group\n                    count=\"", "\"\n                    .values=\"", "\"\n                    active-index=\"", "\"\n                  ></uni-progress-bar-group>\n                "])), this.acNumberOfActions, this.acProgressBarValues, (_this$acActiveActionI = this.acActiveActionIndex) !== null && _this$acActiveActionI !== void 0 ? _this$acActiveActionI : -1) : x$2(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral([""]))), isMobileDevice() && (
       // eslint-disable-next-line no-extra-boolean-cast
-      !!this.displayFlipCameraBtn ? this.displayFlipCameraBtn : this.preset === buildPacked.exports.AcquisitionPreset.DOC_VIDEO || this.preset === buildPacked.exports.AcquisitionPreset.DOC_IMAGE) && !this.isRunning() ? x$2(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral([" <div id=\"flip-icon-container\" class=\"flip-icon-container\">\n                <uni-flip-camera-icon @click=\"", "\" class=\"flip-icon\"> </uni-flip-camera-icon>\n              </div>"])), this.flipCamera) : x$2(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral([""]))), this.hints, JSON.stringify(this.getString(["hints"])), this.error, this.getString(["hints", this.hints]), !this.hideCaptureBtn || this.willRetryCapture ? x$2(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["<uni-button id=\"capture\" @click=\"", "\">\n                  <div slot=\"icon\">", "</div>\n                  ", "\n                </uni-button>"])), this.capture, this.captureButtonPicto, this.willRetryCapture ? this.getString(["retry"]) : this.getString(["capture"])) : x$2(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral([""]))));
+      !!this.displayFlipCameraBtn ? this.displayFlipCameraBtn : this.preset === buildPacked.exports.AcquisitionPreset.DOC_VIDEO || this.preset === buildPacked.exports.AcquisitionPreset.DOC_IMAGE) && !this.isRunning() ? x$2(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral([" <div id=\"flip-icon-container\" class=\"flip-icon-container\">\n                <uni-flip-camera-icon\n                  @click=\"", "\"\n                  @keydown=\"", "\"\n                  class=\"flip-icon\"\n                  tabindex=\"0\"\n                  role=\"button\"\n                  aria-label=\"", "\"\n                ></uni-flip-camera-icon>\n              </div>"])), this.flipCamera, function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          _this5.flipCamera();
+        }
+      }, (_this$getString0 = this.getString(["accessibility", "flipCamera"])) !== null && _this$getString0 !== void 0 ? _this$getString0 : "Switch camera") : x$2(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral([""]))), this.hints, JSON.stringify(this.getString(["hints"])), this.error, this.getString(["hints", this.hints]), !this.hideCaptureBtn || this.willRetryCapture ? x$2(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["<uni-button\n                  id=\"capture\"\n                  @click=\"", "\"\n                  aria-role=\"button\"\n                  aria-label=\"", "\"\n                >\n                  <div slot=\"icon\">", "</div>\n                  ", "\n                </uni-button>"])), this.capture, retryButtonLabel, this.captureButtonPicto, retryButtonLabel) : x$2(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral([""]))));
     }
   }]);
 }(s$4);
@@ -2753,11 +2877,23 @@ var FileUpload$1 = /*#__PURE__*/function (_LitElement) {
     _this.strings = _objectSpread2({}, defaultStrings$2);
     _this.error = "";
     _this.inited = false;
+    _this.handleKeyboardSelection = function (e) {
+      if (e.code === KEY_ENTER || e.code === KEY_SPACE) {
+        _this.handleClick();
+      }
+    };
     _this.handleFileSelection = _this.handleFileSelection.bind(_this);
     return _this;
   }
   _inherits(FileUpload, _LitElement);
   return _createClass(FileUpload, [{
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      _superPropGet(FileUpload, "connectedCallback", this, 3)([]);
+      this.setAttribute("tabindex", "0");
+      this.addEventListener("keydown", this.handleKeyboardSelection);
+    }
+  }, {
     key: "validateFile",
     value: function validateFile(type, size) {
       var error = "";
@@ -2865,6 +3001,12 @@ var FileUpload$1 = /*#__PURE__*/function (_LitElement) {
     value: function updated() {
       if (!this.inited) this.init();
     }
+  }, {
+    key: "disconnectedCallback",
+    value: function disconnectedCallback() {
+      _superPropGet(FileUpload, "disconnectedCallback", this, 3)([]);
+      this.removeEventListener("keydown", this.handleKeyboardSelection);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -2892,7 +3034,7 @@ FileUpload$1.properties = {
     state: true
   }
 };
-FileUpload$1.styles = i$1(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    #drop-zone {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: ", ";\n      text-align: center;\n\n      width: ", ";\n      height: ", ";\n      border: ", ";\n      background-color: ", ";\n\n      cursor: pointer;\n    }\n\n    .text {\n      color: ", ";\n      font-size: ", ";\n    }\n\n    .error {\n      display: inline-block;\n      margin-top: 40px;\n      color: ", ";\n      font-size: ", ";\n    }\n  "])), fileUploadVars.padding, fileUploadVars.width, fileUploadVars.height, fileUploadVars.border, fileUploadVars.backgroundColor, fileUploadVars.textColor, fileUploadVars.textFontSize, fileUploadVars.errorTextColor, fileUploadVars.errorTextFontSize);
+FileUpload$1.styles = i$1(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    #drop-zone {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: ", ";\n      text-align: center;\n\n      width: ", ";\n      height: ", ";\n      border: ", ";\n      background-color: ", ";\n\n      cursor: pointer;\n    }\n\n    :host(:focus) #drop-zone {\n      outline: ", ";\n    }\n\n    .text {\n      color: ", ";\n      font-size: ", ";\n    }\n\n    .error {\n      display: inline-block;\n      margin-top: 40px;\n      color: ", ";\n      font-size: ", ";\n    }\n  "])), fileUploadVars.padding, fileUploadVars.width, fileUploadVars.height, fileUploadVars.border, fileUploadVars.backgroundColor, fileUploadVars.focusOutline, fileUploadVars.textColor, fileUploadVars.textFontSize, fileUploadVars.errorTextColor, fileUploadVars.errorTextFontSize);
 customElements.define("uni-file-upload", FileUpload$1);
 
 var _templateObject$3$2;
@@ -3749,10 +3891,18 @@ var videoRecorder = {
   },
   rotationWhileCapturingErrorMessage: "Veuillez ne pas tourner l'appareil pendant l'acquisition.",
   activeChallengeMessages: {
-    rotateLeft: 'Tournez la tête à <strong font-size: 18px">gauche</strong>',
-    rotateRight: 'Tournez la tête à <strong font-size: 18px">droite</strong>',
-    rotateUp: 'Pivotez la tête en <strong font-size: 18px">haut</strong>',
-    rotateDown: 'Pivotez la tête en <strong font-size: 18px">bas</strong>'
+    rotateLeft: 'Tournez la tête à <strong style="font-size: 18px">gauche</strong>',
+    rotateRight: 'Tournez la tête à <strong style="font-size: 18px">droite</strong>',
+    rotateUp: 'Pivotez la tête en <strong style="font-size: 18px">haut</strong>',
+    rotateDown: 'Pivotez la tête en <strong style="font-size: 18px">bas</strong>'
+  },
+  accessibility: {
+    flipCamera: "Changer de caméra",
+    turnLeft: "Tourner à gauche",
+    turnRight: "Tourner à droite",
+    turnUp: "Tourner vers le haut",
+    turnDown: "Tourner vers le bas",
+    videoFeed: "Flux caméra pour la vérification d'identité"
   }
 };
 var pictureRecorder = {
@@ -3975,7 +4125,7 @@ function _extends() {
 }
 
 var name = "@unissey-web/sdk-react";
-var version = "5.4.0";
+var version = "5.5.0-rc.1";
 var description = "Unissey React Sdk";
 var license = "ISC";
 var module = "./dist/index.js";
@@ -4045,7 +4195,8 @@ var RecorderWithoutVersion = i$2({
     onRecordCapturing: "recordCapturing",
     onRecordInterrupted: "recordInterrupted",
     onRecordCompleted: "recordCompleted",
-    onActiveChallenge: "activeChallenge"
+    onActiveChallenge: "activeChallenge",
+    onNotification: "onNotification"
   }
 });
 var VideoRecorder = /*#__PURE__*/React.forwardRef(function (props, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unissey-web/sdk-react",
-  "version": "5.4.0",
+  "version": "5.5.0-rc.1",
   "description": "Unissey React Sdk",
   "license": "ISC",
   "module": "./dist/index.js",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@lit-labs/react": "^1.0.2",
-    "@unissey-web/web-components": "5.4.0"
+    "@unissey-web/web-components": "5.5.0-rc.1"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",