@smileid/web-components 1.0.1-beta → 1.4.2

package/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js

@@ -157,10 +157,10 @@ function templateString() {
   return `
     <div id="document-capture-instructions-screen" class="flow center">
         <section className="main">
-        <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
+        <smileid-navigation theme-color='${this.themeColor}' ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
         <header>
         ${this.isFrontOfId ? frontDocumentIcon() : backDocumentIcon()}
-            <h1 class='text-2xl color-digital-blue font-bold'>${this.title}</h1>
+            <h1 class='text-2xl title-color font-bold'>${this.title}</h1>
         <p class="description text-sm font-normal">
             We'll use it to verify your identity.
           </p>
@@ -182,55 +182,55 @@ function templateString() {
                     fill-rule="evenodd"
                     clip-rule="evenodd"
                     d="M31.8569 19C31.8569 21.5428 31.1029 24.0285 29.6902 26.1428C28.2774 28.2571 26.2695 29.9049 23.9203 30.878C21.571 31.8511 18.986 32.1057 16.492 31.6096C13.9981 31.1136 11.7072 29.8891 9.90919 28.091C8.11115 26.293 6.88668 24.0022 6.3906 21.5082C5.89452 19.0143 6.14913 16.4292 7.12222 14.08C8.09531 11.7307 9.74318 9.72279 11.8574 8.31008C13.9717 6.89737 16.4574 6.14334 19.0002 6.14334C22.41 6.14334 25.6802 7.49788 28.0913 9.90897C30.5024 12.3201 31.8569 15.5902 31.8569 19Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M19.6064 4.5419H18.394L18.9912 0L19.6064 4.5419Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M26.7541 6.77667L25.7046 6.17048L28.4913 2.54239L26.7541 6.77667Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M31.8298 12.2957L31.2236 11.2462L35.4489 9.49097L31.8298 12.2957Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M33.4674 19.6062V18.3938L38.0003 18.9909L33.4674 19.6062Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M31.2236 26.7538L31.8298 25.7043L35.4579 28.491L31.2236 26.7538Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M25.7046 31.8295L26.7541 31.2233L28.5094 35.4486L25.7046 31.8295Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M18.394 33.4671H19.6064L19.0093 38L18.394 33.4671Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M11.2464 31.2233L12.2959 31.8295L9.50928 35.4576L11.2464 31.2233Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M6.17068 25.7043L6.77687 26.7538L2.55164 28.509L6.17068 25.7043Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M4.54215 18.3938V19.6062L0.000244141 19.009L4.54215 18.3938Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M6.77689 11.2462L6.1707 12.2957L2.5426 9.50903L6.77689 11.2462Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                     <path
                     d="M12.296 6.17047L11.2464 6.77666L9.49121 2.55142L12.296 6.17047Z"
-                    fill="#001096"
+                    fill="${this.themeColor}"
                     />
                 </g>
                 <defs>
@@ -262,63 +262,63 @@ function templateString() {
             <g clip-path="url(#clip0_604_672)">
                 <path
                 d="M36.7211 12.6391H1.22537C1.06275 13.0909 0.910962 13.5427 0.77002 14.0055H37.1764C37.0463 13.5427 36.8946 13.0909 36.7211 12.6391Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M37.3716 14.7438H0.574875C0.466458 15.1625 0.379725 15.5813 0.303833 16.011H37.6426C37.5667 15.5813 37.48 15.1625 37.3716 14.7438Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M37.7727 16.8485H0.173703C0.119494 17.2342 0.0869685 17.6198 0.0544434 18.0055H37.892C37.8594 17.6198 37.8269 17.2342 37.7727 16.8485Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M37.9462 19.4711C37.9462 19.2948 37.9462 19.1295 37.9353 18.9532H0.0110865C0.000244802 19.1295 0.000244141 19.2948 0.000244141 19.4711C0.000244141 19.6474 0.000244802 19.8347 0.0110865 20.011H37.9353C37.9462 19.8347 37.9462 19.6474 37.9462 19.4711Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M37.8811 21.0579H0.0653076C0.086991 21.3774 0.119515 21.697 0.162882 22.0055H37.7836C37.8269 21.697 37.8595 21.3774 37.8811 21.0579Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M37.5992 23.1625H0.347168C0.401376 23.449 0.466426 23.7245 0.531477 24H37.4149C37.48 23.7245 37.545 23.449 37.5992 23.1625Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M37.0788 25.2672H0.867554C0.954287 25.5096 1.03018 25.7631 1.11691 26.0055H36.8295C36.9162 25.7631 37.0029 25.5096 37.0788 25.2672Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M36.2874 27.3719H1.65906L1.95178 28H35.9947L36.2874 27.3719Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M35.2032 29.4766H2.75403C2.84799 29.6529 2.95641 29.8292 3.07928 30.0055H34.878L35.2032 29.4766Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M33.7396 31.5813H4.20679L4.54288 32H33.4035L33.7396 31.5813Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M31.7989 33.6859H6.14746L6.49439 33.9945H31.452L31.7989 33.6859Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M29.0993 35.7906H8.84705L9.18314 36H28.7632L29.0993 35.7906Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M34.2384 8.01102C33.8914 7.53719 33.5228 7.07438 33.1325 6.63361C29.8258 2.60055 24.6977 0 18.9407 0C12.891 0 7.53525 2.86501 4.25021 7.26171H4.28274C4.08759 7.51515 3.89244 7.75757 3.70813 8.01102H34.2384Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M34.531 8.44077H3.41533C3.06839 8.94765 2.74314 9.47658 2.43958 10.0165H35.5068C35.2124 9.47215 34.8866 8.94597 34.531 8.44077Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
                 <path
                 d="M35.7887 10.5344H2.15776C1.9084 11.0193 1.68072 11.5151 1.47473 12.011H36.4717C36.2657 11.5151 36.0381 11.0193 35.7887 10.5344Z"
-                fill="#001096"
+                fill="${this.themeColor}"
                 />
             </g>
             <defs>
@@ -370,7 +370,7 @@ function templateString() {
 ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
     </section>
   </div>
-  ${styles}
+  ${styles(this.themeColor)}
   `;
 }
 
@@ -423,7 +423,7 @@ class DocumentInstruction extends HTMLElement {
 
             this.dispatchEvent(
               new CustomEvent('document-capture-instructions.upload', {
-                detail: { image: fileData },
+                detail: { image: fileData, previewImage: fileData },
               }),
             );
           } catch (error) {
@@ -443,7 +443,7 @@ class DocumentInstruction extends HTMLElement {
   }
 
   get themeColor() {
-    return this.getAttribute('theme-color') || '#043C93';
+    return this.getAttribute('theme-color') || '#001096';
   }
 
   get hideAttribution() {

package/components/document/src/document-capture-instructions/DocumentCaptureInstructions.stories.js

@@ -1,16 +1,23 @@
 import './index';
 
 const meta = {
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'document-capture-instructions',
 };
 
 export default meta;
 
 export const DocumentInstruction = {
-  render: () => `
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
         <document-capture-instructions
             show-navigation
             document-capture-modes="camera,upload"
+            theme-color='${args['theme-color']}'
         >
         </document-capture-instructions>
     `,

package/components/document/src/document-capture-review/DocumentCaptureReview.js

@@ -3,7 +3,6 @@ import '../../../navigation/src';
 
 function templateString() {
   return `
-  ${styles}
   <style>
     .retake-photo.button[data-variant~="ghost"] {
       color: #FF5805;
@@ -21,18 +20,6 @@ function templateString() {
         height: 100vh;
         justify-content: center;
       }
-
-      .video-overlay {
-        position: absolute;
-        border-width: 1rem;
-        border-color: white;
-        border-style: solid;
-        inset: 0px;
-      }
-
-      img {
-        clip-path: polygon(10% 10%, 90% 10%, 90% 85%, 10% 85%);
-      }
     }
     
     .id-image-container {
@@ -43,25 +30,15 @@ function templateString() {
     }
 
     .id-image {
-      max-width: fit-content;
-      height: auto;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
+        width: 100%;
+        text-align: center;
+        position: relative;
+        background: white;
     }
     img {
       height: 100%;
       min-height: 100px;
-      clip-path: polygon(5% 5%, 95% 5%, 95% 90%, 5% 90%);
-    }
-
-    .video-overlay .inner-border {
-      position: absolute;
-      border-width: 1rem;
-      border-color: #9394ab;
-      border-style: solid;
-      border-radius: 1rem;
-      inset: -8px;
+      width: 98%;
     }
 
     .action-buttons {
@@ -179,6 +156,12 @@ function templateString() {
     .padding-bottom-2 {
       padding-bottom: 2rem;
     }
+    img {
+        border-width: 0.25rem;
+        border-color: #9394ab;
+        border-style: solid;
+        border-radius: 0.25rem;
+      }
 
     .instructions-wrapper {
       display: inline-flex;
@@ -236,9 +219,10 @@ function templateString() {
       line-height: 1.5rem;
     }
   </style>
+  ${styles(this.themeColor)}
   <div id='document-capture-review-screen' class='flow center'>
   <smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} hide-back></smileid-navigation>
-    <h1 class="header-title">
+    <h1 class="header-title title-color">
       Is the document clear and readable?
     </h1>
     <p class="description">Make sure all corners of the document 
@@ -247,7 +231,7 @@ function templateString() {
       <div class='id-image-container'>
         <div class='id-image'>
           <div class='video-overlay'></div>
-          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' width='396' />` : ''}
+          ${this.imageSrc ? `<img alt='your ID card' id='document-capture-review-image' src='${this.imageSrc}' />` : ''}
           </div>
         <div class='flow action-buttons'>
           <button data-variant='solid full-width' class='button' type='button' id='select-id-image'>
@@ -301,7 +285,7 @@ class IdReview extends HTMLElement {
   }
 
   get themeColor() {
-    return this.getAttribute('theme-color') || '#043C93';
+    return this.getAttribute('theme-color') || '#001096';
   }
 
   get hideAttribution() {

package/components/document/src/document-capture-review/DocumentCaptureReview.stories.js

@@ -1,14 +1,24 @@
 import './index';
 
 const meta = {
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'document-capture-review',
 };
 
 export default meta;
 
 export const IdReview = {
-  render: () => `
-        <document-capture-review show-navigation data-image="https://placehold.co/600x400">
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
+        <document-capture-review
+          show-navigation
+          data-image="https://placehold.co/600x400"
+          theme-color='${args['theme-color']}'
+        >
         </document-capture-review>
     `,
 };

package/components/end-user-consent/src/EndUserConsent.js

@@ -1,5 +1,6 @@
 import styles from '../../../styles/src/styles';
 import '../../totp-consent/src/TotpConsent';
+import '../../attribution/PoweredBySmileId';
 
 function templateString() {
   return `
@@ -124,7 +125,7 @@ function templateString() {
       button:hover,
       button:focus,
       button:active {
-        --button-color: var(--color-active);
+        --button-color: var(--theme-color);
       }
 
       button:disabled {
@@ -163,8 +164,8 @@ function templateString() {
       
       .back-button-text {
         font-size: 11px;
-        line-height: 11px;
-        color: rgb(21, 31, 114);
+        line-height: 1;
+        color: ${this.themeColor} !important;
       }
 
       img {
@@ -230,7 +231,7 @@ function templateString() {
         gap: 0.5rem;
       }
       .processing-list__item__title {
-        color: #151F72;
+        color: var(--color-theme);
       }
 
       .processing-list__items-item__description {
@@ -314,7 +315,7 @@ function templateString() {
         color: var(--color-danger);
       }
     </style>
-    ${styles}
+    ${styles(this.themeColor)}
     <div id='consent-screen'>
       <section class='flow center'>
         <div class="nav ${this.hideBack ? 'justify-right' : ''}">
@@ -322,7 +323,7 @@ function templateString() {
             <button type='button' data-type='icon' id="back-button" class="back-button">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
                 <path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
-                <path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
+                <path fill="${this.themeColor}" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
               </svg>
             </button>
             <div class="back-button-text">Back</div>
@@ -444,6 +445,8 @@ function templateString() {
       partner-id='${this.partnerId}'
       partner-name='${this.partnerName}'
       token='${this.token}'
+      theme-color='${this.themeColor}'
+      ${this.hideAttribution ? 'hide-attribution' : ''}
     >
     </totp-consent>
 
@@ -577,31 +580,7 @@ function templateString() {
         No, Cancel Verification
       </button>
 
-      <p class='center credits'>
-        <span class='visually-hidden'>Powered by SmileID</span>
-        <svg aria-hidden='true' viewBox="0 0 90 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <symbol id='attribution'>
-            <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>
-          </symbol>
-          <use href='#attribution' />
-        </svg>
-      </p>
+      ${this.hideAttribution ? '' : '<powered-by-smile-id></powered-by-smile-id>'}
     </div>
   `;
 }
@@ -710,6 +689,10 @@ class EndUserConsent extends HTMLElement {
     return this.getAttribute('id-hint') || 'Your BVN should be 11 digits long';
   }
 
+  get hideAttribution() {
+    return this.hasAttribute('hide-attribution');
+  }
+
   get idRegex() {
     return this.getAttribute('id-regex');
   }

package/components/end-user-consent/src/EndUserConsent.stories.js

@@ -1,13 +1,19 @@
 import './EndUserConsent';
 
 const meta = {
+  args: {
+    'theme-color': '#001096',
+  },
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'end-user-consent',
 };
 
 export default meta;
 
 export const EndUserConsent = {
-  render: () => `
+  render: (args) => `
         <end-user-consent
             country="NG"
             id-type="NATIONAL_ID"
@@ -15,7 +21,7 @@ export const EndUserConsent = {
             partner-id="007"
             partner-name="SmileID Stories"
             policy-url="https://usesmileid.com/privacy-policy"
-            theme-color="#001096"
+            theme-color="${args['theme-color']}"
             partner-logo="https://portal.usesmileid.com/favicon.ico"
         >
         </end-user-consent>

package/components/navigation/src/Navigation.js

@@ -51,7 +51,7 @@ button[data-type="icon"] {
 
 :host::part(back-button-text) {
   line-height: 1;
-  color: rgb(21, 31, 114) !important;
+  color: ${this.hasThemeColor ? this.themeColor : 'rgb(21, 31, 114)'} !important;
 }
 
 :host::part(close-button) {
@@ -87,7 +87,7 @@ button[data-type="icon"] {
           opacity=".4"
         />
         <path
-          fill="#001096"
+          fill="${this.themeColor}"
           d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
         />
       </svg>
@@ -151,6 +151,14 @@ button[data-type="icon"] {
   get showBackButton() {
     return !this.hasAttribute('hide-back');
   }
+
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
+  get hasThemeColor() {
+    return this.getAttribute('theme-color')?.trim();
+  }
 }
 
 if ('customElements' in window) {

package/components/selfie/src/SelfieCaptureScreens.js

@@ -5,9 +5,12 @@ import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
 import { version as COMPONENTS_VERSION } from '../../../package.json';
 
-async function getPermissions(captureScreen) {
+async function getPermissions(captureScreen, facingMode = 'user') {
   try {
-    await SmartCamera.getMedia({ audio: false, video: true });
+    await SmartCamera.getMedia({
+      audio: false,
+      video: { facingMode },
+    });
     captureScreen.removeAttribute('data-camera-error');
     captureScreen.setAttribute('data-camera-ready', true);
   } catch (error) {
@@ -27,11 +30,11 @@ class SelfieCaptureScreens extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-            ${styles}
+            ${styles(this.themeColor)}
             <div>
-              <selfie-capture-instructions ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
-              <selfie-capture ${this.showNavigation} ${this.hideAttribution} ${this.disableImageTests} hidden></selfie-capture>
-              <selfie-capture-review ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
+              <selfie-capture-instructions theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
+              <selfie-capture theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} hidden></selfie-capture>
+              <selfie-capture-review theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
             </div>
         `;
 
@@ -47,11 +50,12 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieReview = this.querySelector('selfie-capture-review');
 
     if (this.hideInstructions && !this.hasAttribute('hidden')) {
-      getPermissions(this.selfieCapture);
+      getPermissions(this.selfieCapture, this.getAgentMode());
     }
 
+    // If the initial screen is selfie-capture, we need to get permissions
     if (this.getAttribute('initial-screen') === 'selfie-capture') {
-      getPermissions(this.selfieCapture);
+      getPermissions(this.selfieCapture, this.getAgentMode());
       this.setActiveScreen(this.selfieCapture);
     } else if (this.hideInstructions) {
       this.setActiveScreen(this.selfieCapture);
@@ -62,6 +66,10 @@ class SelfieCaptureScreens extends HTMLElement {
     this.setUpEventListeners();
   }
 
+  getAgentMode() {
+    return this.inAgentMode ? 'environment' : 'user';
+  }
+
   disconnectedCallback() {
     SmartCamera.stopMedia();
     if (this.activeScreen) {
@@ -75,7 +83,7 @@ class SelfieCaptureScreens extends HTMLElement {
     this.selfieInstruction.addEventListener(
       'selfie-capture-instructions.capture',
       async () => {
-        await getPermissions(this.selfieCapture);
+        await getPermissions(this.selfieCapture, this.getAgentMode());
         this.setActiveScreen(this.selfieCapture);
       },
     );
@@ -119,7 +127,7 @@ class SelfieCaptureScreens extends HTMLElement {
         this._data.images = [];
         if (this.hideInstructions) {
           this.setActiveScreen(this.selfieCapture);
-          await getPermissions(this.selfieCapture);
+          await getPermissions(this.selfieCapture, this.getAgentMode());
         } else {
           this.setActiveScreen(this.selfieInstruction);
         }
@@ -167,6 +175,20 @@ class SelfieCaptureScreens extends HTMLElement {
     return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
   }
 
+  get inAgentMode() {
+    return this.getAttribute('allow-agent-mode') === 'true';
+  }
+
+  get allowAgentMode() {
+    return this.inAgentMode ? "allow-agent-mode='true'" : '';
+  }
+
+  get allowAgentModeTests() {
+    return this.hasAttribute('show-agent-mode-for-tests')
+      ? 'show-agent-mode-for-tests'
+      : '';
+  }
+
   get hideBack() {
     return this.hasAttribute('hide-back-to-host') ? 'hide-back' : '';
   }
@@ -177,6 +199,10 @@ class SelfieCaptureScreens extends HTMLElement {
       : '';
   }
 
+  get themeColor() {
+    return this.getAttribute('theme-color') || '#001096';
+  }
+
   setActiveScreen(screen) {
     this.activeScreen?.setAttribute('hidden', '');
     screen.removeAttribute('hidden');

package/components/selfie/src/SelfieCaptureScreens.stories.js

@@ -1,21 +1,30 @@
 import './SelfieCaptureScreens';
 
 const meta = {
+  argTypes: {
+    'theme-color': { control: 'color' },
+  },
   component: 'selfie-capture-screens',
 };
 
 export default meta;
 
 export const SelfieCaptureFlow = {
-  render: () => `
-        <selfie-capture-screens>
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
+        <selfie-capture-screens theme-color='${args['theme-color']}'>
         </selfie-capture-screens>
     `,
 };
 
 export const SelfieCaptureFlowHiddenInstructions = {
-  render: () => `
-        <selfie-capture-screens hide-instructions >
+  args: {
+    'theme-color': '#001096',
+  },
+  render: (args) => `
+        <selfie-capture-screens hide-instructions theme-color='${args['theme-color']}'>
         </selfie-capture-screens>
     `,
 };