@aws-amplify/ui 6.15.3 → 6.15.5

package/dist/esm/helpers/authenticator/textUtil.mjs

@@ -1,5 +1,6 @@
 import { translate, DefaultTexts } from '../../i18n/translations.mjs';
 import { defaultTexts } from '../../i18n/dictionaries/index.mjs';
+import { getSentenceSpacer, terminateSentence } from '../../i18n/sentencePunctuation.mjs';
 
 /**
  * ConfirmSignIn
@@ -24,13 +25,15 @@ const getDeliveryMessageText = (codeDeliveryDetails) => {
     const isEmailMessage = DeliveryMedium === 'EMAIL';
     const isTextMessage = DeliveryMedium === 'SMS';
     const arrivalMessage = translate(DefaultTexts.CODE_ARRIVAL);
+    const spacer = getSentenceSpacer(arrivalMessage);
     if (!(isEmailMessage || isTextMessage)) {
-        return `${translate(DefaultTexts.CODE_SENT)}. ${arrivalMessage}.`;
+        const sentMessage = translate(DefaultTexts.CODE_SENT);
+        return `${terminateSentence(sentMessage)}${spacer}${terminateSentence(arrivalMessage)}`;
     }
     const instructionMessage = isEmailMessage
         ? translate(DefaultTexts.CODE_EMAILED)
         : translate(DefaultTexts.CODE_TEXTED);
-    return `${instructionMessage} ${Destination}. ${arrivalMessage}.`;
+    return `${terminateSentence(`${instructionMessage} ${Destination}`)}${spacer}${terminateSentence(arrivalMessage)}`;
 };
 const getDeliveryMethodText = (codeDeliveryDetails) => {
     const { DeliveryMedium } = codeDeliveryDetails ?? {};

package/dist/esm/i18n/sentencePunctuation.mjs

@@ -0,0 +1,72 @@
+/**
+ * #6966 — script-aware punctuation for the Authenticator delivery message.
+ *
+ * The delivery message is assembled from translated fragments joined by
+ * punctuation. Hardcoding an ASCII period is wrong for locales whose sentence
+ * terminator differs: Japanese/Chinese use the ideographic full stop `。` and
+ * Thai writes no sentence terminator at all. The terminator and the
+ * inter-sentence spacer are therefore derived from the script of the
+ * surrounding translated copy, keeping punctuation locale-correct without
+ * adding a translation key, interpolation, or any public API.
+ *
+ * Script detection is MAJORITY-based rather than "contains any": a sentence is
+ * treated as CJK or Thai only when most of its non-whitespace characters belong
+ * to that script. "Contains any" mis-classifies copy such as a Latin sentence
+ * that includes a single CJK proper noun, or a Korean (Hangul) phrase that
+ * happens to contain a stray CJK codepoint.
+ */
+// Han / Kana ranges whose sentences terminate with the ideographic full stop.
+const CJK_CHARACTERS = /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
+// Thai script range. Thai does not use a written sentence terminator.
+const THAI_CHARACTERS = /[\u0e00-\u0e7f]/g;
+// Copy that is already sentence-terminated must not receive a second terminator
+// (e.g. a customer vocabulary override). Beyond ASCII `.!?` and their
+// full-width twins `。！？`, this also covers the colon `:` / `：`, the ellipsis
+// `…`, and the full-width `．` and half-width `｡` full stops.
+const TERMINAL_PUNCTUATION = /[.!?:…。！？：．｡]$/;
+const countMatches = (sentence, pattern) => sentence.match(pattern)?.length ?? 0;
+// Classifies `sentence` by the script forming the majority (more than half) of
+// its non-whitespace characters. Anything not predominantly CJK or Thai —
+// Latin, Cyrillic, Hangul, etc. — is treated as `latin`.
+const getSentenceScript = (sentence) => {
+    const significantLength = sentence.replace(/\s/g, '').length;
+    if (significantLength === 0) {
+        return 'latin';
+    }
+    if (countMatches(sentence, CJK_CHARACTERS) * 2 > significantLength) {
+        return 'cjk';
+    }
+    if (countMatches(sentence, THAI_CHARACTERS) * 2 > significantLength) {
+        return 'thai';
+    }
+    return 'latin';
+};
+/**
+ * Appends the script-appropriate sentence terminator to `sentence` unless it is
+ * already terminated. CJK copy receives the ideographic full stop `。`, Thai
+ * copy is left untouched, and every other script receives an ASCII period.
+ *
+ * @internal Not exported from the `@aws-amplify/ui` public entry point.
+ */
+const terminateSentence = (sentence) => {
+    if (TERMINAL_PUNCTUATION.test(sentence)) {
+        return sentence;
+    }
+    switch (getSentenceScript(sentence)) {
+        case 'cjk':
+            return `${sentence}。`;
+        case 'thai':
+            return sentence;
+        default:
+            return `${sentence}.`;
+    }
+};
+/**
+ * Returns the separator to place between two joined sentences. CJK scripts do
+ * not separate sentences with a space; every other script does.
+ *
+ * @internal Not exported from the `@aws-amplify/ui` public entry point.
+ */
+const getSentenceSpacer = (sentence) => getSentenceScript(sentence) === 'cjk' ? '' : ' ';
+
+export { getSentenceSpacer, terminateSentence };

package/dist/esm/machines/authenticator/actors/signUp.mjs

@@ -265,6 +265,11 @@ function signUpActor({ services }) {
                                     actions: ['setNextSignUpStep', 'clearFormValues'],
                                     target: '#signUpActor.autoSignIn',
                                 },
+                                {
+                                    cond: 'shouldManualSignIn',
+                                    actions: ['clearFormValues', 'setSignInStep'],
+                                    target: '#signUpActor.resolved',
+                                },
                                 {
                                     actions: 'setNextSignUpStep',
                                     target: '#signUpActor.init',

package/dist/esm/machines/authenticator/guards.mjs

@@ -9,6 +9,8 @@ const shouldConfirmSignInWithNewPassword = (_, { data }) => data?.nextStep.signI
 const shouldResetPasswordFromSignIn = (_, { data }) => data?.nextStep?.signInStep === 'RESET_PASSWORD';
 const shouldConfirmSignUpFromSignIn = (_, { data }) => data?.nextStep.signInStep === 'CONFIRM_SIGN_UP';
 const shouldAutoSignIn = (_, { data }) => data?.nextStep.signUpStep === 'COMPLETE_AUTO_SIGN_IN';
+const shouldManualSignIn = (context, { data }) => data?.nextStep.signUpStep === 'DONE' &&
+    context.step === 'CONFIRM_SIGN_UP';
 const hasCompletedSignIn = (_, { data }) => data?.nextStep.signInStep === 'DONE';
 const hasCompletedSignUp = (_, { data }) => data?.nextStep.signUpStep === 'DONE';
 const hasCompletedResetPassword = (_, { data }) => data?.nextStep.resetPasswordStep === 'DONE';
@@ -110,6 +112,7 @@ const GUARDS = {
     isShouldConfirmUserAttributeStep,
     isUserAlreadyConfirmed,
     shouldAutoSignIn,
+    shouldManualSignIn,
     shouldConfirmResetPassword,
     shouldConfirmSignIn,
     shouldConfirmSignInWithNewPassword,

package/dist/index.js

@@ -3907,6 +3907,77 @@ const getSortedFormFields = (route, state) => {
     return removeOrderKeys(sortFormFields(formFields));
 };
 
+/**
+ * #6966 — script-aware punctuation for the Authenticator delivery message.
+ *
+ * The delivery message is assembled from translated fragments joined by
+ * punctuation. Hardcoding an ASCII period is wrong for locales whose sentence
+ * terminator differs: Japanese/Chinese use the ideographic full stop `。` and
+ * Thai writes no sentence terminator at all. The terminator and the
+ * inter-sentence spacer are therefore derived from the script of the
+ * surrounding translated copy, keeping punctuation locale-correct without
+ * adding a translation key, interpolation, or any public API.
+ *
+ * Script detection is MAJORITY-based rather than "contains any": a sentence is
+ * treated as CJK or Thai only when most of its non-whitespace characters belong
+ * to that script. "Contains any" mis-classifies copy such as a Latin sentence
+ * that includes a single CJK proper noun, or a Korean (Hangul) phrase that
+ * happens to contain a stray CJK codepoint.
+ */
+// Han / Kana ranges whose sentences terminate with the ideographic full stop.
+const CJK_CHARACTERS = /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g;
+// Thai script range. Thai does not use a written sentence terminator.
+const THAI_CHARACTERS = /[\u0e00-\u0e7f]/g;
+// Copy that is already sentence-terminated must not receive a second terminator
+// (e.g. a customer vocabulary override). Beyond ASCII `.!?` and their
+// full-width twins `。！？`, this also covers the colon `:` / `：`, the ellipsis
+// `…`, and the full-width `．` and half-width `｡` full stops.
+const TERMINAL_PUNCTUATION = /[.!?:…。！？：．｡]$/;
+const countMatches = (sentence, pattern) => sentence.match(pattern)?.length ?? 0;
+// Classifies `sentence` by the script forming the majority (more than half) of
+// its non-whitespace characters. Anything not predominantly CJK or Thai —
+// Latin, Cyrillic, Hangul, etc. — is treated as `latin`.
+const getSentenceScript = (sentence) => {
+    const significantLength = sentence.replace(/\s/g, '').length;
+    if (significantLength === 0) {
+        return 'latin';
+    }
+    if (countMatches(sentence, CJK_CHARACTERS) * 2 > significantLength) {
+        return 'cjk';
+    }
+    if (countMatches(sentence, THAI_CHARACTERS) * 2 > significantLength) {
+        return 'thai';
+    }
+    return 'latin';
+};
+/**
+ * Appends the script-appropriate sentence terminator to `sentence` unless it is
+ * already terminated. CJK copy receives the ideographic full stop `。`, Thai
+ * copy is left untouched, and every other script receives an ASCII period.
+ *
+ * @internal Not exported from the `@aws-amplify/ui` public entry point.
+ */
+const terminateSentence = (sentence) => {
+    if (TERMINAL_PUNCTUATION.test(sentence)) {
+        return sentence;
+    }
+    switch (getSentenceScript(sentence)) {
+        case 'cjk':
+            return `${sentence}。`;
+        case 'thai':
+            return sentence;
+        default:
+            return `${sentence}.`;
+    }
+};
+/**
+ * Returns the separator to place between two joined sentences. CJK scripts do
+ * not separate sentences with a space; every other script does.
+ *
+ * @internal Not exported from the `@aws-amplify/ui` public entry point.
+ */
+const getSentenceSpacer = (sentence) => getSentenceScript(sentence) === 'cjk' ? '' : ' ';
+
 /**
  * ConfirmSignIn
  */
@@ -3930,13 +4001,15 @@ const getDeliveryMessageText = (codeDeliveryDetails) => {
     const isEmailMessage = DeliveryMedium === 'EMAIL';
     const isTextMessage = DeliveryMedium === 'SMS';
     const arrivalMessage = translate(DefaultTexts.CODE_ARRIVAL);
+    const spacer = getSentenceSpacer(arrivalMessage);
     if (!(isEmailMessage || isTextMessage)) {
-        return `${translate(DefaultTexts.CODE_SENT)}. ${arrivalMessage}.`;
+        const sentMessage = translate(DefaultTexts.CODE_SENT);
+        return `${terminateSentence(sentMessage)}${spacer}${terminateSentence(arrivalMessage)}`;
     }
     const instructionMessage = isEmailMessage
         ? translate(DefaultTexts.CODE_EMAILED)
         : translate(DefaultTexts.CODE_TEXTED);
-    return `${instructionMessage} ${Destination}. ${arrivalMessage}.`;
+    return `${terminateSentence(`${instructionMessage} ${Destination}`)}${spacer}${terminateSentence(arrivalMessage)}`;
 };
 const getDeliveryMethodText = (codeDeliveryDetails) => {
     const { DeliveryMedium } = codeDeliveryDetails ?? {};
@@ -4608,6 +4681,8 @@ const shouldConfirmSignInWithNewPassword = (_, { data }) => data?.nextStep.signI
 const shouldResetPasswordFromSignIn = (_, { data }) => data?.nextStep?.signInStep === 'RESET_PASSWORD';
 const shouldConfirmSignUpFromSignIn = (_, { data }) => data?.nextStep.signInStep === 'CONFIRM_SIGN_UP';
 const shouldAutoSignIn = (_, { data }) => data?.nextStep.signUpStep === 'COMPLETE_AUTO_SIGN_IN';
+const shouldManualSignIn = (context, { data }) => data?.nextStep.signUpStep === 'DONE' &&
+    context.step === 'CONFIRM_SIGN_UP';
 const hasCompletedSignIn = (_, { data }) => data?.nextStep.signInStep === 'DONE';
 const hasCompletedSignUp = (_, { data }) => data?.nextStep.signUpStep === 'DONE';
 const hasCompletedResetPassword = (_, { data }) => data?.nextStep.resetPasswordStep === 'DONE';
@@ -4709,6 +4784,7 @@ const GUARDS = {
     isShouldConfirmUserAttributeStep,
     isUserAlreadyConfirmed,
     shouldAutoSignIn,
+    shouldManualSignIn,
     shouldConfirmResetPassword,
     shouldConfirmSignIn,
     shouldConfirmSignInWithNewPassword,
@@ -5802,6 +5878,11 @@ function signUpActor({ services }) {
                                     actions: ['setNextSignUpStep', 'clearFormValues'],
                                     target: '#signUpActor.autoSignIn',
                                 },
+                                {
+                                    cond: 'shouldManualSignIn',
+                                    actions: ['clearFormValues', 'setSignInStep'],
+                                    target: '#signUpActor.resolved',
+                                },
                                 {
                                     actions: 'setNextSignUpStep',
                                     target: '#signUpActor.init',

package/dist/styles/base.css

@@ -1512,11 +1512,11 @@
   --amplify-colors-black: hsl(0, 0%, 0%);
   --amplify-colors-white: hsl(0, 0%, 100%);
   --amplify-colors-transparent: transparent;
-  --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
-          "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
+  --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
+          'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
           sans-serif;
-  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-          "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
+  --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+          'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
   --amplify-font-sizes-xxxs: 0.375rem;
   --amplify-font-sizes-xxs: 0.5rem;
   --amplify-font-sizes-xs: 0.75rem;

package/dist/styles/base.layer.css

@@ -1513,11 +1513,11 @@
   --amplify-colors-black: hsl(0, 0%, 0%);
   --amplify-colors-white: hsl(0, 0%, 100%);
   --amplify-colors-transparent: transparent;
-  --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
-          "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
+  --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
+          'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
           sans-serif;
-  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-          "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
+  --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+          'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
   --amplify-font-sizes-xxxs: 0.375rem;
   --amplify-font-sizes-xxs: 0.5rem;
   --amplify-font-sizes-xs: 0.75rem;

package/dist/styles/button.css

@@ -334,9 +334,6 @@
   border-width: var(--amplify-components-button-menu-border-width);
   background-color: var(--amplify-components-button-menu-background-color);
   justify-content: var(--amplify-components-button-menu-justify-content);
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-menu-disabled-color
-  );
 }
 .amplify-button--menu:hover {
   color: var(--amplify-components-button-menu-hover-color);
@@ -351,6 +348,11 @@
   color: var(--amplify-components-button-menu-active-color);
   background-color: var(--amplify-components-button-menu-active-background-color);
 }
+.amplify-button--menu {
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-menu-disabled-color
+  );
+}
 .amplify-button--primary {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-primary-border-width
@@ -364,24 +366,6 @@
   --amplify-internal-button-color: var(
     --amplify-components-button-primary-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-primary-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-primary-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-primary-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-primary-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-primary-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-primary-loading-color
-  );
 }
 .amplify-button--primary:hover {
   --amplify-internal-button-background-color: var(
@@ -654,6 +638,26 @@
     --amplify-components-button-primary-overlay-active-color
   );
 }
+.amplify-button--primary {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-primary-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-primary-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-primary-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-primary-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-primary-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-primary-loading-color
+  );
+}
 .amplify-button--link {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-link-border-width
@@ -667,24 +671,6 @@
   --amplify-internal-button-color: var(
     --amplify-components-button-link-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-link-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-link-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-link-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-link-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-link-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-link-loading-color
-  );
 }
 .amplify-button--link:hover {
   --amplify-internal-button-background-color: var(
@@ -957,30 +943,32 @@
     --amplify-components-button-link-overlay-active-color
   );
 }
-.amplify-button--destructive {
-  border-width: var(--amplify-components-button-destructive-border-width);
-  background-color: var(--amplify-components-button-destructive-background-color);
-  border-color: var(--amplify-components-button-destructive-border-color);
-  color: var(--amplify-components-button-destructive-color);
+.amplify-button--link {
   --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-destructive-disabled-border-color
+    --amplify-components-button-link-disabled-border-color
   );
   --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-destructive-disabled-background-color
+    --amplify-components-button-link-disabled-background-color
   );
   --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-destructive-disabled-color
+    --amplify-components-button-link-disabled-color
   );
   --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-destructive-loading-background-color
+    --amplify-components-button-link-loading-background-color
   );
   --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-destructive-loading-border-color
+    --amplify-components-button-link-loading-border-color
   );
   --amplify-internal-button-loading-color: var(
-    --amplify-components-button-destructive-loading-color
+    --amplify-components-button-link-loading-color
   );
 }
+.amplify-button--destructive {
+  border-width: var(--amplify-components-button-destructive-border-width);
+  background-color: var(--amplify-components-button-destructive-background-color);
+  border-color: var(--amplify-components-button-destructive-border-color);
+  color: var(--amplify-components-button-destructive-color);
+}
 .amplify-button--destructive:hover {
   background-color: var(--amplify-components-button-destructive-hover-background-color);
   border-color: var(--amplify-components-button-destructive-hover-border-color);
@@ -997,6 +985,26 @@
   border-color: var(--amplify-components-button-destructive-active-border-color);
   color: var(--amplify-components-button-destructive-active-color);
 }
+.amplify-button--destructive {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-destructive-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-destructive-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-destructive-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-destructive-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-destructive-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-destructive-loading-color
+  );
+}
 .amplify-button--warning {
   background-color: var(--amplify-components-button-warning-background-color);
   border-color: var(--amplify-components-button-warning-border-color);

package/dist/styles/button.layer.css

@@ -335,9 +335,6 @@
   border-width: var(--amplify-components-button-menu-border-width);
   background-color: var(--amplify-components-button-menu-background-color);
   justify-content: var(--amplify-components-button-menu-justify-content);
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-menu-disabled-color
-  );
 }
 .amplify-button--menu:hover {
   color: var(--amplify-components-button-menu-hover-color);
@@ -352,6 +349,11 @@
   color: var(--amplify-components-button-menu-active-color);
   background-color: var(--amplify-components-button-menu-active-background-color);
 }
+.amplify-button--menu {
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-menu-disabled-color
+  );
+}
 .amplify-button--primary {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-primary-border-width
@@ -365,24 +367,6 @@
   --amplify-internal-button-color: var(
     --amplify-components-button-primary-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-primary-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-primary-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-primary-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-primary-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-primary-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-primary-loading-color
-  );
 }
 .amplify-button--primary:hover {
   --amplify-internal-button-background-color: var(
@@ -655,6 +639,26 @@
     --amplify-components-button-primary-overlay-active-color
   );
 }
+.amplify-button--primary {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-primary-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-primary-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-primary-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-primary-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-primary-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-primary-loading-color
+  );
+}
 .amplify-button--link {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-link-border-width
@@ -668,24 +672,6 @@
   --amplify-internal-button-color: var(
     --amplify-components-button-link-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-link-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-link-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-link-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-link-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-link-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-link-loading-color
-  );
 }
 .amplify-button--link:hover {
   --amplify-internal-button-background-color: var(
@@ -958,30 +944,32 @@
     --amplify-components-button-link-overlay-active-color
   );
 }
-.amplify-button--destructive {
-  border-width: var(--amplify-components-button-destructive-border-width);
-  background-color: var(--amplify-components-button-destructive-background-color);
-  border-color: var(--amplify-components-button-destructive-border-color);
-  color: var(--amplify-components-button-destructive-color);
+.amplify-button--link {
   --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-destructive-disabled-border-color
+    --amplify-components-button-link-disabled-border-color
   );
   --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-destructive-disabled-background-color
+    --amplify-components-button-link-disabled-background-color
   );
   --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-destructive-disabled-color
+    --amplify-components-button-link-disabled-color
   );
   --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-destructive-loading-background-color
+    --amplify-components-button-link-loading-background-color
   );
   --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-destructive-loading-border-color
+    --amplify-components-button-link-loading-border-color
   );
   --amplify-internal-button-loading-color: var(
-    --amplify-components-button-destructive-loading-color
+    --amplify-components-button-link-loading-color
   );
 }
+.amplify-button--destructive {
+  border-width: var(--amplify-components-button-destructive-border-width);
+  background-color: var(--amplify-components-button-destructive-background-color);
+  border-color: var(--amplify-components-button-destructive-border-color);
+  color: var(--amplify-components-button-destructive-color);
+}
 .amplify-button--destructive:hover {
   background-color: var(--amplify-components-button-destructive-hover-background-color);
   border-color: var(--amplify-components-button-destructive-hover-border-color);
@@ -998,6 +986,26 @@
   border-color: var(--amplify-components-button-destructive-active-border-color);
   color: var(--amplify-components-button-destructive-active-color);
 }
+.amplify-button--destructive {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-destructive-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-destructive-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-destructive-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-destructive-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-destructive-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-destructive-loading-color
+  );
+}
 .amplify-button--warning {
   background-color: var(--amplify-components-button-warning-background-color);
   border-color: var(--amplify-components-button-warning-border-color);

package/dist/styles/checkbox.css

@@ -42,6 +42,9 @@
   border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
   box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
 }
+.amplify-checkbox__button--error::before {
+  border-color: var(--amplify-components-checkbox-button-error-border-color);
+}
 .amplify-checkbox__button--error {
   --amplify-internal-checkbox_button-focused-before-border-color: var(
     --amplify-components-checkbox-button-error-focus-border-color
@@ -50,9 +53,6 @@
     --amplify-components-checkbox-button-error-focus-box-shadow
   );
 }
-.amplify-checkbox__button--error::before {
-  border-color: var(--amplify-components-checkbox-button-error-border-color);
-}
 .amplify-checkbox__button--disabled::before {
   border-color: var(--amplify-components-checkbox-button-disabled-border-color);
 }

package/dist/styles/checkbox.layer.css

@@ -43,6 +43,9 @@
   border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
   box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
 }
+.amplify-checkbox__button--error::before {
+  border-color: var(--amplify-components-checkbox-button-error-border-color);
+}
 .amplify-checkbox__button--error {
   --amplify-internal-checkbox_button-focused-before-border-color: var(
     --amplify-components-checkbox-button-error-focus-border-color
@@ -51,9 +54,6 @@
     --amplify-components-checkbox-button-error-focus-box-shadow
   );
 }
-.amplify-checkbox__button--error::before {
-  border-color: var(--amplify-components-checkbox-button-error-border-color);
-}
 .amplify-checkbox__button--disabled::before {
   border-color: var(--amplify-components-checkbox-button-disabled-border-color);
 }