@seams/wallet 0.24.0 → 0.27.0

package/dist/esm/react/components/QRCodeScanner.css

@@ -1,12 +1,14 @@
 /* QRCodeScanner Component Styles */
 
-.qr-scanner-modal {
+[data-seams-root].seams-theme-provider .qr-scanner-modal {
   position: fixed;
   inset: 0;
   /* Stay below the wallet iframe overlay so Tx confirmer always sits on top */
   z-index: var(
     --seams-z-underlay-backdrop,
-    calc(var(--seams-wallet-overlay-z, 2147483646) - var(--seams-wallet-underlay-backdrop-offset, 2))
+    calc(
+      var(--seams-wallet-overlay-z, 2147483646) - var(--seams-wallet-underlay-backdrop-offset, 2)
+    )
   );
   display: flex;
   justify-content: center;
@@ -27,7 +29,7 @@
 }
 
 /* Themed panel similar to ShowQRCode modal content */
-.qr-scanner-panel {
+[data-seams-root].seams-theme-provider .qr-scanner-panel {
   display: flex;
   flex-direction: column;
   overflow: visible;
@@ -36,7 +38,7 @@
   border-radius: 2rem;
 }
 
-.qr-scanner-progress-panel {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-panel {
   width: min(100%, 360px);
   min-height: 0;
   box-sizing: border-box;
@@ -52,7 +54,7 @@
   );
 }
 
-.qr-scanner-progress {
+[data-seams-root].seams-theme-provider .qr-scanner-progress {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -60,7 +62,7 @@
   text-align: center;
 }
 
-.qr-scanner-progress h2 {
+[data-seams-root].seams-theme-provider .qr-scanner-progress h2 {
   margin: 0;
   font-size: 1.3125rem;
   font-weight: 600;
@@ -68,13 +70,13 @@
   letter-spacing: -0.02em;
 }
 
-.qr-scanner-progress-message {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-message {
   margin: 12px 0 0;
   color: var(--seams-colors-textSecondary);
   line-height: 1.5;
 }
 
-.qr-scanner-progress-dots {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -84,7 +86,7 @@
   color: var(--seams-colors-textPrimary);
 }
 
-.qr-scanner-progress-dots span {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots span {
   width: 7px;
   height: 7px;
   background: currentcolor;
@@ -93,22 +95,22 @@
   animation: qr-scanner-progress-dot 1.2s ease-in-out infinite;
 }
 
-.qr-scanner-progress-dots span:nth-child(2) {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots span:nth-child(2) {
   animation-delay: 160ms;
 }
 
-.qr-scanner-progress-dots span:nth-child(3) {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-dots span:nth-child(3) {
   animation-delay: 320ms;
 }
 
-.qr-scanner-progress-actions {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-actions {
   display: grid;
   width: 100%;
   gap: 10px;
   margin-top: 28px;
 }
 
-.qr-scanner-progress-actions button {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-actions button {
   width: 100%;
   min-height: 44px;
   padding: 9px 16px;
@@ -123,39 +125,39 @@
     color 160ms ease;
 }
 
-.qr-scanner-progress-cancel {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-cancel {
   color: var(--seams-colors-textPrimary);
   background: transparent;
   border-color: var(--seams-colors-borderPrimary);
 }
 
-.qr-scanner-progress-primary {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-primary {
   color: var(--seams-colors-textButton);
   background: var(--seams-colors-buttonBackground, var(--seams-colors-primary));
   border-color: transparent;
 }
 
-.qr-scanner-progress-cancel:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-cancel:hover {
   background: var(--seams-colors-surface2);
   border-color: var(--seams-colors-borderHover);
 }
 
-.qr-scanner-progress-primary:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-progress-primary:hover {
   background: var(--seams-colors-buttonHoverBackground, var(--seams-colors-primaryHover));
 }
 
-.qr-scanner-progress-actions button:focus-visible {
+[data-seams-root].seams-theme-provider .qr-scanner-progress-actions button:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
-.qr-scanner-panel:focus-visible,
-.qr-scanner-progress h2:focus-visible {
+[data-seams-root].seams-theme-provider .qr-scanner-panel:focus-visible,
+[data-seams-root].seams-theme-provider .qr-scanner-progress h2:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 4px;
 }
 
-.qr-scanner-email-selection {
+[data-seams-root].seams-theme-provider .qr-scanner-email-selection {
   width: min(100%, 420px);
   box-sizing: border-box;
   padding: 28px;
@@ -165,19 +167,19 @@
   box-shadow: 0 16px 48px oklch(0 0 0 / 0.24);
 }
 
-.qr-scanner-email-selection h2 {
+[data-seams-root].seams-theme-provider .qr-scanner-email-selection h2 {
   margin: 0;
   font-size: 20px;
   line-height: 1.3;
 }
 
-.qr-scanner-email-selection > p {
+[data-seams-root].seams-theme-provider .qr-scanner-email-selection > p {
   margin: 10px 0 0;
   color: var(--seams-colors-textSecondary);
   line-height: 1.5;
 }
 
-.qr-scanner-email-choice-list {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice-list {
   display: grid;
   gap: 10px;
   margin: 22px 0 0;
@@ -185,13 +187,13 @@
   border: 0;
 }
 
-.qr-scanner-email-choice-legend {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice-legend {
   margin-bottom: 8px;
   color: var(--seams-colors-textSecondary);
   font-size: 13px;
 }
 
-.qr-scanner-email-choice {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -204,23 +206,23 @@
   cursor: pointer;
 }
 
-.qr-scanner-email-choice:has(input:checked) {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice:has(input:checked) {
   border-color: var(--seams-colors-primary);
 }
 
-.qr-scanner-email-choice input {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice input {
   width: 18px;
   height: 18px;
   margin: 0;
   accent-color: var(--seams-colors-primary);
 }
 
-.qr-scanner-email-choice:focus-within {
+[data-seams-root].seams-theme-provider .qr-scanner-email-choice:focus-within {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 2px;
 }
 
-.qr-scanner-email-continue {
+[data-seams-root].seams-theme-provider button.qr-scanner-email-continue {
   width: 100%;
   min-height: 44px;
   margin-top: 22px;
@@ -234,17 +236,17 @@
   font-weight: 600;
 }
 
-.qr-scanner-email-continue:disabled {
+[data-seams-root].seams-theme-provider button.qr-scanner-email-continue:disabled {
   cursor: not-allowed;
   opacity: 0.55;
 }
 
-.qr-scanner-email-continue:focus-visible {
+[data-seams-root].seams-theme-provider button.qr-scanner-email-continue:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
-.qr-scanner-visually-hidden {
+[data-seams-root].seams-theme-provider .qr-scanner-visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -257,12 +259,12 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .qr-scanner-modal {
+  [data-seams-root].seams-theme-provider .qr-scanner-modal {
     animation: none;
     transition: none;
   }
 
-  .qr-scanner-progress-dots span {
+  [data-seams-root].seams-theme-provider .qr-scanner-progress-dots span {
     animation: none;
     opacity: 0.5;
   }
@@ -302,7 +304,7 @@
   }
 }
 
-.qr-scanner-camera-container {
+[data-seams-root].seams-theme-provider .qr-scanner-camera-container {
   background: var(--seams-colors-surface);
   position: relative;
   display: inline-block;
@@ -310,7 +312,7 @@
   border-radius: 12px;
 }
 
-.qr-scanner-video {
+[data-seams-root].seams-theme-provider .qr-scanner-video {
   width: 400px;
   height: 400px;
   object-fit: cover; /* Crop to square format */
@@ -322,24 +324,24 @@
   opacity: 0;
 }
 
-.qr-scanner-video.is-ready {
+[data-seams-root].seams-theme-provider .qr-scanner-video.is-ready {
   animation: qr-scanner-video-fade-in 200ms ease-out both;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .qr-scanner-video {
+  [data-seams-root].seams-theme-provider .qr-scanner-video {
     opacity: 1;
   }
-  .qr-scanner-video.is-ready {
+  [data-seams-root].seams-theme-provider .qr-scanner-video.is-ready {
     animation: none;
   }
 }
 
-.qr-scanner-canvas {
+[data-seams-root].seams-theme-provider .qr-scanner-canvas {
   display: none;
 }
 
-.qr-scanner-overlay {
+[data-seams-root].seams-theme-provider .qr-scanner-overlay {
   position: absolute;
   inset: -1px;
   display: flex;
@@ -348,7 +350,7 @@
   pointer-events: none;
 }
 
-.qr-scanner-box {
+[data-seams-root].seams-theme-provider .qr-scanner-box {
   width: 402px;
   height: 402px;
   border: 3px solid var(--seams-colors-primary);
@@ -356,7 +358,7 @@
   background: transparent;
 }
 
-.qr-scanner-instructions {
+[data-seams-root].seams-theme-provider .qr-scanner-instructions {
   margin-top: 24px;
   color: var(--seams-colors-textPrimary);
   text-align: center;
@@ -365,7 +367,7 @@
   max-width: 400px;
 }
 
-.qr-scanner-sub-instruction {
+[data-seams-root].seams-theme-provider .qr-scanner-sub-instruction {
   font-size: 13px;
   font-weight: 400;
   opacity: 0.7;
@@ -373,18 +375,18 @@
   line-height: 1.4;
 }
 
-.qr-scanner-sub-instruction--small {
+[data-seams-root].seams-theme-provider .qr-scanner-sub-instruction--small {
   font-size: 12px;
   opacity: 0.7;
 }
 
-.qr-scanner-camera-controls {
+[data-seams-root].seams-theme-provider .qr-scanner-camera-controls {
   margin-top: 16px;
   display: flex;
   justify-content: center;
 }
 
-.qr-scanner-camera-selector {
+[data-seams-root].seams-theme-provider select.qr-scanner-camera-selector {
   background: var(--seams-colors-surface);
   color: var(--seams-colors-textPrimary);
   border: 1px solid var(--seams-colors-borderPrimary);
@@ -394,7 +396,7 @@
   max-width: 220px;
 }
 
-.qr-scanner-close {
+[data-seams-root].seams-theme-provider button.qr-scanner-close {
   position: absolute;
   top: 20px;
   right: 20px;
@@ -412,24 +414,27 @@
   align-items: center;
   justify-content: center;
   z-index: 10;
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
   padding: 0;
   line-height: 1;
   box-sizing: border-box;
 }
 
-.qr-scanner-close:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-close:hover {
   background: var(--seams-colors-surface2);
   border-color: var(--seams-colors-borderHover);
   color: var(--seams-colors-textPrimary);
 }
 
-.qr-scanner-close:focus-visible {
+[data-seams-root].seams-theme-provider button.qr-scanner-close:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
-.qr-scanner-error-message {
+[data-seams-root].seams-theme-provider .qr-scanner-error-message {
   background-color: var(--seams-colors-error);
   color: var(--seams-colors-textButton);
   padding: 20px;
@@ -441,17 +446,17 @@
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
 }
 
-.qr-scanner-error-message h2 {
+[data-seams-root].seams-theme-provider .qr-scanner-error-message h2 {
   margin: 0;
   font-size: 18px;
   line-height: 1.3;
 }
 
-.qr-scanner-error-message p {
+[data-seams-root].seams-theme-provider .qr-scanner-error-message p {
   line-height: 1.45;
 }
 
-.qr-scanner-error-button {
+[data-seams-root].seams-theme-provider button.qr-scanner-error-button {
   margin-top: 12px;
   margin-left: 6px;
   margin-right: 6px;
@@ -466,22 +471,22 @@
   transition: all 0.2s ease;
 }
 
-.qr-scanner-error-button:hover {
+[data-seams-root].seams-theme-provider button.qr-scanner-error-button:hover {
   background-color: var(--seams-colors-surface2);
   border-color: var(--seams-colors-borderHover);
 }
 
-.qr-scanner-error-button:focus-visible {
+[data-seams-root].seams-theme-provider button.qr-scanner-error-button:focus-visible {
   outline: 2px solid var(--seams-colors-primary);
   outline-offset: 3px;
 }
 
 @media (max-width: 480px) {
-  .qr-scanner-progress-panel {
+  [data-seams-root].seams-theme-provider .qr-scanner-progress-panel {
     padding: 1rem;
   }
 
-  .qr-scanner-progress h2 {
+  [data-seams-root].seams-theme-provider .qr-scanner-progress h2 {
     font-size: 1.375rem;
   }
 }