@incodetech/web 2.0.0-alpha.8 → 2.0.0-rc.0

package/dist/selfie/styles.css

@@ -1,10 +1,4 @@
-@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap";
-
-
-@layer incode-theme, incode-base, incode-components;
-
-/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
-
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -14,6 +8,20 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
@@ -28,16 +36,6 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
-      --tw-backdrop-blur: initial;
-      --tw-backdrop-brightness: initial;
-      --tw-backdrop-contrast: initial;
-      --tw-backdrop-grayscale: initial;
-      --tw-backdrop-hue-rotate: initial;
-      --tw-backdrop-invert: initial;
-      --tw-backdrop-opacity: initial;
-      --tw-backdrop-saturate: initial;
-      --tw-backdrop-sepia: initial;
-      --tw-ease: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -48,7 +46,33 @@
   }
 }
 
+@layer incode-theme;
+
 @layer incode-utilities {
+  .\!visible {
+    visibility: visible !important;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  .visible {
+    visibility: visible;
+  }
+
+  .sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -57,6 +81,10 @@
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .container {
     width: 100%;
   }
@@ -91,6 +119,10 @@
     }
   }
 
+  .m-auto {
+    margin: auto;
+  }
+
   .block {
     display: block;
   }
@@ -99,27 +131,130 @@
     display: flex;
   }
 
+  .grid {
+    display: grid;
+  }
+
   .hidden {
     display: none;
   }
 
+  .inline {
+    display: inline;
+  }
+
   .inline-flex {
     display: inline-flex;
   }
 
+  .max-w-\[420px\] {
+    max-width: 420px;
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
 
+  .bg-white {
+    background-color: var(--color-white, #fff);
+  }
+
+  .text-button-m-underlined {
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: auto;
+  }
+
+  .lowercase {
+    text-transform: lowercase;
+  }
+
   .uppercase {
     text-transform: uppercase;
   }
 
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -134,20 +269,32 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
-  }
-
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
     transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
   }
+}
+
+@layer incode-base, incode-components;
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
 
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
-    transition-timing-function: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
   }
 }
 
@@ -157,12 +304,12 @@
   display: flex;
 }
 
-.IncodeCameraButton .IncodeCameraButtonPath {
-  fill: var(--color-border-brand-500, var(--border-brand-500-static));
+.IncodeCameraButton .IncodeCameraButtonBackground {
+  fill: var(--color-icon-neutral-800-static, var(--icon-neutral-800-static));
 }
 
-.IncodeCameraButton .IncodeCameraButtonBackground {
-  fill: var(--color-surface-brand-50, var(--surface-brand-50));
+.IncodeCameraButton .IncodeCameraButtonRing, .IncodeCameraButton .IncodeCameraButtonPath {
+  fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
 }
 
 .IncodeCaptureContainer {
@@ -170,6 +317,7 @@
   flex: 1;
   justify-content: flex-start;
   align-items: center;
+  width: 100%;
   height: 100%;
   display: flex;
   position: relative;
@@ -217,130 +365,52 @@
   width: 100%;
   height: 100%;
   position: absolute;
-  transform: scaleX(-1);
-}
-
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingContainer {
-  flex-direction: column;
-  flex: 1;
-  animation: .4s ease-out fadeInScale;
-  display: flex;
-}
-
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingTitle {
-  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-leading: 125%;
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 125%;
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  --tw-tracking: -1px;
-  letter-spacing: -1px;
-  color: var(--color-text-body-primary, var(--text-body-primary));
-}
-
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingPrimaryIcon {
-  fill: var(--color-spinner-surface-primary, var(--spinner-surface-primary));
 }
 
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingSecondaryIcon {
-  fill: var(--color-spinner-surface-secondary, var(--spinner-surface-secondary));
-}
-
-.IncodeCaptureSuccessPage .IncodeCaptureSuccessContainer {
-  flex-direction: column;
-  flex: 1;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeErrorModalContent {
-  inset: var(--spacing-0, var(--spacing-none, 0px));
-  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));
-  z-index: 50;
-  background-color: var(--color-white, #fff);
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: fixed;
+.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
+  transform: scaleX(-1);
 }
 
-.IncodeErrorModalContent .IncodeErrorModalContentContainer {
-  width: 100%;
-  min-width: 320px;
-  height: 100%;
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  flex-direction: column;
+.IncodeCaptureCapturingPage .IncodeCaptureCapturingActions {
   justify-content: center;
-  align-items: center;
+  margin-top: auto;
   display: flex;
 }
 
-.IncodeErrorModalContent .IncodeErrorModalContentSpacer {
-  flex: 1;
+.IncodeCaptureVisuallyHidden {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
 }
 
-.IncodeErrorModalContent .IncodeErrorModalContentIconContainer {
+.IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
   flex-direction: column;
   flex: 1;
-  justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.IncodeErrorModalContent .IncodeErrorModalContentTitle {
+.IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
   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-leading: 114%;
+  --tw-leading: 125%;
   --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 114%;
+  line-height: 125%;
   font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  --tw-tracking: -.5px;
-  letter-spacing: -.5px;
-  color: var(--color-text-body-primary, var(--text-body-primary));
-}
-
-.IncodeErrorModalContent .IncodeErrorModalContentDescription {
-  text-align: center;
-  font-size: var(--text-base, 1rem);
-  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
-  --tw-leading: 114%;
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  line-height: 114%;
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  --tw-tracking: -.5px;
-  letter-spacing: -.5px;
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
-}
-
-.IncodeErrorModalContent .IncodeErrorModalContentAttemptsContainer {
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  display: flex;
-}
-
-.IncodeErrorModalContent .IncodeErrorModalContentAttemptsText {
-  text-align: center;
-  font-size: var(--text-lg, 1.125rem);
-  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
-  --tw-leading: 114%;
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  line-height: 114%;
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  --tw-tracking: -.5px;
-  letter-spacing: -.5px;
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  --tw-tracking: -1px;
+  letter-spacing: -1px;
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeFaceOutline {
+  width: 100%;
   height: 100%;
 }
 
@@ -351,7 +421,12 @@
   position: absolute;
 }
 
-.IncodeLoadingBorder.IncodeLoadingBorderSpinning {
+.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  position: absolute;
+}
+
+.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {
   animation: var(--animate-spin, spin 1s linear infinite);
 }
 
@@ -359,27 +434,26 @@
   transition: all 1s ease-in-out;
 }
 
-.IncodeManualCaptureButton {
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
+.IncodeSelfieManualCapture {
   flex-direction: column;
+  align-items: center;
   max-width: 275px;
   display: flex;
 }
 
-.IncodeManualCaptureButtonText {
+.IncodeSelfieManualCaptureText {
   text-align: center;
-  font-size: var(--text-base, 1rem);
-  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
-  --tw-leading: 1.14;
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  line-height: 1.14;
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
-.IncodeManualCaptureButtonButton {
+.IncodeSelfieManualCaptureButton {
   padding: var(--spacing-0, var(--spacing-none, 0px));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeNotification {
@@ -388,15 +462,26 @@
   display: flex;
 }
 
-.IncodeNotificationText {
+.IncodeNotification .IncodeNotificationText {
   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-leading: 1.2;
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 1.2;
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  font-family: var(--typography-feedback-family);
+  font-size: var(--typography-feedback-l-size);
+  font-weight: var(--typography-feedback-l-weight);
+  line-height: var(--typography-feedback-l-line-height);
+  letter-spacing: var(--typography-feedback-l-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeSelfieTutorial {
+  --brand-color: var(--surface-brand-500);
+}
+
+.IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg linearGradient#__lottie_element_29 stop {
+  stop-color: var(--brand-color);
+}
+
+.IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g:first-child > g > g > g:nth-child(2) > g:nth-child(3) > g > path, .IncodeSelfieTutorial .IncodeBaseTutorialAnimation svg > g > g > g:first-child > g:first-child > g > g > g:nth-child(2) > g:first-child > g > path {
+  fill: var(--brand-color);
 }
 
 @property --tw-rotate-x {
@@ -430,124 +515,153 @@
   initial-value: solid;
 }
 
-@property --tw-outline-style {
+@property --tw-shadow {
   syntax: "*";
   inherits: false;
-  initial-value: solid;
+  initial-value: 0 0 #0000;
 }
 
-@property --tw-blur {
+@property --tw-shadow-color {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
 }
 
-@property --tw-contrast {
+@property --tw-inset-shadow {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-@property --tw-grayscale {
+@property --tw-inset-shadow-color {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-hue-rotate {
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-invert {
+@property --tw-ring-shadow {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-@property --tw-opacity {
+@property --tw-inset-ring-color {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-saturate {
+@property --tw-inset-ring-shadow {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-@property --tw-sepia {
+@property --tw-ring-inset {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-drop-shadow {
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: #fff;
 }
 
-@property --tw-drop-shadow-color {
+@property --tw-ring-offset-shadow {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
+@property --tw-outline-style {
+  syntax: "*";
   inherits: false;
-  initial-value: 100%;
+  initial-value: solid;
 }
 
-@property --tw-drop-shadow-size {
+@property --tw-blur {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-blur {
+@property --tw-brightness {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-brightness {
+@property --tw-contrast {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-contrast {
+@property --tw-grayscale {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-grayscale {
+@property --tw-hue-rotate {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-hue-rotate {
+@property --tw-invert {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-invert {
+@property --tw-opacity {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-opacity {
+@property --tw-saturate {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-saturate {
+@property --tw-sepia {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-backdrop-sepia {
+@property --tw-drop-shadow {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-ease {
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
   syntax: "*";
   inherits: false
 }