@incodetech/web 2.1.1 → 2.2.0-rc.0

package/dist/document-capture/styles.css

@@ -1,14 +1,13 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
-    *, :before, :after, ::backdrop {
+    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
       --tw-border-style: solid;
-      --tw-font-weight: initial;
     }
   }
 }
 
-.IncodeDocumentCaptureFileInput {
+.IncodeComponent .IncodeDocumentCaptureFileInput {
   pointer-events: none;
   border-style: var(--tw-border-style);
   padding: var(--spacing-0, var(--spacing-none, 0px));
@@ -24,17 +23,17 @@
   margin: 0 !important;
 }
 
-.IncodeDocumentCaptureFileInput::file-selector-button {
+.IncodeComponent .IncodeDocumentCaptureFileInput::file-selector-button {
   display: none;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodePageContent {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodePageContent {
   flex-direction: column;
   flex: 1;
   display: flex;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent {
   margin-block: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex: 1;
@@ -43,29 +42,31 @@
   display: flex;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent .IncodeDocumentCaptureTutorialIllustration {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent .IncodeDocumentCaptureTutorialIllustration {
+  width: var(--document-capture-tutorial-illustration-width);
   flex: 1;
   justify-content: center;
   align-items: center;
-  width: 292px;
   margin-inline: auto;
   display: flex;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent .IncodeDocumentCaptureTutorialIllustration .IncodeDocumentCaptureTutorialImage {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureTutorialContent .IncodeDocumentCaptureTutorialIllustration .IncodeDocumentCaptureTutorialImage {
   width: 100%;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureError {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureError {
   padding-inline: var(--spacing-16, var(--spacing-16, 16px));
   text-align: center;
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--input-text-helper-negative, #e53e3e);
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureActions {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureActions {
   gap: var(--spacing-8, var(--spacing-8, 8px));
   padding-inline: var(--spacing-8, var(--spacing-8, 8px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
@@ -73,21 +74,12 @@
   display: flex;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureActions .IncodeDocumentCaptureSkipWrapper {
+.IncodeComponent .IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureActions .IncodeDocumentCaptureSkipWrapper {
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
   justify-content: center;
   display: flex;
 }
 
-.IncodeDocumentCapturePageTutorial .IncodeDocumentCaptureCentered {
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
-  flex-direction: column;
-  flex: 1;
-  display: flex;
-}
-
 .IncodeDocumentCaptureBottomSheetOptions {
   width: 100%;
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
@@ -122,7 +114,12 @@
   flex-shrink: 0;
 }
 
-.IncodeDocumentCaptureReviewPage .IncodePageContent {
+.IncodeDocumentCaptureCameraPage {
+  width: 100%;
+  height: 100%;
+}
+
+.IncodeComponent .IncodeDocumentCaptureReviewPage .IncodePageContent {
   padding: var(--spacing-0, var(--spacing-none, 0px));
   flex-direction: column;
   flex: 1;
@@ -131,27 +128,27 @@
 }
 
 @media (min-width: 48rem) {
-  .IncodeDocumentCaptureReviewPage .IncodePageInner {
+  .IncodeComponent .IncodeDocumentCaptureReviewPage .IncodePageInner {
     padding: var(--spacing-24, var(--spacing-24, 24px));
   }
 }
 
-.IncodeDocumentCaptureReviewLayout {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout {
   flex-direction: column;
   flex: 1;
   display: flex;
   overflow: hidden;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader {
+  height: var(--document-capture-review-header-height);
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 100px;
   display: flex;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewTitle {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewTitle {
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h2-size);
@@ -160,7 +157,7 @@
   letter-spacing: var(--typography-headline-h2-letter-spacing);
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewSubtitle {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewSubtitle {
   max-width: var(--incode-form-max-w);
   text-align: center;
   font-family: var(--typography-headline-family);
@@ -171,7 +168,7 @@
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   flex-direction: column;
   flex: 1;
@@ -181,11 +178,11 @@
   overflow: hidden;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview.IncodeDocumentCaptureReviewPreviewPdf {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview.IncodeDocumentCaptureReviewPreviewPdf {
   padding-inline: var(--spacing-48, var(--spacing-48, 48px));
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImageContainer {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImageContainer {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-neutral-50, oklch(98.5% 0 0));
@@ -193,7 +190,7 @@
   display: flex;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImage {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImage {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   object-fit: cover;
   border-style: var(--tw-border-style);
@@ -203,18 +200,18 @@
   max-height: 100%;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImage.IncodeDocumentCaptureSuccessBorder {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImage.IncodeDocumentCaptureSuccessBorder {
   border-color: var(--color-border-status-positive, var(--border-status-positive-static));
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeCaptureEncryptionLabel {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeCaptureEncryptionLabel {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, var(--spacing-4, 4px));
   display: flex;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter {
   width: 100%;
   max-width: var(--incode-form-max-w);
   justify-content: center;
@@ -223,22 +220,23 @@
   display: flex;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter.IncodeDocumentCaptureReviewFooterEmpty {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter.IncodeDocumentCaptureReviewFooterEmpty {
   visibility: hidden;
-  height: 56px;
+  height: var(--document-capture-review-empty-footer-height);
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter .IncodeDocumentCaptureActionRow {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter .IncodeDocumentCaptureActionRow {
   gap: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
+  padding: var(--spacing-4, var(--spacing-4, 4px));
   display: flex;
 }
 
-.IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter .IncodeDocumentCaptureActionRow .IncodeButton {
+.IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewFooter .IncodeDocumentCaptureActionRow .IncodeButton {
   flex: 1;
 }
 
-.IncodeDocumentCaptureReviewCentered {
+.IncodeComponent .IncodeDocumentCaptureReviewCentered {
   flex-direction: column;
   flex: 1;
   justify-content: center;
@@ -246,7 +244,7 @@
   display: flex;
 }
 
-.IncodeDocumentCapturePdfCard {
+.IncodeComponent .IncodeDocumentCapturePdfCard {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
@@ -263,23 +261,23 @@
   overflow: hidden;
 }
 
-.IncodeDocumentCapturePdfCard .ImageDocumentCapturePdfPreviewContainer {
+.IncodeComponent .IncodeDocumentCapturePdfCard .IncodeImageDocumentCapturePdfPreviewContainer {
+  height: var(--document-capture-pdf-preview-height);
   width: var(--spacing-120, var(--spacing-120, 120px));
   border-radius: var(--radius-lg, .5rem);
   border-style: var(--tw-border-style);
   border-width: 2px;
   border-color: var(--color-border-neutral-100, var(--border-neutral-100));
   background-color: var(--color-neutral-50, oklch(98.5% 0 0));
-  height: var(--document-capture-pdf-preview-height);
   overflow: hidden;
 }
 
-.IncodeDocumentCapturePdfCard .ImageDocumentCapturePdfPreviewContainer .ImageDocumentCapturePdfPreview {
+.IncodeComponent .IncodeDocumentCapturePdfCard .IncodeImageDocumentCapturePdfPreviewContainer .IncodeImageDocumentCapturePdfPreview {
   width: 100%;
   height: 100%;
 }
 
-.IncodeDocumentCapturePdfCard .IncodeDocumentCapturePdfFileName {
+.IncodeComponent .IncodeDocumentCapturePdfCard .IncodeDocumentCapturePdfFileName {
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
@@ -290,7 +288,20 @@
   overflow-wrap: break-word;
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesTitle {
+.IncodeDocumentCommonIssuesFullScreen .IncodeModalDialog {
+  max-width: none;
+  height: 100%;
+  max-height: none;
+}
+
+.IncodeDocumentCommonIssuesFullScreen .IncodeModalContent {
+  border-radius: var(--radius-none, var(--border-radius-none));
+  max-width: none;
+  height: 100%;
+  margin: auto;
+}
+
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesTitle {
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h2-size);
   font-weight: var(--typography-headline-h2-weight);
@@ -298,35 +309,33 @@
   letter-spacing: var(--typography-headline-h2-letter-spacing);
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesCards {
-  gap: var(--spacing-32, var(--spacing-32, 32px));
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesCards {
   width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-32, var(--spacing-32, 32px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   display: flex;
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard {
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesCard {
   align-items: flex-start;
   gap: var(--spacing-16, var(--spacing-16, 16px));
-  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
-  padding: var(--spacing-16, var(--spacing-16, 16px));
-  border-radius: 12px;
   display: flex;
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardIcon {
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesCardIcon {
   color: var(--color-text-body-primary, var(--text-body-800-primary));
   flex-shrink: 0;
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText {
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesCardText {
   gap: var(--spacing-4, var(--spacing-4, 4px));
   flex-direction: column;
   display: flex;
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText .IncodeDocumentCommonIssuesCardTitle {
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesCardTitle {
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
   font-weight: var(--typography-headline-h5-weight);
@@ -334,7 +343,7 @@
   letter-spacing: var(--typography-headline-h5-letter-spacing);
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText .IncodeDocumentCommonIssuesCardBody {
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesCardBody {
   font-family: var(--typography-body-family);
   font-size: var(--typography-body-m-regular-size);
   font-weight: var(--typography-body-m-regular-weight);
@@ -343,12 +352,23 @@
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
-.IncodeOverlay .IncodeDocumentCommonIssuesButtons {
-  gap: var(--spacing-12, var(--spacing-12, 12px));
-  width: 100%;
-  padding-top: var(--spacing-24, var(--spacing-24, 24px));
-  flex-direction: column;
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesButtons {
   margin-top: auto;
+}
+
+.IncodeDocumentCommonIssuesFullScreen .IncodeDocumentCommonIssuesContent .IncodeDocumentCommonIssuesTryAgain {
+  width: 100%;
+}
+
+.IncodeDocumentCaptureLoadingPage .IncodePageContent {
+  flex: 1;
+  display: flex;
+}
+
+.IncodeDocumentCaptureLoadingPage .IncodeDocumentCaptureCentered {
+  flex: 1;
+  justify-content: center;
+  align-items: center;
   display: flex;
 }
 
@@ -357,8 +377,3 @@
   inherits: false;
   initial-value: solid;
 }
-
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
-}