@incodetech/web 0.0.0-dev-20260205-bb46959 → 0.0.0-dev-20260206-cd4d6ec

package/dist/flow/styles.css

@@ -816,6 +816,455 @@
   color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
 }
 
+.IncodeFaceMatchPage {
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.IncodeFaceMatchPage .IncodeFaceMatchContent {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.IncodeFaceMatchAnimationContainer {
+  flex: 1;
+  width: 100%;
+  min-height: 250px;
+  display: flex;
+  position: relative;
+}
+
+.IncodeFaceMatchContainer {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 225px;
+  position: relative;
+}
+
+.IncodeFaceMatchResultContainer {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.IncodeFaceMatchHeader {
+  flex-direction: column;
+  align-items: center;
+  transition: opacity .3s ease-out;
+  display: flex;
+}
+
+.IncodeFaceMatchHeaderHidden {
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+.IncodeFaceMatchPhotoWrapper {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  transition: opacity .3s ease-out;
+  position: absolute;
+}
+
+.IncodeFaceMatchPhotoWrapperHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.IncodeFaceMatchResultVisible {
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  animation: .4s ease-out forwards resultFadeIn;
+  display: flex;
+  position: static;
+}
+
+.IncodeFaceMatchResultVisible .IncodeFaceMatchAnimatedIcon, .IncodeFaceMatchResultVisible .IncodeFaceMatchAnimatedResultTitle {
+  opacity: 1;
+  animation: none;
+}
+
+@keyframes resultFadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.IncodeFaceMatchResultContent {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeFaceMatchShowResult {
+  flex: 1;
+  min-height: auto;
+}
+
+.IncodeFaceMatchButtonContainer {
+  opacity: 0;
+  pointer-events: none;
+  width: 100%;
+  transition: opacity .4s ease-out, transform .4s ease-out;
+  transform: translateY(8px);
+}
+
+.IncodeFaceMatchButtonVisible {
+  opacity: 1;
+  pointer-events: auto;
+  animation: .4s ease-out fadeIn;
+  transform: translateY(0);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.IncodeFaceMatchTooltip {
+  background: var(--surface-neutral-50);
+  border: 1px solid var(--border-neutral-300);
+  height: 44px;
+  color: var(--text-body-primary);
+  text-align: center;
+  border-radius: 12px;
+  padding: 0 20px;
+  font-size: 16px;
+  line-height: 44px;
+  display: inline-block;
+  position: relative;
+}
+
+.IncodeFaceMatchTooltip:after {
+  content: "";
+  border-left: 9px solid #0000;
+  border-right: 9px solid #0000;
+  border-top: 9px solid var(--surface-neutral-50);
+  width: 0;
+  height: 0;
+  position: absolute;
+  bottom: -9px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.IncodeFaceMatchTooltip:before {
+  content: "";
+  border-left: 9px solid #0000;
+  border-right: 9px solid #0000;
+  border-top: 9px solid var(--border-neutral-300);
+  width: 0;
+  height: 0;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.IncodeFaceMatchAnimatedTitle {
+  text-align: center;
+  font-size: var(--text-2xl, 1.5rem);
+  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  color: var(--text-body-primary);
+  line-height: 125%;
+}
+
+:root {
+  --animation-duration: .8s;
+  --transition-delay: .2s;
+  --transition-duration: .25s;
+  --entrance-duration: .8s;
+  --entrance-delay: .45s;
+  --tooltip-duration: 1.6s;
+  --tooltip-show-delay: 1.25s;
+  --animation-delay: 2.85s;
+}
+
+@keyframes leftEntrance {
+  from {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes rightEntrance {
+  from {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes bottomEntrance {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 200px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+}
+
+@keyframes leftIn {
+  from {
+    opacity: 1;
+    left: 0;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes rightIn {
+  from {
+    opacity: 1;
+    right: 0;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    right: 50%;
+    transform: translateX(50%);
+  }
+}
+
+@keyframes bottomUp {
+  from {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, -225px);
+  }
+}
+
+@keyframes tooltipShowHide {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeInTitle {
+  from {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  to {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes fadeOutTitle {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes simpleFadeInTitle {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInIcon {
+  from {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  to {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes slideUpButton {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.IncodeFaceMatchPhotoContainer {
+  flex-direction: column;
+  align-items: center;
+  gap: 21px;
+  display: flex;
+  position: absolute;
+  top: 0;
+}
+
+.IncodeFaceMatchPhotoContainerHidden {
+  visibility: hidden;
+}
+
+.IncodeFaceMatchPhotoContainer > .IncodeFaceMatchTooltip {
+  opacity: 0;
+  animation: tooltipShowHide var(--tooltip-duration, 1.6s) linear forwards;
+  animation-delay: var(--tooltip-show-delay, 1.25s);
+}
+
+.IncodeFaceMatchLeftPhoto {
+  z-index: 2;
+  opacity: 0;
+  will-change: transform, opacity;
+  animation: leftEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, leftIn var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
+  animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
+  left: 0;
+  transform: translateX(-200px)translateZ(0);
+}
+
+.IncodeFaceMatchRightPhoto {
+  z-index: 1;
+  opacity: 0;
+  will-change: transform, opacity;
+  animation: rightEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, rightIn var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
+  animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
+  right: 0;
+  transform: translateX(200px)translateZ(0);
+}
+
+.IncodeFaceMatchBottomPhotoContainer {
+  opacity: 0;
+  z-index: 3;
+  will-change: transform, opacity;
+  animation: bottomEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, bottomUp var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
+  animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
+  flex-direction: column;
+  align-items: center;
+  gap: 21px;
+  display: flex;
+  position: absolute;
+  top: 225px;
+  left: 50%;
+  transform: translate(-50%, 200px)translateZ(0);
+}
+
+.IncodeFaceMatchBottomPhotoContainerHidden {
+  visibility: hidden;
+}
+
+.IncodeFaceMatchBottomPhotoContainer > .IncodeFaceMatchTooltip {
+  opacity: 0;
+  animation: tooltipShowHide var(--tooltip-duration, 1.6s) linear forwards;
+  animation-delay: var(--tooltip-show-delay, 1.25s);
+}
+
+.IncodeFaceMatchCircularImage {
+  object-fit: cover;
+  background-color: #ddd;
+  border-radius: 50%;
+  width: 160px;
+  height: 160px;
+}
+
+.IncodeFaceMatchAnimatedTitle {
+  animation: simpleFadeInTitle var(--transition-duration, .25s) ease-out forwards, fadeOutTitle var(--transition-duration, .25s) linear forwards;
+  animation-delay: 0s, calc(var(--animation-delay, 2.85s)  + var(--animation-duration, .8s)  + var(--transition-delay, .2s));
+  opacity: 0;
+}
+
+.IncodeFaceMatchAnimatedResultTitle {
+  text-align: center;
+  font-size: var(--text-2xl, 1.5rem);
+  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  color: var(--text-body-primary);
+  animation: fadeInTitle var(--transition-duration, .25s) linear forwards;
+  animation-delay: calc(var(--animation-delay, 2.85s)  + var(--animation-duration, .8s)  + var(--transition-delay, .2s));
+  opacity: 0;
+  line-height: 125%;
+}
+
+.IncodeFaceMatchAnimatedIcon {
+  animation: fadeInIcon var(--transition-duration, .25s) linear forwards;
+  animation-delay: calc(var(--animation-delay, 2.85s)  + var(--animation-duration, .8s)  + var(--transition-delay, .2s));
+  opacity: 0;
+}
+
+.IncodeFaceMatchAnimatedButton {
+  animation: slideUpButton var(--transition-duration, .25s) cubic-bezier(.25, .46, .45, .94) forwards;
+  animation-delay: calc(var(--animation-delay, 2.85s)  + var(--animation-duration, .8s)  + var(--transition-delay, .2s));
+  opacity: 0;
+}
+
 .IncodeFlowStart {
   width: 100%;
   height: 100%;
@@ -2045,6 +2494,114 @@
   }
 }
 
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
 .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
   width: 100%;
 }

package/dist/types/face-match/styles.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@incodetech/web",
-  "version": "0.0.0-dev-20260205-bb46959",
+  "version": "0.0.0-dev-20260206-cd4d6ec",
   "type": "module",
   "main": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -52,6 +52,13 @@
     },
     "./flow/styles.css": {
       "default": "./dist/flow/styles.css"
+    },
+    "./face-match": {
+      "types": "./dist/types/face-match.d.ts",
+      "import": "./dist/face-match/face-match.es.js"
+    },
+    "./face-match/styles.css": {
+      "default": "./dist/face-match/styles.css"
     }
   },
   "files": [
@@ -65,7 +72,7 @@
     "libphonenumber-js": "^1.11.0",
     "preact-custom-element": "^4.6.0",
     "tailwindcss": "^4.1.17",
-    "@incodetech/core": "0.0.0-dev-20260205-bb46959"
+    "@incodetech/core": "0.0.0-dev-20260206-cd4d6ec"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.53.3",