@aws-amplify/ui 6.4.1 → 6.6.0

package/dist/esm/i18n/dictionaries/authenticator/es.mjs

@@ -4,6 +4,7 @@ const esDict = {
     'Change Password': 'Cambiar contraseña',
     Changing: 'Cambiando',
     Code: 'Código',
+    'Code *': 'Código *',
     'Confirm Password': 'Confirmar contraseña',
     'Confirm Sign Up': 'Confirmar registro',
     'Confirm SMS Code': 'Confirmar el código de SMS',
@@ -18,6 +19,7 @@ const esDict = {
     Email: 'Email',
     'Enter your code': 'Ingrese el código',
     'Enter your Email': 'Escriba su Email',
+    'Enter your email': 'Escriba su email',
     'Enter your Password': 'Escriba su Contraseña',
     'Enter your phone number': 'Ingrese el número de teléfono',
     'Enter your username': 'Ingrese el nombre de usuario',
@@ -63,6 +65,12 @@ const esDict = {
     'Confirm Sign In': 'Confirmar inicio de sesión',
     'Forgot Password': 'Olvidé mi contraseña',
     'Incorrect username or password.': 'Nombre de usuario o contraseña incorrecta',
+    'Enter your Family Name': 'Escriba su apellido',
+    'Enter your Given Name': 'Escriba su nombre',
+    'Given Name': 'Nombre',
+    'Family Name': 'Apellido',
+    'Reset Password': 'Restablecer contraseña',
+    'Please confirm your Password': 'Confirme su contraseña',
     'Invalid password format': 'Formato de contraseña inválido',
     'Invalid phone number format': 'Formato de número de teléfono inválido',
     'Loading...': 'Cargando...',
@@ -76,8 +84,17 @@ const esDict = {
     'Sign Up': 'Crear cuenta',
     'User already exists': 'El usuario ya existe',
     'User does not exist': 'El usuario no existe',
+    'Username/client id combination not found.': 'El usuario no existe',
     'Username cannot be empty': 'El nombre de usuario no puede estar vacío',
     'Your passwords must match': 'Las contraseñas deben coincidir',
+    'Password must have at least 8 characters': 'La contraseña debe tener al menos 8 caracteres',
+    'Password did not conform with policy: Password must have uppercase characters': 'La contraseña debe tener al menos un carácter en mayúscula',
+    'Password did not conform with policy: Password must have numeric characters': 'La contraseña debe tener al menos un carácter numérico',
+    'Password did not conform with policy: Password must have symbol characters': 'La contraseña debe tener al menos un símbolo',
+    'Password did not conform with policy: Password must have lowercase characters': 'La contraseña debe tener al menos un carácter en minúsculas',
+    'Invalid verification code provided, please try again.': 'Código de verificación no válido, inténtelo de nuevo.',
+    'Attempt limit exceeded, please try after some time.': 'Número máximo de intentos excedido, por favor inténtelo de nuevo más tarde.',
+    'A network error has occurred.': 'Se ha producido un error de red.'
 };
 
 export { esDict };

package/dist/esm/i18n/dictionaries/authenticator/fr.mjs

@@ -17,7 +17,8 @@ const frDict = {
     'Dismiss alert': `Supprimer l'alerte`,
     Email: 'Email',
     'Enter your code': 'Saisissez cotre code de confirmation',
-    'Enter your Email': 'Saisissez votre adresse email',
+    'Enter your Email': 'Saisissez votre adresse e-mail',
+    'Enter your email': 'Saisissez votre adresse e-mail',
     'Enter your phone number': 'Saisissez votre numéro de téléphone',
     'Enter your username': "Saisissez votre nom d'utilisateur",
     'Forgot your password?': 'Mot de passe oublié ? ',
@@ -73,9 +74,11 @@ const frDict = {
     'Enter your Phone Number': 'Saisissez votre numéro de téléphone',
     'Enter your Preferred Username': "Saisissez votre nom d'utilisateur",
     'Enter your password': 'Saisissez votre mot de passe',
+    'Given Name': 'Prénom',
     'Family Name': 'Nom de famille',
     'Forgot Password': 'Mot de passe oublié',
     'Forgot Password?': 'Mot de passe oublié ?',
+    'Incorrect username or password.': 'Identifiant ou mot de passe incorrect.',
     'Have an account? ': 'Déjà un compte ? ',
     Hello: 'Bonjour',
     'Incorrect username or password': 'Identifiant ou mot de passe incorrect',
@@ -91,8 +94,8 @@ const frDict = {
     'Preferred Username': "Nom d'utilisateur préféré",
     'Profile': 'Profil',
     'Resend a Code': 'Renvoyer un code',
-    'Reset password': 'Réinitialisez votre mot de passe',
-    'Reset Password': 'Réinitialisez votre mot de passe',
+    'Reset password': 'Réinitialiser le mot de passe',
+    'Reset Password': 'Réinitialiser le mot de passe',
     Send: 'Envoyer',
     'Sign In with AWS': 'Se connecter avec AWS',
     'Sign Out': 'Déconnexion',
@@ -108,6 +111,14 @@ const frDict = {
     'Your passwords must match': 'Vos mots de passe doivent être identiques',
     'It may take a minute to arrive.': 'Cela peut prendre quelques minutes.',
     'Website': 'Site web',
+    'Password must have at least 8 characters': 'Le mot de passe doit comporter au moins 8 caractères',
+    'Password did not conform with policy: Password must have uppercase characters': 'Le mot de passe doit comporter des caractères majuscules',
+    'Password did not conform with policy: Password must have numeric characters': 'Le mot de passe doit comporter des caractères numériques',
+    'Password did not conform with policy: Password must have symbol characters': 'Le mot de passe doit comporter des symboles',
+    'Password did not conform with policy: Password must have lowercase characters': 'Le mot de passe doit comporter des caractères minuscules',
+    'Invalid verification code provided, please try again.': 'Code de vérification invalide, veuillez réessayer.',
+    'Attempt limit exceeded, please try after some time.': 'Nombre maximum de tentatives dépassé, veuillez réessayer plus tard.',
+    'A network error has occurred.': "Une erreur de réseau s'est produite."
 };
 
 export { frDict };

package/dist/esm/index.mjs

@@ -16,6 +16,7 @@ export { DefaultTexts, hasTranslation, translate, translations } from './i18n/tr
 export { createAuthenticatorMachine } from './machines/authenticator/index.mjs';
 export { createTheme } from './theme/createTheme/createTheme.mjs';
 export { defineComponentTheme } from './theme/createTheme/defineComponentTheme.mjs';
+export { createComponentCSS } from './theme/createTheme/createComponentCSS.mjs';
 export { cssNameTransform, isDesignToken, setupTokens } from './theme/createTheme/utils.mjs';
 export { createComponentClasses } from './theme/createTheme/createComponentClasses.mjs';
 export { defaultTheme } from './theme/defaultTheme.mjs';

package/dist/esm/theme/createTheme/createComponentCSS.mjs

@@ -44,8 +44,9 @@ function recursiveComponentCSS(baseSelector, theme) {
  * This will take a component theme and create the appropriate CSS for it.
  *
  */
-function createComponentCSS(themeName, components, tokens, breakpoints) {
+function createComponentCSS({ theme, components, }) {
     let cssText = '';
+    const { tokens, name: themeName, breakpoints } = theme;
     components.forEach(({ name, theme, overrides }) => {
         const baseComponentClassName = `amplify-${name}`;
         const componentClassName = `[data-amplify-theme="${themeName}"] .${baseComponentClassName}`;

package/dist/esm/theme/createTheme/createTheme.mjs

@@ -58,7 +58,13 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
             .join('\n') +
         `\n}\n`;
     if (theme?.components) {
-        cssText += createComponentCSS(name, theme.components, tokens, mergedTheme.breakpoints);
+        cssText += createComponentCSS({
+            theme: {
+                ...mergedTheme,
+                tokens,
+            },
+            components: theme.components,
+        });
     }
     let overrides = [];
     if (mergedTheme.animations) {

package/dist/esm/theme/createTheme/defineComponentTheme.mjs

@@ -1,3 +1,4 @@
+import { createComponentCSS } from './createComponentCSS.mjs';
 import { createComponentClasses } from './createComponentClasses.mjs';
 
 /**
@@ -44,11 +45,18 @@ function defineComponentTheme({ name, theme, overrides, }) {
         name,
         prefix,
     });
+    const cssText = (props) => {
+        return createComponentCSS({
+            theme: props.theme,
+            components: [{ name, theme }],
+        });
+    };
     return {
         className,
         theme,
         overrides,
         name,
+        cssText,
     };
 }
 

package/dist/esm/types/primitives/componentClassName.mjs

@@ -20,6 +20,7 @@ const ComponentClassName = {
     Avatar: 'amplify-avatar',
     AvatarIcon: 'amplify-avatar__icon',
     AvatarImage: 'amplify-avatar__image',
+    AvatarLoader: 'amplify-avatar__loader',
     AIConversation: 'amplify-ai-conversation',
     AIConversationAttachment: 'amplify-ai-conversation__attachment',
     AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',

package/dist/index.js

@@ -887,6 +887,7 @@ const esDict$1 = {
     'Change Password': 'Cambiar contraseña',
     Changing: 'Cambiando',
     Code: 'Código',
+    'Code *': 'Código *',
     'Confirm Password': 'Confirmar contraseña',
     'Confirm Sign Up': 'Confirmar registro',
     'Confirm SMS Code': 'Confirmar el código de SMS',
@@ -901,6 +902,7 @@ const esDict$1 = {
     Email: 'Email',
     'Enter your code': 'Ingrese el código',
     'Enter your Email': 'Escriba su Email',
+    'Enter your email': 'Escriba su email',
     'Enter your Password': 'Escriba su Contraseña',
     'Enter your phone number': 'Ingrese el número de teléfono',
     'Enter your username': 'Ingrese el nombre de usuario',
@@ -946,6 +948,12 @@ const esDict$1 = {
     'Confirm Sign In': 'Confirmar inicio de sesión',
     'Forgot Password': 'Olvidé mi contraseña',
     'Incorrect username or password.': 'Nombre de usuario o contraseña incorrecta',
+    'Enter your Family Name': 'Escriba su apellido',
+    'Enter your Given Name': 'Escriba su nombre',
+    'Given Name': 'Nombre',
+    'Family Name': 'Apellido',
+    'Reset Password': 'Restablecer contraseña',
+    'Please confirm your Password': 'Confirme su contraseña',
     'Invalid password format': 'Formato de contraseña inválido',
     'Invalid phone number format': 'Formato de número de teléfono inválido',
     'Loading...': 'Cargando...',
@@ -959,8 +967,17 @@ const esDict$1 = {
     'Sign Up': 'Crear cuenta',
     'User already exists': 'El usuario ya existe',
     'User does not exist': 'El usuario no existe',
+    'Username/client id combination not found.': 'El usuario no existe',
     'Username cannot be empty': 'El nombre de usuario no puede estar vacío',
     'Your passwords must match': 'Las contraseñas deben coincidir',
+    'Password must have at least 8 characters': 'La contraseña debe tener al menos 8 caracteres',
+    'Password did not conform with policy: Password must have uppercase characters': 'La contraseña debe tener al menos un carácter en mayúscula',
+    'Password did not conform with policy: Password must have numeric characters': 'La contraseña debe tener al menos un carácter numérico',
+    'Password did not conform with policy: Password must have symbol characters': 'La contraseña debe tener al menos un símbolo',
+    'Password did not conform with policy: Password must have lowercase characters': 'La contraseña debe tener al menos un carácter en minúsculas',
+    'Invalid verification code provided, please try again.': 'Código de verificación no válido, inténtelo de nuevo.',
+    'Attempt limit exceeded, please try after some time.': 'Número máximo de intentos excedido, por favor inténtelo de nuevo más tarde.',
+    'A network error has occurred.': 'Se ha producido un error de red.'
 };
 
 const frDict$1 = {
@@ -982,7 +999,8 @@ const frDict$1 = {
     'Dismiss alert': `Supprimer l'alerte`,
     Email: 'Email',
     'Enter your code': 'Saisissez cotre code de confirmation',
-    'Enter your Email': 'Saisissez votre adresse email',
+    'Enter your Email': 'Saisissez votre adresse e-mail',
+    'Enter your email': 'Saisissez votre adresse e-mail',
     'Enter your phone number': 'Saisissez votre numéro de téléphone',
     'Enter your username': "Saisissez votre nom d'utilisateur",
     'Forgot your password?': 'Mot de passe oublié ? ',
@@ -1038,9 +1056,11 @@ const frDict$1 = {
     'Enter your Phone Number': 'Saisissez votre numéro de téléphone',
     'Enter your Preferred Username': "Saisissez votre nom d'utilisateur",
     'Enter your password': 'Saisissez votre mot de passe',
+    'Given Name': 'Prénom',
     'Family Name': 'Nom de famille',
     'Forgot Password': 'Mot de passe oublié',
     'Forgot Password?': 'Mot de passe oublié ?',
+    'Incorrect username or password.': 'Identifiant ou mot de passe incorrect.',
     'Have an account? ': 'Déjà un compte ? ',
     Hello: 'Bonjour',
     'Incorrect username or password': 'Identifiant ou mot de passe incorrect',
@@ -1056,8 +1076,8 @@ const frDict$1 = {
     'Preferred Username': "Nom d'utilisateur préféré",
     'Profile': 'Profil',
     'Resend a Code': 'Renvoyer un code',
-    'Reset password': 'Réinitialisez votre mot de passe',
-    'Reset Password': 'Réinitialisez votre mot de passe',
+    'Reset password': 'Réinitialiser le mot de passe',
+    'Reset Password': 'Réinitialiser le mot de passe',
     Send: 'Envoyer',
     'Sign In with AWS': 'Se connecter avec AWS',
     'Sign Out': 'Déconnexion',
@@ -1073,6 +1093,14 @@ const frDict$1 = {
     'Your passwords must match': 'Vos mots de passe doivent être identiques',
     'It may take a minute to arrive.': 'Cela peut prendre quelques minutes.',
     'Website': 'Site web',
+    'Password must have at least 8 characters': 'Le mot de passe doit comporter au moins 8 caractères',
+    'Password did not conform with policy: Password must have uppercase characters': 'Le mot de passe doit comporter des caractères majuscules',
+    'Password did not conform with policy: Password must have numeric characters': 'Le mot de passe doit comporter des caractères numériques',
+    'Password did not conform with policy: Password must have symbol characters': 'Le mot de passe doit comporter des symboles',
+    'Password did not conform with policy: Password must have lowercase characters': 'Le mot de passe doit comporter des caractères minuscules',
+    'Invalid verification code provided, please try again.': 'Code de vérification invalide, veuillez réessayer.',
+    'Attempt limit exceeded, please try after some time.': 'Nombre maximum de tentatives dépassé, veuillez réessayer plus tard.',
+    'A network error has occurred.': "Une erreur de réseau s'est produite."
 };
 
 const itDict$1 = {
@@ -2871,6 +2899,7 @@ const ComponentClassName = {
     Avatar: 'amplify-avatar',
     AvatarIcon: 'amplify-avatar__icon',
     AvatarImage: 'amplify-avatar__image',
+    AvatarLoader: 'amplify-avatar__loader',
     AIConversation: 'amplify-ai-conversation',
     AIConversationAttachment: 'amplify-ai-conversation__attachment',
     AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
@@ -8698,8 +8727,9 @@ function recursiveComponentCSS(baseSelector, theme) {
  * This will take a component theme and create the appropriate CSS for it.
  *
  */
-function createComponentCSS(themeName, components, tokens, breakpoints) {
+function createComponentCSS({ theme, components, }) {
     let cssText = '';
+    const { tokens, name: themeName, breakpoints } = theme;
     components.forEach(({ name, theme, overrides }) => {
         const baseComponentClassName = `amplify-${name}`;
         const componentClassName = `[data-amplify-theme="${themeName}"] .${baseComponentClassName}`;
@@ -8825,7 +8855,13 @@ function createTheme(theme, DefaultTheme = defaultTheme) {
             .join('\n') +
         `\n}\n`;
     if (theme?.components) {
-        cssText += createComponentCSS(name, theme.components, tokens, mergedTheme.breakpoints);
+        cssText += createComponentCSS({
+            theme: {
+                ...mergedTheme,
+                tokens,
+            },
+            components: theme.components,
+        });
     }
     let overrides = [];
     if (mergedTheme.animations) {
@@ -9007,11 +9043,18 @@ function defineComponentTheme({ name, theme, overrides, }) {
         name,
         prefix,
     });
+    const cssText = (props) => {
+        return createComponentCSS({
+            theme: props.theme,
+            components: [{ name, theme }],
+        });
+    };
     return {
         className,
         theme,
         overrides,
         name,
+        cssText,
     };
 }
 
@@ -9162,6 +9205,7 @@ exports.classNameModifierByFlag = classNameModifierByFlag;
 exports.classNames = classNames;
 exports.countryDialCodes = countryDialCodes;
 exports.createAuthenticatorMachine = createAuthenticatorMachine;
+exports.createComponentCSS = createComponentCSS;
 exports.createComponentClasses = createComponentClasses;
 exports.createTheme = createTheme;
 exports.cssNameTransform = cssNameTransform;

package/dist/styles/avatar.css

@@ -6,6 +6,7 @@
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -56,6 +57,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -69,6 +73,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -82,6 +89,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -97,6 +107,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -108,4 +121,11 @@
   -o-object-fit: cover;
      object-fit: cover;
   display: block;
+}
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
 }

package/dist/styles/avatar.layer.css

@@ -7,6 +7,7 @@
   --avatar-border-color: var(--amplify-components-avatar-border-color);
   --avatar-size: var(--amplify-components-avatar-width);
   --amplify-components-icon-height: 100%;
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -57,6 +58,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-warning-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-warning-color
+  );
 }
 .amplify-avatar--error {
   --avatar-border-color: var(--amplify-components-avatar-error-border-color);
@@ -70,6 +74,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-error-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-error-color
+  );
 }
 .amplify-avatar--info {
   --avatar-border-color: var(--amplify-components-avatar-info-border-color);
@@ -83,6 +90,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-info-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-info-color
+  );
 }
 .amplify-avatar--success {
   --avatar-border-color: var(
@@ -98,6 +108,9 @@
   --avatar-filled-color: var(
     --amplify-components-avatar-success-background-color
   );
+  --amplify-components-loader-stroke-filled: var(
+    --amplify-components-avatar-success-color
+  );
 }
 .amplify-avatar__icon {
   display: flex;
@@ -110,4 +123,11 @@
      object-fit: cover;
   display: block;
 }
+.amplify-avatar__loader {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  stroke: transparent;
+}
 }

package/dist/styles/breadcrumbs.css

@@ -27,12 +27,14 @@
   font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
   padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
   padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
-  text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
 }
 
 .amplify-breadcrumbs__link--current {
   color: var(--amplify-components-breadcrumbs-link-current-color);
   font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
   font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
-  text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
 }

package/dist/styles/breadcrumbs.layer.css

@@ -28,13 +28,15 @@
   font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
   padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
   padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
-  text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
 }
 
 .amplify-breadcrumbs__link--current {
   color: var(--amplify-components-breadcrumbs-link-current-color);
   font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
   font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
-  text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
 }
 }

package/dist/styles/button.css

@@ -34,8 +34,9 @@
   padding-inline-start: var(--amplify-components-button-padding-inline-start);
   padding-inline-end: var(--amplify-components-button-padding-inline-end);
   transition: all var(--amplify-components-button-transition-duration);
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-button-disabled-color: var(
     --amplify-components-button-disabled-color
   );
@@ -1056,50 +1057,58 @@
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
   cursor: not-allowed;
 }
 .amplify-button--disabled:hover {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled :focus {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled:active {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--loading {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:hover {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:focus {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:active {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button__loader-wrapper {
   align-items: var(--amplify-components-button-loader-wrapper-align-items);

package/dist/styles/button.layer.css

@@ -35,8 +35,9 @@
   padding-inline-start: var(--amplify-components-button-padding-inline-start);
   padding-inline-end: var(--amplify-components-button-padding-inline-end);
   transition: all var(--amplify-components-button-transition-duration);
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-button-disabled-color: var(
     --amplify-components-button-disabled-color
   );
@@ -1057,50 +1058,58 @@
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
   cursor: not-allowed;
 }
 .amplify-button--disabled:hover {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled :focus {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--disabled:active {
   background-color: var(--amplify-internal-button-disabled-background-color);
   border-color: var(--amplify-internal-button-disabled-border-color);
   color: var(--amplify-internal-button-disabled-color);
-  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
 }
 .amplify-button--loading {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:hover {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:focus {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button--loading:active {
   background-color: var(--amplify-internal-button-loading-background-color);
   border-color: var(--amplify-internal-button-loading-border-color);
   color: var(--amplify-components-button-loading-color);
-  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
 }
 .amplify-button__loader-wrapper {
   align-items: var(--amplify-components-button-loader-wrapper-align-items);

package/dist/styles/input.css

@@ -17,8 +17,9 @@
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -moz-user-select: text;
-       user-select: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
   display: inline-block;
   --amplify-components-fieldcontrol-color: var(
     --amplify-components-input-color