@aws-amplify/ui 6.5.0 → 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/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 = {
@@ -8699,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}`;
@@ -8826,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) {
@@ -9008,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,
     };
 }
 
@@ -9163,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/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

package/dist/styles/input.layer.css

@@ -18,8 +18,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

package/dist/styles/link.css

@@ -1,21 +1,26 @@
 .amplify-link {
   color: var(--amplify-components-link-color);
-  text-decoration: var(--amplify-components-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
 .amplify-link:visited {
   color: var(--amplify-components-link-visited-color);
-  text-decoration: var(--amplify-components-link-visited-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
 }
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
-  text-decoration: var(--amplify-components-link-active-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
 }
 .amplify-link:focus {
   color: var(--amplify-components-link-focus-color);
-  text-decoration: var(--amplify-components-link-focus-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
 }
 .amplify-link:hover {
   color: var(--amplify-components-link-hover-color);
-  text-decoration: var(--amplify-components-link-hover-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
 }

package/dist/styles/link.layer.css

@@ -1,23 +1,28 @@
 @layer amplify.components {
 .amplify-link {
   color: var(--amplify-components-link-color);
-  text-decoration: var(--amplify-components-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
 .amplify-link:visited {
   color: var(--amplify-components-link-visited-color);
-  text-decoration: var(--amplify-components-link-visited-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
 }
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
-  text-decoration: var(--amplify-components-link-active-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
 }
 .amplify-link:focus {
   color: var(--amplify-components-link-focus-color);
-  text-decoration: var(--amplify-components-link-focus-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
 }
 .amplify-link:hover {
   color: var(--amplify-components-link-hover-color);
-  text-decoration: var(--amplify-components-link-hover-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 }

package/dist/styles/reset.css

@@ -6,6 +6,8 @@
 
 html:focus-within {
   scroll-behavior: smooth;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
   text-size-adjust: none;
 }
 
@@ -52,7 +54,8 @@ picture {
 }
 
 a:not([class]) {
-  text-decoration-skip-ink: auto;
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
   color: currentColor;
 }
 

package/dist/styles/reset.layer.css

@@ -7,6 +7,8 @@
 
 html:focus-within {
   scroll-behavior: smooth;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
   text-size-adjust: none;
 }
 
@@ -53,7 +55,8 @@ picture {
 }
 
 a:not([class]) {
-  text-decoration-skip-ink: auto;
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
   color: currentColor;
 }
 

package/dist/styles/sliderField.css

@@ -14,8 +14,9 @@
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-sliderfield-root-height: var(
     --amplify-components-sliderfield-thumb-height
   );

package/dist/styles/sliderField.layer.css

@@ -15,8 +15,9 @@
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-sliderfield-root-height: var(
     --amplify-components-sliderfield-thumb-height
   );

package/dist/styles/textArea.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;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {

package/dist/styles/textArea.layer.css

@@ -18,8 +18,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;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {

package/dist/styles.css

@@ -1730,8 +1730,9 @@ strong.amplify-text {
   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
   );
@@ -2752,50 +2753,58 @@ strong.amplify-text {
   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);
@@ -2943,8 +2952,9 @@ strong.amplify-text {
   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
@@ -3027,8 +3037,9 @@ strong.amplify-text {
   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;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {
@@ -3092,24 +3103,29 @@ strong.amplify-text {
 
 .amplify-link {
   color: var(--amplify-components-link-color);
-  text-decoration: var(--amplify-components-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
 .amplify-link:visited {
   color: var(--amplify-components-link-visited-color);
-  text-decoration: var(--amplify-components-link-visited-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
 }
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
-  text-decoration: var(--amplify-components-link-active-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
 }
 .amplify-link:focus {
   color: var(--amplify-components-link-focus-color);
-  text-decoration: var(--amplify-components-link-focus-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
 }
 .amplify-link:hover {
   color: var(--amplify-components-link-hover-color);
-  text-decoration: var(--amplify-components-link-hover-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 
 .amplify-loader {
@@ -3672,14 +3688,16 @@ strong.amplify-text {
   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);
 }
 
 .amplify-card {
@@ -5229,8 +5247,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-sliderfield-root-height: var(
     --amplify-components-sliderfield-thumb-height
   );

package/dist/styles.layer.css

@@ -1731,8 +1731,9 @@ strong.amplify-text {
   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
   );
@@ -2753,50 +2754,58 @@ strong.amplify-text {
   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);
@@ -2944,8 +2953,9 @@ strong.amplify-text {
   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
@@ -3028,8 +3038,9 @@ strong.amplify-text {
   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;
   white-space: pre-wrap;
 }
 .amplify-textarea:focus {
@@ -3093,24 +3104,29 @@ strong.amplify-text {
 
 .amplify-link {
   color: var(--amplify-components-link-color);
-  text-decoration: var(--amplify-components-link-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
+          text-decoration: var(--amplify-components-link-text-decoration);
   cursor: pointer;
 }
 .amplify-link:visited {
   color: var(--amplify-components-link-visited-color);
-  text-decoration: var(--amplify-components-link-visited-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
+          text-decoration: var(--amplify-components-link-visited-text-decoration);
 }
 .amplify-link:active {
   color: var(--amplify-components-link-active-color);
-  text-decoration: var(--amplify-components-link-active-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
+          text-decoration: var(--amplify-components-link-active-text-decoration);
 }
 .amplify-link:focus {
   color: var(--amplify-components-link-focus-color);
-  text-decoration: var(--amplify-components-link-focus-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
+          text-decoration: var(--amplify-components-link-focus-text-decoration);
 }
 .amplify-link:hover {
   color: var(--amplify-components-link-hover-color);
-  text-decoration: var(--amplify-components-link-hover-text-decoration);
+  -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
+          text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 
 .amplify-loader {
@@ -3673,14 +3689,16 @@ strong.amplify-text {
   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);
 }
 
 .amplify-card {
@@ -5230,8 +5248,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
   padding-block: var(--amplify-components-sliderfield-padding-block);
   position: relative;
   touch-action: none;
-  -moz-user-select: none;
-       user-select: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   --amplify-internal-sliderfield-root-height: var(
     --amplify-components-sliderfield-thumb-height
   );

package/dist/types/theme/createTheme/createComponentCSS.d.ts

@@ -1,7 +1,12 @@
-import { DefaultTheme, WebTheme } from '../types';
+import { WebTheme } from '../types';
 import { ComponentsTheme } from '../components';
+interface CreateComponentCSSParams {
+    theme: Pick<WebTheme, 'tokens' | 'breakpoints' | 'name'>;
+    components: Array<ComponentsTheme>;
+}
 /**
  * This will take a component theme and create the appropriate CSS for it.
  *
  */
-export declare function createComponentCSS(themeName: string, components: Array<ComponentsTheme>, tokens: WebTheme['tokens'], breakpoints: DefaultTheme['breakpoints']): string;
+export declare function createComponentCSS({ theme, components, }: CreateComponentCSSParams): string;
+export {};

package/dist/types/theme/createTheme/defineComponentTheme.d.ts

@@ -1,6 +1,7 @@
 import { ComponentThemeFromName, ComponentsTheme } from '../components';
 import { BaseTheme, ComponentTheme, ComponentThemeOverride } from '../components/utils';
 import { WebTokens } from '../tokens';
+import { WebTheme } from '../types';
 import { ClassNameFunction } from './createComponentClasses';
 type CreateComponentThemeProps<TokensType extends WebTokens = WebTokens, ThemeType extends BaseTheme = BaseTheme, NameType extends string = string, OverridesType extends BaseTheme = BaseTheme> = {
     name: NameType;
@@ -50,5 +51,8 @@ export declare function defineComponentTheme<ThemeType extends BaseTheme = BaseT
     theme: typeof theme;
     name: string;
     overrides?: typeof overrides;
+    cssText: (props: {
+        theme: Pick<WebTheme, 'tokens' | 'breakpoints' | 'name'>;
+    }) => string;
 };
 export {};

package/dist/types/theme/createTheme/index.d.ts

@@ -1,4 +1,5 @@
 export { createTheme } from './createTheme';
 export { defineComponentTheme } from './defineComponentTheme';
+export { createComponentCSS } from './createComponentCSS';
 export { cssNameTransform, setupTokens, SetupToken, isDesignToken, } from './utils';
 export { createComponentClasses, ClassNameArgs, } from './createComponentClasses';

package/dist/types/theme/index.d.ts

@@ -1,4 +1,5 @@
-export { createTheme, defineComponentTheme, createComponentClasses, cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './createTheme';
+export { createTheme, defineComponentTheme, createComponentClasses, createComponentCSS, cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './createTheme';
+export { BaseComponentTheme } from './components';
 export { defaultTheme } from './defaultTheme';
 export { defaultDarkModeOverride, reactNativeDarkTokens, } from './defaultDarkModeOverride';
 export { reactNativeTokens, ReactNativeTokens } from './tokens';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {