@aws-amplify/ui-react 6.4.0 → 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/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/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.4.0';
+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');
 
@@ -2523,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.4.0';
+const VERSION = '6.5.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

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/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/components/ThemeProvider/ComponentStyle.d.ts

@@ -0,0 +1,20 @@
+import { WebTheme } from '@aws-amplify/ui';
+import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
+import { BaseComponentTheme } from '@aws-amplify/ui';
+interface BaseComponentStyleProps extends BaseComponentProps {
+    /**
+     * Provide a server generated nonce which matches your CSP `style-src` rule.
+     * This will be attached to the generated <style> tag.
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+     */
+    nonce?: string;
+    theme: Pick<WebTheme, 'name' | 'breakpoints' | 'tokens'>;
+    componentThemes: BaseComponentTheme[];
+}
+export type ComponentStyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseComponentStyleProps, Element>;
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const ComponentStyle: ForwardRefPrimitive<BaseComponentStyleProps, 'style'>;
+export {};

package/dist/types/components/ThemeProvider/Style.d.ts

@@ -0,0 +1,11 @@
+import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
+interface BaseStyleProps extends BaseComponentProps {
+    cssText?: string;
+}
+export type StyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseStyleProps, Element>;
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const Style: ForwardRefPrimitive<BaseStyleProps, 'style'>;
+export {};

package/dist/types/server.d.ts

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

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.4.0";
+export declare const VERSION = "6.5.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.5.0",
-    "@aws-amplify/ui-react-core": "3.0.23",
+    "@aws-amplify/ui": "6.6.0",
+    "@aws-amplify/ui-react-core": "3.0.24",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",