pipwave-ekyc-uikit 1.3.1 → 1.3.3

package/README.md

@@ -50,14 +50,26 @@ pw.init({
 })
 ```
 
-### `onFinish {Function} optional`
+### `onSuccess {Function} optional`
 
-Call back that fires when the eKYC process is done
+Call back that fires when the eKYC process is done.
 
-Example `onFinish` callBack:
+Example `onSuccess` callBack:
 
 ```javascript
-pw.onFinish(() => {
+pw.onSuccess(() => {
+  // do your own handling here
+});
+```
+
+### `onFailed {Function} optional`
+
+Call back that fires when the eKYC process is failed due to maximum number attempts reached.
+
+Example `onFailed` callBack:
+
+```javascript
+pw.onFailed((err) => {
   // do your own handling here
 });
 ```

package/dist/pw-bundle.js

@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../node_modules/css-loader/dist/cjs.js!./pikaday.css */ \"./node_modules/css-loader/dist/cjs.js!./src/assets/scss/pikaday.css\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__);\n// Imports\n\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-smile.png */ \"./src/assets/img/mask-smile.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-neutral.png */ \"./src/assets/img/mask-neutral.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Roboto+Flex:ital,wght@0,400;0,600;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n  --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n  --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.pw-invisible {\n  visibility: hidden;\n}\n\n.\\\\!pw-absolute {\n  position: absolute !important;\n}\n\n.pw-absolute {\n  position: absolute;\n}\n\n.pw-relative {\n  position: relative;\n}\n\n.pw-inset-0 {\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n\n.pw-bottom-0 {\n  bottom: 0px;\n}\n\n.pw-bottom-16 {\n  bottom: 4rem;\n}\n\n.pw-bottom-28 {\n  bottom: 7rem;\n}\n\n.pw-bottom-\\\\[-100\\\\%\\\\] {\n  bottom: -100%;\n}\n\n.pw-bottom-\\\\[10\\\\%\\\\] {\n  bottom: 10%;\n}\n\n.pw-left-0 {\n  left: 0px;\n}\n\n.pw-left-1 {\n  left: 0.25rem;\n}\n\n.pw-left-1\\\\/2 {\n  left: 50%;\n}\n\n.pw-left-10 {\n  left: 2.5rem;\n}\n\n.pw-left-2 {\n  left: 0.5rem;\n}\n\n.pw-left-4 {\n  left: 1rem;\n}\n\n.pw-left-8 {\n  left: 2rem;\n}\n\n.pw-left-\\\\[100\\\\%\\\\] {\n  left: 100%;\n}\n\n.pw-right-0 {\n  right: 0px;\n}\n\n.pw-right-1 {\n  right: 0.25rem;\n}\n\n.pw-right-2\\\\/4 {\n  right: 50%;\n}\n\n.pw-right-3 {\n  right: 0.75rem;\n}\n\n.pw-right-5 {\n  right: 1.25rem;\n}\n\n.pw-top-0 {\n  top: 0px;\n}\n\n.pw-top-1\\\\/2 {\n  top: 50%;\n}\n\n.pw-top-1\\\\/3 {\n  top: 33.333333%;\n}\n\n.pw-top-2 {\n  top: 0.5rem;\n}\n\n.pw-top-2\\\\/4 {\n  top: 50%;\n}\n\n.pw-top-3 {\n  top: 0.75rem;\n}\n\n.pw-top-4 {\n  top: 1rem;\n}\n\n.pw-top-5 {\n  top: 1.25rem;\n}\n\n.pw-top-\\\\[100\\\\%\\\\] {\n  top: 100%;\n}\n\n.pw-z-10 {\n  z-index: 10;\n}\n\n.pw-z-30 {\n  z-index: 30;\n}\n\n.pw-z-40 {\n  z-index: 40;\n}\n\n.pw-z-50 {\n  z-index: 50;\n}\n\n.pw-z-\\\\[2\\\\] {\n  z-index: 2;\n}\n\n.pw-m-0 {\n  margin: 0px;\n}\n\n.pw-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.pw-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.pw-mb-10 {\n  margin-bottom: 2.5rem;\n}\n\n.pw-mb-16 {\n  margin-bottom: 4rem;\n}\n\n.pw-mb-2 {\n  margin-bottom: 0.5rem;\n}\n\n.pw-mb-3 {\n  margin-bottom: 0.75rem;\n}\n\n.pw-mb-4 {\n  margin-bottom: 1rem;\n}\n\n.pw-mb-5 {\n  margin-bottom: 1.25rem;\n}\n\n.pw-mb-6 {\n  margin-bottom: 1.5rem;\n}\n\n.pw-mb-7 {\n  margin-bottom: 1.75rem;\n}\n\n.pw-mb-8 {\n  margin-bottom: 2rem;\n}\n\n.pw-mb-9 {\n  margin-bottom: 2.25rem;\n}\n\n.pw-ml-2 {\n  margin-left: 0.5rem;\n}\n\n.pw-mt-16 {\n  margin-top: 4rem;\n}\n\n.pw-mt-2 {\n  margin-top: 0.5rem;\n}\n\n.pw-mt-4 {\n  margin-top: 1rem;\n}\n\n.pw-mt-5 {\n  margin-top: 1.25rem;\n}\n\n.pw-mt-7 {\n  margin-top: 1.75rem;\n}\n\n.pw-box-border {\n  box-sizing: border-box;\n}\n\n.pw-block {\n  display: block;\n}\n\n.pw-inline-block {\n  display: inline-block;\n}\n\n.pw-flex {\n  display: flex;\n}\n\n.pw-hidden {\n  display: none;\n}\n\n.\\\\!pw-h-px {\n  height: 1px !important;\n}\n\n.pw-h-1 {\n  height: 0.25rem;\n}\n\n.pw-h-10 {\n  height: 2.5rem;\n}\n\n.pw-h-11 {\n  height: 2.75rem;\n}\n\n.pw-h-14 {\n  height: 3.5rem;\n}\n\n.pw-h-16 {\n  height: 4rem;\n}\n\n.pw-h-24 {\n  height: 6rem;\n}\n\n.pw-h-3 {\n  height: 0.75rem;\n}\n\n.pw-h-40 {\n  height: 10rem;\n}\n\n.pw-h-52 {\n  height: 13rem;\n}\n\n.pw-h-9 {\n  height: 2.25rem;\n}\n\n.pw-h-\\\\[calc\\\\(100\\\\%-2\\\\*1rem\\\\)\\\\] {\n  height: calc(100% - 2rem);\n}\n\n.pw-h-\\\\[calc\\\\(100vh-3rem\\\\)\\\\] {\n  height: calc(100vh - 3rem);\n}\n\n.pw-h-full {\n  height: 100%;\n}\n\n.pw-max-h-40 {\n  max-height: 10rem;\n}\n\n.pw-max-h-\\\\[51rem\\\\] {\n  max-height: 51rem;\n}\n\n.\\\\!pw-w-px {\n  width: 1px !important;\n}\n\n.pw-w-10\\\\/12 {\n  width: 83.333333%;\n}\n\n.pw-w-11 {\n  width: 2.75rem;\n}\n\n.pw-w-14 {\n  width: 3.5rem;\n}\n\n.pw-w-16 {\n  width: 4rem;\n}\n\n.pw-w-24 {\n  width: 6rem;\n}\n\n.pw-w-36 {\n  width: 9rem;\n}\n\n.pw-w-4\\\\/5 {\n  width: 80%;\n}\n\n.pw-w-48 {\n  width: 12rem;\n}\n\n.pw-w-6 {\n  width: 1.5rem;\n}\n\n.pw-w-60 {\n  width: 15rem;\n}\n\n.pw-w-72 {\n  width: 18rem;\n}\n\n.pw-w-\\\\[calc\\\\(100\\\\%-2\\\\*1\\\\.25rem\\\\)\\\\] {\n  width: calc(100% - 2.5rem);\n}\n\n.pw-w-full {\n  width: 100%;\n}\n\n.pw-max-w-sm {\n  max-width: 24rem;\n}\n\n.pw-flex-none {\n  flex: none;\n}\n\n.pw-grow {\n  flex-grow: 1;\n}\n\n.pw-basis-2\\\\/5 {\n  flex-basis: 40%;\n}\n\n.pw-basis-3\\\\/5 {\n  flex-basis: 60%;\n}\n\n.-pw-translate-x-1\\\\/2 {\n  --tw-translate-x: -50%;\n  transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-x-2\\\\/4 {\n  --tw-translate-x: -50%;\n  transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/2 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/3 {\n  --tw-translate-y: -33.333333%;\n  transform: translate(var(--tw-translate-x), -33.333333%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-2\\\\/4 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-x-2\\\\/4 {\n  --tw-translate-x: 50%;\n  transform: translate(50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), 100%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-scale-\\\\[1\\\\.7\\\\] {\n  --tw-scale-x: 1.7;\n  --tw-scale-y: 1.7;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.7) scaleY(1.7);\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes pw-camera-rotation {\n  0% {\n    transform: rotate3d(0, 1, 0, 0deg);\n  }\n  100% {\n    transform: rotate3d(0, 1, 0, 180deg);\n  }\n}\n.pw-animate-camera {\n  animation: pw-camera-rotation 1s ease-out 0.5s 1;\n}\n\n@keyframes pw-loading {\n  0% {\n    transform: translateX(-100%);\n  }\n  50% {\n    transform: translateX(0%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n.pw-animate-loading {\n  animation: pw-loading 1.25s linear infinite;\n}\n\n@keyframes pw-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.pw-animate-spin {\n  animation: pw-spin 1s linear infinite;\n}\n\n.pw-cursor-pointer {\n  cursor: pointer;\n}\n\n.pw-resize-none {\n  resize: none;\n}\n\n.pw-flex-row {\n  flex-direction: row;\n}\n\n.pw-flex-col {\n  flex-direction: column;\n}\n\n.pw-items-end {\n  align-items: flex-end;\n}\n\n.pw-items-center {\n  align-items: center;\n}\n\n.pw-justify-end {\n  justify-content: flex-end;\n}\n\n.pw-justify-center {\n  justify-content: center;\n}\n\n.pw-justify-between {\n  justify-content: space-between;\n}\n\n.pw-gap-1 {\n  gap: 0.25rem;\n}\n\n.pw-gap-x-1 {\n  -moz-column-gap: 0.25rem;\n  column-gap: 0.25rem;\n}\n\n.pw-gap-x-3 {\n  -moz-column-gap: 0.75rem;\n  column-gap: 0.75rem;\n}\n\n.pw-overflow-auto {\n  overflow: auto;\n}\n\n.\\\\!pw-overflow-hidden {\n  overflow: hidden !important;\n}\n\n.pw-overflow-hidden {\n  overflow: hidden;\n}\n\n.pw-overflow-y-auto {\n  overflow-y: auto;\n}\n\n.pw-overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.pw-overflow-y-hidden {\n  overflow-y: hidden;\n}\n\n.\\\\!pw-whitespace-nowrap {\n  white-space: nowrap !important;\n}\n\n.pw-rounded-2xl {\n  border-radius: 1rem;\n}\n\n.pw-rounded-\\\\[2\\\\.5rem\\\\] {\n  border-radius: 2.5rem;\n}\n\n.pw-rounded-\\\\[40px\\\\] {\n  border-radius: 40px;\n}\n\n.pw-rounded-full {\n  border-radius: 9999px;\n}\n\n.pw-rounded-lg {\n  border-radius: 0.5rem;\n}\n\n.pw-rounded-t-lg {\n  border-top-left-radius: 0.5rem;\n  border-top-right-radius: 0.5rem;\n}\n\n.\\\\!pw-border-0 {\n  border-width: 0px !important;\n}\n\n.pw-border {\n  border-width: 1px;\n}\n\n.pw-border-4 {\n  border-width: 4px;\n}\n\n.pw-border-solid {\n  border-style: solid;\n}\n\n.pw-border-none {\n  border-style: none;\n}\n\n.pw-border-current {\n  border-color: currentColor;\n}\n\n.pw-border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229, 231, 235);\n  border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.pw-border-grey-5 {\n  --tw-border-opacity: 1;\n  border-color: rgb(201, 201, 201);\n  border-color: rgba(201, 201, 201, var(--tw-border-opacity));\n}\n\n.pw-border-primary {\n  --tw-border-opacity: 1;\n  border-color: rgb(154, 45, 183);\n  border-color: rgba(154, 45, 183, var(--tw-border-opacity));\n}\n\n.pw-border-red-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(239, 68, 68);\n  border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.pw-border-white {\n  --tw-border-opacity: 1;\n  border-color: rgb(255, 255, 255);\n  border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.pw-border-r-transparent {\n  border-right-color: transparent;\n}\n\n.pw-bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0, 0, 0);\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.pw-bg-black\\\\/0 {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.pw-bg-black\\\\/40 {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n.pw-bg-grey-2 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250, 250, 252);\n  background-color: rgba(250, 250, 252, var(--tw-bg-opacity));\n}\n\n.pw-bg-grey-4 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(231, 231, 236);\n  background-color: rgba(231, 231, 236, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(154, 45, 183);\n  background-color: rgba(154, 45, 183, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary-light {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251, 235, 255);\n  background-color: rgba(251, 235, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255, 255, 255);\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-opacity-70 {\n  --tw-bg-opacity: 0.7 ;\n}\n\n.pw-bg-opacity-80 {\n  --tw-bg-opacity: 0.8 ;\n}\n\n.pw-bg-opacity-90 {\n  --tw-bg-opacity: 0.9 ;\n}\n\n.pw-bg-gradient-to-r {\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n\n.pw-from-\\\\[\\\\#AF4AFF\\\\] {\n  --tw-gradient-from: #AF4AFF var(--tw-gradient-from-position);\n  --tw-gradient-to: rgba(175, 74, 255, 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) ;\n}\n\n.pw-to-\\\\[\\\\#DD53FF\\\\] {\n  --tw-gradient-to: #DD53FF var(--tw-gradient-to-position) ;\n}\n\n.pw-object-contain {\n  -o-object-fit: contain;\n  object-fit: contain;\n}\n\n.\\\\!pw-p-0 {\n  padding: 0px !important;\n}\n\n.pw-p-0 {\n  padding: 0px;\n}\n\n.pw-p-4 {\n  padding: 1rem;\n}\n\n.pw-p-5 {\n  padding: 1.25rem;\n}\n\n.pw-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.pw-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.pw-px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.pw-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pw-py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.pw-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.pw-pl-8 {\n  padding-left: 2rem;\n}\n\n.pw-pt-1 {\n  padding-top: 0.25rem;\n}\n\n.pw-pt-3 {\n  padding-top: 0.75rem;\n}\n\n.pw-pt-4 {\n  padding-top: 1rem;\n}\n\n.pw-text-center {\n  text-align: center;\n}\n\n.pw-align-\\\\[-0\\\\.125em\\\\] {\n  vertical-align: -0.125em;\n}\n\n.pw-font-\\\\[\\\\'Roboto_Flex\\\\'\\\\] {\n  font-family: \"Roboto Flex\";\n}\n\n.pw-font-pw {\n  font-family: Roboto Flex;\n}\n\n.pw-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n\n.pw-text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n\n.pw-text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n\n.pw-text-6xl {\n  font-size: 3.75rem;\n  line-height: 1;\n}\n\n.pw-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.pw-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n\n.pw-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\n.pw-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.pw-font-medium {\n  font-weight: 500;\n}\n\n.pw-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156, 163, 175);\n  color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.pw-text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34, 197, 94);\n  color: rgba(34, 197, 94, var(--tw-text-opacity));\n}\n\n.pw-text-grey-10 {\n  --tw-text-opacity: 1;\n  color: rgb(29, 30, 34);\n  color: rgba(29, 30, 34, var(--tw-text-opacity));\n}\n\n.pw-text-grey-5 {\n  --tw-text-opacity: 1;\n  color: rgb(201, 201, 201);\n  color: rgba(201, 201, 201, var(--tw-text-opacity));\n}\n\n.pw-text-grey-6 {\n  --tw-text-opacity: 1;\n  color: rgb(158, 158, 158);\n  color: rgba(158, 158, 158, var(--tw-text-opacity));\n}\n\n.pw-text-grey-7 {\n  --tw-text-opacity: 1;\n  color: rgb(117, 117, 117);\n  color: rgba(117, 117, 117, var(--tw-text-opacity));\n}\n\n.pw-text-orange-400 {\n  --tw-text-opacity: 1;\n  color: rgb(251, 146, 60);\n  color: rgba(251, 146, 60, var(--tw-text-opacity));\n}\n\n.pw-text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(154, 45, 183);\n  color: rgba(154, 45, 183, var(--tw-text-opacity));\n}\n\n.pw-text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239, 68, 68);\n  color: rgba(239, 68, 68, var(--tw-text-opacity));\n}\n\n.pw-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255, 255, 255);\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.pw-no-underline {\n  text-decoration-line: none;\n}\n\n.pw-shadow-footer-shadow {\n  --tw-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n  --tw-shadow-colored: 0px 0px 8px 0px var(--tw-shadow-color);\n  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);\n}\n\n.pw-shadow-grey-5 {\n  --tw-shadow-color: #C9C9C9;\n  --tw-shadow: var(--tw-shadow-colored) ;\n}\n\n.pw-outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.pw-outline-dashed {\n  outline-style: dashed;\n}\n\n.pw-outline-grey-6 {\n  outline-color: #9E9E9E;\n}\n\n.pw-drop-shadow-\\\\[0_4px_8px_rgba\\\\(200\\\\,123\\\\,221\\\\,0\\\\.60\\\\)\\\\] {\n  --tw-drop-shadow: drop-shadow(0 4px 8px rgba(200,123,221,0.60));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) drop-shadow(0 4px 8px rgba(200, 123, 221, 0.6));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.pw-transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.pw-duration-100 {\n  transition-duration: 100ms;\n}\n\n.pw-duration-200 {\n  transition-duration: 200ms;\n}\n\n.pw-duration-500 {\n  transition-duration: 500ms;\n}\n\n.\\\\!\\\\[clip\\\\:pw-rect\\\\(0\\\\,0\\\\,0\\\\,0\\\\)\\\\] {\n  clip: pw-rect(0, 0, 0, 0) !important;\n}\n\n.pw-watermark {\n  position: absolute;\n  transform: rotate(-25deg);\n  opacity: 0.5;\n  font-weight: 500;\n  font-size: 20px;\n  text-transform: capitalize;\n  color: #9e9e9e;\n  white-space: nowrap;\n  overflow: hidden;\n  -webkit-text-stroke-width: 0.3px;\n  -webkit-text-stroke-color: #1d1e22;\n}\n\n.camera-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  margin: 0;\n  height: 100%;\n  width: 100%;\n  background-color: black;\n}\n.camera-header-area {\n  position: absolute;\n  text-align: center;\n  z-index: 2;\n  top: 5%;\n  width: 100%;\n}\n.camera-header-area .title {\n  color: white;\n}\n.camera-body-area {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n.camera-body-area .video-container {\n  z-index: -1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.camera-body-area .video-element {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.camera-body-area .canvas-element {\n  position: absolute;\n  z-index: 9;\n}\n.camera-body-area .overlay-container {\n  position: absolute;\n  margin: auto;\n  z-index: 1;\n}\n.camera-body-area .overlay-element {\n  position: relative;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-shadow: 0px -50px 200px rgba(60, 60, 58, 0.76), 0px 50px 200px rgba(60, 60, 58, 0.76), -100px 0px 100px 9999px rgba(25, 20, 20, 0.9);\n}\n.camera-body-area .border-element {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.camera-body-area .border-top-element:before,\n.camera-body-area .border-top-element:after,\n.camera-body-area .border-bottom-element:before,\n.camera-body-area .border-bottom-element:after {\n  position: absolute;\n  content: \"\";\n  width: 10%;\n  height: 15%;\n  border-color: white;\n  border-style: solid;\n}\n.camera-body-area .border-top-element:before {\n  top: -2px;\n  left: -2px;\n  border-width: 4px 0 0 4px;\n  border-top-left-radius: 15px;\n}\n.camera-body-area .border-top-element:after {\n  top: -2px;\n  right: -2px;\n  border-width: 4px 4px 0 0;\n  border-top-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:before {\n  bottom: -2px;\n  right: -2px;\n  border-width: 0 4px 4px 0;\n  border-bottom-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:after {\n  bottom: -2px;\n  left: -2px;\n  border-width: 0 0 4px 4px;\n  border-bottom-left-radius: 15px;\n}\n.camera-body-area .overlay-element--active {\n  border-color: #8ede34 !important;\n}\n.camera-body-area .overlay-element--selfie-smile {\n  background-size: contain;\n  background-position: center center;\n  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});\n}\n.camera-body-area .overlay-element--selfie-neutral {\n  background-size: contain;\n  background-position: center center;\n  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});\n}\n.camera-footer-area {\n  position: absolute;\n  text-align: center;\n  z-index: 2;\n  bottom: 10%;\n  width: 100%;\n}\n.camera-footer-area .instruction {\n  color: white;\n}\n\n.active\\\\:pw-scale-90:active {\n  --tw-scale-x: .9;\n  --tw-scale-y: .9;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0.9) scaleY(0.9);\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n  visibility: visible;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n  visibility: visible;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n  top: 50%;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n  top: 50%;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n  top: 1.75rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n  top: 1.75rem;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-invisible {\n  visibility: hidden;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-top-3 {\n  top: 0.75rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n@media (min-width: 384px) {\n  .pw-min\\\\:pw-border-solid {\n    border-style: solid;\n  }\n  .pw-min\\\\:pw-border-grey-4 {\n    --tw-border-opacity: 1;\n    border-color: rgb(231, 231, 236);\n    border-color: rgba(231, 231, 236, var(--tw-border-opacity));\n  }\n}\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:-moz-placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:-moz-placeholder-shown):not(:focus):invalid {\n  --tw-border-opacity: 1;\n  border-color: rgb(239, 68, 68);\n  border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:placeholder-shown):not(:focus):invalid {\n  --tw-border-opacity: 1;\n  border-color: rgb(239, 68, 68);\n  border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://PWUISDK/./src/assets/scss/index.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! -!../../../node_modules/css-loader/dist/cjs.js!./pikaday.css */ \"./node_modules/css-loader/dist/cjs.js!./src/assets/scss/pikaday.css\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/getUrl.js */ \"./node_modules/css-loader/dist/runtime/getUrl.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3__);\n// Imports\n\n\n\n\nvar ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-smile.png */ \"./src/assets/img/mask-smile.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_URL_IMPORT_1___ = new URL(/* asset import */ __webpack_require__(/*! ../img/mask-neutral.png */ \"./src/assets/img/mask-neutral.png\"), __webpack_require__.b);\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Roboto+Flex:ital,wght@0,400;0,600;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/icon?family=Material+Icons);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);\"]);\n___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_pikaday_css__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\nvar ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_0___);\nvar ___CSS_LOADER_URL_REPLACEMENT_1___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_3___default()(___CSS_LOADER_URL_IMPORT_1___);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n  --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x: ;\n  --tw-pan-y: ;\n  --tw-pinch-zoom: ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position: ;\n  --tw-gradient-via-position: ;\n  --tw-gradient-to-position: ;\n  --tw-ordinal: ;\n  --tw-slashed-zero: ;\n  --tw-numeric-figure: ;\n  --tw-numeric-spacing: ;\n  --tw-numeric-fraction: ;\n  --tw-ring-inset: ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);\n  --tw-ring-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow: 0 0 rgba(0,0,0,0);\n  --tw-shadow-colored: 0 0 rgba(0,0,0,0);\n  --tw-blur: ;\n  --tw-brightness: ;\n  --tw-contrast: ;\n  --tw-grayscale: ;\n  --tw-hue-rotate: ;\n  --tw-invert: ;\n  --tw-saturate: ;\n  --tw-sepia: ;\n  --tw-drop-shadow: ;\n  --tw-backdrop-blur: ;\n  --tw-backdrop-brightness: ;\n  --tw-backdrop-contrast: ;\n  --tw-backdrop-grayscale: ;\n  --tw-backdrop-hue-rotate: ;\n  --tw-backdrop-invert: ;\n  --tw-backdrop-opacity: ;\n  --tw-backdrop-saturate: ;\n  --tw-backdrop-sepia: ;\n}\n\n.pw-invisible {\n  visibility: hidden;\n}\n\n.\\\\!pw-absolute {\n  position: absolute !important;\n}\n\n.pw-absolute {\n  position: absolute;\n}\n\n.pw-relative {\n  position: relative;\n}\n\n.pw-inset-0 {\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n\n.pw-bottom-0 {\n  bottom: 0px;\n}\n\n.pw-bottom-16 {\n  bottom: 4rem;\n}\n\n.pw-bottom-28 {\n  bottom: 7rem;\n}\n\n.pw-bottom-\\\\[-100\\\\%\\\\] {\n  bottom: -100%;\n}\n\n.pw-bottom-\\\\[10\\\\%\\\\] {\n  bottom: 10%;\n}\n\n.pw-left-0 {\n  left: 0px;\n}\n\n.pw-left-1 {\n  left: 0.25rem;\n}\n\n.pw-left-1\\\\/2 {\n  left: 50%;\n}\n\n.pw-left-10 {\n  left: 2.5rem;\n}\n\n.pw-left-2 {\n  left: 0.5rem;\n}\n\n.pw-left-4 {\n  left: 1rem;\n}\n\n.pw-left-8 {\n  left: 2rem;\n}\n\n.pw-left-\\\\[100\\\\%\\\\] {\n  left: 100%;\n}\n\n.pw-right-0 {\n  right: 0px;\n}\n\n.pw-right-1 {\n  right: 0.25rem;\n}\n\n.pw-right-2\\\\/4 {\n  right: 50%;\n}\n\n.pw-right-3 {\n  right: 0.75rem;\n}\n\n.pw-right-5 {\n  right: 1.25rem;\n}\n\n.pw-top-0 {\n  top: 0px;\n}\n\n.pw-top-1\\\\/2 {\n  top: 50%;\n}\n\n.pw-top-1\\\\/3 {\n  top: 33.333333%;\n}\n\n.pw-top-2 {\n  top: 0.5rem;\n}\n\n.pw-top-2\\\\/4 {\n  top: 50%;\n}\n\n.pw-top-3 {\n  top: 0.75rem;\n}\n\n.pw-top-4 {\n  top: 1rem;\n}\n\n.pw-top-5 {\n  top: 1.25rem;\n}\n\n.pw-top-\\\\[100\\\\%\\\\] {\n  top: 100%;\n}\n\n.pw-z-10 {\n  z-index: 10;\n}\n\n.pw-z-30 {\n  z-index: 30;\n}\n\n.pw-z-40 {\n  z-index: 40;\n}\n\n.pw-z-50 {\n  z-index: 50;\n}\n\n.pw-z-\\\\[2\\\\] {\n  z-index: 2;\n}\n\n.pw-m-0 {\n  margin: 0px;\n}\n\n.pw-mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.pw-my-2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.pw-mb-10 {\n  margin-bottom: 2.5rem;\n}\n\n.pw-mb-16 {\n  margin-bottom: 4rem;\n}\n\n.pw-mb-2 {\n  margin-bottom: 0.5rem;\n}\n\n.pw-mb-3 {\n  margin-bottom: 0.75rem;\n}\n\n.pw-mb-4 {\n  margin-bottom: 1rem;\n}\n\n.pw-mb-5 {\n  margin-bottom: 1.25rem;\n}\n\n.pw-mb-6 {\n  margin-bottom: 1.5rem;\n}\n\n.pw-mb-7 {\n  margin-bottom: 1.75rem;\n}\n\n.pw-mb-8 {\n  margin-bottom: 2rem;\n}\n\n.pw-mb-9 {\n  margin-bottom: 2.25rem;\n}\n\n.pw-ml-2 {\n  margin-left: 0.5rem;\n}\n\n.pw-mt-16 {\n  margin-top: 4rem;\n}\n\n.pw-mt-2 {\n  margin-top: 0.5rem;\n}\n\n.pw-mt-4 {\n  margin-top: 1rem;\n}\n\n.pw-mt-5 {\n  margin-top: 1.25rem;\n}\n\n.pw-mt-7 {\n  margin-top: 1.75rem;\n}\n\n.pw-box-border {\n  box-sizing: border-box;\n}\n\n.pw-block {\n  display: block;\n}\n\n.pw-inline-block {\n  display: inline-block;\n}\n\n.pw-flex {\n  display: flex;\n}\n\n.pw-hidden {\n  display: none;\n}\n\n.\\\\!pw-h-px {\n  height: 1px !important;\n}\n\n.pw-h-1 {\n  height: 0.25rem;\n}\n\n.pw-h-10 {\n  height: 2.5rem;\n}\n\n.pw-h-11 {\n  height: 2.75rem;\n}\n\n.pw-h-14 {\n  height: 3.5rem;\n}\n\n.pw-h-16 {\n  height: 4rem;\n}\n\n.pw-h-24 {\n  height: 6rem;\n}\n\n.pw-h-3 {\n  height: 0.75rem;\n}\n\n.pw-h-40 {\n  height: 10rem;\n}\n\n.pw-h-52 {\n  height: 13rem;\n}\n\n.pw-h-9 {\n  height: 2.25rem;\n}\n\n.pw-h-\\\\[calc\\\\(100\\\\%-2\\\\*1rem\\\\)\\\\] {\n  height: calc(100% - 2rem);\n}\n\n.pw-h-\\\\[calc\\\\(100vh-3rem\\\\)\\\\] {\n  height: calc(100vh - 3rem);\n}\n\n.pw-h-full {\n  height: 100%;\n}\n\n.pw-max-h-40 {\n  max-height: 10rem;\n}\n\n.pw-max-h-\\\\[51rem\\\\] {\n  max-height: 51rem;\n}\n\n.\\\\!pw-w-px {\n  width: 1px !important;\n}\n\n.pw-w-10\\\\/12 {\n  width: 83.333333%;\n}\n\n.pw-w-11 {\n  width: 2.75rem;\n}\n\n.pw-w-14 {\n  width: 3.5rem;\n}\n\n.pw-w-16 {\n  width: 4rem;\n}\n\n.pw-w-24 {\n  width: 6rem;\n}\n\n.pw-w-36 {\n  width: 9rem;\n}\n\n.pw-w-4\\\\/5 {\n  width: 80%;\n}\n\n.pw-w-48 {\n  width: 12rem;\n}\n\n.pw-w-6 {\n  width: 1.5rem;\n}\n\n.pw-w-60 {\n  width: 15rem;\n}\n\n.pw-w-\\\\[calc\\\\(100\\\\%-2\\\\*1\\\\.25rem\\\\)\\\\] {\n  width: calc(100% - 2.5rem);\n}\n\n.pw-w-full {\n  width: 100%;\n}\n\n.pw-max-w-sm {\n  max-width: 24rem;\n}\n\n.pw-flex-none {\n  flex: none;\n}\n\n.pw-grow {\n  flex-grow: 1;\n}\n\n.pw-basis-2\\\\/5 {\n  flex-basis: 40%;\n}\n\n.pw-basis-3\\\\/5 {\n  flex-basis: 60%;\n}\n\n.-pw-translate-x-1\\\\/2 {\n  --tw-translate-x: -50%;\n  transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-x-2\\\\/4 {\n  --tw-translate-x: -50%;\n  transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/2 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-1\\\\/3 {\n  --tw-translate-y: -33.333333%;\n  transform: translate(var(--tw-translate-x), -33.333333%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.-pw-translate-y-2\\\\/4 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-x-2\\\\/4 {\n  --tw-translate-x: 50%;\n  transform: translate(50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-translate-y-full {\n  --tw-translate-y: 100%;\n  transform: translate(var(--tw-translate-x), 100%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-scale-\\\\[1\\\\.7\\\\] {\n  --tw-scale-x: 1.7;\n  --tw-scale-y: 1.7;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.7) scaleY(1.7);\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n@keyframes pw-camera-rotation {\n  0% {\n    transform: rotate3d(0, 1, 0, 0deg);\n  }\n  100% {\n    transform: rotate3d(0, 1, 0, 180deg);\n  }\n}\n.pw-animate-camera {\n  animation: pw-camera-rotation 1s ease-out 0.5s 1;\n}\n\n@keyframes pw-loading {\n  0% {\n    transform: translateX(-100%);\n  }\n  50% {\n    transform: translateX(0%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n.pw-animate-loading {\n  animation: pw-loading 1.25s linear infinite;\n}\n\n@keyframes pw-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.pw-animate-spin {\n  animation: pw-spin 1s linear infinite;\n}\n\n.pw-cursor-pointer {\n  cursor: pointer;\n}\n\n.pw-resize-none {\n  resize: none;\n}\n\n.pw-flex-row {\n  flex-direction: row;\n}\n\n.pw-flex-col {\n  flex-direction: column;\n}\n\n.pw-items-end {\n  align-items: flex-end;\n}\n\n.pw-items-center {\n  align-items: center;\n}\n\n.pw-justify-end {\n  justify-content: flex-end;\n}\n\n.pw-justify-center {\n  justify-content: center;\n}\n\n.pw-justify-between {\n  justify-content: space-between;\n}\n\n.pw-gap-1 {\n  gap: 0.25rem;\n}\n\n.pw-gap-x-1 {\n  -moz-column-gap: 0.25rem;\n  column-gap: 0.25rem;\n}\n\n.pw-gap-x-3 {\n  -moz-column-gap: 0.75rem;\n  column-gap: 0.75rem;\n}\n\n.pw-overflow-auto {\n  overflow: auto;\n}\n\n.\\\\!pw-overflow-hidden {\n  overflow: hidden !important;\n}\n\n.pw-overflow-hidden {\n  overflow: hidden;\n}\n\n.pw-overflow-y-auto {\n  overflow-y: auto;\n}\n\n.pw-overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.pw-overflow-y-hidden {\n  overflow-y: hidden;\n}\n\n.\\\\!pw-whitespace-nowrap {\n  white-space: nowrap !important;\n}\n\n.pw-rounded-2xl {\n  border-radius: 1rem;\n}\n\n.pw-rounded-\\\\[2\\\\.5rem\\\\] {\n  border-radius: 2.5rem;\n}\n\n.pw-rounded-\\\\[40px\\\\] {\n  border-radius: 40px;\n}\n\n.pw-rounded-full {\n  border-radius: 9999px;\n}\n\n.pw-rounded-lg {\n  border-radius: 0.5rem;\n}\n\n.pw-rounded-t-lg {\n  border-top-left-radius: 0.5rem;\n  border-top-right-radius: 0.5rem;\n}\n\n.\\\\!pw-border-0 {\n  border-width: 0px !important;\n}\n\n.pw-border {\n  border-width: 1px;\n}\n\n.pw-border-4 {\n  border-width: 4px;\n}\n\n.pw-border-solid {\n  border-style: solid;\n}\n\n.pw-border-none {\n  border-style: none;\n}\n\n.pw-border-current {\n  border-color: currentColor;\n}\n\n.pw-border-gray-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(229, 231, 235);\n  border-color: rgba(229, 231, 235, var(--tw-border-opacity));\n}\n\n.pw-border-grey-5 {\n  --tw-border-opacity: 1;\n  border-color: rgb(201, 201, 201);\n  border-color: rgba(201, 201, 201, var(--tw-border-opacity));\n}\n\n.pw-border-primary {\n  --tw-border-opacity: 1;\n  border-color: rgb(154, 45, 183);\n  border-color: rgba(154, 45, 183, var(--tw-border-opacity));\n}\n\n.pw-border-red-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(239, 68, 68);\n  border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.pw-border-white {\n  --tw-border-opacity: 1;\n  border-color: rgb(255, 255, 255);\n  border-color: rgba(255, 255, 255, var(--tw-border-opacity));\n}\n\n.pw-border-r-transparent {\n  border-right-color: transparent;\n}\n\n.pw-bg-black {\n  --tw-bg-opacity: 1;\n  background-color: rgb(0, 0, 0);\n  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));\n}\n\n.pw-bg-black\\\\/0 {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.pw-bg-black\\\\/40 {\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n.pw-bg-grey-2 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(250, 250, 252);\n  background-color: rgba(250, 250, 252, var(--tw-bg-opacity));\n}\n\n.pw-bg-grey-4 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(231, 231, 236);\n  background-color: rgba(231, 231, 236, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary {\n  --tw-bg-opacity: 1;\n  background-color: rgb(154, 45, 183);\n  background-color: rgba(154, 45, 183, var(--tw-bg-opacity));\n}\n\n.pw-bg-primary-light {\n  --tw-bg-opacity: 1;\n  background-color: rgb(251, 235, 255);\n  background-color: rgba(251, 235, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255, 255, 255);\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));\n}\n\n.pw-bg-opacity-70 {\n  --tw-bg-opacity: 0.7 ;\n}\n\n.pw-bg-opacity-80 {\n  --tw-bg-opacity: 0.8 ;\n}\n\n.pw-bg-opacity-90 {\n  --tw-bg-opacity: 0.9 ;\n}\n\n.pw-bg-gradient-to-r {\n  background-image: linear-gradient(to right, var(--tw-gradient-stops));\n}\n\n.pw-from-\\\\[\\\\#AF4AFF\\\\] {\n  --tw-gradient-from: #AF4AFF var(--tw-gradient-from-position);\n  --tw-gradient-to: rgba(175, 74, 255, 0) var(--tw-gradient-to-position);\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) ;\n}\n\n.pw-to-\\\\[\\\\#DD53FF\\\\] {\n  --tw-gradient-to: #DD53FF var(--tw-gradient-to-position) ;\n}\n\n.pw-object-contain {\n  -o-object-fit: contain;\n  object-fit: contain;\n}\n\n.\\\\!pw-p-0 {\n  padding: 0px !important;\n}\n\n.pw-p-0 {\n  padding: 0px;\n}\n\n.pw-p-4 {\n  padding: 1rem;\n}\n\n.pw-p-5 {\n  padding: 1.25rem;\n}\n\n.pw-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.pw-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.pw-px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n\n.pw-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pw-py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.pw-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n\n.pw-pl-8 {\n  padding-left: 2rem;\n}\n\n.pw-pt-1 {\n  padding-top: 0.25rem;\n}\n\n.pw-pt-3 {\n  padding-top: 0.75rem;\n}\n\n.pw-pt-4 {\n  padding-top: 1rem;\n}\n\n.pw-text-center {\n  text-align: center;\n}\n\n.pw-align-\\\\[-0\\\\.125em\\\\] {\n  vertical-align: -0.125em;\n}\n\n.pw-font-\\\\[\\\\'Roboto_Flex\\\\'\\\\] {\n  font-family: \"Roboto Flex\";\n}\n\n.pw-font-pw {\n  font-family: Roboto Flex;\n}\n\n.pw-text-2xl {\n  font-size: 1.5rem;\n  line-height: 2rem;\n}\n\n.pw-text-3xl {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n}\n\n.pw-text-4xl {\n  font-size: 2.25rem;\n  line-height: 2.5rem;\n}\n\n.pw-text-6xl {\n  font-size: 3.75rem;\n  line-height: 1;\n}\n\n.pw-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.pw-text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n\n.pw-text-xl {\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n}\n\n.pw-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.pw-font-medium {\n  font-weight: 500;\n}\n\n.pw-text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156, 163, 175);\n  color: rgba(156, 163, 175, var(--tw-text-opacity));\n}\n\n.pw-text-green-500 {\n  --tw-text-opacity: 1;\n  color: rgb(34, 197, 94);\n  color: rgba(34, 197, 94, var(--tw-text-opacity));\n}\n\n.pw-text-grey-10 {\n  --tw-text-opacity: 1;\n  color: rgb(29, 30, 34);\n  color: rgba(29, 30, 34, var(--tw-text-opacity));\n}\n\n.pw-text-grey-5 {\n  --tw-text-opacity: 1;\n  color: rgb(201, 201, 201);\n  color: rgba(201, 201, 201, var(--tw-text-opacity));\n}\n\n.pw-text-grey-6 {\n  --tw-text-opacity: 1;\n  color: rgb(158, 158, 158);\n  color: rgba(158, 158, 158, var(--tw-text-opacity));\n}\n\n.pw-text-grey-7 {\n  --tw-text-opacity: 1;\n  color: rgb(117, 117, 117);\n  color: rgba(117, 117, 117, var(--tw-text-opacity));\n}\n\n.pw-text-orange-400 {\n  --tw-text-opacity: 1;\n  color: rgb(251, 146, 60);\n  color: rgba(251, 146, 60, var(--tw-text-opacity));\n}\n\n.pw-text-primary {\n  --tw-text-opacity: 1;\n  color: rgb(154, 45, 183);\n  color: rgba(154, 45, 183, var(--tw-text-opacity));\n}\n\n.pw-text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239, 68, 68);\n  color: rgba(239, 68, 68, var(--tw-text-opacity));\n}\n\n.pw-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255, 255, 255);\n  color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n.pw-no-underline {\n  text-decoration-line: none;\n}\n\n.pw-shadow-footer-shadow {\n  --tw-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n  --tw-shadow-colored: 0px 0px 8px 0px var(--tw-shadow-color);\n  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0px 0px 8px 0px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);\n}\n\n.pw-shadow-grey-5 {\n  --tw-shadow-color: #C9C9C9;\n  --tw-shadow: var(--tw-shadow-colored) ;\n}\n\n.pw-outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.pw-outline-dashed {\n  outline-style: dashed;\n}\n\n.pw-outline-grey-6 {\n  outline-color: #9E9E9E;\n}\n\n.pw-drop-shadow-\\\\[0_4px_8px_rgba\\\\(200\\\\,123\\\\,221\\\\,0\\\\.60\\\\)\\\\] {\n  --tw-drop-shadow: drop-shadow(0 4px 8px rgba(200,123,221,0.60));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) drop-shadow(0 4px 8px rgba(200, 123, 221, 0.6));\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n.pw-transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.pw-duration-100 {\n  transition-duration: 100ms;\n}\n\n.pw-duration-200 {\n  transition-duration: 200ms;\n}\n\n.pw-duration-500 {\n  transition-duration: 500ms;\n}\n\n.\\\\!\\\\[clip\\\\:pw-rect\\\\(0\\\\,0\\\\,0\\\\,0\\\\)\\\\] {\n  clip: pw-rect(0, 0, 0, 0) !important;\n}\n\n.pw-watermark {\n  position: absolute;\n  transform: rotate(-25deg);\n  opacity: 0.5;\n  font-weight: 500;\n  font-size: 20px;\n  text-transform: capitalize;\n  color: #9e9e9e;\n  white-space: nowrap;\n  overflow: hidden;\n  -webkit-text-stroke-width: 0.3px;\n  -webkit-text-stroke-color: #1d1e22;\n}\n\n.camera-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  margin: 0;\n  height: 100%;\n  width: 100%;\n  background-color: black;\n}\n.camera-header-area {\n  position: absolute;\n  text-align: center;\n  z-index: 2;\n  top: 5%;\n  width: 100%;\n}\n.camera-header-area .title {\n  color: white;\n}\n.camera-body-area {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n.camera-body-area .video-container {\n  z-index: -1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.camera-body-area .video-element {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.camera-body-area .canvas-element {\n  position: absolute;\n  z-index: 9;\n}\n.camera-body-area .overlay-container {\n  position: absolute;\n  margin: auto;\n  z-index: 1;\n}\n.camera-body-area .overlay-element {\n  position: relative;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-shadow: 0px -50px 200px rgba(60, 60, 58, 0.76), 0px 50px 200px rgba(60, 60, 58, 0.76), -100px 0px 100px 9999px rgba(25, 20, 20, 0.9);\n}\n.camera-body-area .border-element {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.camera-body-area .border-top-element:before,\n.camera-body-area .border-top-element:after,\n.camera-body-area .border-bottom-element:before,\n.camera-body-area .border-bottom-element:after {\n  position: absolute;\n  content: \"\";\n  width: 10%;\n  height: 15%;\n  border-color: white;\n  border-style: solid;\n}\n.camera-body-area .border-top-element:before {\n  top: -2px;\n  left: -2px;\n  border-width: 4px 0 0 4px;\n  border-top-left-radius: 15px;\n}\n.camera-body-area .border-top-element:after {\n  top: -2px;\n  right: -2px;\n  border-width: 4px 4px 0 0;\n  border-top-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:before {\n  bottom: -2px;\n  right: -2px;\n  border-width: 0 4px 4px 0;\n  border-bottom-right-radius: 15px;\n}\n.camera-body-area .border-bottom-element:after {\n  bottom: -2px;\n  left: -2px;\n  border-width: 0 0 4px 4px;\n  border-bottom-left-radius: 15px;\n}\n.camera-body-area .overlay-element--active {\n  border-color: #8ede34 !important;\n}\n.camera-body-area .overlay-element--selfie-smile {\n  background-size: contain;\n  background-position: center center;\n  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_0___});\n}\n.camera-body-area .overlay-element--selfie-neutral {\n  background-size: contain;\n  background-position: center center;\n  background-image: url(${___CSS_LOADER_URL_REPLACEMENT_1___});\n}\n.camera-footer-area {\n  position: absolute;\n  text-align: center;\n  z-index: 2;\n  bottom: 10%;\n  width: 100%;\n}\n.camera-footer-area .instruction {\n  color: white;\n}\n\n.active\\\\:pw-scale-90:active {\n  --tw-scale-x: .9;\n  --tw-scale-y: .9;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0.9) scaleY(0.9);\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n  visibility: visible;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-visible {\n  visibility: visible;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n  top: 50%;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-2\\\\/4 {\n  top: 50%;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n  top: 1.75rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-top-7 {\n  top: 1.75rem;\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:-pw-translate-y-2\\\\/4 {\n  --tw-translate-y: -50%;\n  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n.pw-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.pw-peer:placeholder-shown ~ .peer-placeholder-shown\\\\:pw-text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-invisible {\n  visibility: hidden;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-top-3 {\n  top: 0.75rem;\n}\n\n.pw-peer:focus ~ .peer-focus\\\\:pw-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n@media (min-width: 384px) {\n  .pw-min\\\\:pw-border-solid {\n    border-style: solid;\n  }\n  .pw-min\\\\:pw-border-grey-4 {\n    --tw-border-opacity: 1;\n    border-color: rgb(231, 231, 236);\n    border-color: rgba(231, 231, 236, var(--tw-border-opacity));\n  }\n}\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:-moz-placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:-moz-placeholder-shown):not(:focus):invalid {\n  --tw-border-opacity: 1;\n  border-color: rgb(239, 68, 68);\n  border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}\n\n.invalid\\\\:\\\\[\\\\&\\\\:not\\\\(\\\\:placeholder-shown\\\\)\\\\:not\\\\(\\\\:focus\\\\)\\\\]\\\\:pw-border-red-500:not(:placeholder-shown):not(:focus):invalid {\n  --tw-border-opacity: 1;\n  border-color: rgb(239, 68, 68);\n  border-color: rgba(239, 68, 68, var(--tw-border-opacity));\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://PWUISDK/./src/assets/scss/index.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -3473,7 +3473,7 @@ eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElem
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.displayMode = exports.mainScreenId = void 0;\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nclass MainPage {\n    get mainScreenId() {\n        return exports.mainScreenId;\n    }\n    get displayMode() {\n        return exports.displayMode;\n    }\n    set mainScreenId(value) {\n        exports.mainScreenId = value;\n    }\n    set displayMode(value) {\n        exports.displayMode = value;\n    }\n    constructor(mainScreenId, displayMode) {\n        this.mainScreenId = mainScreenId;\n        this.displayMode = displayMode;\n    }\n    renderLoadingScreen() {\n        this.overlayElement = document.createElement(\"div\");\n        this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\");\n        this.overlayContent = document.createElement(\"div\");\n        this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n        const spinner = (0, components_1.createSpinner)(4, \"grey-5\", 8);\n        this.overlayContent.appendChild(spinner);\n        this.overlayElement.appendChild(this.overlayContent);\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n    }\n    updateOverlayContent(content) {\n        var _a, _b;\n        (_a = this.overlayContent) === null || _a === void 0 ? void 0 : _a.remove();\n        this.overlayContent = content;\n        (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.appendChild(this.overlayContent);\n    }\n    removeOverlayElement() {\n        var _a;\n        (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.remove();\n    }\n    proceedNextMainstep(nextStep) { }\n    closeMainPage() {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        const event = new CustomEvent(\"close:ekyc\");\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    renderContent(content) {\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(content);\n    }\n    clearScreen() {\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.replaceChildren();\n    }\n    finishEkyc() {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        const event = new CustomEvent(\"finish:ekyc\");\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    openImageFullScreen(img, watermarkText) {\n        this.overlayElement = document.createElement(\"div\");\n        this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-90\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\", \"pw-transition-all\", \"pw-duration-500\");\n        const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeIcon.classList.add(\"pw-absolute\", \"pw-top-5\", \"pw-right-5\");\n        closeIcon.addEventListener(\"click\", () => {\n            this.removeOverlayElement();\n        });\n        this.overlayElement.appendChild(closeIcon);\n        this.overlayContent = document.createElement(\"div\");\n        this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1\", \"pw-right-1\", \"pw-top-1/3\", \"pw-text-white\");\n        const imageDiv = document.createElement(\"div\");\n        imageDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-center\", \"pw-items-center\", \"pw-overflow-hidden\");\n        const image = document.createElement(\"img\");\n        image.classList.add(\"pw-w-full\");\n        image.setAttribute(\"src\", img);\n        if (watermarkText && watermarkText.trim() !== \"\") {\n            const imgWatermark = document.createElement(\"div\");\n            imgWatermark.classList.add(\"pw-watermark\");\n            imgWatermark.innerHTML = watermarkText;\n            imageDiv.appendChild(imgWatermark);\n        }\n        imageDiv.appendChild(image);\n        this.overlayContent.appendChild(imageDiv);\n        this.overlayElement.appendChild(this.overlayContent);\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n        // this.overlayElement.classList.add(\"pw-bg-opacity-80\");\n    }\n    openErrorPage(title, description) {\n        this.clearScreen();\n        const errorDiv = document.createElement(\"div\");\n        errorDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const contentDiv = document.createElement(\"div\");\n        errorDiv.appendChild(contentDiv);\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n        const closeButton = document.createElement(\"div\");\n        closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButton.appendChild(closeIcon);\n        closeButton.addEventListener(\"click\", () => this.closeMainPage());\n        navigationDiv.appendChild(closeButton);\n        contentDiv.appendChild(navigationDiv);\n        const errorContainer = document.createElement(\"div\");\n        errorContainer.classList.add(\"pw-relative\", \"pw-h-full\");\n        const errorContentDiv = document.createElement(\"div\");\n        errorContentDiv.classList.add(\"pw-absolute\", \"pw-top-1/3\", \"pw-text-center\", \"-pw-translate-y-1/3\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\");\n        warningIcon.style.fontSize = \"60px\";\n        errorContentDiv.appendChild(warningIcon);\n        const errorTitle = document.createElement(\"div\");\n        errorTitle.classList.add(\"pw-text-xl\", \"pw-mb-4\");\n        errorTitle.innerHTML = title || \"Something went wrong\";\n        errorContentDiv.appendChild(errorTitle);\n        const errorDescription = document.createElement(\"div\");\n        errorDescription.innerHTML =\n            description || \"Please contact customer support for assistance or retry.\";\n        errorContentDiv.appendChild(errorDescription);\n        errorContainer.appendChild(errorContentDiv);\n        const footerDiv = document.createElement(\"div\");\n        const footerSlot = document.createElement(\"slot\");\n        footerSlot.classList.add(\"pw-mt-5\");\n        footerSlot.name = \"footer\";\n        footerDiv.appendChild(footerSlot);\n        const footer = new footer_1.default().render();\n        footerDiv.appendChild(footer);\n        errorDiv.appendChild(errorContainer);\n        errorDiv.appendChild(footerDiv);\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(errorDiv);\n        return errorDiv;\n    }\n}\nexports[\"default\"] = MainPage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/classes/MainPage.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.displayMode = exports.mainScreenId = void 0;\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nclass MainPage {\n    get mainScreenId() {\n        return exports.mainScreenId;\n    }\n    get displayMode() {\n        return exports.displayMode;\n    }\n    set mainScreenId(value) {\n        exports.mainScreenId = value;\n    }\n    set displayMode(value) {\n        exports.displayMode = value;\n    }\n    constructor(mainScreenId, displayMode) {\n        this.mainScreenId = mainScreenId;\n        this.displayMode = displayMode;\n    }\n    renderLoadingScreen() {\n        this.overlayElement = document.createElement(\"div\");\n        this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\");\n        this.overlayContent = document.createElement(\"div\");\n        this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\");\n        const spinner = (0, components_1.createSpinner)(4, \"grey-5\", 8);\n        this.overlayContent.appendChild(spinner);\n        this.overlayElement.appendChild(this.overlayContent);\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n    }\n    updateOverlayContent(content) {\n        var _a, _b;\n        (_a = this.overlayContent) === null || _a === void 0 ? void 0 : _a.remove();\n        this.overlayContent = content;\n        (_b = this.overlayElement) === null || _b === void 0 ? void 0 : _b.appendChild(this.overlayContent);\n    }\n    removeOverlayElement() {\n        var _a;\n        (_a = this.overlayElement) === null || _a === void 0 ? void 0 : _a.remove();\n    }\n    proceedNextMainstep(nextStep) { }\n    closeMainPage() {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        const event = new CustomEvent(\"close:ekyc\");\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    renderContent(content) {\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(content);\n    }\n    clearScreen() {\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.replaceChildren();\n    }\n    onSuccessEkyc() {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        const event = new CustomEvent(\"success:ekyc\");\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    onFailedEkyc(error) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        const event = new CustomEvent(\"fail:ekyc\", { detail: error });\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.remove();\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.dispatchEvent(event);\n    }\n    openImageFullScreen(img, watermarkText) {\n        this.overlayElement = document.createElement(\"div\");\n        this.overlayElement.classList.add(\"pw-bg-black\", \"pw-bg-opacity-90\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-50\", \"pw-transition-all\", \"pw-duration-500\");\n        const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeIcon.classList.add(\"pw-absolute\", \"pw-top-5\", \"pw-right-5\");\n        closeIcon.addEventListener(\"click\", () => {\n            this.removeOverlayElement();\n        });\n        this.overlayElement.appendChild(closeIcon);\n        this.overlayContent = document.createElement(\"div\");\n        this.overlayContent.classList.add(\"pw-absolute\", \"pw-left-1\", \"pw-right-1\", \"pw-top-1/3\", \"pw-text-white\");\n        const imageDiv = document.createElement(\"div\");\n        imageDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-center\", \"pw-items-center\", \"pw-overflow-hidden\");\n        const image = document.createElement(\"img\");\n        image.classList.add(\"pw-w-full\");\n        image.setAttribute(\"src\", img);\n        if (watermarkText && watermarkText.trim() !== \"\") {\n            const imgWatermark = document.createElement(\"div\");\n            imgWatermark.classList.add(\"pw-watermark\");\n            imgWatermark.innerHTML = watermarkText;\n            imageDiv.appendChild(imgWatermark);\n        }\n        imageDiv.appendChild(image);\n        this.overlayContent.appendChild(imageDiv);\n        this.overlayElement.appendChild(this.overlayContent);\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(this.overlayElement);\n        // this.overlayElement.classList.add(\"pw-bg-opacity-80\");\n    }\n    openErrorPage(title, description) {\n        this.clearScreen();\n        const errorDiv = document.createElement(\"div\");\n        errorDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const contentDiv = document.createElement(\"div\");\n        errorDiv.appendChild(contentDiv);\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n        const closeButton = document.createElement(\"div\");\n        closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButton.appendChild(closeIcon);\n        closeButton.addEventListener(\"click\", () => this.closeMainPage());\n        navigationDiv.appendChild(closeButton);\n        contentDiv.appendChild(navigationDiv);\n        const errorContainer = document.createElement(\"div\");\n        errorContainer.classList.add(\"pw-relative\", \"pw-h-full\");\n        const errorContentDiv = document.createElement(\"div\");\n        errorContentDiv.classList.add(\"pw-absolute\", \"pw-top-1/3\", \"pw-text-center\", \"-pw-translate-y-1/3\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\");\n        warningIcon.style.fontSize = \"60px\";\n        errorContentDiv.appendChild(warningIcon);\n        const errorTitle = document.createElement(\"div\");\n        errorTitle.classList.add(\"pw-text-xl\", \"pw-mb-4\");\n        errorTitle.innerHTML = title || \"Something went wrong\";\n        errorContentDiv.appendChild(errorTitle);\n        const errorDescription = document.createElement(\"div\");\n        errorDescription.innerHTML =\n            description || \"Please contact customer support for assistance or retry.\";\n        errorContentDiv.appendChild(errorDescription);\n        errorContainer.appendChild(errorContentDiv);\n        const footerDiv = document.createElement(\"div\");\n        const footerSlot = document.createElement(\"slot\");\n        footerSlot.classList.add(\"pw-mt-5\");\n        footerSlot.name = \"footer\";\n        footerDiv.appendChild(footerSlot);\n        const footer = new footer_1.default().render();\n        footerDiv.appendChild(footer);\n        errorDiv.appendChild(errorContainer);\n        errorDiv.appendChild(footerDiv);\n        const screen = document.getElementById(this.mainScreenId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(errorDiv);\n        return errorDiv;\n    }\n}\nexports[\"default\"] = MainPage;\n\n\n//# sourceURL=webpack://PWUISDK/./src/classes/MainPage.ts?");
 
 /***/ }),
 
@@ -3616,7 +3616,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\ncons
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DOC_TYPE = exports.FORM_KEY = exports.cardTypeMapping = exports.genderTypeMapping = exports.idTypeMapping = exports.formLabelMapping = void 0;\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nexports.formLabelMapping = {\n    nationality: \"Nationality\",\n    full_name: \"Full name\",\n    given_name: \"Given name\",\n    surname: \"Surname\",\n    id_number: \"ID number\",\n    date_of_birth: \"Date of birth\",\n    gender: \"Gender\",\n    line1: \"Address\",\n    city: \"City\",\n    state_name: \"State\",\n    zip: \"Zip code\",\n    country_name: \"Country/Region\",\n};\nexports.idTypeMapping = {\n    passport: \"Passport\",\n    national_identity_document: \"National identity\",\n    driving_license: \"Driver's license\",\n};\nexports.genderTypeMapping = {\n    MALE: \"MALE\",\n    FEMALE: \"FEMALE\",\n};\nexports.cardTypeMapping = {\n    national_identity_document: {\n        front: camera_1.CARD_TYPES.ID,\n        back: camera_1.CARD_TYPES.ID_BACK,\n    },\n    driving_license: {\n        front: camera_1.CARD_TYPES.LICENSE,\n        back: camera_1.CARD_TYPES.LICENSE_BACK,\n    },\n    passport: {\n        front: camera_1.CARD_TYPES.PASSPORT,\n        back: undefined,\n    },\n};\nvar FORM_KEY;\n(function (FORM_KEY) {\n    FORM_KEY[\"full_name\"] = \"full_name\";\n    FORM_KEY[\"given_name\"] = \"given_name\";\n    FORM_KEY[\"surname\"] = \"surname\";\n    FORM_KEY[\"id_number\"] = \"id_number\";\n    FORM_KEY[\"date_of_birth\"] = \"date_of_birth\";\n    FORM_KEY[\"gender\"] = \"gender\";\n    FORM_KEY[\"address\"] = \"line1\";\n    FORM_KEY[\"city\"] = \"city\";\n    FORM_KEY[\"state\"] = \"state_iso\";\n    FORM_KEY[\"zip\"] = \"zip\";\n    FORM_KEY[\"country\"] = \"country_iso2\";\n})(FORM_KEY || (exports.FORM_KEY = FORM_KEY = {}));\nvar DOC_TYPE;\n(function (DOC_TYPE) {\n    DOC_TYPE[\"PASSPORT\"] = \"passport\";\n    DOC_TYPE[\"NATIONAL_ID\"] = \"national_identity_document\";\n    DOC_TYPE[\"LICENSE\"] = \"driving_license\";\n})(DOC_TYPE || (exports.DOC_TYPE = DOC_TYPE = {}));\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/doc.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DOC_TYPE = exports.FORM_KEY = exports.cardTypeMapping = exports.genderTypeMapping = exports.idTypeMapping = exports.formLabelMapping = void 0;\nconst camera_1 = __webpack_require__(/*! ../models/camera */ \"./src/models/camera.ts\");\nexports.formLabelMapping = {\n    nationality: \"Nationality\",\n    full_name: \"Full name\",\n    given_name: \"Given name\",\n    surname: \"Surname\",\n    id_number: \"ID number\",\n    date_of_birth: \"Date of birth\",\n    gender: \"Gender\",\n    line1: \"Address\",\n    city: \"City\",\n    state_name: \"State\",\n    zip: \"Zip code\",\n    country_name: \"Country/Region\",\n    // use in form error dialog\n    country_iso2: \"Country/Region\",\n    state_iso: \"State\",\n};\nexports.idTypeMapping = {\n    passport: \"Passport\",\n    national_identity_document: \"National identity\",\n    driving_license: \"Driver's license\",\n};\nexports.genderTypeMapping = {\n    MALE: \"MALE\",\n    FEMALE: \"FEMALE\",\n};\nexports.cardTypeMapping = {\n    national_identity_document: {\n        front: camera_1.CARD_TYPES.ID,\n        back: camera_1.CARD_TYPES.ID_BACK,\n    },\n    driving_license: {\n        front: camera_1.CARD_TYPES.LICENSE,\n        back: camera_1.CARD_TYPES.LICENSE_BACK,\n    },\n    passport: {\n        front: camera_1.CARD_TYPES.PASSPORT,\n        back: undefined,\n    },\n};\nvar FORM_KEY;\n(function (FORM_KEY) {\n    FORM_KEY[\"full_name\"] = \"full_name\";\n    FORM_KEY[\"given_name\"] = \"given_name\";\n    FORM_KEY[\"surname\"] = \"surname\";\n    FORM_KEY[\"id_number\"] = \"id_number\";\n    FORM_KEY[\"date_of_birth\"] = \"date_of_birth\";\n    FORM_KEY[\"gender\"] = \"gender\";\n    FORM_KEY[\"address\"] = \"line1\";\n    FORM_KEY[\"city\"] = \"city\";\n    FORM_KEY[\"state\"] = \"state_iso\";\n    FORM_KEY[\"zip\"] = \"zip\";\n    FORM_KEY[\"country\"] = \"country_iso2\";\n})(FORM_KEY || (exports.FORM_KEY = FORM_KEY = {}));\nvar DOC_TYPE;\n(function (DOC_TYPE) {\n    DOC_TYPE[\"PASSPORT\"] = \"passport\";\n    DOC_TYPE[\"NATIONAL_ID\"] = \"national_identity_document\";\n    DOC_TYPE[\"LICENSE\"] = \"driving_license\";\n})(DOC_TYPE || (exports.DOC_TYPE = DOC_TYPE = {}));\n\n\n//# sourceURL=webpack://PWUISDK/./src/constant/doc.ts?");
 
 /***/ }),
 
@@ -3682,7 +3682,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst VerifyId_1 = __importDefault(__webpack_require__(/*! ./VerifyId */ \"./src/pageClass/VerifyId.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nclass CardError extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(isRetake) {\n        this.renderContent(this.createPage(isRetake));\n    }\n    createPage(isRetake) {\n        const mainDiv = document.createElement(\"div\");\n        mainDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\");\n        const cardErrorDiv = document.createElement(\"div\");\n        cardErrorDiv.classList.add(\"pw-p-5\");\n        mainDiv.appendChild(cardErrorDiv);\n        const iconContainer = document.createElement(\"div\");\n        iconContainer.classList.add(\"pw-mx-auto\", \"pw-mt-16\", \"pw-mb-4\", \"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\");\n        warningIcon.style.fontSize = \"60px\";\n        iconContainer.appendChild(warningIcon);\n        cardErrorDiv.appendChild(iconContainer);\n        const title = document.createElement(\"div\");\n        title.classList.add(\"pw-text-center\", \"pw-text-3xl\", \"pw-mb-10\");\n        title.innerHTML = \"Submission error\";\n        cardErrorDiv.appendChild(title);\n        const cardsDiv = document.createElement(\"div\");\n        cardsDiv.classList.add(\"pw-mx-auto\", \"pw-w-60\", \"pw-h-40\", \"pw-mb-5\", \"pw-flex\", \"pw-justify-center\");\n        const cardImg = document.createElement(\"img\");\n        cardImg.classList.add(\"pw-max-w-60\", \"pw-max-h-40\", \"pw-rounded-lg\");\n        cardImg.style.objectFit = \"contain\";\n        cardImg.setAttribute(\"src\", (0, imagesHelper_1.getFrontImg)().croppedImage || \"\");\n        cardImg.addEventListener(\"click\", () => {\n            this.openImageFullScreen(cardImg.src);\n        });\n        cardsDiv.appendChild(cardImg);\n        cardErrorDiv.appendChild(cardsDiv);\n        const tabsDiv = document.createElement(\"div\");\n        tabsDiv.classList.add(\"pw-flex\", \"pw-justify-center\", \"pw-gap-x-3\", \"pw-mb-8\");\n        const frontTabDiv = document.createElement(\"div\");\n        frontTabDiv.classList.add(\"pw-box-border\", \"pw-text-center\", \"pw-border-solid\", \"pw-relative\", \"pw-rounded-full\", \"pw-text-grey-6\", \"pw-cursor-pointer\", \"pw-border-primary\", \"pw-bg-primary-light\", \"pw-text-primary\", \"pw-w-24\", \"pw-h-9\");\n        const frontTabLabel = document.createElement(\"div\");\n        frontTabLabel.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"pw-top-1/2\", \"-pw-translate-y-2/4\", \"-pw-translate-x-2/4\");\n        frontTabLabel.innerHTML = \"Front\";\n        frontTabDiv.appendChild(frontTabLabel);\n        tabsDiv.appendChild(frontTabDiv);\n        const backTabDiv = document.createElement(\"div\");\n        backTabDiv.classList.add(\"pw-box-border\", \"pw-text-center\", \"pw-border-solid\", \"pw-relative\", \"pw-rounded-full\", \"pw-text-grey-6\", \"pw-cursor-pointer\", \"pw-w-24\", \"pw-h-9\");\n        const backTabLabel = document.createElement(\"div\");\n        backTabLabel.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"pw-top-1/2\", \"-pw-translate-y-2/4\", \"-pw-translate-x-2/4\");\n        backTabLabel.innerHTML = \"Back\";\n        backTabDiv.appendChild(backTabLabel);\n        frontTabDiv.addEventListener(\"click\", () => {\n            cardImg.setAttribute(\"src\", (0, imagesHelper_1.getFrontImg)().croppedImage || \"\");\n            this.changeTabStyle(frontTabDiv, backTabDiv);\n        });\n        backTabDiv.addEventListener(\"click\", () => {\n            cardImg.setAttribute(\"src\", (0, imagesHelper_1.getBackImg)().croppedImage || \"\");\n            this.changeTabStyle(backTabDiv, frontTabDiv);\n        });\n        tabsDiv.appendChild(backTabDiv);\n        cardErrorDiv.appendChild(tabsDiv);\n        const list = document.createElement(\"ul\");\n        list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n        const listItem1 = document.createElement(\"li\");\n        listItem1.classList.add(\"pw-mb-3\");\n        listItem1.innerHTML = \"The image is blur, please take a clear photo.\";\n        const listItem2 = document.createElement(\"li\");\n        listItem2.innerHTML =\n            \"The image has glare issues, please take a clear photo in a well-lit area.\";\n        list.appendChild(listItem1);\n        list.appendChild(listItem2);\n        cardErrorDiv.appendChild(list);\n        const contactSupportDiv = document.createElement(\"div\");\n        contactSupportDiv.classList.add(\"pw-mb-16\");\n        contactSupportDiv.innerHTML =\n            \"If a problem persists, please contact support.\";\n        cardErrorDiv.appendChild(contactSupportDiv);\n        const retakeButton = (0, components_1.createPrimaryButton)(isRetake ? \"Retake\" : \"Proceed\");\n        retakeButton.addEventListener(\"click\", () => {\n            this.clearScreen();\n            if (isRetake) {\n                // redirect to verify id page again\n                const verifyId = new VerifyId_1.default(this.mainScreenId, this.displayMode);\n                return verifyId.render();\n            }\n            // redirect to thank you page\n            const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n            reviewEkyc.render();\n        });\n        const retakeContainer = document.createElement(\"div\");\n        retakeContainer.classList.add(\"pw-p-5\");\n        retakeContainer.appendChild(retakeButton);\n        mainDiv.appendChild(retakeContainer);\n        // cardErrorDiv.appendChild(retakeButton);\n        // return cardErrorDiv;\n        return mainDiv;\n    }\n    changeTabStyle(selectedTab, notSelectedTab) {\n        selectedTab.classList.add(\"pw-border-primary\", \"pw-bg-primary-light\", \"pw-text-primary\");\n        notSelectedTab.classList.remove(\"pw-border-primary\", \"pw-bg-primary-light\", \"pw-text-primary\");\n    }\n}\nexports[\"default\"] = CardError;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/CardError.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst VerifyId_1 = __importDefault(__webpack_require__(/*! ./VerifyId */ \"./src/pageClass/VerifyId.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nclass CardError extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(isRetake, err) {\n        this.renderContent(this.createPage(isRetake, err));\n    }\n    createPage(isRetake, err) {\n        const mainDiv = document.createElement(\"div\");\n        mainDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\");\n        const cardErrorDiv = document.createElement(\"div\");\n        cardErrorDiv.classList.add(\"pw-p-5\");\n        mainDiv.appendChild(cardErrorDiv);\n        const iconContainer = document.createElement(\"div\");\n        iconContainer.classList.add(\"pw-mx-auto\", \"pw-mt-16\", \"pw-mb-4\", \"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\");\n        warningIcon.style.fontSize = \"60px\";\n        iconContainer.appendChild(warningIcon);\n        cardErrorDiv.appendChild(iconContainer);\n        const title = document.createElement(\"div\");\n        title.classList.add(\"pw-text-center\", \"pw-text-3xl\", \"pw-mb-10\");\n        title.innerHTML = \"Submission error\";\n        cardErrorDiv.appendChild(title);\n        const cardsDiv = document.createElement(\"div\");\n        cardsDiv.classList.add(\"pw-mx-auto\", \"pw-w-60\", \"pw-h-40\", \"pw-mb-5\", \"pw-flex\", \"pw-justify-center\");\n        const cardImg = document.createElement(\"img\");\n        cardImg.classList.add(\"pw-max-w-60\", \"pw-max-h-40\", \"pw-rounded-lg\");\n        cardImg.style.objectFit = \"contain\";\n        cardImg.setAttribute(\"src\", (0, imagesHelper_1.getFrontImg)().croppedImage || \"\");\n        cardImg.addEventListener(\"click\", () => {\n            this.openImageFullScreen(cardImg.src);\n        });\n        cardsDiv.appendChild(cardImg);\n        cardErrorDiv.appendChild(cardsDiv);\n        const tabsDiv = document.createElement(\"div\");\n        tabsDiv.classList.add(\"pw-flex\", \"pw-justify-center\", \"pw-gap-x-3\", \"pw-mb-8\");\n        const frontTabDiv = document.createElement(\"div\");\n        frontTabDiv.classList.add(\"pw-box-border\", \"pw-text-center\", \"pw-border-solid\", \"pw-relative\", \"pw-rounded-full\", \"pw-text-grey-6\", \"pw-cursor-pointer\", \"pw-border-primary\", \"pw-bg-primary-light\", \"pw-text-primary\", \"pw-w-24\", \"pw-h-9\");\n        const frontTabLabel = document.createElement(\"div\");\n        frontTabLabel.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"pw-top-1/2\", \"-pw-translate-y-2/4\", \"-pw-translate-x-2/4\");\n        frontTabLabel.innerHTML = \"Front\";\n        frontTabDiv.appendChild(frontTabLabel);\n        tabsDiv.appendChild(frontTabDiv);\n        const backTabDiv = document.createElement(\"div\");\n        backTabDiv.classList.add(\"pw-box-border\", \"pw-text-center\", \"pw-border-solid\", \"pw-relative\", \"pw-rounded-full\", \"pw-text-grey-6\", \"pw-cursor-pointer\", \"pw-w-24\", \"pw-h-9\");\n        const backTabLabel = document.createElement(\"div\");\n        backTabLabel.classList.add(\"pw-absolute\", \"pw-left-1/2\", \"pw-top-1/2\", \"-pw-translate-y-2/4\", \"-pw-translate-x-2/4\");\n        backTabLabel.innerHTML = \"Back\";\n        backTabDiv.appendChild(backTabLabel);\n        frontTabDiv.addEventListener(\"click\", () => {\n            cardImg.setAttribute(\"src\", (0, imagesHelper_1.getFrontImg)().croppedImage || \"\");\n            this.changeTabStyle(frontTabDiv, backTabDiv);\n        });\n        backTabDiv.addEventListener(\"click\", () => {\n            cardImg.setAttribute(\"src\", (0, imagesHelper_1.getBackImg)().croppedImage || \"\");\n            this.changeTabStyle(backTabDiv, frontTabDiv);\n        });\n        tabsDiv.appendChild(backTabDiv);\n        cardErrorDiv.appendChild(tabsDiv);\n        const list = document.createElement(\"ul\");\n        list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n        const listItem1 = document.createElement(\"li\");\n        listItem1.classList.add(\"pw-mb-3\");\n        listItem1.innerHTML = \"The image is blur, please take a clear photo.\";\n        const listItem2 = document.createElement(\"li\");\n        listItem2.innerHTML =\n            \"The image has glare issues, please take a clear photo in a well-lit area.\";\n        list.appendChild(listItem1);\n        list.appendChild(listItem2);\n        cardErrorDiv.appendChild(list);\n        const contactSupportDiv = document.createElement(\"div\");\n        contactSupportDiv.classList.add(\"pw-mb-16\");\n        contactSupportDiv.innerHTML =\n            \"If a problem persists, please contact support.\";\n        cardErrorDiv.appendChild(contactSupportDiv);\n        const retakeButton = (0, components_1.createPrimaryButton)(isRetake ? \"Retake\" : \"Proceed\");\n        retakeButton.addEventListener(\"click\", () => {\n            this.clearScreen();\n            if (isRetake) {\n                // redirect to verify id page again\n                const verifyId = new VerifyId_1.default(this.mainScreenId, this.displayMode);\n                return verifyId.render();\n            }\n            // redirect to submission limit error page\n            const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n            submissionLimit.render(err);\n        });\n        const retakeContainer = document.createElement(\"div\");\n        retakeContainer.classList.add(\"pw-p-5\");\n        retakeContainer.appendChild(retakeButton);\n        mainDiv.appendChild(retakeContainer);\n        // cardErrorDiv.appendChild(retakeButton);\n        // return cardErrorDiv;\n        return mainDiv;\n    }\n    changeTabStyle(selectedTab, notSelectedTab) {\n        selectedTab.classList.add(\"pw-border-primary\", \"pw-bg-primary-light\", \"pw-text-primary\");\n        notSelectedTab.classList.remove(\"pw-border-primary\", \"pw-bg-primary-light\", \"pw-text-primary\");\n    }\n}\nexports[\"default\"] = CardError;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/CardError.ts?");
 
 /***/ }),
 
@@ -3693,7 +3693,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst CardError_1 = __importDefault(__webpack_require__(/*! ./CardError */ \"./src/pageClass/CardError.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst card_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/card-camera */ \"./src/plugins/card-camera.ts\"));\nclass ConfirmDoc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode, defaultCountry, docType) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n        this.defaultCountry = defaultCountry;\n        this.docType = docType;\n        this.frontImg = (0, imagesHelper_1.getFrontImg)();\n        if (this.docType !== doc_1.DOC_TYPE.PASSPORT) {\n            this.backImg = (0, imagesHelper_1.getBackImg)();\n        }\n    }\n    render() {\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        const mainDiv = document.createElement(\"div\");\n        mainDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\");\n        const confirmIdDiv = document.createElement(\"div\");\n        confirmIdDiv.classList.add(\"pw-overflow-y-auto\", \"pw-p-5\");\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n        const stepper = new stepper_1.default();\n        const stepperElement = stepper.render(3, 5);\n        navigationDiv.classList.add(\"pw-pt-3\");\n        navigationDiv.appendChild(stepperElement);\n        const closeButtonDiv = document.createElement(\"div\");\n        closeButtonDiv.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeButton = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButtonDiv.appendChild(closeButton);\n        closeButton.addEventListener(\"click\", () => this.closeMainPage());\n        navigationDiv.appendChild(closeButtonDiv);\n        confirmIdDiv.appendChild(navigationDiv);\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\", \"pw-text-center\");\n        titleDiv.innerHTML = \"Confirm your document\";\n        confirmIdDiv.appendChild(titleDiv);\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.classList.add(\"pw-mb-4\", \"pw-text-center\");\n        descriptionDiv.innerHTML =\n            \"Submit front and back of the same document, make sure it's clear and not expired.\";\n        confirmIdDiv.appendChild(descriptionDiv);\n        const frontIdDiv = document.createElement(\"div\");\n        frontIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n        const frontIdContentDiv = document.createElement(\"div\");\n        frontIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n        frontIdDiv.appendChild(frontIdContentDiv);\n        const frontIdWording = document.createElement(\"div\");\n        frontIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n        frontIdWording.innerHTML = \"Front\";\n        const rotateContentDiv = document.createElement(\"div\");\n        const rotateButton = document.createElement(\"div\");\n        rotateButton.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n        const rotateLeft = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n        rotateButton.appendChild(rotateLeft);\n        rotateContentDiv.appendChild(rotateButton);\n        frontIdContentDiv.appendChild(frontIdWording);\n        frontIdContentDiv.appendChild(rotateContentDiv);\n        confirmIdDiv.appendChild(frontIdDiv);\n        const frontImgDiv = document.createElement(\"div\");\n        frontImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n        const frontImg = document.createElement(\"img\");\n        frontImg.classList.add(\"pw-rounded-lg\", \"pw-object-contain\");\n        frontImg.setAttribute(\"src\", this.frontImg.croppedImage || \"\");\n        frontImgDiv.appendChild(frontImg);\n        frontImgDiv.addEventListener(\"click\", () => {\n            this.openImageFullScreen(this.frontImg.croppedImage || \"\");\n        });\n        frontIdDiv.appendChild(frontImgDiv);\n        const angle = 90;\n        let rotation = 0;\n        let totalRotation = 0;\n        const typeMapping = doc_1.cardTypeMapping[this.docType];\n        rotateContentDiv.addEventListener(\"click\", () => {\n            rotation = rotation + angle;\n            totalRotation = (totalRotation + angle) % 360;\n            frontImgDiv.style.transform = `rotate(-${rotation}deg)`;\n        });\n        const retakeFrontIdButton = document.createElement(\"div\");\n        retakeFrontIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n        retakeFrontIdButton.innerHTML = \"Retake\";\n        retakeFrontIdButton.addEventListener(\"click\", () => {\n            this.retake(typeMapping.front, (image) => {\n                this.frontImg = image;\n                (0, imagesHelper_1.setFrontImg)(image);\n                frontImg.setAttribute(\"src\", image.croppedImage || \"\");\n            });\n        });\n        frontIdDiv.appendChild(retakeFrontIdButton);\n        // confirmIdDiv\n        const backIdDiv = document.createElement(\"div\");\n        backIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n        const backIdContentDiv = document.createElement(\"div\");\n        backIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n        backIdDiv.appendChild(backIdContentDiv);\n        const backIdWording = document.createElement(\"div\");\n        backIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n        backIdWording.innerHTML = \"Back\";\n        backIdContentDiv.appendChild(backIdWording);\n        // rotate content is from above\n        const rotateContentBackId = document.createElement(\"div\");\n        // rotateContentBackId.classList.add(\"pw-flex-none\");\n        const rotateButtonBackId = document.createElement(\"div\");\n        rotateButtonBackId.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n        const roateLeftBackId = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n        rotateButtonBackId.appendChild(roateLeftBackId);\n        rotateContentBackId.appendChild(rotateButtonBackId);\n        backIdContentDiv.appendChild(rotateContentBackId);\n        let backRotation = 0;\n        let totalbackRotation = 0;\n        const backImgSrc = this.backImg;\n        if (backImgSrc) {\n            const backImgDiv = document.createElement(\"div\");\n            backImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n            const backImg = document.createElement(\"img\");\n            backImg.classList.add(\"pw-rounded-lg\");\n            backImg.setAttribute(\"src\", backImgSrc.croppedImage || \"\");\n            backImgDiv.appendChild(backImg);\n            backIdDiv.appendChild(backImgDiv);\n            backImgDiv.addEventListener(\"click\", () => {\n                this.openImageFullScreen(backImgSrc.croppedImage || \"\");\n            });\n            const retakeBackIdButton = document.createElement(\"div\");\n            retakeBackIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n            retakeBackIdButton.innerHTML = \"Retake\";\n            retakeBackIdButton.addEventListener(\"click\", () => {\n                this.retake(typeMapping.back, (image) => {\n                    this.backImg = image;\n                    (0, imagesHelper_1.setBackImg)(image);\n                    backImg.setAttribute(\"src\", image.croppedImage || \"\");\n                });\n            });\n            backIdDiv.appendChild(retakeBackIdButton);\n            confirmIdDiv.appendChild(backIdDiv);\n            rotateContentBackId.addEventListener(\"click\", () => {\n                backRotation = backRotation + angle;\n                totalbackRotation = (totalbackRotation + angle) % 360;\n                backImgDiv.style.transform = `rotate(-${backRotation}deg)`;\n            });\n        }\n        const proceedButtonDiv = document.createElement(\"div\");\n        proceedButtonDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n        const proceedButton = (0, components_1.createPrimaryButton)(\"Proceed\");\n        proceedButton.addEventListener(\"click\", () => {\n            this.onClickProceed(proceedButton, totalRotation, totalbackRotation);\n        });\n        proceedButtonDiv.appendChild(proceedButton);\n        mainDiv.appendChild(confirmIdDiv);\n        mainDiv.appendChild(proceedButtonDiv);\n        return mainDiv;\n    }\n    createRotateImg(base64Image, degree) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return new Promise(function (resolve) {\n                // Create an Image element\n                const img = new Image();\n                img.src = base64Image;\n                // Wait for the image to load\n                img.onload = () => {\n                    // Create a canvas element\n                    const canvas = document.createElement(\"canvas\");\n                    const ctx = canvas.getContext(\"2d\");\n                    // Set canvas dimensions\n                    if ([0, 180].includes(degree)) {\n                        canvas.width = img.width;\n                        canvas.height = img.height;\n                    }\n                    else {\n                        // Swap width and height for rotation\n                        canvas.width = img.height;\n                        canvas.height = img.width;\n                    }\n                    // Rotate the image on the canvas\n                    if (ctx) {\n                        const radians = {\n                            0: 0,\n                            90: (Math.PI * 3) / 2,\n                            180: Math.PI,\n                            270: Math.PI / 2,\n                        };\n                        const radian = radians[degree] || 0;\n                        ctx.translate(canvas.width / 2, canvas.height / 2);\n                        ctx.rotate(radian); // Rotate n degrees\n                        ctx.drawImage(img, -img.width / 2, -img.height / 2);\n                    }\n                    // Get the rotated image data from the canvas\n                    resolve(canvas.toDataURL(\"image/jpeg\"));\n                };\n                setTimeout(() => {\n                    resolve(base64Image);\n                }, 3000);\n            });\n        });\n    }\n    onClickProceed(proceedButton, frontRotateDegree, backRotateDegree) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            // on loading btn\n            const loadingSpinner = (0, components_1.createSpinner)();\n            proceedButton.innerHTML = \"\";\n            proceedButton.appendChild(loadingSpinner);\n            try {\n                let frontImg = this.frontImg;\n                let backImg = this.backImg;\n                if (frontRotateDegree) {\n                    const rotatedFrontFullImg = yield this.createRotateImg(frontImg.fullImage, frontRotateDegree);\n                    const rotatedFrontCroppedImg = yield this.createRotateImg(frontImg.croppedImage, frontRotateDegree);\n                    frontImg = {\n                        fullImage: rotatedFrontFullImg,\n                        croppedImage: rotatedFrontCroppedImg,\n                    };\n                    (0, imagesHelper_1.setFrontImg)(frontImg);\n                }\n                if (backImg && backRotateDegree) {\n                    const rotatedBackFullImg = yield this.createRotateImg(backImg.fullImage, backRotateDegree);\n                    const rotatedBackCroppedImg = yield this.createRotateImg(backImg.croppedImage, backRotateDegree);\n                    backImg = {\n                        fullImage: rotatedBackFullImg,\n                        croppedImage: rotatedBackCroppedImg,\n                    };\n                    (0, imagesHelper_1.setBackImg)(backImg);\n                }\n                const req = Object.assign(Object.assign({ front_doc_base64: frontImg.croppedImage, front_doc_base64_full: frontImg.fullImage }, (backImg && {\n                    back_doc_base64: backImg.croppedImage,\n                    back_doc_base64_full: backImg.fullImage,\n                })), { doc_type: this.docType, issuing_country: this.defaultCountry });\n                yield uisdk_1.pwInstance.uploadDoc(req);\n                const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n                this.clearScreen();\n                startSelfie.render();\n            }\n            catch (err) {\n                console.error(err);\n                if ([\"PwError\", \"PwReqError\"].includes(err.name) && err.type) {\n                    if ([\n                        \"openApi/verification-type-invalid\",\n                        \"openApi/issuing-country-invalid\",\n                        \"openApi/doc-type-invalid\",\n                        \"openApi/doc-unpair\",\n                        \"openApi/doc-empty\",\n                        \"openApi/doc-blur\",\n                        \"openApi/doc-front-back-img-unsimilar\",\n                        \"openApi/doc-not-positioned-proper\",\n                        \"openApi/img-exposed\",\n                    ].includes(err.type)) {\n                        this.clearScreen();\n                        let isRetake = false;\n                        const pwErrorPayload = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payload;\n                        if (!!pwErrorPayload)\n                            isRetake = !!pwErrorPayload.is_retriable;\n                        const failPage = new CardError_1.default(this.mainScreenId, this.displayMode);\n                        return failPage.render(isRetake);\n                    }\n                    if ([\n                        \"openApi/max-doc-attempt\",\n                        \"openApi/limit-exceed\",\n                        \"openApi/max-session-attempt\",\n                        \"openApi/session-id-expired\",\n                        \"session-id-expired\",\n                    ].includes(err.type)) {\n                        this.clearScreen();\n                        // redirect to thank you page\n                        const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n                        return reviewEkyc.render();\n                    }\n                }\n                this.openErrorPage();\n            }\n            finally {\n                // off loading btn\n                if (loadingSpinner.hasChildNodes())\n                    proceedButton.removeChild(loadingSpinner);\n                proceedButton.innerHTML = \"Proceed\";\n            }\n        });\n    }\n    retake(cardType, captureCb) {\n        const screen = document.getElementById(this.mainScreenId);\n        const cameraDiv = document.createElement(\"div\");\n        cameraDiv.setAttribute(\"id\", this.cameraId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n        const idCam = new card_camera_1.default(this.cameraId, cardType, this.mainScreenId);\n        idCam.init();\n        idCam.listenToCardCapture((payload) => {\n            const { image } = payload.detail;\n            captureCb(image);\n            idCam.stopVideoStream();\n            cameraDiv.remove();\n        });\n    }\n}\nexports[\"default\"] = ConfirmDoc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ConfirmDoc.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst CardError_1 = __importDefault(__webpack_require__(/*! ./CardError */ \"./src/pageClass/CardError.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst card_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/card-camera */ \"./src/plugins/card-camera.ts\"));\nclass ConfirmDoc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode, defaultCountry, docType) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n        this.defaultCountry = defaultCountry;\n        this.docType = docType;\n        this.frontImg = (0, imagesHelper_1.getFrontImg)();\n        if (this.docType !== doc_1.DOC_TYPE.PASSPORT) {\n            this.backImg = (0, imagesHelper_1.getBackImg)();\n        }\n    }\n    render() {\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        const mainDiv = document.createElement(\"div\");\n        mainDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\");\n        const confirmIdDiv = document.createElement(\"div\");\n        confirmIdDiv.classList.add(\"pw-overflow-y-auto\", \"pw-p-5\");\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-6\");\n        const stepper = new stepper_1.default();\n        const stepperElement = stepper.render(3, 5);\n        navigationDiv.classList.add(\"pw-pt-3\");\n        navigationDiv.appendChild(stepperElement);\n        const closeButtonDiv = document.createElement(\"div\");\n        closeButtonDiv.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeButton = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButtonDiv.appendChild(closeButton);\n        closeButton.addEventListener(\"click\", () => this.closeMainPage());\n        navigationDiv.appendChild(closeButtonDiv);\n        confirmIdDiv.appendChild(navigationDiv);\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-6\", \"pw-text-center\");\n        titleDiv.innerHTML = \"Confirm your document\";\n        confirmIdDiv.appendChild(titleDiv);\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.classList.add(\"pw-mb-4\", \"pw-text-center\");\n        descriptionDiv.innerHTML =\n            \"Submit front and back of the same document, make sure it's clear and not expired.\";\n        confirmIdDiv.appendChild(descriptionDiv);\n        const frontIdDiv = document.createElement(\"div\");\n        frontIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n        const frontIdContentDiv = document.createElement(\"div\");\n        frontIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n        frontIdDiv.appendChild(frontIdContentDiv);\n        const frontIdWording = document.createElement(\"div\");\n        frontIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n        frontIdWording.innerHTML = \"Front\";\n        const rotateContentDiv = document.createElement(\"div\");\n        const rotateButton = document.createElement(\"div\");\n        rotateButton.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n        const rotateLeft = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n        rotateButton.appendChild(rotateLeft);\n        rotateContentDiv.appendChild(rotateButton);\n        frontIdContentDiv.appendChild(frontIdWording);\n        frontIdContentDiv.appendChild(rotateContentDiv);\n        confirmIdDiv.appendChild(frontIdDiv);\n        const frontImgDiv = document.createElement(\"div\");\n        frontImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n        const frontImg = document.createElement(\"img\");\n        frontImg.classList.add(\"pw-rounded-lg\", \"pw-object-contain\");\n        frontImg.setAttribute(\"src\", this.frontImg.croppedImage || \"\");\n        frontImgDiv.appendChild(frontImg);\n        frontImgDiv.addEventListener(\"click\", () => {\n            this.openImageFullScreen(this.frontImg.croppedImage || \"\");\n        });\n        frontIdDiv.appendChild(frontImgDiv);\n        const angle = 90;\n        let rotation = 0;\n        let totalRotation = 0;\n        const typeMapping = doc_1.cardTypeMapping[this.docType];\n        rotateContentDiv.addEventListener(\"click\", () => {\n            rotation = rotation + angle;\n            totalRotation = (totalRotation + angle) % 360;\n            frontImgDiv.style.transform = `rotate(-${rotation}deg)`;\n        });\n        const retakeFrontIdButton = document.createElement(\"div\");\n        retakeFrontIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n        retakeFrontIdButton.innerHTML = \"Retake\";\n        retakeFrontIdButton.addEventListener(\"click\", () => {\n            this.retake(typeMapping.front, (image) => {\n                this.frontImg = image;\n                (0, imagesHelper_1.setFrontImg)(image);\n                frontImg.setAttribute(\"src\", image.croppedImage || \"\");\n            });\n        });\n        frontIdDiv.appendChild(retakeFrontIdButton);\n        // confirmIdDiv\n        const backIdDiv = document.createElement(\"div\");\n        backIdDiv.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-3\");\n        const backIdContentDiv = document.createElement(\"div\");\n        backIdContentDiv.classList.add(\"pw-relative\", \"pw-flex\", \"pw-justify-end\", \"pw-mb-5\");\n        backIdDiv.appendChild(backIdContentDiv);\n        const backIdWording = document.createElement(\"div\");\n        backIdWording.classList.add(\"pw-text-center\", \"pw-absolute\", \"pw-top-2\", \"pw-right-2/4\", \"pw-translate-x-2/4\");\n        backIdWording.innerHTML = \"Back\";\n        backIdContentDiv.appendChild(backIdWording);\n        // rotate content is from above\n        const rotateContentBackId = document.createElement(\"div\");\n        // rotateContentBackId.classList.add(\"pw-flex-none\");\n        const rotateButtonBackId = document.createElement(\"div\");\n        rotateButtonBackId.classList.add(\"pw-box-border\", \"pw-w-14\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\");\n        const roateLeftBackId = (0, getGoogleIcon_1.getGoogleIcon)(\"rotate_left\");\n        rotateButtonBackId.appendChild(roateLeftBackId);\n        rotateContentBackId.appendChild(rotateButtonBackId);\n        backIdContentDiv.appendChild(rotateContentBackId);\n        let backRotation = 0;\n        let totalbackRotation = 0;\n        const backImgSrc = this.backImg;\n        if (backImgSrc) {\n            const backImgDiv = document.createElement(\"div\");\n            backImgDiv.classList.add(\"pw-mx-auto\", \"pw-w-36\", \"pw-h-24\", \"pw-rounded-lg\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-transition-all\", \"pw-duration-500\");\n            const backImg = document.createElement(\"img\");\n            backImg.classList.add(\"pw-rounded-lg\");\n            backImg.setAttribute(\"src\", backImgSrc.croppedImage || \"\");\n            backImgDiv.appendChild(backImg);\n            backIdDiv.appendChild(backImgDiv);\n            backImgDiv.addEventListener(\"click\", () => {\n                this.openImageFullScreen(backImgSrc.croppedImage || \"\");\n            });\n            const retakeBackIdButton = document.createElement(\"div\");\n            retakeBackIdButton.classList.add(\"pw-mx-auto\", \"pw-box-border\", \"pw-w-36\", \"pw-h-10\", \"pw-border-solid\", \"pw-rounded-[40px]\", \"pw-border-grey-5\", \"pw-px-3\", \"pw-py-2\", \"pw-text-center\", \"pw-cursor-pointer\");\n            retakeBackIdButton.innerHTML = \"Retake\";\n            retakeBackIdButton.addEventListener(\"click\", () => {\n                this.retake(typeMapping.back, (image) => {\n                    this.backImg = image;\n                    (0, imagesHelper_1.setBackImg)(image);\n                    backImg.setAttribute(\"src\", image.croppedImage || \"\");\n                });\n            });\n            backIdDiv.appendChild(retakeBackIdButton);\n            confirmIdDiv.appendChild(backIdDiv);\n            rotateContentBackId.addEventListener(\"click\", () => {\n                backRotation = backRotation + angle;\n                totalbackRotation = (totalbackRotation + angle) % 360;\n                backImgDiv.style.transform = `rotate(-${backRotation}deg)`;\n            });\n        }\n        const proceedButtonDiv = document.createElement(\"div\");\n        proceedButtonDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n        const proceedButton = (0, components_1.createPrimaryButton)(\"Proceed\");\n        proceedButton.addEventListener(\"click\", () => {\n            this.onClickProceed(proceedButton, totalRotation, totalbackRotation);\n        });\n        proceedButtonDiv.appendChild(proceedButton);\n        mainDiv.appendChild(confirmIdDiv);\n        mainDiv.appendChild(proceedButtonDiv);\n        return mainDiv;\n    }\n    createRotateImg(base64Image, degree) {\n        return __awaiter(this, void 0, void 0, function* () {\n            return new Promise(function (resolve) {\n                // Create an Image element\n                const img = new Image();\n                img.src = base64Image;\n                // Wait for the image to load\n                img.onload = () => {\n                    // Create a canvas element\n                    const canvas = document.createElement(\"canvas\");\n                    const ctx = canvas.getContext(\"2d\");\n                    // Set canvas dimensions\n                    if ([0, 180].includes(degree)) {\n                        canvas.width = img.width;\n                        canvas.height = img.height;\n                    }\n                    else {\n                        // Swap width and height for rotation\n                        canvas.width = img.height;\n                        canvas.height = img.width;\n                    }\n                    // Rotate the image on the canvas\n                    if (ctx) {\n                        const radians = {\n                            0: 0,\n                            90: (Math.PI * 3) / 2,\n                            180: Math.PI,\n                            270: Math.PI / 2,\n                        };\n                        const radian = radians[degree] || 0;\n                        ctx.translate(canvas.width / 2, canvas.height / 2);\n                        ctx.rotate(radian); // Rotate n degrees\n                        ctx.drawImage(img, -img.width / 2, -img.height / 2);\n                    }\n                    // Get the rotated image data from the canvas\n                    resolve(canvas.toDataURL(\"image/jpeg\"));\n                };\n                setTimeout(() => {\n                    resolve(base64Image);\n                }, 3000);\n            });\n        });\n    }\n    onClickProceed(proceedButton, frontRotateDegree, backRotateDegree) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            // on loading btn\n            const loadingSpinner = (0, components_1.createSpinner)();\n            proceedButton.innerHTML = \"\";\n            proceedButton.appendChild(loadingSpinner);\n            try {\n                let frontImg = this.frontImg;\n                let backImg = this.backImg;\n                if (frontRotateDegree) {\n                    const rotatedFrontFullImg = yield this.createRotateImg(frontImg.fullImage, frontRotateDegree);\n                    const rotatedFrontCroppedImg = yield this.createRotateImg(frontImg.croppedImage, frontRotateDegree);\n                    frontImg = {\n                        fullImage: rotatedFrontFullImg,\n                        croppedImage: rotatedFrontCroppedImg,\n                    };\n                    (0, imagesHelper_1.setFrontImg)(frontImg);\n                }\n                if (backImg && backRotateDegree) {\n                    const rotatedBackFullImg = yield this.createRotateImg(backImg.fullImage, backRotateDegree);\n                    const rotatedBackCroppedImg = yield this.createRotateImg(backImg.croppedImage, backRotateDegree);\n                    backImg = {\n                        fullImage: rotatedBackFullImg,\n                        croppedImage: rotatedBackCroppedImg,\n                    };\n                    (0, imagesHelper_1.setBackImg)(backImg);\n                }\n                const req = Object.assign(Object.assign({ front_doc_base64: frontImg.croppedImage, front_doc_base64_full: frontImg.fullImage }, (backImg && {\n                    back_doc_base64: backImg.croppedImage,\n                    back_doc_base64_full: backImg.fullImage,\n                })), { doc_type: this.docType, issuing_country: this.defaultCountry });\n                yield uisdk_1.pwInstance.uploadDoc(req);\n                const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n                this.clearScreen();\n                startSelfie.render();\n            }\n            catch (err) {\n                console.error(err);\n                if ([\"PwError\", \"PwReqError\"].includes(err.name) && err.type) {\n                    if ([\n                        \"openApi/verification-type-invalid\",\n                        \"openApi/issuing-country-invalid\",\n                        \"openApi/doc-type-invalid\",\n                        \"openApi/doc-unpair\",\n                        \"openApi/doc-empty\",\n                        \"openApi/doc-blur\",\n                        \"openApi/doc-front-back-img-unsimilar\",\n                        \"openApi/doc-not-positioned-proper\",\n                        \"openApi/img-exposed\",\n                    ].includes(err.type)) {\n                        this.clearScreen();\n                        let isRetake = false;\n                        const pwErrorPayload = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payload;\n                        if (!!pwErrorPayload)\n                            isRetake = !!pwErrorPayload.is_retriable;\n                        const failPage = new CardError_1.default(this.mainScreenId, this.displayMode);\n                        return failPage.render(isRetake, err);\n                    }\n                    if ([\n                        \"openApi/max-doc-attempt\",\n                        \"openApi/limit-exceed\",\n                        \"openApi/max-session-attempt\",\n                        \"openApi/session-id-expired\",\n                        \"session-id-expired\",\n                    ].includes(err.type)) {\n                        this.clearScreen();\n                        // redirect to submission error page\n                        const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n                        return submissionLimit.render(err);\n                    }\n                }\n                this.openErrorPage();\n            }\n            finally {\n                // off loading btn\n                if (loadingSpinner.hasChildNodes())\n                    proceedButton.removeChild(loadingSpinner);\n                proceedButton.innerHTML = \"Proceed\";\n            }\n        });\n    }\n    retake(cardType, captureCb) {\n        const screen = document.getElementById(this.mainScreenId);\n        const cameraDiv = document.createElement(\"div\");\n        cameraDiv.setAttribute(\"id\", this.cameraId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n        const idCam = new card_camera_1.default(this.cameraId, cardType, this.mainScreenId);\n        idCam.init();\n        idCam.listenToCardCapture((payload) => {\n            const { image } = payload.detail;\n            captureCb(image);\n            idCam.stopVideoStream();\n            cameraDiv.remove();\n        });\n    }\n}\nexports[\"default\"] = ConfirmDoc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ConfirmDoc.ts?");
 
 /***/ }),
 
@@ -3704,7 +3704,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ../pageClass/ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\nconst textInput_1 = __importDefault(__webpack_require__(/*! ../components/textInput */ \"./src/components/textInput.ts\"));\nconst textArea_1 = __importDefault(__webpack_require__(/*! ../components/textArea */ \"./src/components/textArea.ts\"));\nconst dobInput_1 = __importDefault(__webpack_require__(/*! ../components/dobInput */ \"./src/components/dobInput.ts\"));\nconst selectDropdown_1 = __importDefault(__webpack_require__(/*! ../components/selectDropdown */ \"./src/components/selectDropdown.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\n// TODO: need to enhance this:\n// should validate dob, gender... with valid type, instead of length\nconst formCharacterValidation = {\n    full_name: { min: 1, max: 160 },\n    given_name: { min: 1, max: 70 },\n    surname: { min: 1, max: 70 },\n    id_number: { min: 1, max: 40 },\n    date_of_birth: { min: 1, max: 10 },\n    gender: { min: 1, max: 6 },\n    line1: { min: 1, max: 350 },\n    city: { min: 1, max: 70 },\n    state_iso: { min: 1, max: 9 },\n    zip: { min: 1, max: 40 },\n    country_iso2: { min: 2, max: 2 },\n};\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nclass FormEkyc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.formDiv = document.createElement(\"div\");\n        this.formDetail = {};\n        this.originFormPayload = {};\n    }\n    createForm(payload) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.originFormPayload = payload;\n            const overlayDialog = document.createElement(\"div\");\n            overlayDialog.id = \"pw-ekyc-overlay\";\n            overlayDialog.classList.add(\"pw-bg-black/0\", \"pw-transition-all\", \"pw-duration-100\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-30\");\n            const dialog = document.createElement(\"div\");\n            dialog.id = \"dialog-body\";\n            dialog.classList.add(\"pw-bg-white\", \"pw-absolute\", \"pw-top-[100%]\", \"pw-bottom-[-100%]\", \"pw-left-0\", \"pw-right-0\", \"pw-h-full\", \"pw-rounded-t-lg\", \"pw-transition-all\", \"pw-duration-500\", \"pw-overflow-y-auto\");\n            const dialogContainer = document.createElement(\"div\");\n            dialogContainer.id = \"dialog-body-container\";\n            dialogContainer.classList.add(\"pw-relative\", \"pw-full\", \"pw-p-5\");\n            dialog.appendChild(dialogContainer);\n            const dialogTitle = document.createElement(\"div\");\n            dialogTitle.classList.add(\"pw-text-center\", \"pw-text-xl\");\n            dialogTitle.innerHTML = \"Edit your details\";\n            dialogContainer.appendChild(dialogTitle);\n            const closeDialog = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeDialog.classList.add(\"pw-absolute\", \"pw-right-5\", \"pw-top-5\");\n            dialogContainer.appendChild(closeDialog);\n            closeDialog.addEventListener(\"click\", () => {\n                this.closeFormEkycDialog();\n            });\n            const form = document.createElement(\"form\");\n            form.classList.add(\"pw-mt-4\");\n            // full_name, given_name, surname fields\n            if (payload.full_name !== undefined) {\n                const full_name = new textInput_1.default(\"name\", \"Full name\");\n                const disabled = this.isEmptyString(payload.full_name);\n                form.appendChild(full_name.render({ disabled }));\n                full_name.val = payload.full_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { full_name });\n            }\n            if (payload.given_name !== undefined) {\n                const given_name = new textInput_1.default(\"name\", \"Given name\");\n                const disabled = this.isEmptyString(payload.given_name);\n                form.appendChild(given_name.render({ disabled }));\n                given_name.val = payload.given_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { given_name });\n            }\n            if (payload.surname !== undefined) {\n                const surname = new textInput_1.default(\"name\", \"Surname\");\n                const disabled = this.isEmptyString(payload.surname);\n                form.appendChild(surname.render({ disabled }));\n                surname.val = payload.surname;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { surname });\n            }\n            // id field\n            const id = new textInput_1.default(\"id\", \"Identity card number\");\n            const idDisabled = this.isEmptyString(payload.id_number);\n            form.appendChild(id.render({ disabled: idDisabled }));\n            id.val = payload.id_number || \"\";\n            // dob field\n            const dob = new dobInput_1.default();\n            const dobDisabled = this.isEmptyString(payload.date_of_birth);\n            form.appendChild(dob.render({ disabled: dobDisabled }));\n            dob.val = payload.date_of_birth\n                ? (0, moment_1.default)(payload.date_of_birth, \"YYYY-MM-DD\").format(\"DD MMM YYYY\")\n                : \"\";\n            // - gender\n            const genderOptions = Object.entries(doc_1.genderTypeMapping).map(([key, value]) => {\n                return {\n                    value: key,\n                    label: value,\n                };\n            });\n            const genderDisabled = this.isEmptyString(payload.gender);\n            const gender = new selectDropdown_1.default(\"gender\", \"Gender\", genderOptions);\n            form.appendChild(gender.render({ disabled: genderDisabled }));\n            gender.val = payload.gender || \"\";\n            // address fields - address, city, state, zip, country\n            const address = new textArea_1.default(\"address\", \"Address\");\n            form.appendChild(address.render());\n            address.val = payload.line1 || \"\";\n            // - city\n            const city = new textInput_1.default(\"city\", \"City\");\n            form.appendChild(city.render());\n            city.val = payload.city || \"\";\n            // - state\n            const stateValue = payload.state_iso || payload.state_name || \"\";\n            const stateLabel = payload.state_name || payload.state_iso || \"\";\n            // Create the state dropdown option if there's state information\n            const stateOptions = stateValue\n                ? [{ value: stateValue, label: stateLabel }]\n                : [];\n            const state = new selectDropdown_1.default(\"state\", \"State/Region\", stateOptions);\n            form.appendChild(state.render());\n            state.val = payload.state_iso || \"\";\n            // - zip\n            const zip = new textInput_1.default(\"zip\", \"Zip code\");\n            form.appendChild(zip.render());\n            zip.val = ((_a = payload.zip) === null || _a === void 0 ? void 0 : _a.toString()) || \"\";\n            // - country\n            const countries = uisdk_1.pwInstance.countries.map((country) => {\n                return { value: country.iso_code, label: country.name };\n            });\n            const country = new selectDropdown_1.default(\"country\", \"Country\", countries);\n            country.onUpdateValue = () => __awaiter(this, void 0, void 0, function* () {\n                // reset state dropdown when country value is changed\n                yield this.updateRegionState(country.val);\n            });\n            form.appendChild(country.render());\n            country.val = payload.country_iso2 || \"\";\n            //\n            this.formDetail = Object.assign(Object.assign({}, this.formDetail), { id_number: id, date_of_birth: dob, gender, line1: address, city, state_iso: state, zip, country_iso2: country });\n            const submitButton = (0, components_1.createPrimaryButton)(\"Submit\");\n            submitButton.addEventListener(\"click\", () => {\n                this.onClickSubmit(submitButton);\n            });\n            form.appendChild(submitButton);\n            dialogContainer.appendChild(form);\n            overlayDialog.appendChild(dialog);\n            this.formDiv = overlayDialog;\n            if (payload.country_iso2) {\n                yield this.updateRegionState(payload.country_iso2);\n                state.val = payload.state_iso || \"\";\n            }\n        });\n    }\n    isEmptyString(value) {\n        return typeof value === \"string\" && value.trim() !== \"\";\n    }\n    updateRegionState(country) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const state = this.formDetail.state_iso;\n            if (!state)\n                return;\n            state.val = \"\";\n            state.isLoading = true;\n            const states = yield uisdk_1.pwInstance.fetchStates(country || \"\");\n            const options = states.map((state) => {\n                return { value: state.iso_code, label: state.name };\n            });\n            state.setOption(options);\n            state.isLoading = false;\n        });\n    }\n    openFormEkycDialog() {\n        var _a;\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(this.formDiv);\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        setTimeout(() => {\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/0\");\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/40\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-0\", \"pw-top-0\");\n        }, 100);\n    }\n    closeFormEkycDialog() {\n        var _a;\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/40\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/0\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-0\", \"pw-top-0\");\n        setTimeout(() => {\n            const mainScreen = document.getElementById(this.mainScreenId);\n            mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.removeChild(this.formDiv);\n        }, 500);\n    }\n    onClickSubmit(submitButton) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            let hasError = false;\n            for (const key in this.formDetail) {\n                if (Object.prototype.hasOwnProperty.call(this.formDetail, key)) {\n                    const { min, max } = formCharacterValidation[key];\n                    const inputDetail = this.formDetail[key];\n                    if (inputDetail.val.length < min || inputDetail.val.length > max) {\n                        hasError = true;\n                        inputDetail.onAddErrorStyling();\n                    }\n                }\n            }\n            if (hasError)\n                return;\n            // onloading\n            const loadingSpinner = (0, components_1.createSpinner)();\n            const submitButtonTxt = (submitButton === null || submitButton === void 0 ? void 0 : submitButton.innerHTML) || \"\";\n            if (submitButton)\n                submitButton.innerHTML = \"\";\n            submitButton === null || submitButton === void 0 ? void 0 : submitButton.appendChild(loadingSpinner);\n            try {\n                // pass payload to sdk\n                const reqPayload = Object.entries(this.formDetail).reduce((result, [key, value]) => {\n                    let keyInstance = key;\n                    if (keyInstance === \"country_iso2\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else if (keyInstance === \"gender\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else\n                        result[keyInstance] = value.val;\n                    return result;\n                }, {});\n                yield uisdk_1.pwInstance.updateForm(reqPayload);\n                const countryDropdown = this.formDetail[\"country_iso2\"];\n                const stateDropdown = this.formDetail[\"state_iso\"];\n                // pass in label name too\n                if (countryDropdown)\n                    reqPayload[\"country_name\"] = (_a = countryDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.label;\n                if (stateDropdown)\n                    reqPayload[\"state_name\"] = (_b = stateDropdown.selectedOption) === null || _b === void 0 ? void 0 : _b.label;\n                this.showReviewPageDialog(reqPayload);\n            }\n            catch (err) {\n                if (![\"PwError\", \"PwReqError\"].includes(err.name))\n                    return this.openErrorPage();\n                const payload = err.response.data.messages;\n                let fields = [];\n                if (Array.isArray(payload) && payload.length > 0) {\n                    const params = payload[0].params;\n                    if (params) {\n                        const invalidFields = params.invalidated_fields;\n                        const keys = invalidFields ? Object.keys(invalidFields) : [];\n                        fields = keys.map((key) => {\n                            return doc_1.formLabelMapping[key] || key;\n                        });\n                    }\n                }\n                this.openFormErrorDialog(fields);\n            }\n            finally {\n                // off loading\n                if (loadingSpinner.hasChildNodes())\n                    submitButton === null || submitButton === void 0 ? void 0 : submitButton.removeChild(loadingSpinner);\n                if (submitButton)\n                    submitButton.innerHTML = submitButtonTxt;\n            }\n        });\n    }\n    showReviewPageDialog(payload) {\n        var _a;\n        // show the review content dialog\n        const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        if (!dialog)\n            return;\n        dialog.replaceChildren();\n        const header = reviewEkyc.createContentHeader(\"Thank you, your info has been updated.\");\n        const body = reviewEkyc.createContentBody({\n            id_type: \"national_identity_document\",\n            result: Object.assign(Object.assign({}, this.originFormPayload), payload),\n        });\n        const footer = document.createElement(\"div\");\n        footer.classList.add(\"pw-p-5\");\n        const doneButton = (0, components_1.createPrimaryButton)(\"Done\");\n        doneButton.addEventListener(\"click\", () => {\n            this.finishEkyc();\n        });\n        footer.appendChild(doneButton);\n        dialog.appendChild(header);\n        if (body)\n            dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n    openFormErrorDialog(fields) {\n        const mainScreen = document.getElementById(\"dialog-body-container\");\n        const overlay = document.createElement(\"div\");\n        overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n        const overlayContent = document.createElement(\"div\");\n        overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-flex-col\", \"pw-justify-center\", \"pw-items-center\");\n        overlay.appendChild(overlayContent);\n        const warningIconContainer = document.createElement(\"div\");\n        warningIconContainer.classList.add(\"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n        warningIcon.style.fontSize = \"60px\";\n        warningIconContainer.appendChild(warningIcon);\n        overlayContent.appendChild(warningIconContainer);\n        const dialogWording = document.createElement(\"div\");\n        dialogWording.classList.add(\"pw-mb-6\");\n        dialogWording.innerHTML =\n            \"The information you modified does not align with your identification document:\";\n        if (fields && fields.length > 0) {\n            const list = document.createElement(\"ul\");\n            list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n            for (let i = 0; i < fields.length; i++) {\n                const listItem = document.createElement(\"li\");\n                listItem.classList.add(\"pw-mb-2\");\n                listItem.innerHTML = fields[i];\n                list.appendChild(listItem);\n            }\n            dialogWording.appendChild(list);\n        }\n        overlayContent.appendChild(dialogWording);\n        const buttonContainer = document.createElement(\"div\");\n        buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n        const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n        buttonContainer.appendChild(okayButton);\n        overlayContent.appendChild(buttonContainer);\n        okayButton.addEventListener(\"click\", () => {\n            overlay.remove();\n        });\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n    }\n}\nexports[\"default\"] = FormEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/FormEkyc.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst moment_1 = __importDefault(__webpack_require__(/*! moment */ \"./node_modules/moment/moment.js\"));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ../pageClass/ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\nconst textInput_1 = __importDefault(__webpack_require__(/*! ../components/textInput */ \"./src/components/textInput.ts\"));\nconst textArea_1 = __importDefault(__webpack_require__(/*! ../components/textArea */ \"./src/components/textArea.ts\"));\nconst dobInput_1 = __importDefault(__webpack_require__(/*! ../components/dobInput */ \"./src/components/dobInput.ts\"));\nconst selectDropdown_1 = __importDefault(__webpack_require__(/*! ../components/selectDropdown */ \"./src/components/selectDropdown.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\n// TODO: need to enhance this:\n// should validate dob, gender... with valid type, instead of length\nconst formCharacterValidation = {\n    full_name: { min: 1, max: 160 },\n    given_name: { min: 1, max: 70 },\n    surname: { min: 1, max: 70 },\n    id_number: { min: 1, max: 40 },\n    date_of_birth: { min: 1, max: 10 },\n    gender: { min: 1, max: 6 },\n    line1: { min: 1, max: 350 },\n    city: { min: 1, max: 70 },\n    state_iso: { min: 1, max: 9 },\n    zip: { min: 1, max: 40 },\n    country_iso2: { min: 2, max: 2 },\n};\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nclass FormEkyc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.formDiv = document.createElement(\"div\");\n        this.formDetail = {};\n        this.originFormPayload = {};\n    }\n    createForm(payload) {\n        var _a;\n        return __awaiter(this, void 0, void 0, function* () {\n            this.originFormPayload = payload;\n            const overlayDialog = document.createElement(\"div\");\n            overlayDialog.id = \"pw-ekyc-overlay\";\n            overlayDialog.classList.add(\"pw-bg-black/0\", \"pw-transition-all\", \"pw-duration-100\", \"pw-absolute\", \"pw-top-0\", \"pw-bottom-0\", \"pw-left-0\", \"pw-right-0\", \"pw-z-30\");\n            const dialog = document.createElement(\"div\");\n            dialog.id = \"dialog-body\";\n            dialog.classList.add(\"pw-bg-white\", \"pw-absolute\", \"pw-top-[100%]\", \"pw-bottom-[-100%]\", \"pw-left-0\", \"pw-right-0\", \"pw-h-full\", \"pw-rounded-t-lg\", \"pw-transition-all\", \"pw-duration-500\", \"pw-overflow-y-auto\");\n            const dialogContainer = document.createElement(\"div\");\n            dialogContainer.id = \"dialog-body-container\";\n            dialogContainer.classList.add(\"pw-relative\", \"pw-full\", \"pw-p-5\");\n            dialog.appendChild(dialogContainer);\n            const dialogTitle = document.createElement(\"div\");\n            dialogTitle.classList.add(\"pw-text-center\", \"pw-text-xl\");\n            dialogTitle.innerHTML = \"Edit your details\";\n            dialogContainer.appendChild(dialogTitle);\n            const closeDialog = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeDialog.classList.add(\"pw-absolute\", \"pw-right-5\", \"pw-top-5\");\n            dialogContainer.appendChild(closeDialog);\n            closeDialog.addEventListener(\"click\", () => {\n                this.closeFormEkycDialog();\n            });\n            const form = document.createElement(\"form\");\n            form.classList.add(\"pw-mt-4\");\n            // full_name, given_name, surname fields\n            if (payload.full_name !== undefined) {\n                const full_name = new textInput_1.default(\"name\", \"Full name\");\n                form.appendChild(full_name.render());\n                full_name.val = payload.full_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { full_name });\n            }\n            if (payload.given_name !== undefined) {\n                const given_name = new textInput_1.default(\"name\", \"Given name\");\n                form.appendChild(given_name.render());\n                given_name.val = payload.given_name;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { given_name });\n            }\n            if (payload.surname !== undefined) {\n                const surname = new textInput_1.default(\"name\", \"Surname\");\n                form.appendChild(surname.render());\n                surname.val = payload.surname;\n                this.formDetail = Object.assign(Object.assign({}, this.formDetail), { surname });\n            }\n            // id field\n            const id = new textInput_1.default(\"id\", \"Identity card number\");\n            const idDisabled = this.isEmptyString(payload.id_number);\n            form.appendChild(id.render({ disabled: idDisabled }));\n            id.val = payload.id_number || \"\";\n            // dob field\n            const dob = new dobInput_1.default();\n            const dobDisabled = this.isEmptyString(payload.date_of_birth);\n            form.appendChild(dob.render({ disabled: dobDisabled }));\n            dob.val = payload.date_of_birth\n                ? (0, moment_1.default)(payload.date_of_birth, \"YYYY-MM-DD\").format(\"DD MMM YYYY\")\n                : \"\";\n            // - gender\n            const genderOptions = Object.entries(doc_1.genderTypeMapping).map(([key, value]) => {\n                return {\n                    value: key,\n                    label: value,\n                };\n            });\n            const genderDisabled = this.isEmptyString(payload.gender);\n            const gender = new selectDropdown_1.default(\"gender\", \"Gender\", genderOptions);\n            form.appendChild(gender.render({ disabled: genderDisabled }));\n            gender.val = payload.gender || \"\";\n            // address fields - address, city, state, zip, country\n            const address = new textArea_1.default(\"address\", \"Address\");\n            form.appendChild(address.render());\n            address.val = payload.line1 || \"\";\n            // - city\n            const city = new textInput_1.default(\"city\", \"City\");\n            form.appendChild(city.render());\n            city.val = payload.city || \"\";\n            // - state\n            const stateValue = payload.state_iso || payload.state_name || \"\";\n            const stateLabel = payload.state_name || payload.state_iso || \"\";\n            // Create the state dropdown option if there's state information\n            const stateOptions = stateValue\n                ? [{ value: stateValue, label: stateLabel }]\n                : [];\n            const state = new selectDropdown_1.default(\"state\", \"State/Region\", stateOptions);\n            form.appendChild(state.render());\n            state.val = payload.state_iso || \"\";\n            // - zip\n            const zip = new textInput_1.default(\"zip\", \"Zip code\");\n            form.appendChild(zip.render());\n            zip.val = ((_a = payload.zip) === null || _a === void 0 ? void 0 : _a.toString()) || \"\";\n            // - country\n            const countries = uisdk_1.pwInstance.countries.map((country) => {\n                return { value: country.iso_code, label: country.name };\n            });\n            const country = new selectDropdown_1.default(\"country\", \"Country\", countries);\n            country.onUpdateValue = () => __awaiter(this, void 0, void 0, function* () {\n                // reset state dropdown when country value is changed\n                yield this.updateRegionState(country.val);\n            });\n            form.appendChild(country.render());\n            country.val = payload.country_iso2 || \"\";\n            //\n            this.formDetail = Object.assign(Object.assign({}, this.formDetail), { id_number: id, date_of_birth: dob, gender, line1: address, city, state_iso: state, zip, country_iso2: country });\n            const submitButton = (0, components_1.createPrimaryButton)(\"Submit\");\n            submitButton.addEventListener(\"click\", () => {\n                this.onClickSubmit(submitButton);\n            });\n            form.appendChild(submitButton);\n            dialogContainer.appendChild(form);\n            overlayDialog.appendChild(dialog);\n            this.formDiv = overlayDialog;\n            if (payload.country_iso2) {\n                yield this.updateRegionState(payload.country_iso2);\n                state.val = payload.state_iso || \"\";\n            }\n        });\n    }\n    isEmptyString(value) {\n        return typeof value === \"string\" && value.trim() !== \"\";\n    }\n    updateRegionState(country) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const state = this.formDetail.state_iso;\n            if (!state)\n                return;\n            state.val = \"\";\n            state.isLoading = true;\n            const states = yield uisdk_1.pwInstance.fetchStates(country || \"\");\n            const options = states.map((state) => {\n                return { value: state.iso_code, label: state.name };\n            });\n            state.setOption(options);\n            state.isLoading = false;\n        });\n    }\n    openFormEkycDialog() {\n        var _a;\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(this.formDiv);\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        setTimeout(() => {\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/0\");\n            overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/40\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n            dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-0\", \"pw-top-0\");\n        }, 100);\n    }\n    closeFormEkycDialog() {\n        var _a;\n        const overlay = document.getElementById(\"pw-ekyc-overlay\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.remove(\"pw-bg-black/40\");\n        overlay === null || overlay === void 0 ? void 0 : overlay.classList.add(\"pw-bg-black/0\");\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(\"pw-bottom-[-100%]\", \"pw-top-[100%]\");\n        dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(\"pw-bottom-0\", \"pw-top-0\");\n        setTimeout(() => {\n            const mainScreen = document.getElementById(this.mainScreenId);\n            mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.removeChild(this.formDiv);\n        }, 500);\n    }\n    onClickSubmit(submitButton) {\n        var _a, _b;\n        return __awaiter(this, void 0, void 0, function* () {\n            let hasError = false;\n            for (const key in this.formDetail) {\n                if (Object.prototype.hasOwnProperty.call(this.formDetail, key)) {\n                    const { min, max } = formCharacterValidation[key];\n                    const inputDetail = this.formDetail[key];\n                    if (inputDetail.val.length < min || inputDetail.val.length > max) {\n                        hasError = true;\n                        inputDetail.onAddErrorStyling();\n                    }\n                }\n            }\n            if (hasError)\n                return;\n            // onloading\n            const loadingSpinner = (0, components_1.createSpinner)();\n            const submitButtonTxt = (submitButton === null || submitButton === void 0 ? void 0 : submitButton.innerHTML) || \"\";\n            if (submitButton)\n                submitButton.innerHTML = \"\";\n            submitButton === null || submitButton === void 0 ? void 0 : submitButton.appendChild(loadingSpinner);\n            try {\n                // pass payload to sdk\n                const reqPayload = Object.entries(this.formDetail).reduce((result, [key, value]) => {\n                    let keyInstance = key;\n                    if (keyInstance === \"country_iso2\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else if (keyInstance === \"gender\") {\n                        result[keyInstance] = value.val;\n                    }\n                    else\n                        result[keyInstance] = value.val;\n                    return result;\n                }, {});\n                yield uisdk_1.pwInstance.updateForm(reqPayload);\n                const countryDropdown = this.formDetail[\"country_iso2\"];\n                const stateDropdown = this.formDetail[\"state_iso\"];\n                // pass in label name too\n                if (countryDropdown)\n                    reqPayload[\"country_name\"] = (_a = countryDropdown.selectedOption) === null || _a === void 0 ? void 0 : _a.label;\n                if (stateDropdown)\n                    reqPayload[\"state_name\"] = (_b = stateDropdown.selectedOption) === null || _b === void 0 ? void 0 : _b.label;\n                this.showReviewPageDialog(reqPayload);\n            }\n            catch (err) {\n                if (![\"PwError\", \"PwReqError\"].includes(err.name))\n                    return this.openErrorPage();\n                const payload = err.response.data.messages;\n                let fields = [];\n                if (Array.isArray(payload) && payload.length > 0) {\n                    const params = payload[0].params;\n                    if (params) {\n                        const invalidFields = params.invalidated_fields;\n                        const keys = invalidFields ? Object.keys(invalidFields) : [];\n                        fields = keys.map((key) => {\n                            return doc_1.formLabelMapping[key] || key;\n                        });\n                    }\n                }\n                this.openFormErrorDialog(fields);\n            }\n            finally {\n                // off loading\n                if (loadingSpinner.hasChildNodes())\n                    submitButton === null || submitButton === void 0 ? void 0 : submitButton.removeChild(loadingSpinner);\n                if (submitButton)\n                    submitButton.innerHTML = submitButtonTxt;\n            }\n        });\n    }\n    showReviewPageDialog(payload) {\n        var _a;\n        // show the review content dialog\n        const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n        const dialog = (_a = this.formDiv) === null || _a === void 0 ? void 0 : _a.querySelector(\"#dialog-body\");\n        if (!dialog)\n            return;\n        dialog.replaceChildren();\n        const header = reviewEkyc.createContentHeader(\"Thank you, your info has been updated.\");\n        const body = reviewEkyc.createContentBody({\n            id_type: \"national_identity_document\",\n            result: Object.assign(Object.assign({}, this.originFormPayload), payload),\n        });\n        const footer = document.createElement(\"div\");\n        footer.classList.add(\"pw-p-5\");\n        const doneButton = (0, components_1.createPrimaryButton)(\"Done\");\n        doneButton.addEventListener(\"click\", () => {\n            this.onSuccessEkyc();\n        });\n        footer.appendChild(doneButton);\n        dialog.appendChild(header);\n        if (body)\n            dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n    openFormErrorDialog(fields) {\n        const mainScreen = document.getElementById(\"dialog-body-container\");\n        const overlay = document.createElement(\"div\");\n        overlay.classList.add(\"pw-bg-black\", \"pw-bg-opacity-70\", \"pw-absolute\", \"pw-inset-0\", \"pw-z-50\");\n        const overlayContent = document.createElement(\"div\");\n        overlayContent.classList.add(\"pw-box-sizing\", \"pw-absolute\", \"pw-left-1/2\", \"-pw-translate-x-1/2\", \"pw-top-1/3\", \"pw-p-5\", \"pw-bg-white\", \"pw-rounded-lg\", \"pw-w-4/5\", \"pw-flex-col\", \"pw-justify-center\", \"pw-items-center\");\n        overlay.appendChild(overlayContent);\n        const warningIconContainer = document.createElement(\"div\");\n        warningIconContainer.classList.add(\"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\", \"pw-pt-1\", \"pw-mb-4\");\n        warningIcon.style.fontSize = \"60px\";\n        warningIconContainer.appendChild(warningIcon);\n        overlayContent.appendChild(warningIconContainer);\n        const dialogWording = document.createElement(\"div\");\n        dialogWording.classList.add(\"pw-mb-6\");\n        dialogWording.innerHTML =\n            \"The information you modified does not align with your identification document:\";\n        if (fields && fields.length > 0) {\n            const list = document.createElement(\"ul\");\n            list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n            for (let i = 0; i < fields.length; i++) {\n                const listItem = document.createElement(\"li\");\n                listItem.classList.add(\"pw-mb-2\");\n                listItem.innerHTML = fields[i];\n                list.appendChild(listItem);\n            }\n            dialogWording.appendChild(list);\n        }\n        overlayContent.appendChild(dialogWording);\n        const buttonContainer = document.createElement(\"div\");\n        buttonContainer.classList.add(\"pw-w-36\", \"pw-mx-auto\");\n        const okayButton = (0, components_1.createSecondaryButton)(\"Okay\");\n        buttonContainer.appendChild(okayButton);\n        overlayContent.appendChild(buttonContainer);\n        okayButton.addEventListener(\"click\", () => {\n            overlay.remove();\n        });\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.appendChild(overlay);\n    }\n}\nexports[\"default\"] = FormEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/FormEkyc.ts?");
 
 /***/ }),
 
@@ -3726,7 +3726,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst FormEkyc_1 = __importDefault(__webpack_require__(/*! ./FormEkyc */ \"./src/pageClass/FormEkyc.ts\"));\n// constant\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\nclass ReviewEkyc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const element = yield this.createPage(payload);\n            this.renderContent(element);\n        });\n    }\n    createContentHeader(title, description) {\n        const headerDiv = document.createElement(\"div\");\n        headerDiv.classList.add(\"pw-p-5\");\n        // icon\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n        const icon = (0, getGoogleIcon_1.getGoogleIcon)(\"check_circle\");\n        icon.classList.add(\"pw-text-primary\");\n        icon.style.fontSize = \"60px\";\n        iconDiv.appendChild(icon);\n        headerDiv.appendChild(iconDiv);\n        // title\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-3\");\n        titleDiv.innerHTML = title;\n        wordingDiv.appendChild(titleDiv);\n        headerDiv.appendChild(wordingDiv);\n        // description\n        if (description) {\n            const descriptionDiv = document.createElement(\"div\");\n            descriptionDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n            descriptionDiv.innerHTML = description;\n            wordingDiv.appendChild(descriptionDiv);\n            headerDiv.appendChild(wordingDiv);\n        }\n        return headerDiv;\n    }\n    createContentBody(payload) {\n        var _a;\n        const { result, id_type, filepaths } = payload;\n        if (!result)\n            return;\n        const bodyDiv = document.createElement(\"div\");\n        bodyDiv.classList.add(\"pw-bg-grey-2\", \"pw-p-5\");\n        let resultCopy = Object.assign({}, result);\n        const arrangement = Object.keys(doc_1.formLabelMapping);\n        for (let i = 0; i < arrangement.length; i++) {\n            const key = arrangement[i];\n            if (result[key] === undefined)\n                continue;\n            const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], result[key] || \"\");\n            bodyDiv.appendChild(formGroup);\n            delete resultCopy[key];\n        }\n        for (const [key, value] of Object.entries(resultCopy)) {\n            if ([\"state_iso\", \"country_iso2\"].includes(key))\n                continue;\n            let mappedVal = value;\n            if (key === \"gender\") {\n                mappedVal = doc_1.genderTypeMapping[value] || mappedVal;\n            }\n            const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], mappedVal);\n            bodyDiv.appendChild(formGroup);\n        }\n        // images\n        // use image from api\n        // const frontImgSrc = filepaths?.front_doc_key;\n        // const backImageSrc = filepaths?.back_doc_key;\n        // temp - use image from FE\n        const frontImgSrc = (0, imagesHelper_1.getFrontImg)().croppedImage;\n        const backImageSrc = (0, imagesHelper_1.getBackImg)().croppedImage;\n        const merchantName = ((_a = uisdk_1.pwInstance.merchantDetail) === null || _a === void 0 ? void 0 : _a.biz_name) || \"merchant\";\n        const watermarkTxt = (0, imagesHelper_1.getWatermarkText)(merchantName);\n        if (id_type && (frontImgSrc || backImageSrc)) {\n            const idTypeLabel = document.createElement(\"div\");\n            idTypeLabel.classList.add(\"pw-mt-7\", \"pw-mb-2\");\n            idTypeLabel.innerHTML = `ID Type: ${doc_1.idTypeMapping[id_type] || \"\"}`;\n            bodyDiv.appendChild(idTypeLabel);\n        }\n        if (frontImgSrc) {\n            const frontCard = document.createElement(\"div\");\n            frontCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n            const frontTitle = document.createElement(\"div\");\n            frontTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n            frontTitle.innerHTML = \"Front\";\n            frontCard.appendChild(frontTitle);\n            const frontImgContainer = document.createElement(\"div\");\n            frontImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-relative\", \"pw-overflow-hidden\");\n            const frontImage = document.createElement(\"img\");\n            frontImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n            frontImage.setAttribute(\"src\", frontImgSrc);\n            frontImage.setAttribute(\"alt\", \"Front Image\");\n            frontImage.addEventListener(\"click\", () => {\n                this.openImageFullScreen(frontImgSrc, watermarkTxt);\n            });\n            frontImgContainer.appendChild(frontImage);\n            const frontImgWatermark = document.createElement(\"div\");\n            frontImgWatermark.classList.add(\"pw-w-full\", \"pw-watermark\");\n            frontImgWatermark.innerHTML = watermarkTxt;\n            frontImgContainer.appendChild(frontImgWatermark);\n            frontCard.appendChild(frontImgContainer);\n            bodyDiv.appendChild(frontCard);\n        }\n        if (backImageSrc) {\n            const backCard = document.createElement(\"div\");\n            backCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n            const backTitle = document.createElement(\"div\");\n            backTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n            backTitle.innerHTML = \"Back\";\n            backCard.appendChild(backTitle);\n            const backImgContainer = document.createElement(\"div\");\n            backImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-relative\", \"pw-overflow-hidden\");\n            const backImage = document.createElement(\"img\");\n            backImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n            backImage.setAttribute(\"src\", backImageSrc);\n            backImage.setAttribute(\"alt\", \"Front Image\");\n            backImage.addEventListener(\"click\", () => {\n                this.openImageFullScreen(backImageSrc, watermarkTxt);\n            });\n            backImgContainer.appendChild(backImage);\n            const backImgWatermark = document.createElement(\"div\");\n            backImgWatermark.classList.add(\"pw-w-full\", \"pw-watermark\");\n            backImgWatermark.innerHTML = watermarkTxt;\n            backImgContainer.appendChild(backImgWatermark);\n            backCard.appendChild(backImgContainer);\n            bodyDiv.appendChild(backCard);\n        }\n        return bodyDiv;\n    }\n    createPage(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const reviewEkycDiv = document.createElement(\"div\");\n            reviewEkycDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n            const contentDiv = document.createElement(\"div\");\n            contentDiv.classList.add(\"pw-overflow-auto\");\n            reviewEkycDiv.appendChild(contentDiv);\n            const firstSectionDiv = document.createElement(\"div\");\n            firstSectionDiv.classList.add(\"pw-p-5\");\n            contentDiv.appendChild(firstSectionDiv);\n            const footerDiv = document.createElement(\"div\");\n            footerDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n            reviewEkycDiv.appendChild(footerDiv);\n            // dialog header - first section\n            const navigationDiv = document.createElement(\"div\");\n            navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\");\n            const stepper = new stepper_1.default();\n            const stepperElement = stepper.render(5, 5);\n            navigationDiv.classList.add(\"pw-pt-3\");\n            navigationDiv.appendChild(stepperElement);\n            const closeButton = document.createElement(\"div\");\n            closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n            const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeButton.addEventListener(\"click\", () => this.closeMainPage());\n            closeButton.appendChild(closeIcon);\n            navigationDiv.appendChild(closeButton);\n            firstSectionDiv.appendChild(navigationDiv);\n            // dialog content - header + content\n            // 1. header of the dialog content\n            const isEditable = !!(payload === null || payload === void 0 ? void 0 : payload.result);\n            const description = isEditable\n                ? \"Update your submission details on this page or simply close it if no changes are necessary.\"\n                : \"\";\n            const headerDiv = this.createContentHeader(\"Thank you, your eKYC is completed\", description);\n            contentDiv.appendChild(headerDiv);\n            // 2. content of the dialog content\n            if (isEditable) {\n                const body = this.createContentBody(payload);\n                if (body)\n                    contentDiv.appendChild(body);\n            }\n            // dialog footer\n            const confirmButton = (0, components_1.createPrimaryButton)(\"All good\");\n            confirmButton.classList.add(\"pw-mb-3\");\n            confirmButton.addEventListener(\"click\", () => {\n                this.finishEkyc();\n            });\n            footerDiv.appendChild(confirmButton);\n            if (isEditable) {\n                const updateInfoButton = (0, components_1.createSecondaryButton)(\"Update info\");\n                updateInfoButton.classList.add(\"pw-mb-5\");\n                footerDiv.appendChild(updateInfoButton);\n                updateInfoButton.addEventListener(\"click\", () => {\n                    this.onClickUpdateInfo(payload);\n                });\n            }\n            const footer = new footer_1.default();\n            const footerPw = footer.render();\n            footerPw.classList.add(\"pw-text-grey-6\");\n            footerDiv.appendChild(footerPw);\n            return reviewEkycDiv;\n        });\n    }\n    createFormGroup(formLabel, formValue) {\n        const formGroup = document.createElement(\"div\");\n        formGroup.classList.add(\"pw-flex\", \"pw-flex-row\", \"pw-mb-5\");\n        const label = document.createElement(\"div\");\n        label.classList.add(\"pw-basis-2/5\");\n        label.innerHTML = formLabel;\n        const value = document.createElement(\"div\");\n        value.classList.add(\"pw-basis-3/5\");\n        value.innerHTML = formValue;\n        formGroup.appendChild(label);\n        formGroup.appendChild(value);\n        return formGroup;\n    }\n    onClickUpdateInfo(payload) {\n        const { result } = payload;\n        if (!result)\n            return;\n        if (!this.formEkyc) {\n            this.formEkyc = new FormEkyc_1.default(this.mainScreenId, this.displayMode);\n            this.formEkyc.createForm(result);\n        }\n        this.formEkyc.openFormEkycDialog();\n    }\n}\nexports[\"default\"] = ReviewEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ReviewEkyc.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst imagesHelper_1 = __webpack_require__(/*! ../helper/imagesHelper */ \"./src/helper/imagesHelper.ts\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst FormEkyc_1 = __importDefault(__webpack_require__(/*! ./FormEkyc */ \"./src/pageClass/FormEkyc.ts\"));\n// constant\nconst doc_1 = __webpack_require__(/*! ../constant/doc */ \"./src/constant/doc.ts\");\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\n// assets\nconst circle_check_svg_1 = __importDefault(__webpack_require__(/*! ../assets/icon/circle_check.svg */ \"./src/assets/icon/circle_check.svg\"));\nclass ReviewEkyc extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const element = yield this.createPage(payload);\n            this.renderContent(element);\n        });\n    }\n    createContentHeader(title, description) {\n        const headerDiv = document.createElement(\"div\");\n        headerDiv.classList.add(\"pw-p-5\");\n        // icon\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n        const iconImg = document.createElement(\"img\");\n        iconImg.setAttribute(\"src\", circle_check_svg_1.default);\n        iconDiv.appendChild(iconImg);\n        headerDiv.appendChild(iconDiv);\n        // title\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-3\");\n        titleDiv.innerHTML = title;\n        wordingDiv.appendChild(titleDiv);\n        headerDiv.appendChild(wordingDiv);\n        // description\n        if (description) {\n            const descriptionDiv = document.createElement(\"div\");\n            descriptionDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n            descriptionDiv.innerHTML = description;\n            wordingDiv.appendChild(descriptionDiv);\n            headerDiv.appendChild(wordingDiv);\n        }\n        return headerDiv;\n    }\n    createContentBody(payload) {\n        var _a;\n        const { result, id_type, filepaths } = payload;\n        if (!result)\n            return;\n        const bodyDiv = document.createElement(\"div\");\n        bodyDiv.classList.add(\"pw-bg-grey-2\", \"pw-p-5\");\n        let resultCopy = Object.assign({}, result);\n        const arrangement = Object.keys(doc_1.formLabelMapping);\n        for (let i = 0; i < arrangement.length; i++) {\n            const key = arrangement[i];\n            if (result[key] === undefined)\n                continue;\n            const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], result[key] || \"\");\n            bodyDiv.appendChild(formGroup);\n            delete resultCopy[key];\n        }\n        for (const [key, value] of Object.entries(resultCopy)) {\n            if ([\"state_iso\", \"country_iso2\"].includes(key))\n                continue;\n            let mappedVal = value;\n            if (key === \"gender\") {\n                mappedVal = doc_1.genderTypeMapping[value] || mappedVal;\n            }\n            const formGroup = this.createFormGroup(doc_1.formLabelMapping[key], mappedVal);\n            bodyDiv.appendChild(formGroup);\n        }\n        // images\n        // use image from api\n        // const frontImgSrc = filepaths?.front_doc_key;\n        // const backImageSrc = filepaths?.back_doc_key;\n        // temp - use image from FE\n        const frontImgSrc = (0, imagesHelper_1.getFrontImg)().croppedImage;\n        const backImageSrc = (0, imagesHelper_1.getBackImg)().croppedImage;\n        const merchantName = ((_a = uisdk_1.pwInstance.merchantDetail) === null || _a === void 0 ? void 0 : _a.biz_name) || \"merchant\";\n        const watermarkTxt = (0, imagesHelper_1.getWatermarkText)(merchantName);\n        if (id_type && (frontImgSrc || backImageSrc)) {\n            const idTypeLabel = document.createElement(\"div\");\n            idTypeLabel.classList.add(\"pw-mt-7\", \"pw-mb-2\");\n            idTypeLabel.innerHTML = `ID Type: ${doc_1.idTypeMapping[id_type] || \"\"}`;\n            bodyDiv.appendChild(idTypeLabel);\n        }\n        if (frontImgSrc) {\n            const frontCard = document.createElement(\"div\");\n            frontCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n            const frontTitle = document.createElement(\"div\");\n            frontTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n            frontTitle.innerHTML = \"Front\";\n            frontCard.appendChild(frontTitle);\n            const frontImgContainer = document.createElement(\"div\");\n            frontImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-relative\", \"pw-overflow-hidden\");\n            const frontImage = document.createElement(\"img\");\n            frontImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n            frontImage.setAttribute(\"src\", frontImgSrc);\n            frontImage.setAttribute(\"alt\", \"Front Image\");\n            frontImage.addEventListener(\"click\", () => {\n                this.openImageFullScreen(frontImgSrc, watermarkTxt);\n            });\n            frontImgContainer.appendChild(frontImage);\n            const frontImgWatermark = document.createElement(\"div\");\n            frontImgWatermark.classList.add(\"pw-w-full\", \"pw-watermark\");\n            frontImgWatermark.innerHTML = watermarkTxt;\n            frontImgContainer.appendChild(frontImgWatermark);\n            frontCard.appendChild(frontImgContainer);\n            bodyDiv.appendChild(frontCard);\n        }\n        if (backImageSrc) {\n            const backCard = document.createElement(\"div\");\n            backCard.classList.add(\"pw-outline-dashed\", \"pw-outline-grey-6\", \"pw-py-4\", \"pw-px-5\", \"pw-rounded-2xl\", \"pw-mb-4\");\n            const backTitle = document.createElement(\"div\");\n            backTitle.classList.add(\"pw-text-center\", \"pw-mb-4\");\n            backTitle.innerHTML = \"Back\";\n            backCard.appendChild(backTitle);\n            const backImgContainer = document.createElement(\"div\");\n            backImgContainer.classList.add(\"pw-mx-auto\", \"pw-w-full\", \"pw-rounded-lg\", \"pw-outline-grey-6\", \"pw-text-center\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-center\", \"pw-mb-7\", \"pw-relative\", \"pw-overflow-hidden\");\n            const backImage = document.createElement(\"img\");\n            backImage.classList.add(\"pw-rounded-lg\", \"pw-cursor-pointer\");\n            backImage.setAttribute(\"src\", backImageSrc);\n            backImage.setAttribute(\"alt\", \"Front Image\");\n            backImage.addEventListener(\"click\", () => {\n                this.openImageFullScreen(backImageSrc, watermarkTxt);\n            });\n            backImgContainer.appendChild(backImage);\n            const backImgWatermark = document.createElement(\"div\");\n            backImgWatermark.classList.add(\"pw-w-full\", \"pw-watermark\");\n            backImgWatermark.innerHTML = watermarkTxt;\n            backImgContainer.appendChild(backImgWatermark);\n            backCard.appendChild(backImgContainer);\n            bodyDiv.appendChild(backCard);\n        }\n        return bodyDiv;\n    }\n    createPage(payload) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const reviewEkycDiv = document.createElement(\"div\");\n            reviewEkycDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n            const contentDiv = document.createElement(\"div\");\n            contentDiv.classList.add(\"pw-overflow-auto\");\n            reviewEkycDiv.appendChild(contentDiv);\n            const firstSectionDiv = document.createElement(\"div\");\n            firstSectionDiv.classList.add(\"pw-p-5\");\n            contentDiv.appendChild(firstSectionDiv);\n            const footerDiv = document.createElement(\"div\");\n            footerDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n            reviewEkycDiv.appendChild(footerDiv);\n            // dialog header - first section\n            const navigationDiv = document.createElement(\"div\");\n            navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\");\n            const stepper = new stepper_1.default();\n            const stepperElement = stepper.render(5, 5);\n            navigationDiv.classList.add(\"pw-pt-3\");\n            navigationDiv.appendChild(stepperElement);\n            const closeButton = document.createElement(\"div\");\n            closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n            const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeButton.addEventListener(\"click\", () => this.closeMainPage());\n            closeButton.appendChild(closeIcon);\n            navigationDiv.appendChild(closeButton);\n            firstSectionDiv.appendChild(navigationDiv);\n            // dialog content - header + content\n            // 1. header of the dialog content\n            const isEditable = !!(payload === null || payload === void 0 ? void 0 : payload.result);\n            const description = isEditable\n                ? \"Update your submission details on this page or simply close it if no changes are necessary.\"\n                : \"\";\n            const headerDiv = this.createContentHeader(\"Thank you, your eKYC is completed\", description);\n            contentDiv.appendChild(headerDiv);\n            // 2. content of the dialog content\n            if (isEditable) {\n                const body = this.createContentBody(payload);\n                if (body)\n                    contentDiv.appendChild(body);\n            }\n            // dialog footer\n            const confirmButton = (0, components_1.createPrimaryButton)(\"All good\");\n            confirmButton.classList.add(\"pw-mb-3\");\n            confirmButton.addEventListener(\"click\", () => {\n                this.onSuccessEkyc();\n            });\n            footerDiv.appendChild(confirmButton);\n            if (isEditable) {\n                const updateInfoButton = (0, components_1.createSecondaryButton)(\"Update info\");\n                updateInfoButton.classList.add(\"pw-mb-5\");\n                footerDiv.appendChild(updateInfoButton);\n                updateInfoButton.addEventListener(\"click\", () => {\n                    this.onClickUpdateInfo(payload);\n                });\n            }\n            const footer = new footer_1.default();\n            const footerPw = footer.render();\n            footerPw.classList.add(\"pw-text-grey-6\");\n            footerDiv.appendChild(footerPw);\n            return reviewEkycDiv;\n        });\n    }\n    createFormGroup(formLabel, formValue) {\n        const formGroup = document.createElement(\"div\");\n        formGroup.classList.add(\"pw-flex\", \"pw-flex-row\", \"pw-mb-5\");\n        const label = document.createElement(\"div\");\n        label.classList.add(\"pw-basis-2/5\");\n        label.innerHTML = formLabel;\n        const value = document.createElement(\"div\");\n        value.classList.add(\"pw-basis-3/5\");\n        value.innerHTML = formValue;\n        formGroup.appendChild(label);\n        formGroup.appendChild(value);\n        return formGroup;\n    }\n    onClickUpdateInfo(payload) {\n        const { result } = payload;\n        if (!result)\n            return;\n        if (!this.formEkyc) {\n            this.formEkyc = new FormEkyc_1.default(this.mainScreenId, this.displayMode);\n            this.formEkyc.createForm(result);\n        }\n        this.formEkyc.openFormEkycDialog();\n    }\n}\nexports[\"default\"] = ReviewEkyc;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/ReviewEkyc.ts?");
 
 /***/ }),
 
@@ -3737,7 +3737,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst example_selfie_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/example_selfie.png */ \"./src/assets/img/example_selfie.png\"));\nclass SelfieError extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(isRetake) {\n        this.renderContent(this.createPage(isRetake));\n    }\n    createPage(isRetake) {\n        const pageDiv = document.createElement(\"div\");\n        pageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const selfieErrorDiv = document.createElement(\"div\");\n        const iconContainer = document.createElement(\"div\");\n        iconContainer.classList.add(\"pw-mx-auto\", \"pw-mt-16\", \"pw-mb-4\", \"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\");\n        warningIcon.style.fontSize = \"60px\";\n        iconContainer.appendChild(warningIcon);\n        selfieErrorDiv.appendChild(iconContainer);\n        const title = document.createElement(\"div\");\n        title.classList.add(\"pw-text-center\", \"pw-text-3xl\", \"pw-mb-10\");\n        title.innerHTML = \"Submission error\";\n        selfieErrorDiv.appendChild(title);\n        const selfieDiv = document.createElement(\"div\");\n        selfieDiv.classList.add(\"pw-mb-8\");\n        const selfieContainer = document.createElement(\"div\");\n        selfieContainer.classList.add(\"pw-h-52\", \"pw-w-48\", \"pw-border-solid\", \"pw-border-grey-5\", \"pw-rounded-full\", \"pw-mx-auto\", \"pw-overflow-hidden\");\n        selfieDiv.appendChild(selfieContainer);\n        const selfieImage = document.createElement(\"img\");\n        selfieImage.classList.add(\"pw-w-full\");\n        selfieImage.setAttribute(\"src\", example_selfie_png_1.default);\n        selfieContainer.appendChild(selfieImage);\n        selfieErrorDiv.appendChild(selfieDiv);\n        const list = document.createElement(\"ul\");\n        list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n        const listItem1 = document.createElement(\"li\");\n        listItem1.classList.add(\"pw-mb-3\");\n        listItem1.innerHTML = \"The image is blur, please take a clear photo.\";\n        const listItem2 = document.createElement(\"li\");\n        listItem2.innerHTML =\n            \"The image has glare issues, please take a clear photo in a well-lit area.\";\n        list.appendChild(listItem1);\n        list.appendChild(listItem2);\n        selfieErrorDiv.appendChild(list);\n        const contactSupportDiv = document.createElement(\"div\");\n        contactSupportDiv.classList.add(\"pw-mb-16\");\n        contactSupportDiv.innerHTML = `If a problem persists, please <a class=\"pw-text-primary pw-no-underline\" href=\"#\">contact support.</a>`;\n        selfieErrorDiv.appendChild(contactSupportDiv);\n        const retakeButton = (0, components_1.createPrimaryButton)(isRetake ? \"Retake\" : \"Proceed\");\n        retakeButton.addEventListener(\"click\", () => {\n            this.clearScreen();\n            if (isRetake) {\n                // redirect to selfie page again\n                const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n                return startSelfie.render();\n            }\n            // redirect to thank you page\n            const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n            reviewEkyc.render();\n        });\n        pageDiv.appendChild(selfieErrorDiv);\n        pageDiv.appendChild(retakeButton);\n        return pageDiv;\n    }\n    onClickRetake() { }\n}\nexports[\"default\"] = SelfieError;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/SelfieError.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst StartSelfie_1 = __importDefault(__webpack_require__(/*! ./StartSelfie */ \"./src/pageClass/StartSelfie.ts\"));\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst example_selfie_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/example_selfie.png */ \"./src/assets/img/example_selfie.png\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\nclass SelfieError extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(isRetake, err) {\n        this.renderContent(this.createPage(isRetake, err));\n    }\n    createPage(isRetake, err) {\n        const pageDiv = document.createElement(\"div\");\n        pageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const selfieErrorDiv = document.createElement(\"div\");\n        const iconContainer = document.createElement(\"div\");\n        iconContainer.classList.add(\"pw-mx-auto\", \"pw-mt-16\", \"pw-mb-4\", \"pw-text-center\");\n        const warningIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"warning\");\n        warningIcon.classList.add(\"pw-text-orange-400\");\n        warningIcon.style.fontSize = \"60px\";\n        iconContainer.appendChild(warningIcon);\n        selfieErrorDiv.appendChild(iconContainer);\n        const title = document.createElement(\"div\");\n        title.classList.add(\"pw-text-center\", \"pw-text-3xl\", \"pw-mb-10\");\n        title.innerHTML = \"Submission error\";\n        selfieErrorDiv.appendChild(title);\n        const selfieDiv = document.createElement(\"div\");\n        selfieDiv.classList.add(\"pw-mb-8\");\n        const selfieContainer = document.createElement(\"div\");\n        selfieContainer.classList.add(\"pw-h-52\", \"pw-w-48\", \"pw-border-solid\", \"pw-border-grey-5\", \"pw-rounded-full\", \"pw-mx-auto\", \"pw-overflow-hidden\");\n        selfieDiv.appendChild(selfieContainer);\n        const selfieImage = document.createElement(\"img\");\n        selfieImage.classList.add(\"pw-w-full\");\n        selfieImage.setAttribute(\"src\", example_selfie_png_1.default);\n        selfieContainer.appendChild(selfieImage);\n        selfieErrorDiv.appendChild(selfieDiv);\n        const list = document.createElement(\"ul\");\n        list.classList.add(\"pw-mb-4\", \"pw-px-4\");\n        const listItem1 = document.createElement(\"li\");\n        listItem1.classList.add(\"pw-mb-3\");\n        listItem1.innerHTML = \"The image is blur, please take a clear photo.\";\n        const listItem2 = document.createElement(\"li\");\n        listItem2.innerHTML =\n            \"The image has glare issues, please take a clear photo in a well-lit area.\";\n        list.appendChild(listItem1);\n        list.appendChild(listItem2);\n        selfieErrorDiv.appendChild(list);\n        const contactSupportDiv = document.createElement(\"div\");\n        contactSupportDiv.classList.add(\"pw-mb-16\");\n        contactSupportDiv.innerHTML = `If a problem persists, please <a class=\"pw-text-primary pw-no-underline\" href=\"#\">contact support.</a>`;\n        selfieErrorDiv.appendChild(contactSupportDiv);\n        const retakeButton = (0, components_1.createPrimaryButton)(isRetake ? \"Retake\" : \"Proceed\");\n        retakeButton.addEventListener(\"click\", () => {\n            this.clearScreen();\n            if (isRetake) {\n                // redirect to selfie page again\n                const startSelfie = new StartSelfie_1.default(this.mainScreenId, this.displayMode);\n                return startSelfie.render();\n            }\n            // redirect to submission limit error page\n            const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n            submissionLimit.render(err);\n        });\n        pageDiv.appendChild(selfieErrorDiv);\n        pageDiv.appendChild(retakeButton);\n        return pageDiv;\n    }\n    onClickRetake() { }\n}\nexports[\"default\"] = SelfieError;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/SelfieError.ts?");
 
 /***/ }),
 
@@ -3759,7 +3759,18 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst face_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/face-camera */ \"./src/plugins/face-camera.ts\"));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\n// assets\nconst icon_selfie_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-selfie.png */ \"./src/assets/img/icon-selfie.png\"));\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst SelfieError_1 = __importDefault(__webpack_require__(/*! ./SelfieError */ \"./src/pageClass/SelfieError.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nclass StartSelfie extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n    }\n    render() {\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        const selfiePageDiv = document.createElement(\"div\");\n        selfiePageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const startSelfieDiv = document.createElement(\"div\");\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n        const stepper = new stepper_1.default();\n        const stepperElement = stepper.render(4, 5);\n        navigationDiv.classList.add(\"pw-pt-3\");\n        navigationDiv.appendChild(stepperElement);\n        const closeButtonDiv = document.createElement(\"div\");\n        closeButtonDiv.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeButton = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButton.addEventListener(\"click\", () => this.closeMainPage());\n        closeButtonDiv.appendChild(closeButton);\n        navigationDiv.appendChild(closeButtonDiv);\n        startSelfieDiv.appendChild(navigationDiv);\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.classList.add(\"pw-text-center\", \"pw-mb-9\");\n        const icon = document.createElement(\"img\");\n        icon.setAttribute(\"src\", icon_selfie_png_1.default);\n        icon.setAttribute(\"alt\", \"eKYC Verification\");\n        iconDiv.appendChild(icon);\n        startSelfieDiv.appendChild(iconDiv);\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-4\");\n        titleDiv.innerHTML = \"Take a selfie\";\n        wordingDiv.appendChild(titleDiv);\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.innerHTML =\n            \"Position your face in the frame and follow the instructions given. Do not wear sunglasses, hat or accessories. Background must be light and neutral.\";\n        wordingDiv.appendChild(descriptionDiv);\n        startSelfieDiv.appendChild(wordingDiv);\n        selfiePageDiv.appendChild(startSelfieDiv);\n        const startSelfieButton = (0, components_1.createPrimaryButton)(\"Start selfie\");\n        startSelfieButton.addEventListener(\"click\", () => __awaiter(this, void 0, void 0, function* () {\n            this.onClickSelfie();\n        }));\n        selfiePageDiv.appendChild(startSelfieButton);\n        return selfiePageDiv;\n    }\n    createCameraDiv() {\n        const screen = document.getElementById(this.mainScreenId);\n        const cameraDiv = document.createElement(\"div\");\n        cameraDiv.setAttribute(\"id\", this.cameraId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n    }\n    uploadSelfie(detail) {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // show loading spinner in full pg\n                (0, components_1.createFullLoading)(this.cameraId);\n                const { image, livenessScore } = detail;\n                yield uisdk_1.pwInstance.uploadSelfie({\n                    selfie_base64: image.croppedImage,\n                    selfie_base64_full: image.fullImage,\n                    liveness_score: livenessScore,\n                });\n            }\n            finally {\n                // hide loading spinner in full pg\n                (0, components_1.hideFullLoading)(this.cameraId);\n            }\n        });\n    }\n    createEkycErrorPage() {\n        var _a;\n        const errorPage = this.openErrorPage(\"Submission error\", \"Unable to verify your documents. Please check your documents and resubmit again.\");\n        const proceedButton = (0, components_1.createPrimaryButton)(\"Retry\");\n        proceedButton.addEventListener(\"click\", () => {\n            this.clearScreen();\n            const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode, uisdk_1.pwInstance.verificationTypes);\n            firstPage.render();\n        });\n        const proceedBtnDiv = document.createElement(\"div\");\n        proceedBtnDiv.classList.add(\"pw-p-5\");\n        proceedBtnDiv.appendChild(proceedButton);\n        (_a = errorPage.querySelector(\"slot[name='footer']\")) === null || _a === void 0 ? void 0 : _a.appendChild(proceedBtnDiv);\n    }\n    viewEkycResult() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // show loading page\n            const loadingPage = new LoadingPage_1.default(this.mainScreenId, this.displayMode);\n            // 1. first desc in loading screen\n            this.clearScreen();\n            loadingPage.render(\"Securely uploading the pictures to server\", \"Please do not close your browser, this may take a moment.\");\n            // 2. after 3 seconds\n            // update desc in loading screen, and call sdk\n            yield new Promise((resolve) => setTimeout(resolve, 3000));\n            loadingPage.title = \"Analysing the pictures\";\n            const payload = yield uisdk_1.pwInstance.viewResult();\n            const { status, is_retriable, id_status, selfie_status, id_type, result, filepaths, } = payload;\n            // 3. Redirect to page\n            this.clearScreen();\n            // redirect to thank you page and show update btn\n            if (status === \"approved\" || status === \"review\") {\n                const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n                reviewEkyc.render({\n                    id_type,\n                    result,\n                    filepaths,\n                });\n            }\n            // (fail: pending status / not able to retry)\n            // redirect to thank you page and show ntg\n            else if (!is_retriable || status === \"pending\") {\n                const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n                reviewEkyc.render({\n                    id_type,\n                    filepaths,\n                });\n            }\n            // (fail: rejected status - able to retry)\n            // Pending: redirect to review error pg (tell user to redo)\n            else\n                this.createEkycErrorPage();\n            return true;\n        });\n    }\n    onClickSelfie() {\n        this.createCameraDiv();\n        const faceCamera = new face_camera_1.default(this.cameraId, this.mainScreenId);\n        faceCamera.init();\n        faceCamera.listenToSelfieCapture((e) => __awaiter(this, void 0, void 0, function* () {\n            var _a, _b;\n            try {\n                faceCamera.pauseSmileFace();\n                yield this.uploadSelfie(e.detail);\n                faceCamera.stopVideoStream();\n                yield this.viewEkycResult();\n            }\n            catch (err) {\n                console.error(err);\n                this.clearScreen();\n                // 1. when exceed max attempt, redirect to thank you page\n                if (err.type &&\n                    [\n                        \"openApi/max-selfie-attempt\",\n                        \"openApi/max-session-attempt\",\n                        \"openApi/limit-exceed\",\n                        \"openApi/session-id-expired\",\n                        \"attempt-exceeded\",\n                        \"session-id-expired\",\n                    ].includes(err.type)) {\n                    const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n                    return reviewEkyc.render();\n                }\n                // 2. when selfie is exposed, redirect to selfie error page\n                else if (err.type && err.type === \"openApi/img-exposed\") {\n                    // redirect to selfie error page\n                    let isRetake = false;\n                    const pwErrorPayload = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payload;\n                    if (!!pwErrorPayload)\n                        isRetake = !!pwErrorPayload.is_retriable;\n                    const selfieError = new SelfieError_1.default(this.mainScreenId, this.displayMode);\n                    return selfieError.render(isRetake);\n                }\n                // 3. when view ekyc result fail due to doc upload not verified, redirect to review error page\n                else if (err.type &&\n                    [\n                        \"openApi/verification-type-invalid\",\n                        \"openApi/issuing-country-invalid\",\n                        \"openApi/doc-type-invalid\",\n                        \"openApi/doc-unpair\",\n                        \"openApi/doc-empty\",\n                        \"openApi/doc-blur\",\n                        \"openApi/doc-front-back-img-unsimilar\",\n                        \"openApi/doc-not-positioned-proper\",\n                    ].includes(err.type)) {\n                    // redirect to review error pg (tell user to redo)\n                    this.createEkycErrorPage();\n                }\n                this.openErrorPage();\n            }\n        }));\n    }\n}\nexports[\"default\"] = StartSelfie;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartSelfie.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst face_camera_1 = __importDefault(__webpack_require__(/*! ../plugins/face-camera */ \"./src/plugins/face-camera.ts\"));\nconst uisdk_1 = __webpack_require__(/*! ../uisdk */ \"./src/uisdk.ts\");\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\n// assets\nconst icon_selfie_png_1 = __importDefault(__webpack_require__(/*! ../assets/img/icon-selfie.png */ \"./src/assets/img/icon-selfie.png\"));\n// pages\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\nconst ReviewEkyc_1 = __importDefault(__webpack_require__(/*! ./ReviewEkyc */ \"./src/pageClass/ReviewEkyc.ts\"));\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst SelfieError_1 = __importDefault(__webpack_require__(/*! ./SelfieError */ \"./src/pageClass/SelfieError.ts\"));\nconst SubmissionLimit_1 = __importDefault(__webpack_require__(/*! ./SubmissionLimit */ \"./src/pageClass/SubmissionLimit.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nclass StartSelfie extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n        this.cameraId = \"pw-camera-container\";\n    }\n    render() {\n        this.renderContent(this.createPage());\n    }\n    createPage() {\n        const selfiePageDiv = document.createElement(\"div\");\n        selfiePageDiv.classList.add(\"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-h-full\");\n        const startSelfieDiv = document.createElement(\"div\");\n        const navigationDiv = document.createElement(\"div\");\n        navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\", \"pw-mb-16\");\n        const stepper = new stepper_1.default();\n        const stepperElement = stepper.render(4, 5);\n        navigationDiv.classList.add(\"pw-pt-3\");\n        navigationDiv.appendChild(stepperElement);\n        const closeButtonDiv = document.createElement(\"div\");\n        closeButtonDiv.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n        const closeButton = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n        closeButton.addEventListener(\"click\", () => this.closeMainPage());\n        closeButtonDiv.appendChild(closeButton);\n        navigationDiv.appendChild(closeButtonDiv);\n        startSelfieDiv.appendChild(navigationDiv);\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.classList.add(\"pw-text-center\", \"pw-mb-9\");\n        const icon = document.createElement(\"img\");\n        icon.setAttribute(\"src\", icon_selfie_png_1.default);\n        icon.setAttribute(\"alt\", \"eKYC Verification\");\n        iconDiv.appendChild(icon);\n        startSelfieDiv.appendChild(iconDiv);\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-4\");\n        titleDiv.innerHTML = \"Take a selfie\";\n        wordingDiv.appendChild(titleDiv);\n        const descriptionDiv = document.createElement(\"div\");\n        descriptionDiv.innerHTML =\n            \"Position your face in the frame and follow the instructions given. Do not wear sunglasses, hat or accessories. Background must be light and neutral.\";\n        wordingDiv.appendChild(descriptionDiv);\n        startSelfieDiv.appendChild(wordingDiv);\n        selfiePageDiv.appendChild(startSelfieDiv);\n        const startSelfieButton = (0, components_1.createPrimaryButton)(\"Start selfie\");\n        startSelfieButton.addEventListener(\"click\", () => __awaiter(this, void 0, void 0, function* () {\n            this.onClickSelfie();\n        }));\n        selfiePageDiv.appendChild(startSelfieButton);\n        return selfiePageDiv;\n    }\n    createCameraDiv() {\n        const screen = document.getElementById(this.mainScreenId);\n        const cameraDiv = document.createElement(\"div\");\n        cameraDiv.setAttribute(\"id\", this.cameraId);\n        screen === null || screen === void 0 ? void 0 : screen.appendChild(cameraDiv);\n    }\n    uploadSelfie(detail) {\n        return __awaiter(this, void 0, void 0, function* () {\n            try {\n                // show loading spinner in full pg\n                (0, components_1.createFullLoading)(this.cameraId);\n                const { image, livenessScore } = detail;\n                yield uisdk_1.pwInstance.uploadSelfie({\n                    selfie_base64: image.croppedImage,\n                    selfie_base64_full: image.fullImage,\n                    liveness_score: livenessScore,\n                });\n            }\n            finally {\n                // hide loading spinner in full pg\n                (0, components_1.hideFullLoading)(this.cameraId);\n            }\n        });\n    }\n    createEkycErrorPage() {\n        var _a;\n        const errorPage = this.openErrorPage(\"Submission error\", \"Unable to verify your documents. Please check your documents and resubmit again.\");\n        const proceedButton = (0, components_1.createPrimaryButton)(\"Retry\");\n        proceedButton.addEventListener(\"click\", () => {\n            this.clearScreen();\n            const firstPage = new StartPage_1.default(this.mainScreenId, this.displayMode, uisdk_1.pwInstance.verificationTypes);\n            firstPage.render();\n        });\n        const proceedBtnDiv = document.createElement(\"div\");\n        proceedBtnDiv.classList.add(\"pw-p-5\");\n        proceedBtnDiv.appendChild(proceedButton);\n        (_a = errorPage.querySelector(\"slot[name='footer']\")) === null || _a === void 0 ? void 0 : _a.appendChild(proceedBtnDiv);\n    }\n    viewEkycResult() {\n        return __awaiter(this, void 0, void 0, function* () {\n            // show loading page\n            const loadingPage = new LoadingPage_1.default(this.mainScreenId, this.displayMode);\n            // 1. first desc in loading screen\n            this.clearScreen();\n            loadingPage.render(\"Securely uploading the pictures to server\", \"Please do not close your browser, this may take a moment.\");\n            // 2. after 3 seconds\n            // update desc in loading screen, and call sdk\n            yield new Promise((resolve) => setTimeout(resolve, 3000));\n            loadingPage.title = \"Analysing the pictures\";\n            const payload = yield uisdk_1.pwInstance.viewResult();\n            const { status, is_retriable, id_status, selfie_status, id_type, result, filepaths, } = payload;\n            // 3. Redirect to page\n            this.clearScreen();\n            // redirect to thank you page and show update btn\n            if (status === \"approved\" || status === \"review\") {\n                const reviewEkyc = new ReviewEkyc_1.default(this.mainScreenId, this.displayMode);\n                reviewEkyc.render({\n                    id_type,\n                    result,\n                    filepaths,\n                });\n            }\n            // (fail: pending status / not able to retry)\n            // redirect to submission error page\n            else if (!is_retriable || status === \"pending\") {\n                const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n                submissionLimit.render(payload);\n            }\n            // (fail: rejected status - able to retry)\n            // Pending: redirect to review error pg (tell user to redo)\n            else\n                this.createEkycErrorPage();\n            return true;\n        });\n    }\n    onClickSelfie() {\n        this.createCameraDiv();\n        const faceCamera = new face_camera_1.default(this.cameraId, this.mainScreenId);\n        faceCamera.init();\n        faceCamera.listenToSelfieCapture((e) => __awaiter(this, void 0, void 0, function* () {\n            var _a, _b;\n            try {\n                faceCamera.pauseSmileFace();\n                yield this.uploadSelfie(e.detail);\n                faceCamera.stopVideoStream();\n                yield this.viewEkycResult();\n            }\n            catch (err) {\n                console.error(err);\n                this.clearScreen();\n                // 1. when exceed max attempt, redirect to submission error page\n                if (err.type &&\n                    [\n                        \"openApi/max-selfie-attempt\",\n                        \"openApi/max-session-attempt\",\n                        \"openApi/limit-exceed\",\n                        \"openApi/session-id-expired\",\n                        \"attempt-exceeded\",\n                        \"session-id-expired\",\n                    ].includes(err.type)) {\n                    const submissionLimit = new SubmissionLimit_1.default(this.mainScreenId, this.displayMode);\n                    return submissionLimit.render(err);\n                }\n                // 2. when selfie is exposed, redirect to selfie error page\n                else if (err.type && err.type === \"openApi/img-exposed\") {\n                    // redirect to selfie error page\n                    let isRetake = false;\n                    const pwErrorPayload = (_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.payload;\n                    if (!!pwErrorPayload)\n                        isRetake = !!pwErrorPayload.is_retriable;\n                    const selfieError = new SelfieError_1.default(this.mainScreenId, this.displayMode);\n                    return selfieError.render(isRetake, err);\n                }\n                // 3. when view ekyc result fail due to doc upload not verified, redirect to review error page\n                else if (err.type &&\n                    [\n                        \"openApi/verification-type-invalid\",\n                        \"openApi/issuing-country-invalid\",\n                        \"openApi/doc-type-invalid\",\n                        \"openApi/doc-unpair\",\n                        \"openApi/doc-empty\",\n                        \"openApi/doc-blur\",\n                        \"openApi/doc-front-back-img-unsimilar\",\n                        \"openApi/doc-not-positioned-proper\",\n                    ].includes(err.type)) {\n                    // redirect to review error pg (tell user to redo)\n                    this.createEkycErrorPage();\n                }\n                this.openErrorPage();\n            }\n        }));\n    }\n}\nexports[\"default\"] = StartSelfie;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/StartSelfie.ts?");
+
+/***/ }),
+
+/***/ "./src/pageClass/SubmissionLimit.ts":
+/*!******************************************!*\
+  !*** ./src/pageClass/SubmissionLimit.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst getGoogleIcon_1 = __webpack_require__(/*! ../helper/getGoogleIcon */ \"./src/helper/getGoogleIcon.ts\");\nconst MainPage_1 = __importDefault(__webpack_require__(/*! ../classes/MainPage */ \"./src/classes/MainPage.ts\"));\n// components\nconst components_1 = __webpack_require__(/*! ../components/components */ \"./src/components/components.ts\");\nconst stepper_1 = __importDefault(__webpack_require__(/*! ../components/stepper */ \"./src/components/stepper.ts\"));\nconst footer_1 = __importDefault(__webpack_require__(/*! ../components/footer */ \"./src/components/footer.ts\"));\n// assets\nconst circle_info_svg_1 = __importDefault(__webpack_require__(/*! ../assets/icon/circle_info.svg */ \"./src/assets/icon/circle_info.svg\"));\nclass SubmissionLimit extends MainPage_1.default {\n    constructor(mainScreenId, displayMode) {\n        super(mainScreenId, displayMode);\n    }\n    render(error) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const element = yield this.createPage(error);\n            this.renderContent(element);\n        });\n    }\n    createContentHeader(title, description) {\n        const headerDiv = document.createElement(\"div\");\n        headerDiv.classList.add(\"pw-p-5\");\n        // icon\n        const iconDiv = document.createElement(\"div\");\n        iconDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n        const iconImg = document.createElement(\"img\");\n        iconImg.setAttribute(\"src\", circle_info_svg_1.default);\n        iconDiv.appendChild(iconImg);\n        headerDiv.appendChild(iconDiv);\n        // title\n        const wordingDiv = document.createElement(\"div\");\n        wordingDiv.classList.add(\"pw-text-center\", \"pw-mb-4\");\n        const titleDiv = document.createElement(\"div\");\n        titleDiv.classList.add(\"pw-text-3xl\", \"pw-font-medium\", \"pw-mb-3\");\n        titleDiv.innerHTML = title;\n        wordingDiv.appendChild(titleDiv);\n        headerDiv.appendChild(wordingDiv);\n        // description\n        if (description) {\n            const descriptionDiv = document.createElement(\"div\");\n            descriptionDiv.classList.add(\"pw-text-center\", \"pw-mb-3\");\n            descriptionDiv.innerHTML = description;\n            wordingDiv.appendChild(descriptionDiv);\n            headerDiv.appendChild(wordingDiv);\n        }\n        return headerDiv;\n    }\n    createPage(error) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const submissionLimitDiv = document.createElement(\"div\");\n            submissionLimitDiv.classList.add(\"pw-absolute\", \"pw-top-0\", \"pw-left-0\", \"pw-right-0\", \"pw-bottom-0\", \"pw-flex\", \"pw-flex-col\", \"pw-justify-between\", \"pw-overflow-y-hidden\");\n            const contentDiv = document.createElement(\"div\");\n            contentDiv.classList.add(\"pw-overflow-auto\");\n            submissionLimitDiv.appendChild(contentDiv);\n            const firstSectionDiv = document.createElement(\"div\");\n            firstSectionDiv.classList.add(\"pw-p-5\");\n            contentDiv.appendChild(firstSectionDiv);\n            const footerDiv = document.createElement(\"div\");\n            footerDiv.classList.add(\"pw-p-5\", \"pw-shadow-footer-shadow\");\n            submissionLimitDiv.appendChild(footerDiv);\n            // dialog header - first section\n            const navigationDiv = document.createElement(\"div\");\n            navigationDiv.classList.add(\"pw-relative\", \"pw-text-center\");\n            const stepper = new stepper_1.default();\n            const stepperElement = stepper.render(5, 5);\n            navigationDiv.classList.add(\"pw-pt-3\");\n            navigationDiv.appendChild(stepperElement);\n            const closeButton = document.createElement(\"div\");\n            closeButton.classList.add(\"pw-absolute\", \"pw-right-0\", \"pw-top-0\");\n            const closeIcon = (0, getGoogleIcon_1.getGoogleIcon)(\"close\");\n            closeButton.addEventListener(\"click\", () => this.closeMainPage());\n            closeButton.appendChild(closeIcon);\n            navigationDiv.appendChild(closeButton);\n            firstSectionDiv.appendChild(navigationDiv);\n            // dialog content\n            // 1. header\n            const headerDiv = this.createContentHeader(\"Submission limit reached\", \"Your submission couldn’t be processed as it has reached the maximum number of attempts.\");\n            contentDiv.appendChild(headerDiv);\n            // 2. footer\n            const confirmButton = (0, components_1.createPrimaryButton)(\"Ok\");\n            confirmButton.classList.add(\"pw-mb-3\");\n            confirmButton.addEventListener(\"click\", () => {\n                this.onFailedEkyc(error);\n            });\n            footerDiv.appendChild(confirmButton);\n            const footer = new footer_1.default();\n            const footerPw = footer.render();\n            footerPw.classList.add(\"pw-text-grey-6\");\n            footerDiv.appendChild(footerPw);\n            return submissionLimitDiv;\n        });\n    }\n}\nexports[\"default\"] = SubmissionLimit;\n\n\n//# sourceURL=webpack://PWUISDK/./src/pageClass/SubmissionLimit.ts?");
 
 /***/ }),
 
@@ -3825,7 +3836,7 @@ eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _argument
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.pwInstance = void 0;\nconst pipwave_ekyc_sdk_1 = __webpack_require__(/*! pipwave-ekyc-sdk */ \"./node_modules/pipwave-ekyc-sdk/dist/pw-bundle.js\");\nconst face_detection_1 = __importDefault(__webpack_require__(/*! ./plugins/face-detection */ \"./src/plugins/face-detection.ts\"));\n// pages\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst console_1 = __webpack_require__(/*! ./helper/console */ \"./src/helper/console.ts\");\nexports.pwInstance = new pipwave_ekyc_sdk_1.PWSDK();\nclass PWUISDK {\n    init({ target, accessToken, displayMode = \"in-page\" }) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const mainContainer = document.getElementById(target);\n            if (!mainContainer) {\n                throw new Error(\"Invalid target\");\n            }\n            const sdkContainer = document.createElement(\"div\");\n            sdkContainer.classList.add(\"pw-box-border\", \"pwsdk-ui\", \"pw-m-0\", \"pw-p-0\", \"pw-max-h-[51rem]\");\n            mainContainer.appendChild(sdkContainer);\n            const mainScreen = this.createMainScreen(target);\n            sdkContainer.appendChild(mainScreen);\n            // show loading page\n            const loadingPage = new LoadingPage_1.default(this.mainScreenId, displayMode);\n            loadingPage.render(\"Loading\");\n            try {\n                const result = yield exports.pwInstance.init(accessToken);\n                const { verification_types } = result;\n                const firstPage = new StartPage_1.default(this.mainScreenId, displayMode, verification_types);\n                // train face model, no to wait for it, run in bg\n                const faceDetectionSdk = new face_detection_1.default();\n                faceDetectionSdk.loadFaceModel().catch((error) => {\n                    (0, console_1.warn)(\"Fail to load face model\", error);\n                });\n                loadingPage.clearScreen();\n                firstPage.render();\n            }\n            catch (error) {\n                console.error(error);\n                loadingPage.openErrorPage();\n            }\n        });\n    }\n    createMainScreen(value) {\n        const mainScreen = document.createElement(\"div\");\n        mainScreen.classList.add(\"pw-relative\", \"pw-font-pw\", \"pw-mx-auto\", \"pw-max-w-sm\", \"pw-rounded-lg\", \"pw-min:pw-border-solid\", \"pw-min:pw-border-grey-4\", \"pw-py-4\", \"pw-px-5\", \"pw-overflow-x-hidden\", \"pw-h-[calc(100vh-3rem)]\", \"pw-max-h-[51rem]\");\n        const id = `mainScreen_${value}`;\n        mainScreen.id = id;\n        this.mainScreenId = id;\n        return mainScreen;\n    }\n    onClose(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"close:ekyc\", () => {\n            cb();\n        });\n    }\n    onFinish(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"finish:ekyc\", () => {\n            cb();\n        });\n    }\n}\nexports[\"default\"] = PWUISDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/uisdk.ts?");
+eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n    return new (P || (P = Promise))(function (resolve, reject) {\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\n    });\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.pwInstance = void 0;\nconst pipwave_ekyc_sdk_1 = __webpack_require__(/*! pipwave-ekyc-sdk */ \"./node_modules/pipwave-ekyc-sdk/dist/pw-bundle.js\");\nconst face_detection_1 = __importDefault(__webpack_require__(/*! ./plugins/face-detection */ \"./src/plugins/face-detection.ts\"));\n// pages\nconst StartPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/StartPage */ \"./src/pageClass/StartPage.ts\"));\nconst LoadingPage_1 = __importDefault(__webpack_require__(/*! ./pageClass/LoadingPage */ \"./src/pageClass/LoadingPage.ts\"));\nconst console_1 = __webpack_require__(/*! ./helper/console */ \"./src/helper/console.ts\");\nexports.pwInstance = new pipwave_ekyc_sdk_1.PWSDK();\nclass PWUISDK {\n    init({ target, accessToken, displayMode = \"in-page\" }) {\n        return __awaiter(this, void 0, void 0, function* () {\n            const mainContainer = document.getElementById(target);\n            if (!mainContainer) {\n                throw new Error(\"Invalid target\");\n            }\n            const sdkContainer = document.createElement(\"div\");\n            sdkContainer.classList.add(\"pw-box-border\", \"pwsdk-ui\", \"pw-m-0\", \"pw-p-0\", \"pw-max-h-[51rem]\");\n            mainContainer.appendChild(sdkContainer);\n            const mainScreen = this.createMainScreen(target);\n            sdkContainer.appendChild(mainScreen);\n            // show loading page\n            const loadingPage = new LoadingPage_1.default(this.mainScreenId, displayMode);\n            loadingPage.render(\"Loading\");\n            try {\n                const result = yield exports.pwInstance.init(accessToken);\n                const { verification_types } = result;\n                const firstPage = new StartPage_1.default(this.mainScreenId, displayMode, verification_types);\n                // train face model, no to wait for it, run in bg\n                const faceDetectionSdk = new face_detection_1.default();\n                faceDetectionSdk.loadFaceModel().catch((error) => {\n                    (0, console_1.warn)(\"Fail to load face model\", error);\n                });\n                loadingPage.clearScreen();\n                firstPage.render();\n            }\n            catch (error) {\n                console.error(error);\n                loadingPage.openErrorPage();\n            }\n        });\n    }\n    createMainScreen(value) {\n        const mainScreen = document.createElement(\"div\");\n        mainScreen.classList.add(\"pw-relative\", \"pw-font-pw\", \"pw-mx-auto\", \"pw-max-w-sm\", \"pw-rounded-lg\", \"pw-min:pw-border-solid\", \"pw-min:pw-border-grey-4\", \"pw-py-4\", \"pw-px-5\", \"pw-overflow-x-hidden\", \"pw-h-[calc(100vh-3rem)]\", \"pw-max-h-[51rem]\");\n        const id = `mainScreen_${value}`;\n        mainScreen.id = id;\n        this.mainScreenId = id;\n        return mainScreen;\n    }\n    onClose(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"close:ekyc\", () => {\n            cb();\n        });\n    }\n    onSuccess(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"success:ekyc\", () => {\n            cb();\n        });\n    }\n    onFailed(cb) {\n        const mainScreen = document.getElementById(this.mainScreenId);\n        mainScreen === null || mainScreen === void 0 ? void 0 : mainScreen.addEventListener(\"fail:ekyc\", (event) => {\n            cb(event.detail);\n        });\n    }\n}\nexports[\"default\"] = PWUISDK;\n\n\n//# sourceURL=webpack://PWUISDK/./src/uisdk.ts?");
 
 /***/ }),
 
@@ -3840,6 +3851,28 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 
 /***/ }),
 
+/***/ "./src/assets/icon/circle_check.svg":
+/*!******************************************!*\
+  !*** ./src/assets/icon/circle_check.svg ***!
+  \******************************************/
+/***/ ((module) => {
+
+"use strict";
+eval("module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMSAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC41IDBDNzguMDk1IDAgMTAwLjUgMjIuNDA1IDEwMC41IDUwQzEwMC41IDc3LjU5NSA3OC4wOTUgMTAwIDUwLjUgMTAwQzIyLjkwNSAxMDAgMC41IDc3LjU5NSAwLjUgNTBDMC41IDIyLjQwNSAyMi45MDUgMCA1MC41IDBaIiBmaWxsPSIjRkJFQkZGIi8+CjxwYXRoIGQ9Ik01MC45ODQ0IDlDNzMuODc5NiA5IDkyLjQ2ODggMjcuNTg5MSA5Mi40Njg4IDUwLjQ4NDRDOTIuNDY4OCA3My4zNzk2IDczLjg3OTYgOTEuOTY4OCA1MC45ODQ0IDkxLjk2ODhDMjguMDg5MSA5MS45Njg4IDkuNSA3My4zNzk2IDkuNSA1MC40ODQ0QzkuNSAyNy41ODkxIDI4LjA4OTEgOSA1MC45ODQ0IDlaIiBmaWxsPSIjOUEyREI3Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNzEuNzI2NiAzNS4xMjUyQzczLjMxNDMgMzYuNjYxMiA3My4zNTYyIDM5LjE5MzUgNzEuODIwMiA0MC43ODEyTDQ3LjQ0NTIgNjUuOTc2NkM0Ni43MDQzIDY2Ljc0MjQgNDUuNjg4NSA2Ny4xODA5IDQ0LjYyMyA2Ny4xOTVDNDMuNTU3NiA2Ny4yMDkgNDIuNTMwNiA2Ni43OTc0IDQxLjc2OTggNjYuMDUxM0wyOS42OTk0IDU0LjIxNTRDMjguMTIyMSA1Mi42Njg3IDI4LjA5NzMgNTAuMTM2MiAyOS42NDQgNDguNTU4OEMzMS4xOTA3IDQ2Ljk4MTUgMzMuNzIzMiA0Ni45NTY3IDM1LjMwMDYgNDguNTAzNEw0NC40OTU1IDU3LjUxOThMNjYuMDcwNSAzNS4yMTg4QzY3LjYwNjUgMzMuNjMxIDcwLjEzODggMzMuNTg5MSA3MS43MjY2IDM1LjEyNTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K\";\n\n//# sourceURL=webpack://PWUISDK/./src/assets/icon/circle_check.svg?");
+
+/***/ }),
+
+/***/ "./src/assets/icon/circle_info.svg":
+/*!*****************************************!*\
+  !*** ./src/assets/icon/circle_info.svg ***!
+  \*****************************************/
+/***/ ((module) => {
+
+"use strict";
+eval("module.exports = \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMSAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC41IDBDNzguMDk1IDAgMTAwLjUgMjIuNDA1IDEwMC41IDUwQzEwMC41IDc3LjU5NSA3OC4wOTUgMTAwIDUwLjUgMTAwQzIyLjkwNSAxMDAgMC41IDc3LjU5NSAwLjUgNTBDMC41IDIyLjQwNSAyMi45MDUgMCA1MC41IDBaIiBmaWxsPSIjRkRFNEU0Ii8+CjxwYXRoIGQ9Ik01MC45ODQ0IDlDNzMuODc5NiA5IDkyLjQ2ODggMjcuNTg5MSA5Mi40Njg4IDUwLjQ4NDRDOTIuNDY4OCA3My4zNzk2IDczLjg3OTYgOTEuOTY4OCA1MC45ODQ0IDkxLjk2ODhDMjguMDg5MSA5MS45Njg4IDkuNSA3My4zNzk2IDkuNSA1MC40ODQ0QzkuNSAyNy41ODkxIDI4LjA4OTEgOSA1MC45ODQ0IDlaIiBmaWxsPSIjREYzQzNDIi8+CjxwYXRoIGQ9Ik00Ny41IDMzLjYxOTlWNTEuOTAwNUM0Ny41IDUzLjg5MTUgNDkuMTI5IDU1LjUyMDQgNTEuMTE5OSA1NS41MjA0QzUzLjExMDggNTUuNTIwNCA1NC43Mzk4IDUzLjg5MTUgNTQuNzM5OCA1MS45MDA1VjMzLjYxOTlDNTQuNzM5OCAzMS42MjkgNTMuMTEwOCAzMCA1MS4xMTk5IDMwQzQ5LjEyOSAzMCA0Ny41IDMxLjYyOSA0Ny41IDMzLjYxOTlaTTQ3LjUgNjIuNzYwMkg1NC43Mzk4VjcwSDQ3LjVWNjIuNzYwMloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\";\n\n//# sourceURL=webpack://PWUISDK/./src/assets/icon/circle_info.svg?");
+
+/***/ }),
+
 /***/ "./src/assets/img/example_selfie.png":
 /*!*******************************************!*\
   !*** ./src/assets/img/example_selfie.png ***!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pipwave-ekyc-uikit",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "",
   "main": "dist/pw-bundle.js",
   "scripts": {