@aws-amplify/ui-react 6.3.1 → 6.5.0

package/dist/{ThemeStyle-b2dce96a.js → ThemeStyle-1fee4302.js}

@@ -23,10 +23,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
-    if (!theme)
-        return null;
-    const { name, cssText } = theme;
+const StylePrimitive = ({ cssText, ...rest }, ref) => {
     /*
       Only inject theme CSS variables if given a theme.
       The CSS file users import already has the default theme variables in it.
@@ -72,14 +69,25 @@ const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
           Therefore, by only rendering CSS text which does not include a closing '</style>' tag,
           we ensure that the browser will correctly interpret all the text as CSS.
     */
-    if (/<\/style/i.test(cssText)) {
+    if (cssText === undefined || /<\/style/i.test(cssText)) {
         return null;
     }
-    else {
-        return (React__namespace.createElement("style", { ...rest, ref: ref, id: `amplify-theme-${name}`, 
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce }));
-    }
+    return (React__namespace.createElement("style", { ...rest, ref: ref, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: cssText } }));
+};
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const Style = primitiveWithForwardRef.primitiveWithForwardRef(StylePrimitive);
+Style.displayName = 'Style';
+
+const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
+    if (!theme)
+        return null;
+    const { name, cssText } = theme;
+    return (React__namespace.createElement(Style, { ...rest, ref: ref, cssText: cssText, nonce: nonce, id: `amplify-theme-${name}` }));
 };
 /**
  * @experimental
@@ -88,4 +96,5 @@ const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
 const ThemeStyle = primitiveWithForwardRef.primitiveWithForwardRef(ThemeStylePrimitive);
 ThemeStyle.displayName = 'ThemeStyle';
 
+exports.Style = Style;
 exports.ThemeStyle = ThemeStyle;

package/dist/esm/PrimitiveCatalog.mjs

@@ -658,6 +658,9 @@ const PrimitiveCatalog = {
             "size": {
                 "type": "string"
             },
+            "isLoading": {
+                "type": "boolean"
+            },
             "isDisabled": {
                 "type": "boolean"
             },

package/dist/esm/components/ThemeProvider/ComponentStyle.mjs

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createComponentCSS } from '@aws-amplify/ui';
+import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
+import { Style } from './Style.mjs';
+
+const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref) => {
+    if (!theme || !componentThemes.length) {
+        return null;
+    }
+    const cssText = createComponentCSS({
+        theme,
+        components: componentThemes,
+    });
+    return React.createElement(Style, { ...rest, ref: ref, cssText: cssText });
+};
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ComponentStyle = primitiveWithForwardRef(ComponentStylePrimitive);
+ComponentStyle.displayName = 'ComponentStyle';
+
+export { ComponentStyle };

package/dist/esm/components/ThemeProvider/Style.mjs

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
+
+const StylePrimitive = ({ cssText, ...rest }, ref) => {
+    /*
+      Only inject theme CSS variables if given a theme.
+      The CSS file users import already has the default theme variables in it.
+      This will allow users to use the provider and theme with CSS variables
+      without having to worry about specificity issues because this stylesheet
+      will likely come after a user's defined CSS.
+  
+      Q: Why are we using dangerouslySetInnerHTML?
+      A: We need to directly inject the theme's CSS string into the <style> tag without typical HTML escaping.
+          For example, JSX would escape characters meaningful in CSS such as ', ", < and >, thus breaking the CSS.
+      Q: Why not use a sanitization library such as DOMPurify?
+      A: For our use case, we specifically want to purify CSS text, *not* HTML.
+          DOMPurify, as well as any other HTML sanitization library, would escape/encode meaningful CSS characters
+          and break our CSS in the same way that JSX would.
+  
+      Q: Are there any security risks in this particular use case?
+      A: Anything set inside of a <style> tag is always interpreted as CSS text, *not* HTML.
+          Reference: “Restrictions on the content of raw text elements” https://html.spec.whatwg.org/dev/syntax.html#cdata-rcdata-restrictions
+          And in our case, we are using dangerouslySetInnerHTML to set CSS text inside of a <style> tag.
+              
+          Thus, it really comes down to the question: Could a malicious user escape from the context of the <style> tag?
+          For example, when inserting HTML into the DOM, could someone prematurely close the </style> tag and add a <script> tag?
+            e.g., </style><script>alert('hello')</script>
+          The answer depends on whether the code is rendered on the client or server side.
+  
+          Client side
+          - To prevent XSS inside of the <style> tag, we need to make sure it's not closed prematurely.
+          - This is prevented by React because React creates a style DOM node (e.g., React.createElement(‘style’, ...)), and directly sets innerHTML as a string.
+          - Even if the string contains a closing </style> tag, it will still be interpreted as CSS text by the browser.
+          - Therefore, there is not an XSS vulnerability on the client side.
+  
+          Server side
+          - When React code is rendered on the server side (e.g., NextJS), the code is sent to the browser as HTML text.
+          - Therefore, it *IS* possible to insert a closing </style> tag and escape the CSS context, which opens an XSS vulnerability.
+  
+      Q: How are we mitigating the potential attack vector?
+      A: To fix this potential attack vector on the server side, we need to filter out any closing </style> tags,
+          as this the only way to escape from the context of the browser interpreting the text as CSS.
+          We also need to catch cases where there is any kind of whitespace character </style[HERE]>, such as tabs, carriage returns, etc:
+          </style
+          
+          >
+          Therefore, by only rendering CSS text which does not include a closing '</style>' tag,
+          we ensure that the browser will correctly interpret all the text as CSS.
+    */
+    if (cssText === undefined || /<\/style/i.test(cssText)) {
+        return null;
+    }
+    return (React.createElement("style", { ...rest, ref: ref, 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: { __html: cssText } }));
+};
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const Style = primitiveWithForwardRef(StylePrimitive);
+Style.displayName = 'Style';
+
+export { Style };

package/dist/esm/components/ThemeProvider/ThemeStyle.mjs

@@ -1,63 +1,12 @@
 import * as React from 'react';
 import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
+import { Style } from './Style.mjs';
 
 const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
     if (!theme)
         return null;
     const { name, cssText } = theme;
-    /*
-      Only inject theme CSS variables if given a theme.
-      The CSS file users import already has the default theme variables in it.
-      This will allow users to use the provider and theme with CSS variables
-      without having to worry about specificity issues because this stylesheet
-      will likely come after a user's defined CSS.
-  
-      Q: Why are we using dangerouslySetInnerHTML?
-      A: We need to directly inject the theme's CSS string into the <style> tag without typical HTML escaping.
-          For example, JSX would escape characters meaningful in CSS such as ', ", < and >, thus breaking the CSS.
-      Q: Why not use a sanitization library such as DOMPurify?
-      A: For our use case, we specifically want to purify CSS text, *not* HTML.
-          DOMPurify, as well as any other HTML sanitization library, would escape/encode meaningful CSS characters
-          and break our CSS in the same way that JSX would.
-  
-      Q: Are there any security risks in this particular use case?
-      A: Anything set inside of a <style> tag is always interpreted as CSS text, *not* HTML.
-          Reference: “Restrictions on the content of raw text elements” https://html.spec.whatwg.org/dev/syntax.html#cdata-rcdata-restrictions
-          And in our case, we are using dangerouslySetInnerHTML to set CSS text inside of a <style> tag.
-              
-          Thus, it really comes down to the question: Could a malicious user escape from the context of the <style> tag?
-          For example, when inserting HTML into the DOM, could someone prematurely close the </style> tag and add a <script> tag?
-            e.g., </style><script>alert('hello')</script>
-          The answer depends on whether the code is rendered on the client or server side.
-  
-          Client side
-          - To prevent XSS inside of the <style> tag, we need to make sure it's not closed prematurely.
-          - This is prevented by React because React creates a style DOM node (e.g., React.createElement(‘style’, ...)), and directly sets innerHTML as a string.
-          - Even if the string contains a closing </style> tag, it will still be interpreted as CSS text by the browser.
-          - Therefore, there is not an XSS vulnerability on the client side.
-  
-          Server side
-          - When React code is rendered on the server side (e.g., NextJS), the code is sent to the browser as HTML text.
-          - Therefore, it *IS* possible to insert a closing </style> tag and escape the CSS context, which opens an XSS vulnerability.
-  
-      Q: How are we mitigating the potential attack vector?
-      A: To fix this potential attack vector on the server side, we need to filter out any closing </style> tags,
-          as this the only way to escape from the context of the browser interpreting the text as CSS.
-          We also need to catch cases where there is any kind of whitespace character </style[HERE]>, such as tabs, carriage returns, etc:
-          </style
-          
-          >
-          Therefore, by only rendering CSS text which does not include a closing '</style>' tag,
-          we ensure that the browser will correctly interpret all the text as CSS.
-    */
-    if (/<\/style/i.test(cssText)) {
-        return null;
-    }
-    else {
-        return (React.createElement("style", { ...rest, ref: ref, id: `amplify-theme-${name}`, 
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce }));
-    }
+    return (React.createElement(Style, { ...rest, ref: ref, cssText: cssText, nonce: nonce, id: `amplify-theme-${name}` }));
 };
 /**
  * @experimental

package/dist/esm/primitives/Avatar/Avatar.mjs

@@ -7,12 +7,15 @@ import '../Icon/context/IconsContext.mjs';
 import { useIcons } from '../Icon/context/useIcons.mjs';
 import { IconUser } from '../Icon/icons/IconUser.mjs';
 import { Image } from '../Image/Image.mjs';
+import { Loader } from '../Loader/Loader.mjs';
 
-const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...rest }, ref) => {
+const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
     const icons = useIcons('avatar');
     const icon = icons?.user ?? React.createElement(IconUser, null);
     const componentClasses = classNames(ComponentClassName.Avatar, className, classNameModifier(ComponentClassName.Avatar, variation), classNameModifier(ComponentClassName.Avatar, size), classNameModifier(ComponentClassName.Avatar, colorTheme));
-    return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest }, src ? (React.createElement(Image, { className: ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React.createElement(View, { as: "span", className: ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon)))));
+    return (React.createElement(View, { as: "span", className: componentClasses, ref: ref, ...rest },
+        src ? (React.createElement(Image, { className: ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React.createElement(View, { as: "span", className: ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon))),
+        isLoading ? (React.createElement(Loader, { className: ComponentClassName.AvatarLoader })) : null));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)

package/dist/esm/server.mjs

@@ -1,2 +1,3 @@
 export { ThemeStyle } from './components/ThemeProvider/ThemeStyle.mjs';
+export { ComponentStyle } from './components/ThemeProvider/ComponentStyle.mjs';
 export { createComponentClasses, createTheme, defaultDarkModeOverride, defaultTheme, defineComponentTheme } from '@aws-amplify/ui';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.3.1';
+const VERSION = '6.5.0';
 
 export { VERSION };

package/dist/index.js

@@ -15,7 +15,7 @@ var RadixSlider = require('@radix-ui/react-slider');
 var QRCode = require('qrcode');
 var utils = require('aws-amplify/utils');
 var RadixDirection = require('@radix-ui/react-direction');
-var ThemeStyle = require('./ThemeStyle-b2dce96a.js');
+var ThemeStyle = require('./ThemeStyle-1fee4302.js');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
 
@@ -669,11 +669,13 @@ const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.create
 const Image = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
 Image.displayName = 'Image';
 
-const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, ...rest }, ref) => {
+const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
     const icons = Field.useIcons('avatar');
     const icon = icons?.user ?? React__namespace.createElement(Field.IconUser, null);
     const componentClasses = ui.classNames(ui.ComponentClassName.Avatar, className, ui.classNameModifier(ui.ComponentClassName.Avatar, variation), ui.classNameModifier(ui.ComponentClassName.Avatar, size), ui.classNameModifier(ui.ComponentClassName.Avatar, colorTheme));
-    return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest }, src ? (React__namespace.createElement(Image, { className: ui.ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon)))));
+    return (React__namespace.createElement(Field.View, { as: "span", className: componentClasses, ref: ref, ...rest },
+        src ? (React__namespace.createElement(Image, { className: ui.ComponentClassName.AvatarImage, src: src, alt: alt })) : (children ?? (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.AvatarIcon, "aria-hidden": "true" }, icon))),
+        isLoading ? (React__namespace.createElement(Field.Loader, { className: ui.ComponentClassName.AvatarLoader })) : null));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
@@ -2521,7 +2523,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.3.1';
+const VERSION = '6.5.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

package/dist/internal.js

@@ -818,6 +818,9 @@ const PrimitiveCatalog = {
             "size": {
                 "type": "string"
             },
+            "isLoading": {
+                "type": "boolean"
+            },
             "isDisabled": {
                 "type": "boolean"
             },

package/dist/server.js

@@ -2,31 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ThemeStyle = require('./ThemeStyle-b2dce96a.js');
+var ThemeStyle = require('./ThemeStyle-1fee4302.js');
+var React = require('react');
 var ui = require('@aws-amplify/ui');
-require('react');
-require('./primitiveWithForwardRef-7e929242.js');
+var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
 
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref) => {
+    if (!theme || !componentThemes.length) {
+        return null;
+    }
+    const cssText = ui.createComponentCSS({
+        theme,
+        components: componentThemes,
+    });
+    return React__namespace.createElement(ThemeStyle.Style, { ...rest, ref: ref, cssText: cssText });
+};
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ComponentStyle = primitiveWithForwardRef.primitiveWithForwardRef(ComponentStylePrimitive);
+ComponentStyle.displayName = 'ComponentStyle';
 
 exports.ThemeStyle = ThemeStyle.ThemeStyle;
 Object.defineProperty(exports, 'createComponentClasses', {
-	enumerable: true,
-	get: function () { return ui.createComponentClasses; }
+    enumerable: true,
+    get: function () { return ui.createComponentClasses; }
 });
 Object.defineProperty(exports, 'createTheme', {
-	enumerable: true,
-	get: function () { return ui.createTheme; }
+    enumerable: true,
+    get: function () { return ui.createTheme; }
 });
 Object.defineProperty(exports, 'defaultDarkModeOverride', {
-	enumerable: true,
-	get: function () { return ui.defaultDarkModeOverride; }
+    enumerable: true,
+    get: function () { return ui.defaultDarkModeOverride; }
 });
 Object.defineProperty(exports, 'defaultTheme', {
-	enumerable: true,
-	get: function () { return ui.defaultTheme; }
+    enumerable: true,
+    get: function () { return ui.defaultTheme; }
 });
 Object.defineProperty(exports, 'defineComponentTheme', {
-	enumerable: true,
-	get: function () { return ui.defineComponentTheme; }
+    enumerable: true,
+    get: function () { return ui.defineComponentTheme; }
 });
+exports.ComponentStyle = ComponentStyle;

package/dist/styles/avatar.css

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

package/dist/styles/avatar.layer.css

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

package/dist/styles/breadcrumbs.css

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

package/dist/styles/breadcrumbs.layer.css

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

package/dist/styles/button.css

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