@aws-amplify/ui-react 5.3.1 → 6.0.0

package/dist/styles/liveness.layer.css

@@ -0,0 +1,376 @@
+@layer amplify.components {
+.amplify-liveness-cancel-container {
+  z-index: 2;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  right: var(--amplify-space-medium);
+}
+
+.amplify-liveness-cancel-button {
+  background-color: var(--amplify-colors-background-primary);
+}
+
+.amplify-liveness-fade-out {
+  animation-name: amplify-liveness-animation-fadeout;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes amplify-liveness-animation-fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.amplify-liveness-camera-module {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--amplify-components-liveness-camera-module-background-color);
+  border: 1px solid var(--amplify-colors-neutral-40);
+  position: relative;
+}
+
+.amplify-liveness-camera-module--mobile {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.amplify-liveness-video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.amplify-liveness-freshness-canvas {
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.amplify-liveness-loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.amplify-liveness-oval-canvas {
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.amplify-liveness-oval-canvas--mobile {
+  position: fixed;
+}
+
+.amplify-liveness-video-anchor {
+  position: relative;
+  width: 100%;
+}
+
+.amplify-liveness-recording-icon-container {
+  z-index: 1;
+  position: absolute;
+  top: var(--amplify-space-medium);
+  left: var(--amplify-space-medium);
+}
+
+.amplify-liveness-recording-icon {
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-xxs);
+  gap: var(--amplify-space-xxs);
+  border-radius: var(--amplify-radii-small);
+}
+
+.amplify-liveness-instruction-overlay {
+  z-index: 1;
+}
+
+.amplify-liveness-countdown-container {
+  background-color: var(--amplify-colors-background-primary);
+  border-radius: 100%;
+  padding: var(--amplify-space-xs);
+}
+
+.amplify-liveness-instruction-list {
+  flex-direction: column;
+}
+.amplify-liveness-instruction-list li {
+  display: flex;
+}
+
+.amplify-liveness-toast {
+  background-color: var(--amplify-colors-background-primary);
+  padding: var(--amplify-space-small);
+  border-radius: var(--amplify-radii-medium);
+}
+
+.amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-primary);
+  text-align: center;
+  flex-direction: column;
+}
+
+.amplify-liveness-toast--large {
+  font-size: var(--amplify-font-sizes-xl);
+}
+
+.amplify-liveness-toast--primary {
+  background-color: var(--amplify-colors-primary-80);
+}
+.amplify-liveness-toast--primary .amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-inverse);
+  text-align: center;
+  flex-direction: column;
+}
+
+.amplify-liveness-toast__container {
+  gap: var(--amplify-space-xs);
+  flex-direction: column;
+  align-items: center;
+}
+
+.amplify-liveness-toast--error {
+  background-color: var(--amplify-colors-red-80);
+}
+.amplify-liveness-toast--error .amplify-liveness-toast__message {
+  color: var(--amplify-colors-font-inverse);
+}
+
+.amplify-liveness-match-indicator {
+  display: block;
+  width: min(70%, 200px);
+  position: relative;
+  --amplify-liveness-match-indicator-transition: transform 0.2s linear;
+}
+
+.amplify-liveness-match-indicator__bar {
+  --percentage: 0;
+  display: block;
+  width: 100%;
+  height: var(--amplify-space-medium);
+  border-radius: var(--amplify-radii-medium);
+  background: var(--amplify-colors-white);
+  position: relative;
+  overflow: hidden;
+  /* 
+    This translateZ transform fixes in issue in Safari where the bar::after
+    element doesn't appear clipped from overflow: hidden here */
+  transform: translateZ(0);
+  border: 1px solid var(--amplify-colors-border-tertiary);
+}
+
+.amplify-liveness-match-indicator__pin {
+  --percentage: 0;
+  display: block;
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(var(--percentage), 0);
+  transition: var(--amplify-liveness-match-indicator-transition);
+}
+
+.amplify-liveness-match-indicator__bar:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: var(--amplify-colors-primary-40);
+  left: -100%;
+  transform: translate(var(--percentage), 0);
+  transition: var(--amplify-liveness-match-indicator-transition);
+}
+
+.amplify-liveness-match-indicator__pin:after {
+  --height: var(--amplify-space-xl);
+  position: absolute;
+  content: "";
+  width: var(--amplify-space-small);
+  height: var(--height);
+  border-radius: var(--amplify-radii-medium);
+  background: var(--amplify-colors-primary-80);
+  left: 0;
+  top: 0;
+  transform: translate(-50%, calc(var(--height) / 2 * -1));
+}
+
+.amplify-liveness-figures {
+  flex-wrap: wrap;
+}
+
+.amplify-liveness-figure {
+  flex-direction: column;
+  gap: 0;
+}
+
+.amplify-liveness-figure__caption {
+  padding: var(--amplify-space-xxs);
+}
+
+.amplify-liveness-figure__caption--success {
+  background-color: var(--amplify-colors-background-success);
+  color: var(--amplify-colors-font-success);
+}
+
+.amplify-liveness-figure__caption--error {
+  background-color: var(--amplify-colors-background-error);
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-figure__image {
+  background-color: #fff;
+  border: 1px solid var(--amplify-colors-border-primary);
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+.amplify-liveness-figure__image svg {
+  display: block;
+}
+
+.amplify-liveness-figure__image--success {
+  border-color: var(--amplify-colors-green-90);
+}
+
+.amplify-liveness-figure__image--error {
+  border-color: var(--amplify-colors-border-error);
+}
+
+.amplify-liveness-figure__icon {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.amplify-liveness-landscape-error-modal {
+  background-color: var(--amplify-colors-background-primary);
+  direction: column;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.amplify-liveness-landscape-error-modal__header {
+  font-size: large;
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-landscape-error-modal__button {
+  justify-content: center;
+}
+
+.amplify-liveness-start-screen-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.amplify-liveness-start-screen-header__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-start-screen-header__body {
+  color: var(--amplify-colors-font-primary);
+}
+
+.amplify-liveness-start-screen-warning {
+  color: var(--amplify-colors-orange-80);
+  background-color: var(--amplify-colors-orange-20);
+  align-items: center;
+}
+
+.amplify-liveness-start-screen-instructions__heading {
+  color: var(--amplify-colors-font-primary);
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-overlay-opaque {
+  background-color: var(--amplify-colors-overlay-40);
+}
+
+.amplify-liveness-overlay {
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: var(--amplify-space-xl);
+}
+
+.amplify-liveness-error-modal {
+  gap: var(--amplify-space-xs);
+  align-items: center;
+  justify-content: center;
+  color: var(--amplify-colors-font-error);
+}
+
+.amplify-liveness-error-modal__heading {
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+.amplify-liveness-hint__text {
+  align-items: center;
+  gap: var(--amplify-space-xs);
+}
+
+.amplify-liveness-popover {
+  position: relative;
+  cursor: pointer;
+}
+
+.amplify-liveness-popover__anchor {
+  position: absolute;
+  top: 26px;
+  left: 3px;
+  z-index: 3;
+  border-style: solid;
+  border-width: 0 9px 9px 9px;
+  border-color: transparent transparent var(--amplify-colors-background-primary) transparent;
+}
+
+.amplify-liveness-popover__anchor-secondary {
+  position: absolute;
+  top: 24px;
+  left: 2px;
+  z-index: 2;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent var(--amplify-colors-border-secondary) transparent;
+}
+
+.amplify-liveness-popover__container {
+  position: absolute;
+  background-color: var(--amplify-colors-background-primary);
+  color: var(--amplify-colors-font-primary);
+  flex-direction: row;
+  font-size: var(--amplify-font-sizes-xs);
+  padding: var(--amplify-space-small);
+  top: 33px;
+  width: 240px;
+  border: 1px solid var(--amplify-colors-border-secondary);
+  border-radius: 2px;
+}
+}

package/dist/styles/loader.css

@@ -0,0 +1,108 @@
+.amplify-loader {
+  width: var(--amplify-components-loader-width);
+  height: var(--amplify-components-loader-height);
+  font-size: var(--amplify-components-loader-font-size);
+  fill: none;
+  stroke: var(--amplify-components-loader-stroke-empty);
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-font-size
+  );
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-stroke-width
+  );
+}
+.amplify-loader circle:last-of-type {
+  transform-origin: center center;
+  animation-name: amplify-loader-circular;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: var(--amplify-components-loader-animation-duration);
+  stroke: var(--amplify-components-loader-stroke-filled);
+  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
+}
+@media (prefers-reduced-motion) {
+  .amplify-loader circle:last-of-type {
+    animation: none;
+    stroke-dasharray: 100% 200%;
+    stroke-dashoffset: 50%;
+  }
+}
+.amplify-loader line:last-of-type {
+  stroke: var(--amplify-components-loader-linear-stroke-filled);
+  stroke-dasharray: 50% 200%;
+  animation-name: amplify-loader-linear;
+  animation-duration: var(--amplify-components-loader-linear-animation-duration);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@media (prefers-reduced-motion) {
+  .amplify-loader line:last-of-type {
+    animation: none;
+    stroke-dashoffset: -50%;
+  }
+}
+.amplify-loader--small {
+  width: var(--amplify-components-loader-small-width);
+  height: var(--amplify-components-loader-small-height);
+  font-size: var(--amplify-components-loader-small-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-small-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-small-font-size
+  );
+}
+.amplify-loader--large {
+  width: var(--amplify-components-loader-large-width);
+  height: var(--amplify-components-loader-large-height);
+  font-size: var(--amplify-components-loader-large-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-large-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-large-font-size
+  );
+}
+.amplify-loader--linear {
+  width: var(--amplify-components-loader-linear-width);
+  min-width: var(--amplify-components-loader-linear-min-width);
+  stroke: var(--amplify-components-loader-linear-stroke-empty);
+  stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
+  stroke-width: var(--amplify-internal-loader-linear-stroke-width);
+  font-size: var(--amplify-internal-loader-linear-font-size);
+}
+.amplify-loader--determinate circle:last-of-type {
+  animation: none;
+  transform: rotate(-90deg);
+}
+.amplify-loader--determinate line:last-of-type {
+  animation: none;
+  stroke-dashoffset: 0%;
+  stroke-dasharray: none;
+}
+.amplify-loader__label {
+  fill: var(--amplify-components-loader-text-fill);
+  stroke: none;
+}
+
+@keyframes amplify-loader-circular {
+  0% {
+    stroke-dasharray: 100% 200%;
+    transform: rotate(120deg);
+  }
+  50% {
+    stroke-dasharray: 20% 400%;
+  }
+  100% {
+    stroke-dasharray: 100% 200%;
+    transform: rotate(480deg);
+  }
+}
+@keyframes amplify-loader-linear {
+  0% {
+    stroke-dashoffset: 200%;
+  }
+  100% {
+    stroke-dashoffset: -50%;
+  }
+}

package/dist/styles/loader.layer.css

@@ -0,0 +1,110 @@
+@layer amplify.components {
+.amplify-loader {
+  width: var(--amplify-components-loader-width);
+  height: var(--amplify-components-loader-height);
+  font-size: var(--amplify-components-loader-font-size);
+  fill: none;
+  stroke: var(--amplify-components-loader-stroke-empty);
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-font-size
+  );
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-stroke-width
+  );
+}
+.amplify-loader circle:last-of-type {
+  transform-origin: center center;
+  animation-name: amplify-loader-circular;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: var(--amplify-components-loader-animation-duration);
+  stroke: var(--amplify-components-loader-stroke-filled);
+  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
+}
+@media (prefers-reduced-motion) {
+  .amplify-loader circle:last-of-type {
+    animation: none;
+    stroke-dasharray: 100% 200%;
+    stroke-dashoffset: 50%;
+  }
+}
+.amplify-loader line:last-of-type {
+  stroke: var(--amplify-components-loader-linear-stroke-filled);
+  stroke-dasharray: 50% 200%;
+  animation-name: amplify-loader-linear;
+  animation-duration: var(--amplify-components-loader-linear-animation-duration);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@media (prefers-reduced-motion) {
+  .amplify-loader line:last-of-type {
+    animation: none;
+    stroke-dashoffset: -50%;
+  }
+}
+.amplify-loader--small {
+  width: var(--amplify-components-loader-small-width);
+  height: var(--amplify-components-loader-small-height);
+  font-size: var(--amplify-components-loader-small-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-small-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-small-font-size
+  );
+}
+.amplify-loader--large {
+  width: var(--amplify-components-loader-large-width);
+  height: var(--amplify-components-loader-large-height);
+  font-size: var(--amplify-components-loader-large-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-large-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-large-font-size
+  );
+}
+.amplify-loader--linear {
+  width: var(--amplify-components-loader-linear-width);
+  min-width: var(--amplify-components-loader-linear-min-width);
+  stroke: var(--amplify-components-loader-linear-stroke-empty);
+  stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
+  stroke-width: var(--amplify-internal-loader-linear-stroke-width);
+  font-size: var(--amplify-internal-loader-linear-font-size);
+}
+.amplify-loader--determinate circle:last-of-type {
+  animation: none;
+  transform: rotate(-90deg);
+}
+.amplify-loader--determinate line:last-of-type {
+  animation: none;
+  stroke-dashoffset: 0%;
+  stroke-dasharray: none;
+}
+.amplify-loader__label {
+  fill: var(--amplify-components-loader-text-fill);
+  stroke: none;
+}
+
+@keyframes amplify-loader-circular {
+  0% {
+    stroke-dasharray: 100% 200%;
+    transform: rotate(120deg);
+  }
+  50% {
+    stroke-dasharray: 20% 400%;
+  }
+  100% {
+    stroke-dasharray: 100% 200%;
+    transform: rotate(480deg);
+  }
+}
+@keyframes amplify-loader-linear {
+  0% {
+    stroke-dashoffset: 200%;
+  }
+  100% {
+    stroke-dashoffset: -50%;
+  }
+}
+}

package/dist/styles/menu.css

@@ -0,0 +1,54 @@
+.amplify-menu__wrapper {
+  z-index: 999999;
+}
+
+.amplify-menu__trigger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.amplify-menu__content {
+  background-color: var(--amplify-components-menu-background-color);
+  border-radius: var(--amplify-components-menu-border-radius);
+  box-shadow: var(--amplify-components-menu-box-shadow);
+  flex-direction: var(--amplify-components-menu-flex-direction);
+  gap: var(--amplify-components-menu-gap);
+  min-width: var(--amplify-components-menu-min-width);
+  max-width: var(--amplify-components-menu-max-width);
+  border-color: var(--amplify-components-menu-border-color);
+  border-width: var(--amplify-components-menu-border-width);
+  border-style: var(--amplify-components-menu-border-style);
+}
+
+.amplify-menu__content__item {
+  min-height: var(--amplify-components-menu-item-min-height);
+  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
+  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
+}
+
+.amplify-menu__content__item:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.amplify-menu__content__item:first-child {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+@supports not (border-end-end-radius: 0) {
+  .amplify-menu__content__item:first-child {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.amplify-menu__content__item:last-child {
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
+}
+@supports not (border-end-end-radius: 0) {
+  .amplify-menu__content__item:last-child {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}

package/dist/styles/menu.layer.css

@@ -0,0 +1,56 @@
+@layer amplify.components {
+.amplify-menu__wrapper {
+  z-index: 999999;
+}
+
+.amplify-menu__trigger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.amplify-menu__content {
+  background-color: var(--amplify-components-menu-background-color);
+  border-radius: var(--amplify-components-menu-border-radius);
+  box-shadow: var(--amplify-components-menu-box-shadow);
+  flex-direction: var(--amplify-components-menu-flex-direction);
+  gap: var(--amplify-components-menu-gap);
+  min-width: var(--amplify-components-menu-min-width);
+  max-width: var(--amplify-components-menu-max-width);
+  border-color: var(--amplify-components-menu-border-color);
+  border-width: var(--amplify-components-menu-border-width);
+  border-style: var(--amplify-components-menu-border-style);
+}
+
+.amplify-menu__content__item {
+  min-height: var(--amplify-components-menu-item-min-height);
+  padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
+  padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
+}
+
+.amplify-menu__content__item:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.amplify-menu__content__item:first-child {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+}
+@supports not (border-end-end-radius: 0) {
+  .amplify-menu__content__item:first-child {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.amplify-menu__content__item:last-child {
+  border-start-end-radius: 0;
+  border-start-start-radius: 0;
+}
+@supports not (border-end-end-radius: 0) {
+  .amplify-menu__content__item:last-child {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+}