@incodetech/web 0.0.0-dev-20260930-413fa2cd → 0.0.0-dev-20260930-24018c33

package/dist/face-match/styles.css

@@ -1,536 +1,2 @@
 /*! 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)))) {
-    .IncodeComponent, .IncodeComponent *, .IncodeComponent :before, .IncodeComponent :after, .IncodeComponent ::backdrop {
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-    }
-  }
-}
-
-@layer incode-theme, incode-utilities, incode-base, incode-components;
-
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes incodeToastFadeInOut {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -20px);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translate(-50%);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translate(-50%);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -20px);
-  }
-}
-
-.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 {
-  width: 100%;
-  min-height: var(--face-match-animation-container-min-h);
-  flex: 1;
-  display: flex;
-  position: relative;
-  overflow: clip;
-}
-
-.IncodeFaceMatchContainer {
-  width: 100%;
-  height: 100%;
-  min-height: var(--face-match-container-min-h);
-  flex: 1;
-  position: relative;
-}
-
-.IncodeFaceMatchResultContainer {
-  top: var(--spacing-0, var(--spacing-none, 0px));
-  right: var(--spacing-0, var(--spacing-none, 0px));
-  bottom: var(--spacing-0, var(--spacing-none, 0px));
-  left: var(--spacing-0, var(--spacing-none, 0px));
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
-  flex-direction: column;
-  display: flex;
-  position: absolute;
-}
-
-.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;
-}
-
-.IncodeFaceMatchResultIcon {
-  height: var(--spacing-40, var(--spacing-40, 40px));
-  width: var(--spacing-40, var(--spacing-40, 40px));
-}
-
-@keyframes resultFadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.IncodeFaceMatchResultContent {
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-}
-
-.IncodeFaceMatchShowResult {
-  flex: 1;
-  min-height: auto;
-}
-
-.IncodeFaceMatchLivenessContainer {
-  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));
-  opacity: 0;
-  pointer-events: none;
-  justify-content: center;
-  width: 100%;
-  transition: opacity .4s ease-out, transform .4s ease-out;
-  display: flex;
-  transform: translateY(8px);
-}
-
-.IncodeFaceMatchLivenessVisible {
-  opacity: 1;
-  pointer-events: auto;
-  animation: .4s ease-out fadeIn;
-  transform: translateY(0);
-}
-
-.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);
-}
-
-.IncodeFaceMatchTooltip {
-  padding-inline: var(--spacing-20, var(--spacing-20, 20px));
-  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));
-  text-align: center;
-  font-family: var(--typography-tooltip-family);
-  font-size: var(--typography-tooltip-m-size);
-  font-weight: var(--typography-tooltip-m-weight);
-  line-height: var(--typography-tooltip-m-line-height);
-  letter-spacing: var(--typography-tooltip-m-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  height: var(--face-match-tooltip-height);
-  line-height: var(--face-match-tooltip-height);
-  display: inline-block;
-  position: relative;
-}
-
-.IncodeFaceMatchTooltip:after {
-  content: "";
-  border-left: var(--face-match-tooltip-arrow-size) solid transparent;
-  border-right: var(--face-match-tooltip-arrow-size) solid transparent;
-  border-top: var(--face-match-tooltip-arrow-size) solid var(--surface-neutral-50);
-  width: 0;
-  height: 0;
-  position: absolute;
-  bottom: -9px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.IncodeFaceMatchTooltip:before {
-  content: "";
-  border-left: var(--face-match-tooltip-arrow-size) solid transparent;
-  border-right: var(--face-match-tooltip-arrow-size) solid transparent;
-  border-top: var(--face-match-tooltip-arrow-size) solid var(--border-neutral-100);
-  width: 0;
-  height: 0;
-  position: absolute;
-  bottom: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.IncodeFaceMatchAnimatedTitle {
-  text-align: center;
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h2-size);
-  font-weight: var(--typography-headline-h2-weight);
-  line-height: var(--typography-headline-h2-line-height);
-  letter-spacing: var(--typography-headline-h2-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-}
-
-.IncodeFaceMatchContainer {
-  --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 {
-  align-items: center;
-  gap: var(--face-match-photo-gap);
-  flex-direction: column;
-  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 {
-  align-items: center;
-  gap: var(--face-match-photo-gap);
-  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;
-  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 {
-  border-radius: var(--radius-full, var(--border-radius-full));
-  object-fit: cover;
-  width: var(--face-match-photo-size);
-  height: var(--face-match-photo-size);
-  background-color: var(--face-match-photo-placeholder-bg);
-}
-
-.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));
-  line-height: var(--face-match-title-line-height);
-  color: var(--text-body-800-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;
-}
-
-.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;
-}
-
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false
-}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.IncodeComponent,.IncodeComponent *,.IncodeComponent :before,.IncodeComponent :after,.IncodeComponent ::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer incode-theme,incode-utilities,incode-base,incode-components;@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes incodeToastFadeInOut{0%{opacity:0;transform:translate(-50%,-20px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}.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{width:100%;min-height:var(--face-match-animation-container-min-h);flex:1;display:flex;position:relative;overflow:clip}.IncodeFaceMatchContainer{width:100%;height:100%;min-height:var(--face-match-container-min-h);flex:1;position:relative}.IncodeFaceMatchResultContainer{top:var(--spacing-0,var(--spacing-none,0px));right:var(--spacing-0,var(--spacing-none,0px));bottom:var(--spacing-0,var(--spacing-none,0px));left:var(--spacing-0,var(--spacing-none,0px));justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;display:flex;position:absolute}.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}.IncodeFaceMatchResultIcon{height:var(--spacing-40,var(--spacing-40,40px));width:var(--spacing-40,var(--spacing-40,40px))}@keyframes resultFadeIn{0%{opacity:0}to{opacity:1}}.IncodeFaceMatchResultContent{justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;width:100%;display:flex}.IncodeFaceMatchShowResult{flex:1;min-height:auto}.IncodeFaceMatchLivenessContainer{margin-bottom:var(--spacing-32,var(--spacing-32,32px));opacity:0;pointer-events:none;justify-content:center;width:100%;transition:opacity .4s ease-out,transform .4s ease-out;display:flex;transform:translateY(8px)}.IncodeFaceMatchLivenessVisible{opacity:1;pointer-events:auto;animation:.4s ease-out fadeIn;transform:translateY(0)}.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)}.IncodeFaceMatchTooltip{padding-inline:var(--spacing-20,var(--spacing-20,20px));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));text-align:center;font-family:var(--typography-tooltip-family);font-size:var(--typography-tooltip-m-size);font-weight:var(--typography-tooltip-m-weight);line-height:var(--typography-tooltip-m-line-height);letter-spacing:var(--typography-tooltip-m-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary));height:var(--face-match-tooltip-height);line-height:var(--face-match-tooltip-height);display:inline-block;position:relative}.IncodeFaceMatchTooltip:after{content:"";border-left:var(--face-match-tooltip-arrow-size) solid transparent;border-right:var(--face-match-tooltip-arrow-size) solid transparent;border-top:var(--face-match-tooltip-arrow-size) solid var(--surface-neutral-50);width:0;height:0;position:absolute;bottom:-9px;left:50%;transform:translate(-50%)}.IncodeFaceMatchTooltip:before{content:"";border-left:var(--face-match-tooltip-arrow-size) solid transparent;border-right:var(--face-match-tooltip-arrow-size) solid transparent;border-top:var(--face-match-tooltip-arrow-size) solid var(--border-neutral-100);width:0;height:0;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.IncodeFaceMatchAnimatedTitle{text-align:center;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h2-size);font-weight:var(--typography-headline-h2-weight);line-height:var(--typography-headline-h2-line-height);letter-spacing:var(--typography-headline-h2-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary))}.IncodeFaceMatchContainer{--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{0%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(0)}}@keyframes rightEntrance{0%{opacity:0;transform:translate(200px)}to{opacity:1;transform:translate(0)}}@keyframes bottomEntrance{0%{opacity:0;transform:translate(-50%,200px)}to{opacity:1;transform:translate(-50%)}}@keyframes leftIn{0%{opacity:1;left:0;transform:translate(0)}to{opacity:0;left:50%;transform:translate(-50%)}}@keyframes rightIn{0%{opacity:1;right:0;transform:translate(0)}to{opacity:0;right:50%;transform:translate(50%)}}@keyframes bottomUp{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-225px)}}@keyframes tooltipShowHide{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes fadeInTitle{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes fadeOutTitle{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes simpleFadeInTitle{0%{opacity:0}to{opacity:1}}@keyframes fadeInIcon{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes slideUpButton{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.IncodeFaceMatchPhotoContainer{align-items:center;gap:var(--face-match-photo-gap);flex-direction:column;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:translate(-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:translate(200px)translateZ(0)}.IncodeFaceMatchBottomPhotoContainer{align-items:center;gap:var(--face-match-photo-gap);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;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{border-radius:var(--radius-full,var(--border-radius-full));object-fit:cover;width:var(--face-match-photo-size);height:var(--face-match-photo-size);background-color:var(--face-match-photo-placeholder-bg)}.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));line-height:var(--face-match-title-line-height);color:var(--text-body-800-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}.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}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}

package/dist/face-match/styles.css.js

@@ -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-font-weight: 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    transform: translateY(8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\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.IncodeFaceMatchPage {\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.IncodeFaceMatchPage .IncodeFaceMatchContent {\n  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n}\n\n.IncodeFaceMatchAnimationContainer {\n  width: 100%;\n  min-height: var(--face-match-animation-container-min-h);\n  flex: 1;\n  display: flex;\n  position: relative;\n  overflow: clip;\n}\n\n.IncodeFaceMatchContainer {\n  width: 100%;\n  height: 100%;\n  min-height: var(--face-match-container-min-h);\n  flex: 1;\n  position: relative;\n}\n\n.IncodeFaceMatchResultContainer {\n  top: var(--spacing-0, var(--spacing-none, 0px));\n  right: var(--spacing-0, var(--spacing-none, 0px));\n  bottom: var(--spacing-0, var(--spacing-none, 0px));\n  left: var(--spacing-0, var(--spacing-none, 0px));\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  display: flex;\n  position: absolute;\n}\n\n.IncodeFaceMatchHeader {\n  flex-direction: column;\n  align-items: center;\n  transition: opacity .3s ease-out;\n  display: flex;\n}\n\n.IncodeFaceMatchHeaderHidden {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n}\n\n.IncodeFaceMatchPhotoWrapper {\n  inset: var(--spacing-0, var(--spacing-none, 0px));\n  transition: opacity .3s ease-out;\n  position: absolute;\n}\n\n.IncodeFaceMatchPhotoWrapperHidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.IncodeFaceMatchResultVisible {\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  animation: .4s ease-out forwards resultFadeIn;\n  display: flex;\n  position: static;\n}\n\n.IncodeFaceMatchResultVisible .IncodeFaceMatchAnimatedIcon, .IncodeFaceMatchResultVisible .IncodeFaceMatchAnimatedResultTitle {\n  opacity: 1;\n  animation: none;\n}\n\n.IncodeFaceMatchResultIcon {\n  height: var(--spacing-40, var(--spacing-40, 40px));\n  width: var(--spacing-40, var(--spacing-40, 40px));\n}\n\n@keyframes resultFadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n.IncodeFaceMatchResultContent {\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  width: 100%;\n  display: flex;\n}\n\n.IncodeFaceMatchShowResult {\n  flex: 1;\n  min-height: auto;\n}\n\n.IncodeFaceMatchLivenessContainer {\n  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));\n  opacity: 0;\n  pointer-events: none;\n  justify-content: center;\n  width: 100%;\n  transition: opacity .4s ease-out, transform .4s ease-out;\n  display: flex;\n  transform: translateY(8px);\n}\n\n.IncodeFaceMatchLivenessVisible {\n  opacity: 1;\n  pointer-events: auto;\n  animation: .4s ease-out fadeIn;\n  transform: translateY(0);\n}\n\n.IncodeFaceMatchButtonContainer {\n  opacity: 0;\n  pointer-events: none;\n  width: 100%;\n  transition: opacity .4s ease-out, transform .4s ease-out;\n  transform: translateY(8px);\n}\n\n.IncodeFaceMatchButtonVisible {\n  opacity: 1;\n  pointer-events: auto;\n  animation: .4s ease-out fadeIn;\n  transform: translateY(0);\n}\n\n.IncodeFaceMatchTooltip {\n  padding-inline: var(--spacing-20, var(--spacing-20, 20px));\n  border-radius: var(--radius-medium, var(--border-radius-medium));\n  border-style: var(--tw-border-style);\n  border-width: 1px;\n  border-color: var(--color-border-neutral-100, var(--border-neutral-100));\n  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));\n  text-align: center;\n  font-family: var(--typography-tooltip-family);\n  font-size: var(--typography-tooltip-m-size);\n  font-weight: var(--typography-tooltip-m-weight);\n  line-height: var(--typography-tooltip-m-line-height);\n  letter-spacing: var(--typography-tooltip-m-letter-spacing);\n  color: var(--color-text-body-primary, var(--text-body-800-primary));\n  height: var(--face-match-tooltip-height);\n  line-height: var(--face-match-tooltip-height);\n  display: inline-block;\n  position: relative;\n}\n\n.IncodeFaceMatchTooltip:after {\n  content: \"\";\n  border-left: var(--face-match-tooltip-arrow-size) solid transparent;\n  border-right: var(--face-match-tooltip-arrow-size) solid transparent;\n  border-top: var(--face-match-tooltip-arrow-size) solid var(--surface-neutral-50);\n  width: 0;\n  height: 0;\n  position: absolute;\n  bottom: -9px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.IncodeFaceMatchTooltip:before {\n  content: \"\";\n  border-left: var(--face-match-tooltip-arrow-size) solid transparent;\n  border-right: var(--face-match-tooltip-arrow-size) solid transparent;\n  border-top: var(--face-match-tooltip-arrow-size) solid var(--border-neutral-100);\n  width: 0;\n  height: 0;\n  position: absolute;\n  bottom: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.IncodeFaceMatchAnimatedTitle {\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.IncodeFaceMatchContainer {\n  --animation-duration: .8s;\n  --transition-delay: .2s;\n  --transition-duration: .25s;\n  --entrance-duration: .8s;\n  --entrance-delay: .45s;\n  --tooltip-duration: 1.6s;\n  --tooltip-show-delay: 1.25s;\n  --animation-delay: 2.85s;\n}\n\n@keyframes leftEntrance {\n  from {\n    opacity: 0;\n    transform: translateX(-200px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes rightEntrance {\n  from {\n    opacity: 0;\n    transform: translateX(200px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@keyframes bottomEntrance {\n  from {\n    opacity: 0;\n    transform: translate(-50%, 200px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n}\n\n@keyframes leftIn {\n  from {\n    opacity: 1;\n    left: 0;\n    transform: translateX(0);\n  }\n\n  to {\n    opacity: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes rightIn {\n  from {\n    opacity: 1;\n    right: 0;\n    transform: translateX(0);\n  }\n\n  to {\n    opacity: 0;\n    right: 50%;\n    transform: translateX(50%);\n  }\n}\n\n@keyframes bottomUp {\n  from {\n    opacity: 1;\n    transform: translate(-50%);\n  }\n\n  to {\n    opacity: 0;\n    transform: translate(-50%, -225px);\n  }\n}\n\n@keyframes tooltipShowHide {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes fadeInTitle {\n  from {\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n@keyframes fadeOutTitle {\n  from {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n}\n\n@keyframes simpleFadeInTitle {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeInIcon {\n  from {\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n}\n\n@keyframes slideUpButton {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.IncodeFaceMatchPhotoContainer {\n  align-items: center;\n  gap: var(--face-match-photo-gap);\n  flex-direction: column;\n  display: flex;\n  position: absolute;\n  top: 0;\n}\n\n.IncodeFaceMatchPhotoContainerHidden {\n  visibility: hidden;\n}\n\n.IncodeFaceMatchPhotoContainer > .IncodeFaceMatchTooltip {\n  opacity: 0;\n  animation: tooltipShowHide var(--tooltip-duration, 1.6s) linear forwards;\n  animation-delay: var(--tooltip-show-delay, 1.25s);\n}\n\n.IncodeFaceMatchLeftPhoto {\n  z-index: 2;\n  opacity: 0;\n  will-change: transform, opacity;\n  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;\n  animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);\n  left: 0;\n  transform: translateX(-200px) translateZ(0);\n}\n\n.IncodeFaceMatchRightPhoto {\n  z-index: 1;\n  opacity: 0;\n  will-change: transform, opacity;\n  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;\n  animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);\n  right: 0;\n  transform: translateX(200px) translateZ(0);\n}\n\n.IncodeFaceMatchBottomPhotoContainer {\n  align-items: center;\n  gap: var(--face-match-photo-gap);\n  opacity: 0;\n  z-index: 3;\n  will-change: transform, opacity;\n  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;\n  animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);\n  flex-direction: column;\n  display: flex;\n  position: absolute;\n  top: 225px;\n  left: 50%;\n  transform: translate(-50%, 200px) translateZ(0);\n}\n\n.IncodeFaceMatchBottomPhotoContainerHidden {\n  visibility: hidden;\n}\n\n.IncodeFaceMatchBottomPhotoContainer > .IncodeFaceMatchTooltip {\n  opacity: 0;\n  animation: tooltipShowHide var(--tooltip-duration, 1.6s) linear forwards;\n  animation-delay: var(--tooltip-show-delay, 1.25s);\n}\n\n.IncodeFaceMatchCircularImage {\n  border-radius: var(--radius-full, var(--border-radius-full));\n  object-fit: cover;\n  width: var(--face-match-photo-size);\n  height: var(--face-match-photo-size);\n  background-color: var(--face-match-photo-placeholder-bg);\n}\n\n.IncodeFaceMatchAnimatedTitle {\n  animation: simpleFadeInTitle var(--transition-duration, .25s) ease-out forwards, fadeOutTitle var(--transition-duration, .25s) linear forwards;\n  animation-delay: 0s, calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));\n  opacity: 0;\n}\n\n.IncodeFaceMatchAnimatedResultTitle {\n  text-align: center;\n  font-size: var(--text-2xl, 1.5rem);\n  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));\n  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));\n  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));\n  line-height: var(--face-match-title-line-height);\n  color: var(--text-body-800-primary);\n  animation: fadeInTitle var(--transition-duration, .25s) linear forwards;\n  animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));\n  opacity: 0;\n}\n\n.IncodeFaceMatchAnimatedIcon {\n  animation: fadeInIcon var(--transition-duration, .25s) linear forwards;\n  animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));\n  opacity: 0;\n}\n\n.IncodeFaceMatchAnimatedButton {\n  animation: slideUpButton var(--transition-duration, .25s) cubic-bezier(.25, .46, .45, .94) forwards;\n  animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));\n  opacity: 0;\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false\n}\n";
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){.IncodeComponent,.IncodeComponent *,.IncodeComponent :before,.IncodeComponent :after,.IncodeComponent ::backdrop{--tw-border-style:solid;--tw-font-weight:initial}}}@layer incode-theme,incode-utilities,incode-base,incode-components;@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes incodeToastFadeInOut{0%{opacity:0;transform:translate(-50%,-20px)}15%{opacity:1;transform:translate(-50%)}85%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}.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{width:100%;min-height:var(--face-match-animation-container-min-h);flex:1;display:flex;position:relative;overflow:clip}.IncodeFaceMatchContainer{width:100%;height:100%;min-height:var(--face-match-container-min-h);flex:1;position:relative}.IncodeFaceMatchResultContainer{top:var(--spacing-0,var(--spacing-none,0px));right:var(--spacing-0,var(--spacing-none,0px));bottom:var(--spacing-0,var(--spacing-none,0px));left:var(--spacing-0,var(--spacing-none,0px));justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;display:flex;position:absolute}.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}.IncodeFaceMatchResultIcon{height:var(--spacing-40,var(--spacing-40,40px));width:var(--spacing-40,var(--spacing-40,40px))}@keyframes resultFadeIn{0%{opacity:0}to{opacity:1}}.IncodeFaceMatchResultContent{justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;width:100%;display:flex}.IncodeFaceMatchShowResult{flex:1;min-height:auto}.IncodeFaceMatchLivenessContainer{margin-bottom:var(--spacing-32,var(--spacing-32,32px));opacity:0;pointer-events:none;justify-content:center;width:100%;transition:opacity .4s ease-out,transform .4s ease-out;display:flex;transform:translateY(8px)}.IncodeFaceMatchLivenessVisible{opacity:1;pointer-events:auto;animation:.4s ease-out fadeIn;transform:translateY(0)}.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)}.IncodeFaceMatchTooltip{padding-inline:var(--spacing-20,var(--spacing-20,20px));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));text-align:center;font-family:var(--typography-tooltip-family);font-size:var(--typography-tooltip-m-size);font-weight:var(--typography-tooltip-m-weight);line-height:var(--typography-tooltip-m-line-height);letter-spacing:var(--typography-tooltip-m-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary));height:var(--face-match-tooltip-height);line-height:var(--face-match-tooltip-height);display:inline-block;position:relative}.IncodeFaceMatchTooltip:after{content:\"\";border-left:var(--face-match-tooltip-arrow-size) solid transparent;border-right:var(--face-match-tooltip-arrow-size) solid transparent;border-top:var(--face-match-tooltip-arrow-size) solid var(--surface-neutral-50);width:0;height:0;position:absolute;bottom:-9px;left:50%;transform:translate(-50%)}.IncodeFaceMatchTooltip:before{content:\"\";border-left:var(--face-match-tooltip-arrow-size) solid transparent;border-right:var(--face-match-tooltip-arrow-size) solid transparent;border-top:var(--face-match-tooltip-arrow-size) solid var(--border-neutral-100);width:0;height:0;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}.IncodeFaceMatchAnimatedTitle{text-align:center;font-family:var(--typography-headline-family);font-size:var(--typography-headline-h2-size);font-weight:var(--typography-headline-h2-weight);line-height:var(--typography-headline-h2-line-height);letter-spacing:var(--typography-headline-h2-letter-spacing);color:var(--color-text-body-primary,var(--text-body-800-primary))}.IncodeFaceMatchContainer{--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{0%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(0)}}@keyframes rightEntrance{0%{opacity:0;transform:translate(200px)}to{opacity:1;transform:translate(0)}}@keyframes bottomEntrance{0%{opacity:0;transform:translate(-50%,200px)}to{opacity:1;transform:translate(-50%)}}@keyframes leftIn{0%{opacity:1;left:0;transform:translate(0)}to{opacity:0;left:50%;transform:translate(-50%)}}@keyframes rightIn{0%{opacity:1;right:0;transform:translate(0)}to{opacity:0;right:50%;transform:translate(50%)}}@keyframes bottomUp{0%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-225px)}}@keyframes tooltipShowHide{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes fadeInTitle{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes fadeOutTitle{0%{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}@keyframes simpleFadeInTitle{0%{opacity:0}to{opacity:1}}@keyframes fadeInIcon{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}@keyframes slideUpButton{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.IncodeFaceMatchPhotoContainer{align-items:center;gap:var(--face-match-photo-gap);flex-direction:column;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:translate(-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:translate(200px)translateZ(0)}.IncodeFaceMatchBottomPhotoContainer{align-items:center;gap:var(--face-match-photo-gap);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;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{border-radius:var(--radius-full,var(--border-radius-full));object-fit:cover;width:var(--face-match-photo-size);height:var(--face-match-photo-size);background-color:var(--face-match-photo-placeholder-bg)}.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));line-height:var(--face-match-title-line-height);color:var(--text-body-800-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}.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}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}";

package/dist/field-comparison/styles.css

@@ -1,28 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-.IncodeFieldComparisonPage {
-  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
-  animation-fill-mode: both;
-}
-
-.IncodeFieldComparisonPage .IncodeSrOnly {
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-.IncodeFieldComparisonPage .IncodeFieldComparisonForm {
-  margin-top: var(--spacing-32, var(--spacing-32, 32px));
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  display: flex;
-}
+.IncodeFieldComparisonPage{animation:fadeIn var(--motion-fade-in-duration,.7s) ease-out;animation-fill-mode:both}.IncodeFieldComparisonPage .IncodeSrOnly{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.IncodeFieldComparisonPage .IncodeFieldComparisonForm{margin-top:var(--spacing-32,var(--spacing-32,32px));justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;flex:1;width:100%;display:flex}

package/dist/field-comparison/styles.css.js

@@ -1 +1 @@
-export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeFieldComparisonPage {\n  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;\n  animation-fill-mode: both;\n}\n\n.IncodeFieldComparisonPage .IncodeSrOnly {\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.IncodeFieldComparisonPage .IncodeFieldComparisonForm {\n  margin-top: var(--spacing-32, var(--spacing-32, 32px));\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-16, var(--spacing-16, 16px));\n  flex-direction: column;\n  flex: 1;\n  width: 100%;\n  display: flex;\n}\n";
+export default "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n.IncodeFieldComparisonPage{animation:fadeIn var(--motion-fade-in-duration,.7s) ease-out;animation-fill-mode:both}.IncodeFieldComparisonPage .IncodeSrOnly{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.IncodeFieldComparisonPage .IncodeFieldComparisonForm{margin-top:var(--spacing-32,var(--spacing-32,32px));justify-content:center;align-items:center;gap:var(--spacing-16,var(--spacing-16,16px));flex-direction:column;flex:1;width:100%;display:flex}";