apacuana-sdk-web
Version:
Apacuana SDK for Web
583 lines • 340 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, LitElement, unsafeCSS } from "lit";
import { property } from "lit/decorators.js";
import { createRoot } from "react-dom/client";
import { createElement } from "react";
import { FaceLivenessDetector } from "@aws-amplify/ui-react-liveness";
import { Amplify } from "aws-amplify";
import { ApacuanaWebError, ApacuanaWebErrorCode } from "../lib/errors.js";
// 1. Importa los estilos de Amplify UI como una cadena de texto.
// TypeScript entiende esto gracias al archivo global.d.ts que creamos.
const amplifyStyles = `
/*
* Amplify UI Basic Theme
*/
:root, [data-amplify-theme] {
--amplify-components-accordion-background-color: var(--amplify-colors-background-primary);
--amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary);
--amplify-components-accordion-item-border-width: var(--amplify-border-widths-small);
--amplify-components-accordion-item-border-style: solid;
--amplify-components-accordion-item-border-radius: var(--amplify-radii-small);
--amplify-components-accordion-item-trigger-align-items: center;
--amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary);
--amplify-components-accordion-item-trigger-color: inherit;
--amplify-components-accordion-item-trigger-gap: var(--amplify-space-small);
--amplify-components-accordion-item-trigger-justify-content: space-between;
--amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs);
--amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small);
--amplify-components-accordion-item-trigger-hover-color: inherit;
--amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5);
--amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus);
--amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
--amplify-components-accordion-item-content-color: inherit;
--amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small);
--amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small);
--amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs);
--amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
--amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
--amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
--amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
--amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
--amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
--amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
--amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
--amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
--amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
--amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
--amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
--amplify-components-ai-conversation-message-sender-username-font-size: inherit;
--amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
--amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
--amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
--amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
--amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
--amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
--amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
--amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
--amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
--amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
--amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
--amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
--amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
--amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
--amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
--amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
--amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
--amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
--amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
--amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
--amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
--amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
--amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
--amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
--amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
--amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
--amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
--amplify-components-alert-align-items: center;
--amplify-components-alert-justify-content: space-between;
--amplify-components-alert-color: var(--amplify-colors-font-primary);
--amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
--amplify-components-alert-padding-block: var(--amplify-space-small);
--amplify-components-alert-padding-inline: var(--amplify-space-medium);
--amplify-components-alert-icon-size: var(--amplify-font-sizes-xl);
--amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium);
--amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold);
--amplify-components-alert-info-color: var(--amplify-colors-font-info);
--amplify-components-alert-info-background-color: var(--amplify-colors-background-info);
--amplify-components-alert-error-color: var(--amplify-colors-font-error);
--amplify-components-alert-error-background-color: var(--amplify-colors-background-error);
--amplify-components-alert-warning-color: var(--amplify-colors-font-warning);
--amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
--amplify-components-alert-success-color: var(--amplify-colors-font-success);
--amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
--amplify-components-authenticator-max-width: 60rem;
--amplify-components-authenticator-modal-width: var(--amplify-space-relative-full);
--amplify-components-authenticator-modal-height: var(--amplify-space-relative-full);
--amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50);
--amplify-components-authenticator-modal-top: var(--amplify-space-zero);
--amplify-components-authenticator-modal-left: var(--amplify-space-zero);
--amplify-components-authenticator-container-width-max: 30rem;
--amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small);
--amplify-components-authenticator-router-border-style: solid;
--amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary);
--amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary);
--amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium);
--amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium);
--amplify-components-authenticator-form-padding: var(--amplify-space-xl);
--amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary);
--amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80);
--amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary);
--amplify-components-autocomplete-menu-width: 100%;
--amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs);
--amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary);
--amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary);
--amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small);
--amplify-components-autocomplete-menu-border-style: solid;
--amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small);
--amplify-components-autocomplete-menu-options-display: flex;
--amplify-components-autocomplete-menu-options-flex-direction: column;
--amplify-components-autocomplete-menu-options-max-height: 300px;
--amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary);
--amplify-components-autocomplete-menu-option-color: currentcolor;
--amplify-components-autocomplete-menu-option-cursor: pointer;
--amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short);
--amplify-components-autocomplete-menu-option-transition-property: background-color, color;
--amplify-components-autocomplete-menu-option-transition-timing-function: ease;
--amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80);
--amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white);
--amplify-components-autocomplete-menu-empty-display: flex;
--amplify-components-autocomplete-menu-loading-align-items: center;
--amplify-components-autocomplete-menu-loading-display: flex;
--amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
--amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
--amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
--amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
--amplify-components-avatar-line-height: 1;
--amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
--amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
--amplify-components-avatar-text-align: center;
--amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
--amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
--amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
--amplify-components-avatar-border-radius: 100%;
--amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
--amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
--amplify-components-avatar-info-color: var(--amplify-colors-font-info);
--amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
--amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
--amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
--amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
--amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
--amplify-components-avatar-success-color: var(--amplify-colors-font-success);
--amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
--amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
--amplify-components-avatar-error-color: var(--amplify-colors-font-error);
--amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
--amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
--amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
--amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
--amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
--amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
--amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
--amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
--amplify-components-badge-color: var(--amplify-colors-font-primary);
--amplify-components-badge-line-height: 1;
--amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
--amplify-components-badge-font-size: var(--amplify-font-sizes-small);
--amplify-components-badge-text-align: center;
--amplify-components-badge-padding-vertical: var(--amplify-space-xs);
--amplify-components-badge-padding-horizontal: var(--amplify-space-small);
--amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
--amplify-components-badge-border-radius: var(--amplify-radii-xl);
--amplify-components-badge-info-color: var(--amplify-colors-font-info);
--amplify-components-badge-info-background-color: var(--amplify-colors-background-info);
--amplify-components-badge-warning-color: var(--amplify-colors-font-warning);
--amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning);
--amplify-components-badge-success-color: var(--amplify-colors-font-success);
--amplify-components-badge-success-background-color: var(--amplify-colors-background-success);
--amplify-components-badge-error-color: var(--amplify-colors-font-error);
--amplify-components-badge-error-background-color: var(--amplify-colors-background-error);
--amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
--amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs);
--amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs);
--amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
--amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
--amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
--amplify-components-breadcrumbs-flex-direction: row;
--amplify-components-breadcrumbs-flex-wrap: wrap;
--amplify-components-breadcrumbs-gap: 0;
--amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
--amplify-components-breadcrumbs-item-flex-direction: row;
--amplify-components-breadcrumbs-item-color: inherit;
--amplify-components-breadcrumbs-item-font-size: inherit;
--amplify-components-breadcrumbs-item-align-items: center;
--amplify-components-breadcrumbs-item-line-height: 1;
--amplify-components-breadcrumbs-separator-color: inherit;
--amplify-components-breadcrumbs-separator-font-size: inherit;
--amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
--amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
--amplify-components-breadcrumbs-link-font-size: inherit;
--amplify-components-breadcrumbs-link-font-weight: normal;
--amplify-components-breadcrumbs-link-text-decoration: none;
--amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
--amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
--amplify-components-breadcrumbs-link-current-color: inherit;
--amplify-components-breadcrumbs-link-current-font-size: inherit;
--amplify-components-breadcrumbs-link-current-font-weight: normal;
--amplify-components-breadcrumbs-link-current-text-decoration: none;
--amplify-components-button-font-weight: var(--amplify-font-weights-bold);
--amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
--amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
--amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height);
--amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
--amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
--amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
--amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
--amplify-components-button-background-color: transparent;
--amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
--amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
--amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
--amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
--amplify-components-button-color: var(--amplify-colors-font-primary);
--amplify-components-button-hover-color: var(--amplify-colors-font-focus);
--amplify-components-button-hover-background-color: var(--amplify-colors-primary-10);
--amplify-components-button-hover-border-color: var(--amplify-colors-primary-60);
--amplify-components-button-focus-color: var(--amplify-colors-font-focus);
--amplify-components-button-focus-background-color: var(--amplify-colors-primary-10);
--amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
--amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
--amplify-components-button-active-color: var(--amplify-colors-font-active);
--amplify-components-button-active-background-color: var(--amplify-colors-primary-20);
--amplify-components-button-active-border-color: var(--amplify-colors-primary-100);
--amplify-components-button-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-loading-background-color: transparent;
--amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-disabled-background-color: transparent;
--amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60);
--amplify-components-button-outlined-info-background-color: transparent;
--amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100);
--amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60);
--amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10);
--amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100);
--amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
--amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
--amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
--amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
--amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
--amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
--amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
--amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60);
--amplify-components-button-outlined-warning-background-color: transparent;
--amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100);
--amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60);
--amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10);
--amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100);
--amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
--amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
--amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
--amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
--amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
--amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
--amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
--amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60);
--amplify-components-button-outlined-success-background-color: transparent;
--amplify-components-button-outlined-success-color: var(--amplify-colors-green-100);
--amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60);
--amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10);
--amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100);
--amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
--amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
--amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
--amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
--amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
--amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
--amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
--amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
--amplify-components-button-outlined-error-background-color: transparent;
--amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
--amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
--amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
--amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
--amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
--amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
--amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
--amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
--amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
--amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
--amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60);
--amplify-components-button-outlined-overlay-background-color: transparent;
--amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary);
--amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60);
--amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5);
--amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90);
--amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
--amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
--amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
--amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
--amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
--amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
--amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
--amplify-components-button-primary-border-color: transparent;
--amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
--amplify-components-button-primary-border-style: solid;
--amplify-components-button-primary-background-color: var(--amplify-colors-primary-80);
--amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-disabled-border-color: transparent;
--amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-primary-loading-border-color: transparent;
--amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-primary-hover-border-color: transparent;
--amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90);
--amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-focus-border-color: transparent;
--amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90);
--amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
--amplify-components-button-primary-active-border-color: transparent;
--amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100);
--amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-info-border-color: transparent;
--amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80);
--amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-info-hover-border-color: transparent;
--amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90);
--amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-info-focus-border-color: transparent;
--amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
--amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
--amplify-components-button-primary-info-active-border-color: transparent;
--amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
--amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-warning-border-color: transparent;
--amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80);
--amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-warning-hover-border-color: transparent;
--amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90);
--amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-warning-focus-border-color: transparent;
--amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
--amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
--amplify-components-button-primary-warning-active-border-color: transparent;
--amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
--amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-error-border-color: transparent;
--amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80);
--amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-error-hover-border-color: transparent;
--amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90);
--amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-error-focus-border-color: transparent;
--amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
--amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-primary-error-active-border-color: transparent;
--amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
--amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-success-border-color: transparent;
--amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80);
--amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-success-hover-border-color: transparent;
--amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90);
--amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-success-focus-border-color: transparent;
--amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
--amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
--amplify-components-button-primary-success-active-border-color: transparent;
--amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
--amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-overlay-border-color: transparent;
--amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70);
--amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-overlay-hover-border-color: transparent;
--amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90);
--amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-overlay-focus-border-color: transparent;
--amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
--amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
--amplify-components-button-primary-overlay-active-border-color: transparent;
--amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
--amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-menu-border-width: var(--amplify-space-zero);
--amplify-components-button-menu-background-color: transparent;
--amplify-components-button-menu-justify-content: start;
--amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80);
--amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80);
--amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90);
--amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-link-background-color: transparent;
--amplify-components-button-link-border-color: transparent;
--amplify-components-button-link-border-width: var(--amplify-border-widths-small);
--amplify-components-button-link-color: var(--amplify-colors-font-interactive);
--amplify-components-button-link-hover-border-color: transparent;
--amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10);
--amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
--amplify-components-button-link-focus-border-color: transparent;
--amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10);
--amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
--amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
--amplify-components-button-link-active-border-color: transparent;
--amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20);
--amplify-components-button-link-active-color: var(--amplify-colors-font-active);
--amplify-components-button-link-disabled-border-color: transparent;
--amplify-components-button-link-disabled-background-color: transparent;
--amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-link-loading-border-color: transparent;
--amplify-components-button-link-loading-background-color: transparent;
--amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-link-info-border-color: transparent;
--amplify-components-button-link-info-background-color: transparent;
--amplify-components-button-link-info-color: var(--amplify-colors-blue-100);
--amplify-components-button-link-info-hover-border-color: transparent;
--amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10);
--amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90);
--amplify-components-button-link-info-focus-border-color: transparent;
--amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
--amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
--amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
--amplify-components-button-link-info-active-border-color: transparent;
--amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
--amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
--amplify-components-button-link-warning-border-color: transparent;
--amplify-components-button-link-warning-background-color: transparent;
--amplify-components-button-link-warning-color: var(--amplify-colors-orange-100);
--amplify-components-button-link-warning-hover-border-color: transparent;
--amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10);
--amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90);
--amplify-components-button-link-warning-focus-border-color: transparent;
--amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
--amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
--amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
--amplify-components-button-link-warning-active-border-color: transparent;
--amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
--amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
--amplify-components-button-link-success-border-color: transparent;
--amplify-components-button-link-success-background-color: transparent;
--amplify-components-button-link-success-color: var(--amplify-colors-green-100);
--amplify-components-button-link-success-hover-border-color: transparent;
--amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10);
--amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90);
--amplify-components-button-link-success-focus-border-color: transparent;
--amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
--amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
--amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
--amplify-components-button-link-success-active-border-color: transparent;
--amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
--amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
--amplify-components-button-link-error-border-color: transparent;
--amplify-components-button-link-error-background-color: transparent;
--amplify-components-button-link-error-color: var(--amplify-colors-red-100);
--amplify-components-button-link-error-hover-border-color: transparent;
--amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10);
--amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90);
--amplify-components-button-link-error-focus-border-color: transparent;
--amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
--amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
--amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-link-error-active-border-color: transparent;
--amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
--amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
--amplify-components-button-link-overlay-border-color: transparent;
--amplify-components-button-link-overlay-background-color: transparent;
--amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100);
--amplify-components-button-link-overlay-hover-border-color: transparent;
--amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5);
--amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80);
--amplify-components-button-link-overlay-focus-border-color: transparent;
--amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
--amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
--amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
--amplify-components-button-link-overlay-active-border-color: transparent;
--amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
--amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
--amplify-components-button-warning-background-color: transparent;
--amplify-components-button-warning-border-color: var(--amplify-colors-red-60);
--amplify-components-button-warning-border-width: var(--amplify-border-widths-small);
--amplify-components-button-warning-color: var(--amplify-colors-red-60);
--amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10);
--amplify-components-button-warning-hover-color: var(--amplify-colors-font-error);
--amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10);
--amplify-components-button-warning-focus-color: var(--amplify-colors-red-80);
--amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100);
--amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20);
--amplify-components-button-warning-active-color: var(--amplify-colors-red-100);
--amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-warning-disabled-background-color: transparent;
--amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary);
--amplify-components-button-warning-loading-background-color: transparent;
--amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-border-color: transparent;
--amplify-components-button-destructive-border-width: var(--amplify-border-widths-small);
--amplify-components-button-destructive-border-style: solid;
--amplify-components-button-destructive-background-color: var(--amplify-colors-red-60);
--amplify-components-button-destructive-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-disabled-border-color: transparent;
--amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-loading-border-color: transparent;
--amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled);
--amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled);
--amplify-components-button-destructive-hover-border-color: transparent;
--amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80);
--amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-focus-border-color: transparent;
--amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80);
--amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse);
--amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
--amplify-components-button-destructive-active-border-color: transparent;
--amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100);
--amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse);
--amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
--amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
--amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
--amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
--amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
--amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
--amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
--amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
--amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
--amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
--amplify-components-button-loader-wrapper-align-items: center;
--amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
--amplify-components-card-background-color: var(--amplify-colors-background-primary);
--amplify-components-card-border-radius: var(--amplify-radii-xs);
--amplify-components-card-border-width: 0;
--amplify-components-card-border-style: solid;
--amplify-components-card-border-color: transparent;
--amplify-components-card-box-shadow: none;
--amplify-components-card-padding: var(--amplify-space-medium);
--amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
--amplify-components-card-outlined-border-radius: var(--amplify-radii-xs);
--amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
--amplify-components-card-outlined-border-style: solid;
--amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
--amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow);
--amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
--amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
--amplify-components-card-elevated-border-width: 0;
--amplify-components-card-elevated-border-style: solid;
--amplify-components-card-elevated-border-color: transparent;
--amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
--amplify-components-checkbox-cursor: pointer;
--amplify-components-checkbox-align-items: center;
--amplify-components-checkbox-disabled-cursor: not-allowed;
--amplify-components-checkbox-button-position: relative;
--amplify-components-checkbox-button-align-items: center;
--amplify-components-checkbox-button-justify-content: center;
--amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse);
--amplify-components-checkbox-button-before-width: 100%;
--amplify-components-checkbox-button-before-height: 100%;
--amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
--amplify-components-checkbox-button-before-border-radius: 20%;
--amplify-components-checkbox-button-before-border-style: solid;
--amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
--amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
--amplify-components-checkbox-button-focus-outline-style: solid;
--amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
--amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
--amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
--amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
--amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
--amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
--amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
--amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-sha