diff --git a/package-lock.json b/package-lock.json
index 21e2537b..cb801e5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10439,7 +10439,10 @@
     },
     "packages/components": {
       "name": "@smileid/components",
-      "version": "1.0.0"
+      "version": "1.0.0",
+      "dependencies": {
+        "validate.js": "^0.13.1"
+      }
     },
     "packages/embed": {
       "name": "@smileid/embed",
diff --git a/packages/components/end-user-consent/src/EndUserConsent.js b/packages/components/end-user-consent/src/EndUserConsent.js
index 5e75cf7a..6aaab625 100644
--- a/packages/components/end-user-consent/src/EndUserConsent.js
+++ b/packages/components/end-user-consent/src/EndUserConsent.js
@@ -480,7 +480,7 @@ function templateString() {
       </section>
     </div>
 
-    <totp-consent-app
+    <totp-consent
       hidden
       base-url='${this.baseUrl}'
       country='${this.country}'
@@ -492,7 +492,7 @@ function templateString() {
       partner-name='${this.partnerName}'
       token='${this.token}'
     >
-    </totp-consent-app>
+    </totp-consent>
 
     <div hidden id='consent-rejected-screen' class='flow'>
       <section class='flow center'>
@@ -674,7 +674,7 @@ class EndUserConsent extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
     this.consentScreen = this.shadowRoot.querySelector("#consent-screen");
-    this.totpConsentApp = this.shadowRoot.querySelector("totp-consent-app");
+    this.totpConsentApp = this.shadowRoot.querySelector("totp-consent");
     this.consentRejectedScreen = this.shadowRoot.querySelector(
       "#consent-rejected-screen",
     );
diff --git a/packages/components/package.json b/packages/components/package.json
index 5a753846..0f47a230 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -5,9 +5,15 @@
 	"exports": {
 		".": "./index.js",
 		"./combobox": "./combobox/src/index.js",
-		"./end-user-consent": "./end-user-consent/src/index.js"
+		"./end-user-consent": "./end-user-consent/src/index.js",
+		"./totp-consent": "./totp-consent/src/index.js"
 	},
 	"description": "A collection of Web Components used by SmileID",
-	"keywords": [ "Web Components" ],
-	"author": "SmileID <support@usesmileid.com> (https://usesmileid.com)"
+	"keywords": [
+		"Web Components"
+	],
+	"author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
+	"dependencies": {
+		"validate.js": "^0.13.1"
+	}
 }
diff --git a/packages/embed/src/js/components/TotpConsentApp.js b/packages/components/totp-consent/src/TotpConsent.js
similarity index 99%
rename from packages/embed/src/js/components/TotpConsentApp.js
rename to packages/components/totp-consent/src/TotpConsent.js
index 0004c0a7..f2bb3984 100644
--- a/packages/embed/src/js/components/TotpConsentApp.js
+++ b/packages/components/totp-consent/src/TotpConsent.js
@@ -504,7 +504,7 @@ function markup() {
 	`;
 }
 
-class TotpBasedConsent extends HTMLElement {
+class TotpConsent extends HTMLElement {
   constructor() {
     super();
 
@@ -923,4 +923,10 @@ class TotpBasedConsent extends HTMLElement {
   }
 }
 
-export default TotpBasedConsent;
+if ("customElements" in window) {
+  window.customElements.define('totp-consent', TotpConsent);
+}
+
+export {
+  TotpConsent,
+};
diff --git a/packages/components/totp-consent/src/index.js b/packages/components/totp-consent/src/index.js
new file mode 100644
index 00000000..06a3a66f
--- /dev/null
+++ b/packages/components/totp-consent/src/index.js
@@ -0,0 +1,3 @@
+export {
+  TotpConsent
+} from './TotpConsent';
diff --git a/packages/embed/cypress/support/commands.js b/packages/embed/cypress/support/commands.js
index 1009793b..d47c30f2 100644
--- a/packages/embed/cypress/support/commands.js
+++ b/packages/embed/cypress/support/commands.js
@@ -196,7 +196,7 @@ Cypress.Commands.add("getTotpConsentApp", () => {
   cy.getIFrameBody()
     .find("end-user-consent")
     .shadow()
-    .find("totp-consent-app")
+    .find("totp-consent")
     .shadow();
 });
 
diff --git a/packages/embed/src/js/basic-kyc.js b/packages/embed/src/js/basic-kyc.js
index d8e9260f..b58bcfe0 100644
--- a/packages/embed/src/js/basic-kyc.js
+++ b/packages/embed/src/js/basic-kyc.js
@@ -1,7 +1,7 @@
 import validate from "validate.js";
 import "@smileid/components/combobox";
 import "@smileid/components/end-user-consent";
-import TotpBasedConsent from "./components/TotpConsentApp";
+import "@smileid/components/totp-consent";
 import { version as sdkVersion } from "../../package.json";
 
 (function basicKyc() {
@@ -19,8 +19,6 @@ import { version as sdkVersion } from "../../package.json";
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
 
-  window.customElements.define("totp-consent-app", TotpBasedConsent);
-
   const pages = [];
   let activeScreen;
   let config;
diff --git a/packages/embed/src/js/biometric-kyc.js b/packages/embed/src/js/biometric-kyc.js
index eb3258eb..9751d46c 100644
--- a/packages/embed/src/js/biometric-kyc.js
+++ b/packages/embed/src/js/biometric-kyc.js
@@ -2,7 +2,7 @@ import JSZip from "jszip";
 import validate from "validate.js";
 import "@smile_identity/smart-camera-web";
 import "@smileid/components/end-user-consent";
-import TotpBasedConsent from "./components/TotpConsentApp";
+import "@smileid/components/totp-consent";
 import { version as sdkVersion } from "../../package.json";
 
 (function biometricKyc() {
@@ -20,8 +20,6 @@ import { version as sdkVersion } from "../../package.json";
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
 
-  window.customElements.define("totp-consent-app", TotpBasedConsent);
-
   const pages = [];
   let activeScreen;
   let config;
diff --git a/packages/embed/src/js/ekyc.js b/packages/embed/src/js/ekyc.js
index f75597b1..9de6e458 100644
--- a/packages/embed/src/js/ekyc.js
+++ b/packages/embed/src/js/ekyc.js
@@ -1,7 +1,7 @@
 import validate from "validate.js";
 import "@smileid/components/combobox";
 import "@smileid/components/end-user-consent";
-import TotpBasedConsent from "./components/TotpConsentApp";
+import "@smileid/components/totp-consent";
 import { version as sdkVersion } from "../../package.json";
 
 (function eKYC() {
@@ -18,7 +18,6 @@ import { version as sdkVersion } from "../../package.json";
 
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
-  window.customElements.define("totp-consent-app", TotpBasedConsent);
 
   const pages = [];
   let activeScreen;