@aws-amplify/ui 6.15.4 → 6.15.6

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/index.mjs

@@ -73,6 +73,9 @@ function createAuthenticatorMachine(options) {
                     onDone: { actions: 'setUser', target: 'setup' },
                     onError: { target: 'setup' },
                 },
+                // handle a sign out occurring while `handleGetCurrentUser` is in flight,
+                // exiting cancels the invoke so a stale user cannot be applied
+                on: { SIGN_OUT: '#authenticator.signOut' },
             },
             setup: {
                 initial: 'initConfig',
@@ -118,6 +121,7 @@ function createAuthenticatorMachine(options) {
                     },
                     onError: { target: '#authenticator.setup' },
                 },
+                on: { SIGN_OUT: '#authenticator.signOut' },
             },
             signInActor: {
                 initial: 'spawnActor',
@@ -271,6 +275,14 @@ function createAuthenticatorMachine(options) {
             },
         },
         on: {
+            // `SIGN_OUT` handled by `setup.initConfig` moves the machine past setup without
+            // the UI ever sending `INIT`, leaving it configured with defaults. Accept `INIT`
+            // late so a subsequently rendered UI can still apply its `config` and `services`.
+            INIT: {
+                cond: 'shouldInitialize',
+                actions: 'configure',
+                target: '#authenticator.setup.getConfig',
+            },
             SIGN_IN_WITH_REDIRECT: { target: '#authenticator.getCurrentUser' },
             CHANGE: { actions: 'forwardToActor' },
             BLUR: { actions: 'forwardToActor' },
@@ -362,6 +374,7 @@ function createAuthenticatorMachine(options) {
                 return {
                     services: { ...defaultServices, ...customServices },
                     config,
+                    hasInitialized: true,
                 };
             }),
             setHasSetup: assign({ hasSetup: true }),
@@ -372,6 +385,9 @@ function createAuthenticatorMachine(options) {
             isInitialStateSignUp: ({ config }) => config.initialState === 'signUp',
             isInitialStateResetPassword: ({ config }) => config.initialState === 'forgotPassword',
             shouldSetup: ({ hasSetup }) => !hasSetup,
+            // `hasSetup` prevents the late `INIT` from interrupting `idle`, which must
+            // resolve `handleGetCurrentUser` before the machine leaves it
+            shouldInitialize: ({ hasSetup, hasInitialized }) => hasSetup && !hasInitialized,
             hasUser: ({ user }) => {
                 return !!user;
             },

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 ?? {};
@@ -6081,6 +6154,9 @@ function createAuthenticatorMachine(options) {
                     onDone: { actions: 'setUser', target: 'setup' },
                     onError: { target: 'setup' },
                 },
+                // handle a sign out occurring while `handleGetCurrentUser` is in flight,
+                // exiting cancels the invoke so a stale user cannot be applied
+                on: { SIGN_OUT: '#authenticator.signOut' },
             },
             setup: {
                 initial: 'initConfig',
@@ -6126,6 +6202,7 @@ function createAuthenticatorMachine(options) {
                     },
                     onError: { target: '#authenticator.setup' },
                 },
+                on: { SIGN_OUT: '#authenticator.signOut' },
             },
             signInActor: {
                 initial: 'spawnActor',
@@ -6279,6 +6356,14 @@ function createAuthenticatorMachine(options) {
             },
         },
         on: {
+            // `SIGN_OUT` handled by `setup.initConfig` moves the machine past setup without
+            // the UI ever sending `INIT`, leaving it configured with defaults. Accept `INIT`
+            // late so a subsequently rendered UI can still apply its `config` and `services`.
+            INIT: {
+                cond: 'shouldInitialize',
+                actions: 'configure',
+                target: '#authenticator.setup.getConfig',
+            },
             SIGN_IN_WITH_REDIRECT: { target: '#authenticator.getCurrentUser' },
             CHANGE: { actions: 'forwardToActor' },
             BLUR: { actions: 'forwardToActor' },
@@ -6370,6 +6455,7 @@ function createAuthenticatorMachine(options) {
                 return {
                     services: { ...defaultServices, ...customServices },
                     config,
+                    hasInitialized: true,
                 };
             }),
             setHasSetup: xstate.assign({ hasSetup: true }),
@@ -6380,6 +6466,9 @@ function createAuthenticatorMachine(options) {
             isInitialStateSignUp: ({ config }) => config.initialState === 'signUp',
             isInitialStateResetPassword: ({ config }) => config.initialState === 'forgotPassword',
             shouldSetup: ({ hasSetup }) => !hasSetup,
+            // `hasSetup` prevents the late `INIT` from interrupting `idle`, which must
+            // resolve `handleGetCurrentUser` before the machine leaves it
+            shouldInitialize: ({ hasSetup, hasInitialized }) => hasSetup && !hasInitialized,
             hasUser: ({ user }) => {
                 return !!user;
             },

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);