@incodetech/web 2.1.0-rc.2 → 2.1.0-rc.4

package/dist/ae-signature/ae-signature.es.js

@@ -1,6 +1,6 @@
 import { v as u } from "../vendor-preact-DThS2ZQ_.js";
-import { n as ElectronicSignature } from "../electronic-signature-h1sAGg7l.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-M8DszCee.js";
+import { n as ElectronicSignature } from "../electronic-signature-Ueoffasr.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 //#region src/modules/ae-signature/ae-signature.tsx
 var AeSignature = ({ config, onFinish, onError }) => {
 	return /* @__PURE__ */ u(ElectronicSignature, {

package/dist/ae-signature/styles.css

@@ -10,6 +10,18 @@
   }
 }
 
+.IncodeElectronicSignature .IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeElectronicSignature .IncodePageContent {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   padding-top: var(--spacing-32, var(--spacing-32, 32px));
@@ -21,14 +33,14 @@
 }
 
 .IncodeElectronicSignature .IncodePageTitleContainer {
-  max-width: 600px;
+  max-width: var(--electronic-signature-title-max-w);
 }
 
 .IncodeElectronicSignature .IncodePageFooter {
   padding-top: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-.IncodeElectronicSignatureUploadBody {
+.IncodeElectronicSignature .IncodeElectronicSignatureUploadBody {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   flex-direction: column;
   flex: 1;
@@ -38,25 +50,25 @@
   container-type: size;
 }
 
-.IncodeElectronicSignatureIllustration {
+.IncodeElectronicSignature .IncodeElectronicSignatureIllustration {
   aspect-ratio: 1;
+  width: var(--electronic-signature-illustration-max-w);
   border-radius: var(--radius-full, var(--border-radius-full));
   background-color: var(--color-surface-brand-50, var(--surface-brand-50));
   justify-content: center;
   align-items: center;
-  width: min(100cqw, 100cqh - 32px, 297px);
   display: flex;
   overflow: visible;
 }
 
-.IncodeElectronicSignatureIllustration svg {
-  --tw-translate-y: calc(3% * -1);
-  width: 80%;
+.IncodeElectronicSignature .IncodeElectronicSignatureIllustration svg {
   height: auto;
+  width: var(--electronic-signature-illustration-svg-w);
+  --tw-translate-y: calc(var(--electronic-signature-illustration-svg-shift) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
-.IncodeElectronicSignatureFileInput {
+.IncodeElectronicSignature .IncodeElectronicSignatureFileInput {
   opacity: 0;
   width: 1px;
   height: 1px;
@@ -64,13 +76,13 @@
   overflow: hidden;
 }
 
-.IncodeElectronicSignatureReviewBody {
+.IncodeElectronicSignature .IncodeElectronicSignatureReviewBody {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
-  width: 100%;
-  max-width: 420px;
   padding-inline: var(--spacing-48, var(--spacing-48, 48px));
   flex-direction: column;
   flex: 1;
@@ -78,7 +90,7 @@
   display: flex;
 }
 
-.IncodeElectronicSignatureReviewCard {
+.IncodeElectronicSignature .IncodeElectronicSignatureReviewCard {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
@@ -94,28 +106,28 @@
   display: flex;
 }
 
-.IncodeElectronicSignatureDocPreview {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocPreview {
   pointer-events: none;
   aspect-ratio: 113 / 150;
-  max-height: 150px;
+  max-height: var(--electronic-signature-doc-preview-max-h);
   min-height: var(--spacing-0, var(--spacing-none, 0px));
+  border-radius: var(--electronic-signature-doc-preview-radius);
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border-neutral-100, var(--border-neutral-100));
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
-  border-radius: 6px;
   flex: 1;
   position: relative;
   overflow: hidden;
 }
 
-.IncodeElectronicSignatureDocPreviewObject {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocPreviewObject {
   width: 100%;
   height: 100%;
   display: block;
 }
 
-.IncodeElectronicSignatureDocName {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocName {
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
@@ -126,7 +138,7 @@
   flex-shrink: 0;
 }
 
-.IncodeElectronicSignatureEncrypted {
+.IncodeElectronicSignature .IncodeElectronicSignatureEncrypted {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, var(--spacing-4, 4px));
@@ -136,24 +148,26 @@
   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);
+  white-space: nowrap;
   color: var(--color-text-body-primary, var(--text-body-800-primary));
   display: flex;
 }
 
-.IncodeElectronicSignatureEncryptedIcon {
+.IncodeElectronicSignature .IncodeElectronicSignatureEncryptedIcon {
   width: var(--spacing-16, var(--spacing-16, 16px));
   height: var(--spacing-16, var(--spacing-16, 16px));
   color: var(--color-icon-neutral-500, var(--icon-neutral-500));
+  flex-shrink: 0;
 }
 
-.IncodeElectronicSignatureSigningTop {
+.IncodeElectronicSignature .IncodeElectronicSignatureSigningTop {
   flex-direction: column;
   flex-shrink: 0;
   align-items: center;
   display: flex;
 }
 
-.IncodeElectronicSignatureSigningBottom {
+.IncodeElectronicSignature .IncodeElectronicSignatureSigningBottom {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: flex-end;
   align-items: center;
@@ -164,14 +178,14 @@
   display: flex;
 }
 
-.IncodeElectronicSignatureDocContainer {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocContainer {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   border-radius: var(--radius-medium, var(--border-radius-medium));
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border-neutral-100, var(--border-neutral-100));
   background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
-  width: 100%;
-  max-width: 420px;
   padding-inline: var(--spacing-24, var(--spacing-24, 24px));
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
   flex-direction: column;
@@ -182,16 +196,16 @@
   overflow: clip;
 }
 
-.IncodeElectronicSignatureDocRow {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocRow {
+  height: var(--electronic-signature-doc-row-h);
   flex-shrink: 0;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 56px;
   display: flex;
 }
 
-.IncodeElectronicSignatureDocRowName {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocRowName {
   font-family: var(--typography-button-family);
   font-size: var(--typography-button-m-size);
   font-weight: var(--typography-button-m-weight);
@@ -200,24 +214,24 @@
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeElectronicSignatureDocRowAction {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocRowAction {
   width: auto;
   max-width: none;
   height: auto;
   padding: var(--spacing-0, var(--spacing-none, 0px));
 }
 
-.IncodeElectronicSignatureConsents {
+.IncodeElectronicSignature .IncodeElectronicSignatureConsents {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   gap: var(--spacing-4, var(--spacing-4, 4px));
   flex-direction: column;
-  width: 100%;
-  max-width: 420px;
   display: flex;
   overflow: auto;
 }
 
-.IncodeElectronicSignatureConsents .IncodeCheckbox {
+.IncodeElectronicSignature .IncodeElectronicSignatureConsents .IncodeCheckbox {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-surface-brand-50, var(--surface-brand-50));
   width: 100%;
@@ -225,7 +239,7 @@
   padding-block: var(--spacing-20, var(--spacing-20, 20px));
 }
 
-.IncodeElectronicSignatureConsents .IncodeCheckboxText {
+.IncodeElectronicSignature .IncodeElectronicSignatureConsents .IncodeCheckboxText {
   font-family: var(--typography-checkbox-radio-family);
   font-size: var(--typography-checkbox-radio-s-size);
   font-weight: var(--typography-checkbox-radio-s-weight);
@@ -233,17 +247,17 @@
   letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
 }
 
-.IncodeElectronicSignatureConsents a {
+.IncodeElectronicSignature .IncodeElectronicSignatureConsents a {
   color: var(--color-text-link-default, var(--text-link-default));
   text-decoration-line: underline;
 }
 
-.IncodeElectronicSignatureSuccess .IncodePageContent {
+.IncodeElectronicSignature.IncodeElectronicSignatureSuccess .IncodePageContent {
   padding-top: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: center;
 }
 
-.IncodeElectronicSignatureSuccessCenter {
+.IncodeElectronicSignature .IncodeElectronicSignatureSuccessCenter {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
@@ -252,7 +266,7 @@
   display: flex;
 }
 
-.IncodeElectronicSignatureSuccessTitle {
+.IncodeElectronicSignature .IncodeElectronicSignatureSuccessTitle {
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h3-size);
@@ -262,7 +276,7 @@
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeElectronicSignatureDownloadLink {
+.IncodeElectronicSignature .IncodeElectronicSignatureDownloadLink {
   text-align: center;
   font-family: var(--typography-button-family);
   font-size: var(--typography-button-m-size);
@@ -273,33 +287,33 @@
   text-decoration-line: underline;
 }
 
-.IncodeElectronicSignatureFooter {
+.IncodeElectronicSignature .IncodeElectronicSignatureFooter {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex-shrink: 0;
   align-self: center;
-  width: 100%;
-  max-width: 420px;
   display: flex;
 }
 
-.IncodeElectronicSignatureDocViewHeader {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocViewHeader {
   z-index: 10;
   height: var(--page-header-height);
-  margin-top: calc(-1 * var(--page-header-height));
+  margin-top: var(--electronic-signature-doc-view-header-offset);
   align-self: flex-start;
   align-items: center;
   display: flex;
   position: relative;
 }
 
-.IncodeElectronicSignatureBackButton {
+.IncodeElectronicSignature .IncodeElectronicSignatureBackButton {
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeElectronicSignatureDocViewer {
+.IncodeElectronicSignature .IncodeElectronicSignatureDocViewer {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   border-style: var(--tw-border-style);
   border-width: var(--border-width-none, var(--primitive-border-width-0));

package/dist/antifraud/antifraud.es.js

@@ -1,8 +1,8 @@
 import { _ as y, v as u } from "../vendor-preact-DThS2ZQ_.js";
-import { c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
-import { t as IncodeComponent } from "../incodeComponent-Cmi1rlWs.js";
-import { t as Spinner } from "../spinner-BRNNKqPN.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-M8DszCee.js";
+import { c as useModuleTerminalCallbacks, u as useManager } from "../hooks-CNu7o-v8.js";
+import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
+import { t as Spinner } from "../spinner-BMeIEK1d.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 import { createAntifraudManager } from "@incodetech/core/antifraud";
 //#region src/modules/antifraud/antifraud.tsx
 var AntifraudContent = ({ manager: externalManager, onFinish }) => {

package/dist/authentication/authentication.es.js

@@ -1,8 +1,9 @@
 import { v as u } from "../vendor-preact-DThS2ZQ_.js";
-import { a as isTerminalModuleState, c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
-import { t as IncodeComponent } from "../incodeComponent-Cmi1rlWs.js";
-import { n as Capture, r as Permissions, t as Tutorial } from "../tutorial-Cap8qKvM.js";
-import { t as registerIncodeModuleElement } from "../incodeModule-M8DszCee.js";
+import { c as useModuleTerminalCallbacks, s as isTerminalModuleState, u as useManager } from "../hooks-CNu7o-v8.js";
+import { t as IncodeComponent } from "../incodeComponent-CfzJGETt.js";
+import { n as Capture, t as Tutorial } from "../tutorial-CCfPuVKX.js";
+import { i as Permissions } from "../capture-CkGvdDNH.js";
+import { t as registerIncodeModuleElement } from "../incodeModule-B-4_3JrK.js";
 import { createAuthenticationManager } from "@incodetech/core/authentication";
 //#region src/modules/authentication/authentication.tsx
 var AuthenticationContent = ({ config, authHint, manager: externalManager, onFinish, onError }) => {

package/dist/base.css

@@ -2694,6 +2694,10 @@
     justify-content: space-between;
   }
 
+  .rounded {
+    border-radius: .25rem;
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -3136,6 +3140,13 @@
   flex-shrink: 0;
 }
 
+.IncodeButton.IncodeButtonInline {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  width: auto;
+  height: auto;
+}
+
 .IncodeButton.IncodeButtonPrimary {
   background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
   color: var(--color-button-primary-text-default, var(--button-primary-text-default));
@@ -3258,6 +3269,40 @@
   fill: var(--surface-brand-400-static);
 }
 
+.IncodeButton.IncodeButtonLink.IncodeButtonInline {
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-m-underlined-size);
+  font-weight: var(--typography-button-m-underlined-weight);
+  line-height: var(--typography-button-m-underlined-line-height);
+  letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+  color: var(--color-button-tertiary-text-default, var(--button-tertiary-text-default));
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: auto;
+}
+
+.IncodeButton.IncodeButtonLink.IncodeButtonInline:active {
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-m-size);
+  font-weight: var(--typography-button-m-weight);
+  line-height: var(--typography-button-m-line-height);
+  letter-spacing: var(--typography-button-m-letter-spacing);
+  text-decoration-line: none;
+}
+
+.IncodeButton.IncodeButtonLink.IncodeButtonInline:disabled {
+  cursor: not-allowed;
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-m-size);
+  font-weight: var(--typography-button-m-weight);
+  line-height: var(--typography-button-m-line-height);
+  letter-spacing: var(--typography-button-m-letter-spacing);
+  color: var(--color-button-tertiary-text-disabled, var(--button-tertiary-text-disabled));
+  text-decoration-line: none;
+}
+
 .IncodeCheckbox {
   flex-direction: column;
   display: inline-flex;
@@ -4639,20 +4684,8 @@
   display: flex;
 }
 
-.IncodeOtpInputTimerText {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  padding-block: var(--spacing-20, var(--spacing-20, 20px));
-  text-align: center;
-  font-family: var(--typography-button-family);
-  font-size: var(--typography-button-m-size);
-  font-weight: var(--typography-button-m-weight);
-  line-height: var(--typography-button-m-line-height);
-  letter-spacing: var(--typography-button-m-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
-}
-
 .IncodeOtpInputResendText {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
+  margin-block: var(--spacing-8, var(--spacing-8, 8px));
   text-align: center;
   font-size: var(--text-18, var(--primitive-typography-size-18));
   --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
@@ -4661,33 +4694,12 @@
 }
 
 .IncodeOtpInputResendTextDisabled {
+  margin-block: var(--spacing-8, var(--spacing-8, 8px));
   color: var(--color-button-tertiary-text-disabled, var(--button-tertiary-text-disabled));
 }
 
-.IncodeOtpInputLink {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  cursor: pointer;
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  padding: var(--spacing-0, var(--spacing-none, 0px));
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --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(--color-button-primary-surface-default, var(--button-primary-surface-default));
-  background-color: #0000;
-  border-style: none;
-  font-family: inherit;
-  text-decoration-line: underline;
-}
-
-.IncodeOtpInputLink:hover {
-  color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
-}
-
-.IncodeOtpInputLink:disabled {
-  cursor: not-allowed;
-  color: var(--color-button-tertiary-text-disabled, var(--button-tertiary-text-disabled));
+.IncodeOtpInputLoadingText {
+  color: var(--color-button-tertiary-text-default, var(--button-tertiary-text-default));
 }
 
 .IncodeOtpInputComposed {
@@ -7870,6 +7882,10 @@
   position: absolute;
 }
 
+.IncodeCameraView .IncodeCameraViewVideo .IncodeCameraViewVideoElement.IncodeCameraViewVideoMirrored {
+  transform: scaleX(-1);
+}
+
 .IncodeCameraOverlay {
   inset: var(--spacing-0, var(--spacing-none, 0px));
   z-index: 10;
@@ -7970,7 +7986,7 @@
 }
 
 .IncodeCameraFrame.IncodeCameraFrameCapturing, .IncodeCameraFrame.IncodeCameraFrameFocus {
-  --frame-border-color: var(--border-status-focus);
+  --frame-border-color: var(--border-brand-500);
 }
 
 .IncodeCameraFrame.IncodeCameraFrameAnalyzing, .IncodeCameraFrame.IncodeCameraFrameSuccess {
@@ -8609,44 +8625,56 @@
   position: relative;
 }
 
-.IncodePdfViewerThumbnail {
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.IncodePdfViewerFull {
-  overflow: auto;
-}
-
-.IncodePdfViewerPages {
+.IncodePdfViewer .IncodePdfViewerPages {
   flex-direction: column;
   align-items: center;
   width: 100%;
   display: flex;
 }
 
-.IncodePdfViewerThumbnail .IncodePdfViewerPages {
-  justify-content: center;
-  height: 100%;
+.IncodePdfViewer .IncodePdfViewerCanvas {
+  max-width: 100%;
+  display: block;
 }
 
-.IncodePdfViewerFull .IncodePdfViewerPages {
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  padding-block: var(--spacing-4, var(--spacing-4, 4px));
+.IncodePdfViewer .IncodePdfViewerTextLayer {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
 }
 
-.IncodePdfViewerCanvas {
-  max-width: 100%;
-  display: block;
+.IncodePdfViewer.IncodePdfViewerThumbnail {
+  pointer-events: none;
+  overflow: hidden;
 }
 
-.IncodePdfViewerThumbnail .IncodePdfViewerCanvas {
+.IncodePdfViewer.IncodePdfViewerThumbnail .IncodePdfViewerPages {
+  justify-content: center;
+  height: 100%;
+}
+
+.IncodePdfViewer.IncodePdfViewerThumbnail .IncodePdfViewerCanvas {
   object-fit: cover;
   width: 100%;
   height: 100%;
 }
 
-.IncodePdfViewerStatus {
+.IncodePdfViewer.IncodePdfViewerFull {
+  overflow: auto;
+}
+
+.IncodePdfViewer.IncodePdfViewerFull .IncodePdfViewerPages {
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-4, var(--spacing-4, 4px));
+}
+
+.IncodePdfViewer .IncodePdfViewerStatus {
   pointer-events: none;
   inset: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: center;

package/dist/{button-Ch5-QgHB.js → button-Dz6AsbmF.js}

@@ -10,7 +10,8 @@ var variantClass = {
 var sizeClass = {
 	L: "IncodeButtonL",
 	M: "IncodeButtonM",
-	S: "IncodeButtonS"
+	S: "IncodeButtonS",
+	inline: "IncodeButtonInline"
 };
 var Button = D((props, ref) => {
 	const { isLoading = false, variant = "primary", size = "L", icon, class: className, type = "button", children, disabled, ...rest } = props;

package/dist/cameraView-DIEzM5ru.js

@@ -0,0 +1,47 @@
+import { _ as y, a as D, l as A, v as u } from "./vendor-preact-DThS2ZQ_.js";
+import { n as cn } from "./loadingIcon-B0ysgiNq.js";
+//#region src/shared/cameraOverlay/cameraFrame.tsx
+var CameraFrame = D(({ variant, aspectRatio, orientation = "horizontal", frameState = "idle", className, children }, ref) => {
+	const stateClass = `IncodeCameraFrame${frameState.charAt(0).toUpperCase()}${frameState.slice(1)}`;
+	return /* @__PURE__ */ u("div", {
+		ref,
+		class: cn("IncodeCameraFrame", variant === "fill" && "IncodeCameraFrameFill", variant === "locked" && "IncodeCameraFrameLocked", variant === "locked" && orientation === "horizontal" && "IncodeCameraFrameHorizontal", variant === "locked" && orientation === "vertical" && "IncodeCameraFrameVertical", stateClass, className),
+		style: aspectRatio ? { aspectRatio } : void 0,
+		"aria-hidden": true,
+		children
+	});
+});
+//#endregion
+//#region src/shared/cameraOverlay/cameraView.tsx
+var CameraView = ({ stream, children, videoRef: externalVideoRef, onPlaying, className, mirrored, ...rest }) => {
+	const internalVideoRef = A(null);
+	const setVideoRef = (el) => {
+		internalVideoRef.current = el;
+		if (typeof externalVideoRef === "function") externalVideoRef(el);
+		else if (externalVideoRef) externalVideoRef.current = el;
+	};
+	y(() => {
+		if (internalVideoRef.current && stream) {
+			internalVideoRef.current.srcObject = stream;
+			internalVideoRef.current.play().catch(() => {});
+		}
+	}, [stream]);
+	return /* @__PURE__ */ u("div", {
+		class: cn("IncodeCameraView", className),
+		...rest,
+		children: [/* @__PURE__ */ u("div", {
+			class: "IncodeCameraViewVideo",
+			children: /* @__PURE__ */ u("video", {
+				ref: setVideoRef,
+				autoplay: true,
+				playsInline: true,
+				muted: true,
+				onPlaying,
+				"aria-hidden": "true",
+				class: cn("IncodeCameraViewVideoElement", mirrored && "IncodeCameraViewVideoMirrored")
+			})
+		}), children]
+	});
+};
+//#endregion
+export { CameraFrame as n, CameraView as t };