@smileid/web-components 2.0.1 → 2.0.2

package/package.json

@@ -1,58 +1,58 @@
-{
-  "name": "@smileid/web-components",
-  "version": "2.0.1",
-  "main": "index.js",
-  "exports": {
-    ".": "./index.js",
-    "./combobox": "./src/components/combobox/src/index.js",
-    "./document-capture": "./src/components/document/src/index.js",
-    "./end-user-consent": "./src/components/end-user-consent/src/index.js",
-    "./navigation": "./src/components/navigation/src/index.js",
-    "./selfie-capture": "./src/components/selfie/src/index.js",
-    "./signature-pad": "./src/components/signature-pad/src/index.js",
-    "./totp-consent": "./src/components/totp-consent/src/index.js",
-    "./smart-camera-web": "./src/components/smart-camera-web/src/SmartCameraWeb.js"
-  },
-  "files": [
-    "./src/components/",
-    "./src/domain/",
-    "./src/styles/",
-    "./README.md",
-    "index.js",
-    "package.json"
-  ],
-  "scripts": {
-    "build": "cross-env NODE_ENV=production node esbuild.js",
-    "build:dev": "cross-env NODE_ENV=development node esbuild.js",
-    "clean": "rm -rf build dist",
-    "prepublishOnly": "npm run build",
-    "lint:fix": "eslint . --ext .js --fix",
-    "lint:html": "npx prettier --write $(git ls-files '*.html')",
-    "lint": "eslint . --ext .js",
-    "start": "npm run build:dev && npx serve -p 8000 dist",
-    "test": "npx cypress run"
-  },
-  "description": "A collection of Web Components used by SmileID",
-  "keywords": [
-    "Web Components"
-  ],
-  "type": "module",
-  "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
-  "dependencies": {
-    "signature_pad": "^5.0.2",
-    "validate.js": "^0.13.1"
-  },
-  "devDependencies": {
-    "cross-env": "^7.0.3",
-    "cypress": "^13.15.0",
-    "esbuild": "^0.24.0",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.3.3"
-  }
-}
+{
+  "name": "@smileid/web-components",
+  "version": "2.0.2",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./combobox": "./src/components/combobox/src/index.js",
+    "./document-capture": "./src/components/document/src/index.js",
+    "./end-user-consent": "./src/components/end-user-consent/src/index.js",
+    "./navigation": "./src/components/navigation/src/index.js",
+    "./selfie-capture": "./src/components/selfie/src/index.js",
+    "./signature-pad": "./src/components/signature-pad/src/index.js",
+    "./totp-consent": "./src/components/totp-consent/src/index.js",
+    "./smart-camera-web": "./src/components/smart-camera-web/src/SmartCameraWeb.js"
+  },
+  "files": [
+    "./src/components/",
+    "./src/domain/",
+    "./src/styles/",
+    "./README.md",
+    "index.js",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "cross-env NODE_ENV=production node esbuild.js",
+    "build:dev": "cross-env NODE_ENV=development node esbuild.js",
+    "clean": "rm -rf build dist",
+    "prepublishOnly": "npm run build",
+    "lint:fix": "eslint . --ext .js --fix",
+    "lint:html": "npx prettier --write $(git ls-files '*.html')",
+    "lint": "eslint . --ext .js",
+    "start": "npm run build:dev && npx serve -p 8000 dist",
+    "test": "npx cypress run"
+  },
+  "description": "A collection of Web Components used by SmileID",
+  "keywords": [
+    "Web Components"
+  ],
+  "type": "module",
+  "author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
+  "dependencies": {
+    "signature_pad": "^5.0.2",
+    "validate.js": "^0.13.1"
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3",
+    "cypress": "^13.15.0",
+    "esbuild": "^0.24.0",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^3.3.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.3"
+  }
+}

package/src/components/README.md

@@ -1,14 +1,14 @@
-# Instructions
-
-These components can be used to capture id document or liveness images
-
-1. [`document-capture-screens`](./document/src/README.md)
-2. [`selfie-capture-screens`](./selfie/README.md)
-
-## Orchestration
-
-To build your own flow, we have several components that can be used together
-
-### document-capture-instructions
-
-This is the screen used to instruct the user how to capture document using both the camera and/or upload.
+# Instructions
+
+These components can be used to capture id document or liveness images
+
+1. [`document-capture-screens`](./document/src/README.md)
+2. [`selfie-capture-screens`](./selfie/README.md)
+
+## Orchestration
+
+To build your own flow, we have several components that can be used together
+
+### document-capture-instructions
+
+This is the screen used to instruct the user how to capture document using both the camera and/or upload.

package/src/components/attribution/PoweredBySmileId.js

@@ -1,42 +1,42 @@
-class PoweredBySmileId extends HTMLElement {
-  constructor() {
-    super();
-    const template = document.createElement('template');
-    template.innerHTML = `
-        <p style='margin-inline: auto; max-inline-size: 10rem'>
-          <svg viewBox="0 0 90 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0.544 7V1.4H2.616C3.064 1.4 3.43467 1.47467 3.728 1.624C4.02133 1.77333 4.24 1.97867 4.384 2.24C4.528 2.50133 4.6 2.79467 4.6 3.12C4.6 3.42933 4.53067 3.71467 4.392 3.976C4.25333 4.232 4.03733 4.44 3.744 4.6C3.45067 4.75467 3.07467 4.832 2.616 4.832H1.568V7H0.544ZM1.568 4H2.552C2.90933 4 3.16533 3.92267 3.32 3.768C3.48 3.608 3.56 3.392 3.56 3.12C3.56 2.84267 3.48 2.62667 3.32 2.472C3.16533 2.312 2.90933 2.232 2.552 2.232H1.568V4ZM7.08025 7.096C6.69625 7.096 6.34958 7.008 6.04025 6.832C5.73625 6.656 5.49358 6.41333 5.31225 6.104C5.13625 5.78933 5.04825 5.42667 5.04825 5.016C5.04825 4.60533 5.13892 4.24533 5.32025 3.936C5.50158 3.62133 5.74425 3.376 6.04825 3.2C6.35758 3.024 6.70425 2.936 7.08825 2.936C7.46692 2.936 7.80825 3.024 8.11225 3.2C8.42158 3.376 8.66425 3.62133 8.84025 3.936C9.02158 4.24533 9.11225 4.60533 9.11225 5.016C9.11225 5.42667 9.02158 5.78933 8.84025 6.104C8.66425 6.41333 8.42158 6.656 8.11225 6.832C7.80292 7.008 7.45892 7.096 7.08025 7.096ZM7.08025 6.208C7.34692 6.208 7.57892 6.10933 7.77625 5.912C7.97358 5.70933 8.07225 5.41067 8.07225 5.016C8.07225 4.62133 7.97358 4.32533 7.77625 4.128C7.57892 3.92533 7.34958 3.824 7.08825 3.824C6.81625 3.824 6.58158 3.92533 6.38425 4.128C6.19225 4.32533 6.09625 4.62133 6.09625 5.016C6.09625 5.41067 6.19225 5.70933 6.38425 5.912C6.58158 6.10933 6.81358 6.208 7.08025 6.208ZM10.6632 7L9.50319 3.032H10.5192L11.2072 5.888L12.0072 3.032H13.1432L13.9432 5.888L14.6392 3.032H15.6552L14.4872 7H13.4232L12.5752 4.032L11.7272 7H10.6632ZM18.0886 7.096C17.6886 7.096 17.334 7.01067 17.0246 6.84C16.7153 6.66933 16.4726 6.42933 16.2966 6.12C16.1206 5.81067 16.0326 5.45333 16.0326 5.048C16.0326 4.63733 16.118 4.272 16.2886 3.952C16.4646 3.632 16.7046 3.384 17.0086 3.208C17.318 3.02667 17.6806 2.936 18.0966 2.936C18.486 2.936 18.83 3.02133 19.1286 3.192C19.4273 3.36267 19.6593 3.59733 19.8246 3.896C19.9953 4.18933 20.0806 4.51733 20.0806 4.88C20.0806 4.93867 20.078 5 20.0726 5.064C20.0726 5.128 20.07 5.19467 20.0646 5.264H17.0486C17.07 5.57333 17.1766 5.816 17.3686 5.992C17.566 6.168 17.8033 6.256 18.0806 6.256C18.2886 6.256 18.462 6.21067 18.6006 6.12C18.7446 6.024 18.8513 5.90133 18.9206 5.752H19.9606C19.886 6.00267 19.7606 6.232 19.5846 6.44C19.414 6.64267 19.2006 6.80267 18.9446 6.92C18.694 7.03733 18.4086 7.096 18.0886 7.096ZM18.0966 3.768C17.846 3.768 17.6246 3.84 17.4326 3.984C17.2406 4.12267 17.118 4.336 17.0646 4.624H19.0406C19.0246 4.36267 18.9286 4.15467 18.7526 4C18.5766 3.84533 18.358 3.768 18.0966 3.768ZM20.9419 7V3.032H21.8539L21.9499 3.776C22.0939 3.52 22.2885 3.31733 22.5339 3.168C22.7845 3.01333 23.0779 2.936 23.4139 2.936V4.016H23.1259C22.9019 4.016 22.7019 4.05067 22.5259 4.12C22.3499 4.18933 22.2112 4.30933 22.1099 4.48C22.0139 4.65067 21.9659 4.888 21.9659 5.192V7H20.9419ZM25.9714 7.096C25.5714 7.096 25.2168 7.01067 24.9074 6.84C24.5981 6.66933 24.3554 6.42933 24.1794 6.12C24.0034 5.81067 23.9154 5.45333 23.9154 5.048C23.9154 4.63733 24.0008 4.272 24.1714 3.952C24.3474 3.632 24.5874 3.384 24.8914 3.208C25.2008 3.02667 25.5634 2.936 25.9794 2.936C26.3688 2.936 26.7128 3.02133 27.0114 3.192C27.3101 3.36267 27.5421 3.59733 27.7074 3.896C27.8781 4.18933 27.9634 4.51733 27.9634 4.88C27.9634 4.93867 27.9608 5 27.9554 5.064C27.9554 5.128 27.9528 5.19467 27.9474 5.264H24.9314C24.9528 5.57333 25.0594 5.816 25.2514 5.992C25.4488 6.168 25.6861 6.256 25.9634 6.256C26.1714 6.256 26.3448 6.21067 26.4834 6.12C26.6274 6.024 26.7341 5.90133 26.8034 5.752H27.8434C27.7688 6.00267 27.6434 6.232 27.4674 6.44C27.2968 6.64267 27.0834 6.80267 26.8274 6.92C26.5768 7.03733 26.2914 7.096 25.9714 7.096ZM25.9794 3.768C25.7288 3.768 25.5074 3.84 25.3154 3.984C25.1234 4.12267 25.0008 4.336 24.9474 4.624H26.9234C26.9074 4.36267 26.8114 4.15467 26.6354 4C26.4594 3.84533 26.2408 3.768 25.9794 3.768ZM30.6487 7.096C30.2754 7.096 29.942 7.00533 29.6487 6.824C29.3554 6.64267 29.1234 6.39467 28.9527 6.08C28.782 5.76533 28.6967 5.408 28.6967 5.008C28.6967 4.608 28.782 4.25333 28.9527 3.944C29.1234 3.62933 29.3554 3.384 29.6487 3.208C29.942 3.02667 30.2754 2.936 30.6487 2.936C30.9474 2.936 31.2087 2.992 31.4327 3.104C31.6567 3.216 31.838 3.37333 31.9767 3.576V1.24H33.0007V7H32.0887L31.9767 6.432C31.8487 6.608 31.678 6.76267 31.4647 6.896C31.2567 7.02933 30.9847 7.096 30.6487 7.096ZM30.8647 6.2C31.1954 6.2 31.4647 6.09067 31.6727 5.872C31.886 5.648 31.9927 5.36267 31.9927 5.016C31.9927 4.66933 31.886 4.38667 31.6727 4.168C31.4647 3.944 31.1954 3.832 30.8647 3.832C30.5394 3.832 30.27 3.94133 30.0567 4.16C29.8434 4.37867 29.7367 4.66133 29.7367 5.008C29.7367 5.35467 29.8434 5.64 30.0567 5.864C30.27 6.088 30.5394 6.2 30.8647 6.2ZM38.3017 7.096C38.003 7.096 37.7417 7.04 37.5177 6.928C37.2937 6.816 37.1124 6.65867 36.9737 6.456L36.8617 7H35.9497V1.24H36.9737V3.6C37.1017 3.424 37.2697 3.26933 37.4777 3.136C37.691 3.00267 37.9657 2.936 38.3017 2.936C38.675 2.936 39.0084 3.02667 39.3017 3.208C39.595 3.38933 39.827 3.63733 39.9977 3.952C40.1684 4.26667 40.2537 4.624 40.2537 5.024C40.2537 5.424 40.1684 5.78133 39.9977 6.096C39.827 6.40533 39.595 6.65067 39.3017 6.832C39.0084 7.008 38.675 7.096 38.3017 7.096ZM38.0857 6.2C38.411 6.2 38.6804 6.09067 38.8937 5.872C39.107 5.65333 39.2137 5.37067 39.2137 5.024C39.2137 4.67733 39.107 4.392 38.8937 4.168C38.6804 3.944 38.411 3.832 38.0857 3.832C37.755 3.832 37.483 3.944 37.2697 4.168C37.0617 4.38667 36.9577 4.66933 36.9577 5.016C36.9577 5.36267 37.0617 5.648 37.2697 5.872C37.483 6.09067 37.755 6.2 38.0857 6.2ZM41.3051 8.76L42.2251 6.736H41.9851L40.4411 3.032H41.5531L42.6651 5.824L43.8251 3.032H44.9131L42.3931 8.76H41.3051Z" fill="#001096"/>
-            <g clipPath="url(#clip0_1923_23296)">
-                <path d="M58.5141 6.02913C58.5644 6.37005 58.8092 6.77098 59.4839 6.77098C60.0578 6.77098 60.336 6.56623 60.336 6.23338C60.336 5.90053 60.142 5.75579 59.788 5.71292L58.5988 5.58482C57.5612 5.47387 56.9539 4.86819 56.9539 3.87872C56.9539 2.77779 57.7801 2.04401 59.4335 2.04401C61.2135 2.04401 61.9221 2.88874 61.9894 3.88679H60.3195C60.2687 3.51157 59.965 3.27253 59.442 3.27253C58.9783 3.27253 58.6577 3.44349 58.6577 3.75062C58.6577 3.99774 58.8097 4.18534 59.2141 4.21964L60.1844 4.30486C61.4918 4.41582 62.0397 5.04672 62.0397 6.0962C62.0397 7.21377 61.3477 7.999 59.4504 7.999C57.5532 7.999 56.9534 7.02667 56.8691 6.02862H58.5141V6.02913Z" fill="#001096" />
-                <path d="M70.1965 5.28736V7.85484H68.5431V5.56019C68.5431 5.09925 68.3746 4.80069 67.9194 4.80069C67.4212 4.80069 67.2108 5.11639 67.2108 5.78159V7.85484H65.5824V5.56019C65.5824 5.09925 65.4133 4.80069 64.9581 4.80069C64.4605 4.80069 64.2496 5.11639 64.2496 5.78159V7.85484H62.5967V3.58932H64.2496V4.24644C64.5113 3.75171 64.9581 3.45265 65.6586 3.45265C66.3592 3.45265 66.8309 3.7855 67.0587 4.35689C67.3285 3.80265 67.7842 3.45265 68.5351 3.45265C69.6735 3.45265 70.197 4.16928 70.197 5.28736H70.1965Z" fill="#001096" />
-                <path d="M70.9785 3.8535V2.18118H72.6319V3.8535H70.9785ZM70.9785 7.85476V4.2504H72.6319V7.85476H70.9785Z" fill="#001096" />
-                <path d="M73.4121 7.85475V2.18167H75.065V7.85525H73.4121V7.85475Z" fill="#001096" />
-                <path d="M78.7264 6.53958H80.3579C80.1968 7.3243 79.5696 7.99151 78.0179 7.99151C76.2294 7.99151 75.6221 6.8568 75.6221 5.71351C75.6221 4.48499 76.3391 3.45265 78.0179 3.45265C79.8653 3.45265 80.3629 4.59594 80.3629 5.77302C80.3629 5.91776 80.3539 6.05443 80.3374 6.13966H77.2336C77.3178 6.68583 77.5881 6.89059 78.0518 6.89059C78.3729 6.89059 78.6083 6.73526 78.7269 6.53908L78.7264 6.53958ZM77.2416 5.21877H78.8022C78.7519 4.77497 78.5404 4.52785 78.0428 4.52785C77.5791 4.52785 77.3348 4.70689 77.2416 5.21877Z" fill="#001096" />
-                <path d="M83.5907 7.85476H81.8994L81.9034 2.18118H83.5902L83.5912 7.85476H83.5907Z" fill="#001096" />
-                <path d="M89.9995 5.00535C89.9995 6.46434 89.1474 7.85475 87.3345 7.85475H84.3652V2.18167H87.3345C89.1479 2.18167 89.9995 3.54686 89.9995 5.00535ZM86.9376 6.5067C87.8401 6.5067 88.2364 5.99482 88.2364 5.00535C88.2364 4.01588 87.8226 3.52971 86.9376 3.52971H86.06V6.5067H86.9376Z" fill="#001096" />
-                <path d="M52.2123 3.88737H48V7.86846H52.2123V3.88737Z" fill="#001096" />
-                <path d="M53.2359 0C53.2165 0 53.1975 0.00201727 53.1786 0.00252159C53.1591 0.00252159 53.1402 0 53.1207 0C52.0457 0 51.0869 0.708567 51.0869 2.27044V3.8888H55.2882V2.27044C55.2882 0.708567 54.3174 0 53.2359 0Z" fill="#FF9B00" />
-            </g>
-            <defs>
-                <clipPath id="clip0_1923_23296">
-                    <rect width="42" height="8" fill="white" transform="translate(48)" />
-                </clipPath>
-            </defs>
-          </svg>
-        </p>
-      `;
-
-    this.attachShadow({ mode: 'open' }).appendChild(
-      template.content.cloneNode(true),
-    );
-  }
-}
-
-if (
-  window.customElements &&
-  !window.customElements.get('powered-by-smile-id')
-) {
-  window.customElements.define('powered-by-smile-id', PoweredBySmileId);
-}
-
-export default PoweredBySmileId;
+class PoweredBySmileId extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.createElement('template');
+    template.innerHTML = `
+        <p style='margin-inline: auto; max-inline-size: 10rem'>
+          <svg viewBox="0 0 90 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0.544 7V1.4H2.616C3.064 1.4 3.43467 1.47467 3.728 1.624C4.02133 1.77333 4.24 1.97867 4.384 2.24C4.528 2.50133 4.6 2.79467 4.6 3.12C4.6 3.42933 4.53067 3.71467 4.392 3.976C4.25333 4.232 4.03733 4.44 3.744 4.6C3.45067 4.75467 3.07467 4.832 2.616 4.832H1.568V7H0.544ZM1.568 4H2.552C2.90933 4 3.16533 3.92267 3.32 3.768C3.48 3.608 3.56 3.392 3.56 3.12C3.56 2.84267 3.48 2.62667 3.32 2.472C3.16533 2.312 2.90933 2.232 2.552 2.232H1.568V4ZM7.08025 7.096C6.69625 7.096 6.34958 7.008 6.04025 6.832C5.73625 6.656 5.49358 6.41333 5.31225 6.104C5.13625 5.78933 5.04825 5.42667 5.04825 5.016C5.04825 4.60533 5.13892 4.24533 5.32025 3.936C5.50158 3.62133 5.74425 3.376 6.04825 3.2C6.35758 3.024 6.70425 2.936 7.08825 2.936C7.46692 2.936 7.80825 3.024 8.11225 3.2C8.42158 3.376 8.66425 3.62133 8.84025 3.936C9.02158 4.24533 9.11225 4.60533 9.11225 5.016C9.11225 5.42667 9.02158 5.78933 8.84025 6.104C8.66425 6.41333 8.42158 6.656 8.11225 6.832C7.80292 7.008 7.45892 7.096 7.08025 7.096ZM7.08025 6.208C7.34692 6.208 7.57892 6.10933 7.77625 5.912C7.97358 5.70933 8.07225 5.41067 8.07225 5.016C8.07225 4.62133 7.97358 4.32533 7.77625 4.128C7.57892 3.92533 7.34958 3.824 7.08825 3.824C6.81625 3.824 6.58158 3.92533 6.38425 4.128C6.19225 4.32533 6.09625 4.62133 6.09625 5.016C6.09625 5.41067 6.19225 5.70933 6.38425 5.912C6.58158 6.10933 6.81358 6.208 7.08025 6.208ZM10.6632 7L9.50319 3.032H10.5192L11.2072 5.888L12.0072 3.032H13.1432L13.9432 5.888L14.6392 3.032H15.6552L14.4872 7H13.4232L12.5752 4.032L11.7272 7H10.6632ZM18.0886 7.096C17.6886 7.096 17.334 7.01067 17.0246 6.84C16.7153 6.66933 16.4726 6.42933 16.2966 6.12C16.1206 5.81067 16.0326 5.45333 16.0326 5.048C16.0326 4.63733 16.118 4.272 16.2886 3.952C16.4646 3.632 16.7046 3.384 17.0086 3.208C17.318 3.02667 17.6806 2.936 18.0966 2.936C18.486 2.936 18.83 3.02133 19.1286 3.192C19.4273 3.36267 19.6593 3.59733 19.8246 3.896C19.9953 4.18933 20.0806 4.51733 20.0806 4.88C20.0806 4.93867 20.078 5 20.0726 5.064C20.0726 5.128 20.07 5.19467 20.0646 5.264H17.0486C17.07 5.57333 17.1766 5.816 17.3686 5.992C17.566 6.168 17.8033 6.256 18.0806 6.256C18.2886 6.256 18.462 6.21067 18.6006 6.12C18.7446 6.024 18.8513 5.90133 18.9206 5.752H19.9606C19.886 6.00267 19.7606 6.232 19.5846 6.44C19.414 6.64267 19.2006 6.80267 18.9446 6.92C18.694 7.03733 18.4086 7.096 18.0886 7.096ZM18.0966 3.768C17.846 3.768 17.6246 3.84 17.4326 3.984C17.2406 4.12267 17.118 4.336 17.0646 4.624H19.0406C19.0246 4.36267 18.9286 4.15467 18.7526 4C18.5766 3.84533 18.358 3.768 18.0966 3.768ZM20.9419 7V3.032H21.8539L21.9499 3.776C22.0939 3.52 22.2885 3.31733 22.5339 3.168C22.7845 3.01333 23.0779 2.936 23.4139 2.936V4.016H23.1259C22.9019 4.016 22.7019 4.05067 22.5259 4.12C22.3499 4.18933 22.2112 4.30933 22.1099 4.48C22.0139 4.65067 21.9659 4.888 21.9659 5.192V7H20.9419ZM25.9714 7.096C25.5714 7.096 25.2168 7.01067 24.9074 6.84C24.5981 6.66933 24.3554 6.42933 24.1794 6.12C24.0034 5.81067 23.9154 5.45333 23.9154 5.048C23.9154 4.63733 24.0008 4.272 24.1714 3.952C24.3474 3.632 24.5874 3.384 24.8914 3.208C25.2008 3.02667 25.5634 2.936 25.9794 2.936C26.3688 2.936 26.7128 3.02133 27.0114 3.192C27.3101 3.36267 27.5421 3.59733 27.7074 3.896C27.8781 4.18933 27.9634 4.51733 27.9634 4.88C27.9634 4.93867 27.9608 5 27.9554 5.064C27.9554 5.128 27.9528 5.19467 27.9474 5.264H24.9314C24.9528 5.57333 25.0594 5.816 25.2514 5.992C25.4488 6.168 25.6861 6.256 25.9634 6.256C26.1714 6.256 26.3448 6.21067 26.4834 6.12C26.6274 6.024 26.7341 5.90133 26.8034 5.752H27.8434C27.7688 6.00267 27.6434 6.232 27.4674 6.44C27.2968 6.64267 27.0834 6.80267 26.8274 6.92C26.5768 7.03733 26.2914 7.096 25.9714 7.096ZM25.9794 3.768C25.7288 3.768 25.5074 3.84 25.3154 3.984C25.1234 4.12267 25.0008 4.336 24.9474 4.624H26.9234C26.9074 4.36267 26.8114 4.15467 26.6354 4C26.4594 3.84533 26.2408 3.768 25.9794 3.768ZM30.6487 7.096C30.2754 7.096 29.942 7.00533 29.6487 6.824C29.3554 6.64267 29.1234 6.39467 28.9527 6.08C28.782 5.76533 28.6967 5.408 28.6967 5.008C28.6967 4.608 28.782 4.25333 28.9527 3.944C29.1234 3.62933 29.3554 3.384 29.6487 3.208C29.942 3.02667 30.2754 2.936 30.6487 2.936C30.9474 2.936 31.2087 2.992 31.4327 3.104C31.6567 3.216 31.838 3.37333 31.9767 3.576V1.24H33.0007V7H32.0887L31.9767 6.432C31.8487 6.608 31.678 6.76267 31.4647 6.896C31.2567 7.02933 30.9847 7.096 30.6487 7.096ZM30.8647 6.2C31.1954 6.2 31.4647 6.09067 31.6727 5.872C31.886 5.648 31.9927 5.36267 31.9927 5.016C31.9927 4.66933 31.886 4.38667 31.6727 4.168C31.4647 3.944 31.1954 3.832 30.8647 3.832C30.5394 3.832 30.27 3.94133 30.0567 4.16C29.8434 4.37867 29.7367 4.66133 29.7367 5.008C29.7367 5.35467 29.8434 5.64 30.0567 5.864C30.27 6.088 30.5394 6.2 30.8647 6.2ZM38.3017 7.096C38.003 7.096 37.7417 7.04 37.5177 6.928C37.2937 6.816 37.1124 6.65867 36.9737 6.456L36.8617 7H35.9497V1.24H36.9737V3.6C37.1017 3.424 37.2697 3.26933 37.4777 3.136C37.691 3.00267 37.9657 2.936 38.3017 2.936C38.675 2.936 39.0084 3.02667 39.3017 3.208C39.595 3.38933 39.827 3.63733 39.9977 3.952C40.1684 4.26667 40.2537 4.624 40.2537 5.024C40.2537 5.424 40.1684 5.78133 39.9977 6.096C39.827 6.40533 39.595 6.65067 39.3017 6.832C39.0084 7.008 38.675 7.096 38.3017 7.096ZM38.0857 6.2C38.411 6.2 38.6804 6.09067 38.8937 5.872C39.107 5.65333 39.2137 5.37067 39.2137 5.024C39.2137 4.67733 39.107 4.392 38.8937 4.168C38.6804 3.944 38.411 3.832 38.0857 3.832C37.755 3.832 37.483 3.944 37.2697 4.168C37.0617 4.38667 36.9577 4.66933 36.9577 5.016C36.9577 5.36267 37.0617 5.648 37.2697 5.872C37.483 6.09067 37.755 6.2 38.0857 6.2ZM41.3051 8.76L42.2251 6.736H41.9851L40.4411 3.032H41.5531L42.6651 5.824L43.8251 3.032H44.9131L42.3931 8.76H41.3051Z" fill="#001096"/>
+            <g clipPath="url(#clip0_1923_23296)">
+                <path d="M58.5141 6.02913C58.5644 6.37005 58.8092 6.77098 59.4839 6.77098C60.0578 6.77098 60.336 6.56623 60.336 6.23338C60.336 5.90053 60.142 5.75579 59.788 5.71292L58.5988 5.58482C57.5612 5.47387 56.9539 4.86819 56.9539 3.87872C56.9539 2.77779 57.7801 2.04401 59.4335 2.04401C61.2135 2.04401 61.9221 2.88874 61.9894 3.88679H60.3195C60.2687 3.51157 59.965 3.27253 59.442 3.27253C58.9783 3.27253 58.6577 3.44349 58.6577 3.75062C58.6577 3.99774 58.8097 4.18534 59.2141 4.21964L60.1844 4.30486C61.4918 4.41582 62.0397 5.04672 62.0397 6.0962C62.0397 7.21377 61.3477 7.999 59.4504 7.999C57.5532 7.999 56.9534 7.02667 56.8691 6.02862H58.5141V6.02913Z" fill="#001096" />
+                <path d="M70.1965 5.28736V7.85484H68.5431V5.56019C68.5431 5.09925 68.3746 4.80069 67.9194 4.80069C67.4212 4.80069 67.2108 5.11639 67.2108 5.78159V7.85484H65.5824V5.56019C65.5824 5.09925 65.4133 4.80069 64.9581 4.80069C64.4605 4.80069 64.2496 5.11639 64.2496 5.78159V7.85484H62.5967V3.58932H64.2496V4.24644C64.5113 3.75171 64.9581 3.45265 65.6586 3.45265C66.3592 3.45265 66.8309 3.7855 67.0587 4.35689C67.3285 3.80265 67.7842 3.45265 68.5351 3.45265C69.6735 3.45265 70.197 4.16928 70.197 5.28736H70.1965Z" fill="#001096" />
+                <path d="M70.9785 3.8535V2.18118H72.6319V3.8535H70.9785ZM70.9785 7.85476V4.2504H72.6319V7.85476H70.9785Z" fill="#001096" />
+                <path d="M73.4121 7.85475V2.18167H75.065V7.85525H73.4121V7.85475Z" fill="#001096" />
+                <path d="M78.7264 6.53958H80.3579C80.1968 7.3243 79.5696 7.99151 78.0179 7.99151C76.2294 7.99151 75.6221 6.8568 75.6221 5.71351C75.6221 4.48499 76.3391 3.45265 78.0179 3.45265C79.8653 3.45265 80.3629 4.59594 80.3629 5.77302C80.3629 5.91776 80.3539 6.05443 80.3374 6.13966H77.2336C77.3178 6.68583 77.5881 6.89059 78.0518 6.89059C78.3729 6.89059 78.6083 6.73526 78.7269 6.53908L78.7264 6.53958ZM77.2416 5.21877H78.8022C78.7519 4.77497 78.5404 4.52785 78.0428 4.52785C77.5791 4.52785 77.3348 4.70689 77.2416 5.21877Z" fill="#001096" />
+                <path d="M83.5907 7.85476H81.8994L81.9034 2.18118H83.5902L83.5912 7.85476H83.5907Z" fill="#001096" />
+                <path d="M89.9995 5.00535C89.9995 6.46434 89.1474 7.85475 87.3345 7.85475H84.3652V2.18167H87.3345C89.1479 2.18167 89.9995 3.54686 89.9995 5.00535ZM86.9376 6.5067C87.8401 6.5067 88.2364 5.99482 88.2364 5.00535C88.2364 4.01588 87.8226 3.52971 86.9376 3.52971H86.06V6.5067H86.9376Z" fill="#001096" />
+                <path d="M52.2123 3.88737H48V7.86846H52.2123V3.88737Z" fill="#001096" />
+                <path d="M53.2359 0C53.2165 0 53.1975 0.00201727 53.1786 0.00252159C53.1591 0.00252159 53.1402 0 53.1207 0C52.0457 0 51.0869 0.708567 51.0869 2.27044V3.8888H55.2882V2.27044C55.2882 0.708567 54.3174 0 53.2359 0Z" fill="#FF9B00" />
+            </g>
+            <defs>
+                <clipPath id="clip0_1923_23296">
+                    <rect width="42" height="8" fill="white" transform="translate(48)" />
+                </clipPath>
+            </defs>
+          </svg>
+        </p>
+      `;
+
+    this.attachShadow({ mode: 'open' }).appendChild(
+      template.content.cloneNode(true),
+    );
+  }
+}
+
+if (
+  window.customElements &&
+  !window.customElements.get('powered-by-smile-id')
+) {
+  window.customElements.define('powered-by-smile-id', PoweredBySmileId);
+}
+
+export default PoweredBySmileId;

package/src/components/camera-permission/CameraPermission.js

@@ -1,140 +1,140 @@
-import SmartCamera from '../../domain/camera/src/SmartCamera';
-import styles from '../../styles/src/styles';
-import '../attribution/PoweredBySmileId';
-import '../navigation/src';
-
-function templateString() {
-  return `
-    ${styles(this.themeColor)}
-    <style>
-        .camera-permission-screen {
-          padding-block: 2rem;
-          display: flex;
-          flex-direction: column;
-          max-block-size: 100%;
-          max-inline-size: 40ch;
-        }
-        .camera-permission {
-          display: flex;
-          flex-direction: column;
-          gap: 1.5rem;
-          align-items: center;
-          margin-top: auto;
-          margin-bottom: auto;
-        }
-        .camera-permission svg {
-            flex-shrink: 0;
-            margin-inline-end: 2rem;
-        }
-        .camera-permission p {
-            margin-block: 0;
-            text-align: center;
-        }
-    </style>
-    <div class='camera-permission-screen flow center'>
-        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
-        <div class='flow center'>
-          <p class='color-red | center' id='error'>
-          </p>
-        </div>
-        <div class='section | flow camera-permission-wrapper'>
-           <div class='center camera-permission'>
-                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="33" viewBox="0 0 43 33" fill="none">
-                <g clip-path="url(#clip0_658_1399)">
-                <path d="M6.36288 7.14178H36.6374C38.1923 7.14178 39.6835 7.7593 40.783 8.85849C41.8824 9.95768 42.5001 11.4485 42.5001 13.003V29.8478C42.5001 30.6838 42.1679 31.4856 41.5766 32.0767C40.9853 32.6679 40.1833 33 39.347 33H6.36288C4.80798 33 3.31676 32.3825 2.21728 31.2833C1.1178 30.1841 0.500122 28.6933 0.500122 27.1388L0.500122 13.003C0.500122 11.4485 1.1178 9.95768 2.21728 8.85849C3.31676 7.7593 4.80798 7.14178 6.36288 7.14178Z" fill="#B2B2B2"/>
-                <path d="M10.454 23.1789C10.7438 21.9337 9.96906 20.6893 8.7235 20.3995C7.47794 20.1098 6.23325 20.8843 5.9434 22.1296C5.65355 23.3748 6.4283 24.6191 7.67386 24.9089C8.91942 25.1987 10.1641 24.4241 10.454 23.1789Z" fill="#DBDBC4"/>
-                <path d="M10.0768 22.9365C10.2425 21.9024 9.53826 20.9298 8.50389 20.7642C7.46952 20.5985 6.49668 21.3025 6.331 22.3366C6.16532 23.3707 6.86954 24.3433 7.90391 24.509C8.93828 24.6746 9.91112 23.9706 10.0768 22.9365Z" fill="#FF5805"/>
-                <path d="M10.9694 16.2784H5.20514C4.83782 16.2784 4.54004 16.576 4.54004 16.9433V18.5194C4.54004 18.8866 4.83782 19.1843 5.20514 19.1843H10.9694C11.3367 19.1843 11.6345 18.8866 11.6345 18.5194V16.9433C11.6345 16.576 11.3367 16.2784 10.9694 16.2784Z" fill="#2D2B2A"/>
-                <path d="M37.9183 22.6813C37.9183 19.8492 37.9183 17.0418 37.9429 14.2097C37.9429 11.8948 37.9183 9.57985 37.9676 7.28955C37.5348 7.16853 37.0868 7.11047 36.6374 7.11716H36.0708C36.0954 9.87537 36.1201 12.6089 36.1201 15.3672C36.1201 20.9082 36.1201 26.4739 36.1447 32.0149V32.9754H37.8937C37.8937 29.5522 37.8937 26.1291 37.9183 22.6813Z" fill="#DBDBC4"/>
-                <path d="M0.500136 12.9291C0.496683 12.9634 0.500492 12.9981 0.511315 13.0309C0.522139 13.0637 0.539736 13.0938 0.562964 13.1194C0.586192 13.1449 0.614532 13.1653 0.646146 13.1792C0.67776 13.1931 0.71194 13.2002 0.746471 13.2H10.4767C12.8169 13.2 12.1271 11.2545 15.1324 11.2545H41.9582C41.9989 11.2523 42.0385 11.2411 42.0742 11.2215C42.1099 11.2019 42.1408 11.1745 42.1644 11.1414C42.1881 11.1083 42.204 11.0702 42.2109 11.0301C42.2179 10.99 42.2157 10.9488 42.2045 10.9097C41.8333 9.80556 41.125 8.84568 40.1793 8.16529C39.2335 7.48491 38.0981 7.11831 36.933 7.11716H6.31363C5.55019 7.11716 4.79423 7.26749 4.0889 7.55957C3.38358 7.85164 2.7427 8.27975 2.20287 8.81944C1.66304 9.35913 1.23482 9.99983 0.942663 10.705C0.650508 11.4101 0.500136 12.1659 0.500136 12.9291Z" fill="#5E646E"/>
-                <path d="M29.7154 1.3791H23.4585C21.4632 1.3791 19.7388 2.48731 19.394 4.01418L18.113 9.45671L18.1623 9.50597H35.0116C35.0362 9.50597 35.0608 9.48134 35.0362 9.45671L33.7799 4.01418C33.4104 2.48731 31.7107 1.3791 29.7154 1.3791Z" fill="#5E646E"/>
-                <path d="M30.8977 4.06343V3.71865C30.8977 3.32677 30.742 2.95093 30.4649 2.67382C30.1877 2.39672 29.8117 2.24104 29.4197 2.24104H23.6555C23.2678 2.2475 22.8982 2.40603 22.6263 2.68244C22.3544 2.95885 22.2021 3.331 22.2021 3.71865V4.06343H30.8977Z" fill="#2D2B2A"/>
-                <path d="M14.0731 4.72836H6.70771C6.4084 4.72836 6.16577 4.97093 6.16577 5.27015V6.63695C6.16577 6.93617 6.4084 7.17874 6.70771 7.17874H14.0731C14.3724 7.17874 14.615 6.93617 14.615 6.63695V5.27015C14.615 4.97093 14.3724 4.72836 14.0731 4.72836Z" fill="#2D2B2A"/>
-                <path d="M8.99862 8.76717H7.12648C6.73194 8.76717 6.41211 9.08692 6.41211 9.48135V11.0181C6.41211 11.4125 6.73194 11.7322 7.12648 11.7322H8.99862C9.39315 11.7322 9.71299 11.4125 9.71299 11.0181V9.48135C9.71299 9.08692 9.39315 8.76717 8.99862 8.76717Z" fill="#FCFCFC"/>
-                <path d="M8.77703 10.2448C8.77709 10.1521 8.75846 10.0604 8.72227 9.97507C8.68608 9.88977 8.63306 9.81263 8.56638 9.74827C8.4997 9.6839 8.42073 9.63363 8.33418 9.60047C8.24763 9.5673 8.15529 9.55191 8.06266 9.55522C7.97208 9.55522 7.88239 9.57305 7.79871 9.60771C7.71503 9.64236 7.63899 9.69315 7.57494 9.75718C7.5109 9.82121 7.46009 9.89723 7.42543 9.98089C7.39076 10.0646 7.37292 10.1542 7.37292 10.2448C7.37281 10.43 7.44469 10.608 7.57338 10.7413C7.70206 10.8745 7.8775 10.9526 8.06266 10.9589C8.25212 10.9589 8.43382 10.8837 8.56779 10.7498C8.70176 10.6158 8.77703 10.4342 8.77703 10.2448Z" fill="#5E646E"/>
-                <path d="M26.9318 30.0202C33.7069 30.0202 39.1992 24.5293 39.1992 17.756C39.1992 10.9827 33.7069 5.49179 26.9318 5.49179C20.1566 5.49179 14.6643 10.9827 14.6643 17.756C14.6643 24.5293 20.1566 30.0202 26.9318 30.0202Z" fill="#FCFCFC"/>
-                <path d="M26.9319 28.3455C32.7819 28.3455 37.5242 23.6044 37.5242 17.756C37.5242 11.9075 32.7819 7.16641 26.9319 7.16641C21.0818 7.16641 16.3395 11.9075 16.3395 17.756C16.3395 23.6044 21.0818 28.3455 26.9319 28.3455Z" fill="#0A462F"/>
-                <path d="M26.9318 24.0358C30.401 24.0358 33.2133 21.2242 33.2133 17.756C33.2133 14.2877 30.401 11.4761 26.9318 11.4761C23.4626 11.4761 20.6503 14.2877 20.6503 17.756C20.6503 21.2242 23.4626 24.0358 26.9318 24.0358Z" fill="#2D2B2A"/>
-                <path opacity="0.49" d="M28.4098 19.1104C30.1376 19.1104 31.5383 17.7102 31.5383 15.9828C31.5383 14.2555 30.1376 12.8552 28.4098 12.8552C26.682 12.8552 25.2814 14.2555 25.2814 15.9828C25.2814 17.7102 26.682 19.1104 28.4098 19.1104Z" fill="url(#paint0_linear_658_1399)"/>
-                <g style="mix-blend-mode:screen" opacity="0.24">
-                    <path d="M30.9717 14.6776C30.9717 14.9977 30.8445 15.3046 30.6182 15.5309C30.3918 15.7572 30.0848 15.8843 29.7647 15.8843C29.4445 15.8843 29.1375 15.7572 28.9112 15.5309C28.6848 15.3046 28.5576 14.9977 28.5576 14.6776C28.5576 14.5203 28.589 14.3645 28.6499 14.2195C28.7109 14.0744 28.8002 13.943 28.9126 13.8329C29.025 13.7228 29.1583 13.6363 29.3046 13.5783C29.4509 13.5204 29.6073 13.4922 29.7647 13.4955C29.922 13.4922 30.0784 13.5204 30.2247 13.5783C30.371 13.6363 30.5043 13.7228 30.6167 13.8329C30.7291 13.943 30.8184 14.0744 30.8794 14.2195C30.9403 14.3645 30.9717 14.5203 30.9717 14.6776Z" fill="#00FFFF"/>
-                </g>
-                </g>
-                <defs>
-                <linearGradient id="paint0_linear_658_1399" x1="25.2617" y1="15.9804" x2="31.5383" y2="15.9804" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#7F47DD" stop-opacity="0.1"/>
-                    <stop offset="0.99" stop-color="#00FFFF"/>
-                </linearGradient>
-                <clipPath id="clip0_658_1399">
-                    <rect width="42" height="33" fill="white" transform="translate(0.500122)"/>
-                </clipPath>
-                </defs>
-            </svg>
-            <p class='text-2xl font-bold'>We need access to your camera so that we can capture your details.</p>
-            <div class='flow action-buttons'>
-                <button data-variant='solid full-width' class='button' type='button' id='request-camera-access'>
-                  Request Camera Access
-                </button>
-                ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
-            </div>
-          </div>
-        </div>
-    </div>
-    `;
-}
-
-class CameraPermission extends HTMLElement {
-  connectedCallback() {
-    this.templateString = templateString.bind(this);
-    this.render = () => this.templateString();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = this.render();
-    this.setUpEventListeners();
-  }
-
-  setUpEventListeners() {
-    const errorMessage = this.shadowRoot.querySelector('#error');
-    const permissionButton = this.shadowRoot.getElementById(
-      'request-camera-access',
-    );
-    errorMessage.textContent = '';
-    permissionButton.addEventListener('click', async () => {
-      permissionButton.setAttribute('disabled', true);
-      try {
-        await SmartCamera.getMedia({
-          audio: false,
-          video: true,
-        });
-        this.dispatchEvent(new CustomEvent('camera-permission.granted'));
-      } catch (error) {
-        this.dispatchEvent(
-          new CustomEvent('camera-permission.denied', { detail: error }),
-        );
-        errorMessage.textContent = SmartCamera.handleCameraError(error);
-      }
-      permissionButton.removeAttribute('disabled');
-    });
-  }
-
-  get showNavigation() {
-    return this.hasAttribute('show-navigation');
-  }
-
-  get hideAttribution() {
-    return this.hasAttribute('hide-attribution');
-  }
-
-  get hideBack() {
-    return this.hasAttribute('hide-back');
-  }
-
-  get themeColor() {
-    return this.getAttribute('theme-color') || '#001096';
-  }
-}
-
-if (window.customElements && !window.customElements.get('camera-permission')) {
-  window.customElements.define('camera-permission', CameraPermission);
-}
-
-export default CameraPermission;
+import SmartCamera from '../../domain/camera/src/SmartCamera';
+import styles from '../../styles/src/styles';
+import '../attribution/PoweredBySmileId';
+import '../navigation/src';
+
+function templateString() {
+  return `
+    ${styles(this.themeColor)}
+    <style>
+        .camera-permission-screen {
+          padding-block: 2rem;
+          display: flex;
+          flex-direction: column;
+          max-block-size: 100%;
+          max-inline-size: 40ch;
+        }
+        .camera-permission {
+          display: flex;
+          flex-direction: column;
+          gap: 1.5rem;
+          align-items: center;
+          margin-top: auto;
+          margin-bottom: auto;
+        }
+        .camera-permission svg {
+            flex-shrink: 0;
+            margin-inline-end: 2rem;
+        }
+        .camera-permission p {
+            margin-block: 0;
+            text-align: center;
+        }
+    </style>
+    <div class='camera-permission-screen flow center'>
+        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        <div class='flow center'>
+          <p class='color-red | center' id='error'>
+          </p>
+        </div>
+        <div class='section | flow camera-permission-wrapper'>
+           <div class='center camera-permission'>
+                <svg xmlns="http://www.w3.org/2000/svg" width="43" height="33" viewBox="0 0 43 33" fill="none">
+                <g clip-path="url(#clip0_658_1399)">
+                <path d="M6.36288 7.14178H36.6374C38.1923 7.14178 39.6835 7.7593 40.783 8.85849C41.8824 9.95768 42.5001 11.4485 42.5001 13.003V29.8478C42.5001 30.6838 42.1679 31.4856 41.5766 32.0767C40.9853 32.6679 40.1833 33 39.347 33H6.36288C4.80798 33 3.31676 32.3825 2.21728 31.2833C1.1178 30.1841 0.500122 28.6933 0.500122 27.1388L0.500122 13.003C0.500122 11.4485 1.1178 9.95768 2.21728 8.85849C3.31676 7.7593 4.80798 7.14178 6.36288 7.14178Z" fill="#B2B2B2"/>
+                <path d="M10.454 23.1789C10.7438 21.9337 9.96906 20.6893 8.7235 20.3995C7.47794 20.1098 6.23325 20.8843 5.9434 22.1296C5.65355 23.3748 6.4283 24.6191 7.67386 24.9089C8.91942 25.1987 10.1641 24.4241 10.454 23.1789Z" fill="#DBDBC4"/>
+                <path d="M10.0768 22.9365C10.2425 21.9024 9.53826 20.9298 8.50389 20.7642C7.46952 20.5985 6.49668 21.3025 6.331 22.3366C6.16532 23.3707 6.86954 24.3433 7.90391 24.509C8.93828 24.6746 9.91112 23.9706 10.0768 22.9365Z" fill="#FF5805"/>
+                <path d="M10.9694 16.2784H5.20514C4.83782 16.2784 4.54004 16.576 4.54004 16.9433V18.5194C4.54004 18.8866 4.83782 19.1843 5.20514 19.1843H10.9694C11.3367 19.1843 11.6345 18.8866 11.6345 18.5194V16.9433C11.6345 16.576 11.3367 16.2784 10.9694 16.2784Z" fill="#2D2B2A"/>
+                <path d="M37.9183 22.6813C37.9183 19.8492 37.9183 17.0418 37.9429 14.2097C37.9429 11.8948 37.9183 9.57985 37.9676 7.28955C37.5348 7.16853 37.0868 7.11047 36.6374 7.11716H36.0708C36.0954 9.87537 36.1201 12.6089 36.1201 15.3672C36.1201 20.9082 36.1201 26.4739 36.1447 32.0149V32.9754H37.8937C37.8937 29.5522 37.8937 26.1291 37.9183 22.6813Z" fill="#DBDBC4"/>
+                <path d="M0.500136 12.9291C0.496683 12.9634 0.500492 12.9981 0.511315 13.0309C0.522139 13.0637 0.539736 13.0938 0.562964 13.1194C0.586192 13.1449 0.614532 13.1653 0.646146 13.1792C0.67776 13.1931 0.71194 13.2002 0.746471 13.2H10.4767C12.8169 13.2 12.1271 11.2545 15.1324 11.2545H41.9582C41.9989 11.2523 42.0385 11.2411 42.0742 11.2215C42.1099 11.2019 42.1408 11.1745 42.1644 11.1414C42.1881 11.1083 42.204 11.0702 42.2109 11.0301C42.2179 10.99 42.2157 10.9488 42.2045 10.9097C41.8333 9.80556 41.125 8.84568 40.1793 8.16529C39.2335 7.48491 38.0981 7.11831 36.933 7.11716H6.31363C5.55019 7.11716 4.79423 7.26749 4.0889 7.55957C3.38358 7.85164 2.7427 8.27975 2.20287 8.81944C1.66304 9.35913 1.23482 9.99983 0.942663 10.705C0.650508 11.4101 0.500136 12.1659 0.500136 12.9291Z" fill="#5E646E"/>
+                <path d="M29.7154 1.3791H23.4585C21.4632 1.3791 19.7388 2.48731 19.394 4.01418L18.113 9.45671L18.1623 9.50597H35.0116C35.0362 9.50597 35.0608 9.48134 35.0362 9.45671L33.7799 4.01418C33.4104 2.48731 31.7107 1.3791 29.7154 1.3791Z" fill="#5E646E"/>
+                <path d="M30.8977 4.06343V3.71865C30.8977 3.32677 30.742 2.95093 30.4649 2.67382C30.1877 2.39672 29.8117 2.24104 29.4197 2.24104H23.6555C23.2678 2.2475 22.8982 2.40603 22.6263 2.68244C22.3544 2.95885 22.2021 3.331 22.2021 3.71865V4.06343H30.8977Z" fill="#2D2B2A"/>
+                <path d="M14.0731 4.72836H6.70771C6.4084 4.72836 6.16577 4.97093 6.16577 5.27015V6.63695C6.16577 6.93617 6.4084 7.17874 6.70771 7.17874H14.0731C14.3724 7.17874 14.615 6.93617 14.615 6.63695V5.27015C14.615 4.97093 14.3724 4.72836 14.0731 4.72836Z" fill="#2D2B2A"/>
+                <path d="M8.99862 8.76717H7.12648C6.73194 8.76717 6.41211 9.08692 6.41211 9.48135V11.0181C6.41211 11.4125 6.73194 11.7322 7.12648 11.7322H8.99862C9.39315 11.7322 9.71299 11.4125 9.71299 11.0181V9.48135C9.71299 9.08692 9.39315 8.76717 8.99862 8.76717Z" fill="#FCFCFC"/>
+                <path d="M8.77703 10.2448C8.77709 10.1521 8.75846 10.0604 8.72227 9.97507C8.68608 9.88977 8.63306 9.81263 8.56638 9.74827C8.4997 9.6839 8.42073 9.63363 8.33418 9.60047C8.24763 9.5673 8.15529 9.55191 8.06266 9.55522C7.97208 9.55522 7.88239 9.57305 7.79871 9.60771C7.71503 9.64236 7.63899 9.69315 7.57494 9.75718C7.5109 9.82121 7.46009 9.89723 7.42543 9.98089C7.39076 10.0646 7.37292 10.1542 7.37292 10.2448C7.37281 10.43 7.44469 10.608 7.57338 10.7413C7.70206 10.8745 7.8775 10.9526 8.06266 10.9589C8.25212 10.9589 8.43382 10.8837 8.56779 10.7498C8.70176 10.6158 8.77703 10.4342 8.77703 10.2448Z" fill="#5E646E"/>
+                <path d="M26.9318 30.0202C33.7069 30.0202 39.1992 24.5293 39.1992 17.756C39.1992 10.9827 33.7069 5.49179 26.9318 5.49179C20.1566 5.49179 14.6643 10.9827 14.6643 17.756C14.6643 24.5293 20.1566 30.0202 26.9318 30.0202Z" fill="#FCFCFC"/>
+                <path d="M26.9319 28.3455C32.7819 28.3455 37.5242 23.6044 37.5242 17.756C37.5242 11.9075 32.7819 7.16641 26.9319 7.16641C21.0818 7.16641 16.3395 11.9075 16.3395 17.756C16.3395 23.6044 21.0818 28.3455 26.9319 28.3455Z" fill="#0A462F"/>
+                <path d="M26.9318 24.0358C30.401 24.0358 33.2133 21.2242 33.2133 17.756C33.2133 14.2877 30.401 11.4761 26.9318 11.4761C23.4626 11.4761 20.6503 14.2877 20.6503 17.756C20.6503 21.2242 23.4626 24.0358 26.9318 24.0358Z" fill="#2D2B2A"/>
+                <path opacity="0.49" d="M28.4098 19.1104C30.1376 19.1104 31.5383 17.7102 31.5383 15.9828C31.5383 14.2555 30.1376 12.8552 28.4098 12.8552C26.682 12.8552 25.2814 14.2555 25.2814 15.9828C25.2814 17.7102 26.682 19.1104 28.4098 19.1104Z" fill="url(#paint0_linear_658_1399)"/>
+                <g style="mix-blend-mode:screen" opacity="0.24">
+                    <path d="M30.9717 14.6776C30.9717 14.9977 30.8445 15.3046 30.6182 15.5309C30.3918 15.7572 30.0848 15.8843 29.7647 15.8843C29.4445 15.8843 29.1375 15.7572 28.9112 15.5309C28.6848 15.3046 28.5576 14.9977 28.5576 14.6776C28.5576 14.5203 28.589 14.3645 28.6499 14.2195C28.7109 14.0744 28.8002 13.943 28.9126 13.8329C29.025 13.7228 29.1583 13.6363 29.3046 13.5783C29.4509 13.5204 29.6073 13.4922 29.7647 13.4955C29.922 13.4922 30.0784 13.5204 30.2247 13.5783C30.371 13.6363 30.5043 13.7228 30.6167 13.8329C30.7291 13.943 30.8184 14.0744 30.8794 14.2195C30.9403 14.3645 30.9717 14.5203 30.9717 14.6776Z" fill="#00FFFF"/>
+                </g>
+                </g>
+                <defs>
+                <linearGradient id="paint0_linear_658_1399" x1="25.2617" y1="15.9804" x2="31.5383" y2="15.9804" gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#7F47DD" stop-opacity="0.1"/>
+                    <stop offset="0.99" stop-color="#00FFFF"/>
+                </linearGradient>
+                <clipPath id="clip0_658_1399">
+                    <rect width="42" height="33" fill="white" transform="translate(0.500122)"/>
+                </clipPath>
+                </defs>
+            </svg>
+            <p class='text-2xl font-bold'>We need access to your camera so that we can capture your details.</p>
+            <div class='flow action-buttons'>
+                <button data-variant='solid full-width' class='button' type='button' id='request-camera-access'>
+                  Request Camera Access
+                </button>
+                ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
+            </div>
+          </div>
+        </div>
+    </div>
+    `;
+}
+
+class CameraPermission extends HTMLElement {
+  connectedCallback() {
+    this.templateString = templateString.bind(this);
+    this.render = () => this.templateString();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = this.render();
+    this.setUpEventListeners();
+  }
+
+  setUpEventListeners() {
+    const errorMessage = this.shadowRoot.querySelector('#error');
+    const permissionButton = this.shadowRoot.getElementById(
+      'request-camera-access',
+    );
+    errorMessage.textContent = '';
+    permissionButton.addEventListener('click', async () => {
+      permissionButton.setAttribute('disabled', true);
+      try {
+        await SmartCamera.getMedia({
+          audio: false,
+          video: true,
+        });
+        this.dispatchEvent(new CustomEvent('camera-permission.granted'));
+      } catch (error) {
+        this.dispatchEvent(
+          new CustomEvent('camera-permission.denied', { detail: error }),
+        );
+        errorMessage.textContent = SmartCamera.handleCameraError(error);
+      }
+      permissionButton.removeAttribute('disabled');
+    });
+  }
+
+  get showNavigation() {
+    return this.hasAttribute('show-navigation');
+  }
+
+  get hideAttribution() {
+    return this.hasAttribute('hide-attribution');
+  }
+
+  get hideBack() {
+    return this.hasAttribute('hide-back');
+  }
+
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+}
+
+if (window.customElements && !window.customElements.get('camera-permission')) {
+  window.customElements.define('camera-permission', CameraPermission);
+}
+
+export default CameraPermission;

package/src/components/camera-permission/CameraPermission.stories.js

@@ -1,27 +1,27 @@
-import './CameraPermission';
-
-const meta = {
-  args: {
-    'theme-color': '#001096',
-  },
-  argTypes: {
-    'theme-color': { control: 'color' },
-  },
-  component: 'camera-permission',
-};
-
-export default meta;
-
-export const CameraPermission = {
-  render: (args) => `
-        <camera-permission theme-color='${args['theme-color']}'>
-        </camera-permission>
-    `,
-};
-
-export const CameraPermissionAtributes = {
-  render: (args) => `
-        <camera-permission theme-color='${args['theme-color']}' show-navigation>
-        </camera-permission>
-    `,
-};
+import './CameraPermission';
+
+const meta = {
+  args: {
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
+  component: 'camera-permission',
+};
+
+export default meta;
+
+export const CameraPermission = {
+  render: (args) => `
+        <camera-permission theme-color='${args['theme-color']}'>
+        </camera-permission>
+    `,
+};
+
+export const CameraPermissionAtributes = {
+  render: (args) => `
+        <camera-permission theme-color='${args['theme-color']}' show-navigation>
+        </camera-permission>
+    `,
+};