@incodetech/web 0.0.0-dev-20260918-2ea5eb33 → 0.0.0-dev-20260918-71191297
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/flow/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n --tw-border-style: solid;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n }\n }\n}\n\n@layer incode-theme, incode-utilities, incode-base, incode-components;\n\n@keyframes slideUp {\n from {\n transform: translateY(100%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeToastFadeInOut {\n 0% {\n opacity: 0;\n transform: translate(-50%, -20px);\n }\n\n 15% {\n opacity: 1;\n transform: translate(-50%);\n }\n\n 85% {\n opacity: 1;\n transform: translate(-50%);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -20px);\n }\n}\n\n.IncodeCaptureContainer {\n flex-direction: column;\n flex: 1;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureFrame {\n aspect-ratio: 1;\n width: 100%;\n max-width: var(--face-capture-frame-max-w);\n border-radius: var(--radius-full, var(--border-radius-full));\n border-style: var(--tw-border-style);\n border-width: 12px;\n border-color: #0000;\n position: relative;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoWrapper {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n width: calc(100% - 24px);\n height: calc(100% - 24px);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideo {\n z-index: 50;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {\n opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {\n transform: scaleX(-1);\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarHost {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {\n opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {\n transform: scaleX(-1);\n}\n\n.IncodeCaptureVisuallyHidden {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeFaceOutline {\n width: 100%;\n height: 100%;\n}\n\n.IncodeLoadingBorder {\n aspect-ratio: 1;\n width: 100%;\n max-width: var(--face-capture-frame-max-w);\n position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {\n animation: var(--animate-spin, spin 1s linear infinite);\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderPath {\n transition: all 1s ease-in-out;\n}\n\n.IncodeNotification {\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeNotification .IncodeNotificationText {\n text-align: center;\n font-family: var(--typography-feedback-family);\n font-size: var(--typography-feedback-l-size);\n font-weight: var(--typography-feedback-l-weight);\n line-height: var(--typography-feedback-l-line-height);\n letter-spacing: var(--typography-feedback-l-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdCaptureNotification {\n right: var(--spacing-24, var(--spacing-24, 24px));\n left: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n max-width: var(--incode-form-max-w);\n padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n top: var(--incode-overlay-top-inset, var(--spacing-24));\n align-items: flex-end;\n margin: auto;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n z-index: 100;\n border-radius: var(--radius-large, var(--border-radius-large));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n width: 100%;\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n box-shadow: var(--id-capture-notification-content-shadow);\n display: flex;\n overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n justify-content: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n height: var(--id-capture-notification-animation-height);\n justify-content: center;\n align-items: center;\n width: auto;\n display: flex;\n}\n\n.IncodeVideoSelfieCapturePage {\n background-color: var(--capture-page-backdrop-color);\n}\n\n.IncodeVideoSelfieCapturePage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieCapturePage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeVideoSelfieOverlay {\n pointer-events: none;\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 10;\n flex-direction: column;\n align-items: center;\n display: flex;\n position: absolute;\n container-type: inline-size;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage {\n background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {\n width: 100%;\n height: 100%;\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n text-align: center;\n flex-direction: column;\n display: flex;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {\n width: var(--spacing-40, var(--spacing-40, 40px));\n height: var(--spacing-40, var(--spacing-40, 40px));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeVideoSelfieTutorialPage .IncodePageContent {\n min-height: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieTutorialBody {\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n min-height: var(--spacing-0, var(--spacing-none, 0px));\n flex: 1;\n overflow-y: auto;\n}\n\n.IncodeVideoSelfieTutorialSteps {\n width: 100%;\n max-width: var(--incode-form-max-w);\n gap: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n}\n\n.IncodeVideoSelfieTutorialStep {\n align-items: center;\n gap: var(--spacing-12, var(--spacing-12, 12px));\n display: flex;\n}\n\n.IncodeVideoSelfieTutorialStepIcon {\n width: var(--spacing-40, var(--spacing-40, 40px));\n height: var(--spacing-40, var(--spacing-40, 40px));\n border-radius: var(--radius-small, var(--border-radius-small));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.IncodeVideoSelfieTutorialStepIcon svg {\n height: var(--spacing-24, var(--spacing-24, 24px));\n width: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeVideoSelfieTutorialStep:not(:last-child) .IncodeVideoSelfieTutorialStepIcon:after {\n content: \"\";\n height: var(--spacing-8, var(--spacing-8, 8px));\n width: var(--spacing-2, var(--spacing-2, 2px));\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n background-color: var(--color-border-neutral-100, var(--border-neutral-100));\n position: absolute;\n top: 100%;\n left: 50%;\n}\n\n.IncodeVideoSelfieTutorialStepLabel {\n text-align: left;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeVideoSelfieTutorialActions {\n bottom: var(--spacing-0, var(--spacing-none, 0px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n width: 100%;\n padding-top: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-24, var(--spacing-24, 24px));\n flex-shrink: 0;\n display: flex;\n position: sticky;\n}\n\n.IncodeVideoSelfieTutorialStartButton {\n max-width: var(--incode-form-max-w);\n margin: auto;\n}\n\n.IncodeVsStepsHeader {\n inset-inline: var(--spacing-0, var(--spacing-none, 0px));\n top: var(--spacing-0, var(--spacing-none, 0px));\n gap: var(--spacing-2, var(--spacing-2, 2px));\n width: 100%;\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n padding-top: var(--spacing-24, var(--spacing-24, 24px));\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n z-index: var(--video-selfie-chrome-z-index);\n background-color: #0000;\n list-style-type: none;\n display: flex;\n position: absolute;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStep {\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n width: 100%;\n height: var(--video-selfie-stepper-height);\n flex-direction: column;\n flex: 1;\n display: flex;\n position: relative;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {\n width: var(--spacing-32, var(--spacing-32, 32px));\n height: var(--spacing-32, var(--spacing-32, 32px));\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderPill {\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n width: 100%;\n height: var(--video-selfie-stepper-pill-height);\n opacity: .25;\n transition: opacity .3s ease-in-out;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {\n opacity: .5;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {\n opacity: 1;\n}\n\n.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {\n background-color: var(--border-status-positive-static);\n opacity: 1;\n}\n\n.IncodeVsSelfieManualCapture {\n pointer-events: auto;\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMask {\n border-radius: var(--radius-full, var(--border-radius-full));\n z-index: var(--video-selfie-mask-z-index);\n width: 86cqw;\n height: 86cqw;\n box-shadow: var(--video-selfie-mask-vignette-shadow);\n position: absolute;\n top: calc(50% - 7cqw);\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: visible;\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {\n inset-inline: var(--spacing-0, var(--spacing-none, 0px));\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n text-align: center;\n width: 100%;\n z-index: var(--video-selfie-chrome-z-index);\n max-width: var(--video-selfie-feedback-max-width);\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n position: absolute;\n top: calc(50% + 36cqw + 40px);\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {\n width: var(--spacing-32, var(--spacing-32, 32px));\n height: var(--spacing-32, var(--spacing-32, 32px));\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeVsIdMask {\n z-index: 50;\n padding-inline: var(--spacing-24);\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.IncodeVsIdMask .IncodeVsIdManualCapture {\n bottom: var(--spacing-32);\n z-index: 60;\n pointer-events: auto;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.IncodeVsIdMask .IncodeIdCaptureNotification {\n top: calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16));\n}\n\n.IncodeVsIdMask .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n background-color: var(--surface-neutral-900-static);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback {\n z-index: 100;\n justify-content: center;\n align-items: center;\n gap: var(--spacing-12, var(--spacing-12, 12px));\n border-radius: var(--radius-medium, var(--border-radius-medium));\n padding: var(--spacing-32, var(--spacing-32, 32px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n background-color: var(--surface-neutral-900-static);\n border: var(--border-width-regular) solid var(--border-neutral-100-static);\n width: max-content;\n max-width: var(--video-selfie-id-feedback-max-width);\n flex-direction: column;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n overflow: hidden;\n transform: translate(-50%, -50%);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackError {\n width: var(--video-selfie-id-feedback-width);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing {\n gap: var(--spacing-16);\n color: var(--text-body-50-static);\n width: var(--video-selfie-id-processing-feedback-width);\n height: var(--video-selfie-id-processing-feedback-height);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing p {\n white-space: nowrap;\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerPrimary {\n fill: var(--spinner-surface-primary);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerSecondary {\n fill: var(--surface-brand-900-static);\n}\n\n.IncodeVsIdFlipModal .IncodeModalDialog {\n max-width: none;\n height: 100%;\n}\n\n.IncodeVsIdFlipModal .IncodeModalContent {\n border-radius: var(--radius-none, var(--border-radius-none));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n max-width: none;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n justify-content: center;\n gap: var(--video-selfie-id-flip-gap);\n}\n\n.IncodeVsIdFlipModal .IncodeModalTitleSectionCenter {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVsIdFlipModal .IncodeVsIdFlipAnimation {\n height: var(--video-selfie-id-flip-animation-height);\n width: var(--video-selfie-id-flip-animation-width);\n overflow: hidden;\n}\n\n.IncodeVsFinalSuccess {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-12, var(--spacing-12, 12px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeVsFinalSuccess .IncodeVsFinalSuccessTitle {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeVsPoaMask {\n pointer-events: none;\n z-index: 50;\n position: absolute;\n inset: 0;\n}\n\n.IncodeVsPoaBanner {\n top: var(--spacing-0, var(--spacing-none, 0px));\n right: var(--spacing-0, var(--spacing-none, 0px));\n left: var(--spacing-0, var(--spacing-none, 0px));\n background-color: var(--color-surface-neutral-1000-80-static, var(--surface-neutral-1000-80-static));\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n padding-top: var(--poa-mask-banner-padding-top);\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeVsPoaBannerText {\n text-align: center;\n color: var(--poa-mask-banner-text-color);\n margin: 0;\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1.4;\n}\n\n.IncodeVsPoaBannerEmphasis {\n color: var(--poa-mask-emphasis-color);\n}\n\n.IncodeVsPoaActions {\n right: var(--spacing-16, var(--spacing-16, 16px));\n bottom: var(--spacing-16, var(--spacing-16, 16px));\n left: var(--spacing-16, var(--spacing-16, 16px));\n justify-content: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeVsPoaButton {\n pointer-events: auto;\n width: 100%;\n}\n\n.IncodeVsVoicePanel {\n pointer-events: auto;\n z-index: var(--video-selfie-mask-z-index);\n align-items: center;\n gap: var(--spacing-12);\n padding: var(--spacing-20) var(--spacing-16);\n border-radius: var(--border-radius-large);\n background: var(--surface-neutral-0-static);\n color: var(--text-body-800-primary-static);\n border: var(--video-selfie-voice-panel-border-width) solid transparent;\n box-shadow: var(--video-selfie-voice-vignette-shadow);\n flex-direction: column;\n transition: border-color .3s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 10px;\n left: 10px;\n right: 10px;\n}\n\n.IncodeVsVoicePanel.IncodeVsVoicePanelActive {\n border-color: var(--border-brand-500);\n}\n\n.IncodeVsVoicePanel.IncodeVsVoicePanelProcessing {\n border-style: var(--tw-border-style);\n left: var(--spacing-8);\n right: var(--spacing-8);\n bottom: var(--spacing-8);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-16);\n height: var(--video-selfie-voice-processing-height);\n min-height: var(--video-selfie-voice-processing-height);\n padding: var(--spacing-24) var(--spacing-16);\n border-width: 0;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelProcessingTitle {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-spinner-text-title, var(--spinner-text-title));\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelLabel {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--text-body-500-secondary-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelTitle {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--text-body-800-primary-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelButton {\n width: 100%;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStepper {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n gap: var(--spacing-8, var(--spacing-8, 8px));\n width: 100%;\n padding: var(--spacing-0, var(--spacing-none, 0px));\n list-style-type: none;\n display: flex;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStep {\n height: var(--spacing-4);\n border-radius: var(--border-radius-full);\n background: var(--surface-neutral-100-static);\n flex: 1;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStepActive {\n background: var(--surface-brand-500-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceMic {\n width: var(--spacing-16);\n height: var(--spacing-16);\n border-radius: var(--border-radius-full);\n background: var(--icon-status-negative);\n animation: 1.2s ease-in-out infinite IncodeVsVoiceMicPulse;\n}\n\n@keyframes IncodeVsVoiceMicPulse {\n 0%, 100% {\n opacity: 1;\n transform: scale(1);\n }\n\n 50% {\n opacity: .4;\n transform: scale(.8);\n }\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
|
|
1
|
+
export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {\n --tw-border-style: solid;\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n }\n }\n}\n\n@layer incode-theme, incode-utilities, incode-base, incode-components;\n\n@keyframes slideUp {\n from {\n transform: translateY(100%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes incodeToastFadeInOut {\n 0% {\n opacity: 0;\n transform: translate(-50%, -20px);\n }\n\n 15% {\n opacity: 1;\n transform: translate(-50%);\n }\n\n 85% {\n opacity: 1;\n transform: translate(-50%);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-50%, -20px);\n }\n}\n\n.IncodeCaptureContainer {\n flex-direction: column;\n flex: 1;\n justify-content: flex-start;\n align-items: center;\n width: 100%;\n height: 100%;\n display: flex;\n position: relative;\n overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureFrame {\n aspect-ratio: 1;\n width: 100%;\n max-width: var(--face-capture-frame-max-w);\n border-radius: var(--radius-full, var(--border-radius-full));\n border-style: var(--tw-border-style);\n border-width: 12px;\n border-color: #0000;\n position: relative;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoWrapper {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n width: calc(100% - 24px);\n height: calc(100% - 24px);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n overflow: hidden;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideo {\n z-index: 50;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {\n opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {\n transform: scaleX(-1);\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarHost {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n object-fit: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {\n opacity: 0;\n}\n\n.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {\n transform: scaleX(-1);\n}\n\n.IncodeCaptureVisuallyHidden {\n clip-path: inset(50%);\n white-space: nowrap;\n border-width: 0;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.IncodeFaceOutline {\n width: 100%;\n height: 100%;\n}\n\n.IncodeLoadingBorder {\n aspect-ratio: 1;\n width: 100%;\n max-width: var(--face-capture-frame-max-w);\n position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n position: absolute;\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {\n animation: var(--animate-spin, spin 1s linear infinite);\n}\n\n.IncodeLoadingBorder .IncodeLoadingBorderPath {\n transition: all 1s ease-in-out;\n}\n\n.IncodeNotification {\n flex-direction: column;\n align-items: center;\n display: flex;\n}\n\n.IncodeNotification .IncodeNotificationText {\n text-align: center;\n font-family: var(--typography-feedback-family);\n font-size: var(--typography-feedback-l-size);\n font-weight: var(--typography-feedback-l-weight);\n line-height: var(--typography-feedback-l-line-height);\n letter-spacing: var(--typography-feedback-l-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeIdCaptureNotification {\n right: var(--spacing-24, var(--spacing-24, 24px));\n left: var(--spacing-24, var(--spacing-24, 24px));\n z-index: 100;\n max-width: var(--incode-form-max-w);\n padding-bottom: var(--spacing-32, var(--spacing-32, 32px));\n top: var(--incode-overlay-top-inset, var(--spacing-24));\n align-items: flex-end;\n margin: auto;\n display: flex;\n position: absolute;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n z-index: 100;\n border-radius: var(--radius-large, var(--border-radius-large));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-300, var(--border-neutral-300));\n background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));\n width: 100%;\n padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n box-shadow: var(--id-capture-notification-content-shadow);\n display: flex;\n overflow: hidden;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {\n justify-content: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n padding-top: var(--spacing-16, var(--spacing-16, 16px));\n padding-bottom: var(--spacing-12, var(--spacing-12, 12px));\n text-align: center;\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n flex-direction: column;\n display: flex;\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h3-size);\n font-weight: var(--typography-headline-h3-weight);\n line-height: var(--typography-headline-h3-line-height);\n letter-spacing: var(--typography-headline-h3-letter-spacing);\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h5-size);\n font-weight: var(--typography-headline-h5-weight);\n line-height: var(--typography-headline-h5-line-height);\n letter-spacing: var(--typography-headline-h5-letter-spacing);\n color: var(--color-text-body-tertiary-static, var(--text-body-300-tertiary-static));\n}\n\n.IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {\n height: var(--id-capture-notification-animation-height);\n justify-content: center;\n align-items: center;\n width: auto;\n display: flex;\n}\n\n.IncodeVideoSelfieCapturePage {\n background-color: var(--capture-page-backdrop-color);\n}\n\n.IncodeVideoSelfieCapturePage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n max-height: none;\n}\n\n.IncodeVideoSelfieCapturePage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeVideoSelfieOverlay {\n pointer-events: none;\n inset: var(--spacing-0, var(--spacing-none, 0px));\n z-index: 10;\n flex-direction: column;\n align-items: center;\n display: flex;\n position: absolute;\n container-type: inline-size;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage {\n background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {\n padding: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {\n flex: 1;\n position: relative;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {\n width: 100%;\n height: 100%;\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n flex-direction: column;\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n text-align: center;\n flex-direction: column;\n display: flex;\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {\n width: var(--spacing-40, var(--spacing-40, 40px));\n height: var(--spacing-40, var(--spacing-40, 40px));\n}\n\n.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeVideoSelfieTutorialPage .IncodePageContent {\n min-height: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVideoSelfieTutorialBody {\n margin-top: var(--spacing-24, var(--spacing-24, 24px));\n min-height: var(--spacing-0, var(--spacing-none, 0px));\n flex: 1;\n overflow-y: auto;\n}\n\n.IncodeVideoSelfieTutorialSteps {\n width: 100%;\n max-width: var(--incode-form-max-w);\n gap: var(--spacing-8, var(--spacing-8, 8px));\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n}\n\n.IncodeVideoSelfieTutorialStep {\n align-items: center;\n gap: var(--spacing-12, var(--spacing-12, 12px));\n display: flex;\n}\n\n.IncodeVideoSelfieTutorialStepIcon {\n width: var(--spacing-40, var(--spacing-40, 40px));\n height: var(--spacing-40, var(--spacing-40, 40px));\n border-radius: var(--radius-small, var(--border-radius-small));\n border-style: var(--tw-border-style);\n border-width: 2px;\n border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.IncodeVideoSelfieTutorialStepIcon svg {\n height: var(--spacing-24, var(--spacing-24, 24px));\n width: var(--spacing-24, var(--spacing-24, 24px));\n}\n\n.IncodeVideoSelfieTutorialStep:not(:last-child) .IncodeVideoSelfieTutorialStepIcon:after {\n content: \"\";\n height: var(--spacing-8, var(--spacing-8, 8px));\n width: var(--spacing-2, var(--spacing-2, 2px));\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n background-color: var(--color-border-neutral-100, var(--border-neutral-100));\n position: absolute;\n top: 100%;\n left: 50%;\n}\n\n.IncodeVideoSelfieTutorialStepLabel {\n text-align: left;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--color-text-body-secondary, var(--text-body-500-secondary));\n}\n\n.IncodeVideoSelfieTutorialActions {\n bottom: var(--spacing-0, var(--spacing-none, 0px));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n width: 100%;\n padding-top: var(--spacing-24, var(--spacing-24, 24px));\n padding-bottom: var(--spacing-24, var(--spacing-24, 24px));\n flex-shrink: 0;\n display: flex;\n position: sticky;\n}\n\n.IncodeVideoSelfieTutorialStartButton {\n max-width: var(--incode-form-max-w);\n margin: auto;\n}\n\n.IncodeVsStepsHeader {\n inset-inline: var(--spacing-0, var(--spacing-none, 0px));\n top: var(--spacing-0, var(--spacing-none, 0px));\n gap: var(--spacing-2, var(--spacing-2, 2px));\n width: 100%;\n padding-inline: var(--spacing-24, var(--spacing-24, 24px));\n padding-top: var(--spacing-24, var(--spacing-24, 24px));\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n z-index: var(--video-selfie-chrome-z-index);\n background-color: #0000;\n list-style-type: none;\n display: flex;\n position: absolute;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStep {\n align-items: center;\n gap: var(--spacing-8, var(--spacing-8, 8px));\n width: 100%;\n height: var(--video-selfie-stepper-height);\n flex-direction: column;\n flex: 1;\n display: flex;\n position: relative;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {\n width: var(--spacing-32, var(--spacing-32, 32px));\n height: var(--spacing-32, var(--spacing-32, 32px));\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderPill {\n border-radius: var(--radius-full, var(--border-radius-full));\n background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));\n width: 100%;\n height: var(--video-selfie-stepper-pill-height);\n opacity: .25;\n transition: opacity .3s ease-in-out;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {\n opacity: .5;\n}\n\n.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {\n opacity: 1;\n}\n\n.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {\n background-color: var(--border-status-positive-static);\n opacity: 1;\n}\n\n.IncodeVsSelfieManualCapture {\n pointer-events: auto;\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMask {\n border-radius: var(--radius-full, var(--border-radius-full));\n z-index: var(--video-selfie-mask-z-index);\n width: 86cqw;\n height: 86cqw;\n box-shadow: var(--video-selfie-mask-vignette-shadow);\n position: absolute;\n top: calc(50% - 7cqw);\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {\n inset: var(--spacing-0, var(--spacing-none, 0px));\n width: 100%;\n height: 100%;\n position: absolute;\n overflow: visible;\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {\n inset-inline: var(--spacing-0, var(--spacing-none, 0px));\n align-items: center;\n gap: var(--spacing-16, var(--spacing-16, 16px));\n text-align: center;\n width: 100%;\n z-index: var(--video-selfie-chrome-z-index);\n max-width: var(--video-selfie-feedback-max-width);\n flex-direction: column;\n margin-inline: auto;\n display: flex;\n position: absolute;\n top: calc(50% + 36cqw + 40px);\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {\n width: var(--spacing-32, var(--spacing-32, 32px));\n height: var(--spacing-32, var(--spacing-32, 32px));\n}\n\n.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n}\n\n.IncodeVsIdMask {\n z-index: 50;\n padding-inline: var(--spacing-24);\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.IncodeVsIdMask .IncodeVsIdManualCapture {\n bottom: var(--spacing-32);\n z-index: 60;\n pointer-events: auto;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.IncodeVsIdMask .IncodeIdCaptureNotification {\n top: calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16));\n}\n\n.IncodeVsIdMask .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {\n background-color: var(--surface-neutral-900-static);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback {\n z-index: 100;\n justify-content: center;\n align-items: center;\n gap: var(--spacing-12, var(--spacing-12, 12px));\n border-radius: var(--radius-medium, var(--border-radius-medium));\n padding: var(--spacing-32, var(--spacing-32, 32px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-0-static, var(--text-body-0-static));\n background-color: var(--surface-neutral-900-static);\n border: var(--border-width-regular) solid var(--border-neutral-100-static);\n width: max-content;\n max-width: var(--video-selfie-id-feedback-max-width);\n flex-direction: column;\n display: flex;\n position: absolute;\n top: 50%;\n left: 50%;\n overflow: hidden;\n transform: translate(-50%, -50%);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackError {\n width: var(--video-selfie-id-feedback-width);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing {\n gap: var(--spacing-16);\n color: var(--text-body-50-static);\n width: var(--video-selfie-id-processing-feedback-width);\n height: var(--video-selfie-id-processing-feedback-height);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing p {\n white-space: nowrap;\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerPrimary {\n fill: var(--spinner-surface-primary);\n}\n\n.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerSecondary {\n fill: var(--surface-brand-900-static);\n}\n\n.IncodeVsIdFlipModal .IncodeModalDialog {\n max-width: none;\n height: 100%;\n}\n\n.IncodeVsIdFlipModal .IncodeModalContent {\n border-radius: var(--radius-none, var(--border-radius-none));\n background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));\n max-width: none;\n height: 100%;\n padding: var(--spacing-24, var(--spacing-24, 24px));\n justify-content: center;\n gap: var(--video-selfie-id-flip-gap);\n}\n\n.IncodeVsIdFlipModal .IncodeModalTitleSectionCenter {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n}\n\n.IncodeVsIdFlipModal .IncodeVsIdFlipAnimation {\n height: var(--video-selfie-id-flip-animation-height);\n width: var(--video-selfie-id-flip-animation-width);\n overflow: hidden;\n}\n\n.IncodeVsFinalSuccess {\n justify-content: center;\n align-items: center;\n gap: var(--spacing-12, var(--spacing-12, 12px));\n padding-block: var(--spacing-16, var(--spacing-16, 16px));\n flex-direction: column;\n flex: 1;\n display: flex;\n}\n\n.IncodeVsFinalSuccess .IncodeVsFinalSuccessTitle {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-text-body-primary, var(--text-body-800-primary));\n}\n\n.IncodeVsPoaMask {\n pointer-events: none;\n z-index: 50;\n position: absolute;\n inset: 0;\n}\n\n.IncodeVsPoaBanner {\n top: var(--spacing-0, var(--spacing-none, 0px));\n right: var(--spacing-0, var(--spacing-none, 0px));\n left: var(--spacing-0, var(--spacing-none, 0px));\n background-color: var(--color-surface-neutral-1000-80-static, var(--surface-neutral-1000-80-static));\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n padding-top: var(--poa-mask-banner-padding-top);\n padding-bottom: var(--spacing-16, var(--spacing-16, 16px));\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeVsPoaBannerText {\n text-align: center;\n color: var(--poa-mask-banner-text-color);\n margin: 0;\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1.4;\n}\n\n.IncodeVsPoaBannerEmphasis {\n color: var(--poa-mask-emphasis-color);\n}\n\n.IncodeVsPoaActions {\n right: var(--spacing-16, var(--spacing-16, 16px));\n bottom: var(--spacing-16, var(--spacing-16, 16px));\n left: var(--spacing-16, var(--spacing-16, 16px));\n justify-content: center;\n display: flex;\n position: absolute;\n}\n\n.IncodeVsPoaButton {\n pointer-events: auto;\n width: 100%;\n}\n\n.IncodeVsVoicePanel {\n pointer-events: auto;\n z-index: var(--video-selfie-mask-z-index);\n align-items: center;\n gap: var(--spacing-12);\n padding: var(--spacing-20) var(--spacing-16);\n border-radius: var(--border-radius-large);\n background: var(--surface-neutral-0-static);\n color: var(--text-body-800-primary-static);\n border: var(--video-selfie-voice-panel-border-width) solid transparent;\n box-shadow: var(--video-selfie-voice-vignette-shadow);\n flex-direction: column;\n transition: border-color .3s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 10px;\n left: 10px;\n right: 10px;\n}\n\n.IncodeVsVoicePanel.IncodeVsVoicePanelActive {\n border-color: var(--border-brand-500);\n}\n\n.IncodeVsVoicePanel.IncodeVsVoicePanelProcessing {\n border-style: var(--tw-border-style);\n left: var(--spacing-8);\n right: var(--spacing-8);\n bottom: var(--spacing-8);\n justify-content: center;\n align-items: center;\n gap: var(--spacing-16);\n height: var(--video-selfie-voice-processing-height);\n min-height: var(--video-selfie-voice-processing-height);\n padding: var(--spacing-24) var(--spacing-16);\n border-width: 0;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelProcessingTitle {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--color-spinner-text-title, var(--spinner-text-title));\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelLabel {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h4-size);\n font-weight: var(--typography-headline-h4-weight);\n line-height: var(--typography-headline-h4-line-height);\n letter-spacing: var(--typography-headline-h4-letter-spacing);\n color: var(--text-body-500-secondary-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelTitle {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n padding-inline: var(--spacing-16, var(--spacing-16, 16px));\n text-align: center;\n font-family: var(--typography-headline-family);\n font-size: var(--typography-headline-h2-size);\n font-weight: var(--typography-headline-h2-weight);\n line-height: var(--typography-headline-h2-line-height);\n letter-spacing: var(--typography-headline-h2-letter-spacing);\n color: var(--text-body-800-primary-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoicePanelButton {\n width: 100%;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStepper {\n margin: var(--spacing-0, var(--spacing-none, 0px));\n gap: var(--spacing-8, var(--spacing-8, 8px));\n width: 100%;\n padding: var(--spacing-0, var(--spacing-none, 0px));\n list-style-type: none;\n display: flex;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStep {\n height: var(--spacing-4);\n border-radius: var(--border-radius-full);\n background: var(--surface-neutral-100-static);\n flex: 1;\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceStepActive {\n background: var(--surface-brand-500-static);\n}\n\n.IncodeVsVoicePanel .IncodeVsVoiceMic {\n width: var(--spacing-16);\n height: var(--spacing-16);\n border-radius: var(--border-radius-full);\n background: var(--icon-status-negative);\n animation: 1.2s ease-in-out infinite IncodeVsVoiceMicPulse;\n}\n\n@keyframes IncodeVsVoiceMicPulse {\n 0%, 100% {\n opacity: 1;\n transform: scale(1);\n }\n\n 50% {\n opacity: .4;\n transform: scale(.8);\n }\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n";
|
package/dist/workflow/styles.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@incodetech/web",
|
|
3
|
-
"version": "0.0.0-dev-20260918-
|
|
3
|
+
"version": "0.0.0-dev-20260918-71191297",
|
|
4
4
|
"license": "ISC",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
],
|
|
288
288
|
"dependencies": {
|
|
289
289
|
"preact": "^10.27.2",
|
|
290
|
-
"@incodetech/core": "0.0.0-dev-20260918-
|
|
290
|
+
"@incodetech/core": "0.0.0-dev-20260918-71191297"
|
|
291
291
|
},
|
|
292
292
|
"devDependencies": {
|
|
293
293
|
"@fontsource/dm-sans": "^5.2.8",
|