@aws-amplify/ui-react 6.1.13 → 6.2.0

package/dist/{Field-1f747369.js → Field-d47a49dc.js}

@@ -5,6 +5,7 @@ var core = require('@aws-amplify/core');
 var auth = require('aws-amplify/auth');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
+var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -635,17 +636,6 @@ const useStyles = (props, style) => {
     }), [propStyles, style, breakpoints, breakpoint, tokens]);
 };
 
-/**
- * Updates the return type for primitives wrapped in `React.forwardRef` to
- * `React.ReactElement`. In React 18 the return type of `React.ExoticComponent`
- * was changed from `React.ReactElement` to `React.ReactNode`, which breaks
- * clients using React 16 and 17.
- *
- * @param primitive UI Primitive to be wrapped with `React.forwardRef`
- * @returns ForwaredRef wrapped UI Primitive
- */
-const primitiveWithForwardRef = (primitive) => React__namespace.forwardRef(primitive);
-
 const ViewPrimitive = ({ as = 'div', children, testId, ariaLabel, isDisabled, style, inert, ...rest }, ref) => {
     const { propStyles, nonStyleProps } = useStyles(rest, style);
     return React__namespace.createElement(as, {
@@ -661,7 +651,7 @@ const ViewPrimitive = ({ as = 'div', children, testId, ariaLabel, isDisabled, st
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/view)
  */
-const View = primitiveWithForwardRef(ViewPrimitive);
+const View = primitiveWithForwardRef.primitiveWithForwardRef(ViewPrimitive);
 View.displayName = 'View';
 
 const defaultViewBox = { minX: 0, minY: 0, width: 24, height: 24 };
@@ -691,7 +681,7 @@ as = 'svg', fill = 'currentColor', pathData, viewBox = defaultViewBox, children,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/icon)
  */
-const Icon = primitiveWithForwardRef(IconPrimitive);
+const Icon = primitiveWithForwardRef.primitiveWithForwardRef(IconPrimitive);
 Icon.displayName = 'Icon';
 
 const IconsContext = React__namespace.createContext({});
@@ -994,7 +984,7 @@ function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _
 const FieldGroupIconPrimitive = ({ className, children, isVisible = true, excludeFromTabOrder = false, ...rest }, ref) => {
     return isVisible ? (React__namespace.createElement(View, { className: ui.classNames(ui.ComponentClassName.FieldGroupIcon, className), ref: ref, tabIndex: excludeFromTabOrder ? -1 : undefined, ...rest }, children)) : null;
 };
-const FieldGroupIcon = primitiveWithForwardRef(FieldGroupIconPrimitive);
+const FieldGroupIcon = primitiveWithForwardRef.primitiveWithForwardRef(FieldGroupIconPrimitive);
 FieldGroupIcon.displayName = 'FieldGroupIcon';
 
 const FieldsetContext = React__namespace.createContext({
@@ -1011,7 +1001,7 @@ const FlexPrimitive = ({ className, children, ...rest }, ref) => (React__namespa
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/flex)
  */
-const Flex = primitiveWithForwardRef(FlexPrimitive);
+const Flex = primitiveWithForwardRef.primitiveWithForwardRef(FlexPrimitive);
 Flex.displayName = 'Flex';
 
 const LINEAR_EMPTY = 'linear-empty';
@@ -1061,7 +1051,7 @@ const LoaderPrimitive = ({ className, filledColor, emptyColor, size, variation,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/loader)
  */
-const Loader = primitiveWithForwardRef(LoaderPrimitive);
+const Loader = primitiveWithForwardRef.primitiveWithForwardRef(LoaderPrimitive);
 Loader.displayName = 'Loader';
 
 // These variations support colorThemes. 'undefined' accounts for our
@@ -1085,11 +1075,11 @@ const ButtonPrimitive = ({ className, children, colorTheme, isFullWidth = false,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/button)
  */
-const Button = primitiveWithForwardRef(ButtonPrimitive);
+const Button = primitiveWithForwardRef.primitiveWithForwardRef(ButtonPrimitive);
 Button.displayName = 'Button';
 
 const FieldGroupIconButtonPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(FieldGroupIcon, { as: Button, className: ui.classNames(ui.ComponentClassName.FieldGroupIconButton, className), ref: ref, ...rest }, children));
-const FieldGroupIconButton = primitiveWithForwardRef(FieldGroupIconButtonPrimitive);
+const FieldGroupIconButton = primitiveWithForwardRef.primitiveWithForwardRef(FieldGroupIconButtonPrimitive);
 FieldGroupIconButton.displayName = 'FieldGroupIconButton';
 
 const ariaLabelText = ComponentText.Fields.clearButtonLabel;
@@ -1097,7 +1087,7 @@ const FieldClearButtonPrimitive = ({ ariaLabel = ariaLabelText, size, ...rest },
     const icons = useIcons('field');
     return (React__namespace.createElement(FieldGroupIconButton, { ariaLabel: ariaLabel, size: size, ref: ref, ...rest }, icons?.clear ?? React__namespace.createElement(IconClose, null)));
 };
-const FieldClearButton = primitiveWithForwardRef(FieldClearButtonPrimitive);
+const FieldClearButton = primitiveWithForwardRef.primitiveWithForwardRef(FieldClearButtonPrimitive);
 FieldClearButton.displayName = 'FieldClearButton';
 
 const TextPrimitive = ({ as = 'p', className, children, isTruncated, variation, ...rest }, ref) => {
@@ -1107,7 +1097,7 @@ const TextPrimitive = ({ as = 'p', className, children, isTruncated, variation,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/text)
  */
-const Text = primitiveWithForwardRef(TextPrimitive);
+const Text = primitiveWithForwardRef.primitiveWithForwardRef(TextPrimitive);
 Text.displayName = 'Text';
 
 const QA_FIELD_DESCRIPTION = 'qa-field-description';
@@ -1126,7 +1116,7 @@ const LabelPrimitive = ({ children, className, visuallyHidden, ...rest }, ref) =
             [ui.ComponentClassName.VisuallyHidden]: visuallyHidden,
         }), ref: ref, ...rest }, children));
 };
-const Label = primitiveWithForwardRef(LabelPrimitive);
+const Label = primitiveWithForwardRef.primitiveWithForwardRef(LabelPrimitive);
 Label.displayName = 'Label';
 
 const FieldPrimitive = (props, ref) => {
@@ -1137,7 +1127,7 @@ const FieldPrimitive = (props, ref) => {
         children,
         errorMessage ? (React__namespace.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })) : null));
 };
-const Field = primitiveWithForwardRef(FieldPrimitive);
+const Field = primitiveWithForwardRef.primitiveWithForwardRef(FieldPrimitive);
 Field.displayName = 'Field';
 
 exports.ARROW_DOWN = ARROW_DOWN;
@@ -1184,7 +1174,6 @@ exports.View = View;
 exports.getConsecutiveIntArray = getConsecutiveIntArray;
 exports.getStyleValue = getStyleValue;
 exports.getValueAtCurrentBreakpoint = getValueAtCurrentBreakpoint;
-exports.primitiveWithForwardRef = primitiveWithForwardRef;
 exports.strHasLength = strHasLength;
 exports.useAuth = useAuth;
 exports.useBreakpoint = useBreakpoint;

package/dist/ThemeStyle-b2dce96a.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var React = require('react');
+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 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__namespace.createElement("style", { ...rest, ref: ref, id: `amplify-theme-${name}`, 
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce }));
+    }
+};
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ThemeStyle = primitiveWithForwardRef.primitiveWithForwardRef(ThemeStylePrimitive);
+ThemeStyle.displayName = 'ThemeStyle';
+
+exports.ThemeStyle = ThemeStyle;

package/dist/esm/components/Authenticator/ConfirmSignUp/ConfirmSignUp.mjs

@@ -32,8 +32,8 @@ function ConfirmSignUp({ className, variation, }) {
                     React__default.createElement(Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
                     React__default.createElement(FormFields, null),
                     React__default.createElement(RemoteErrorMessage, null),
-                    React__default.createElement(Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText(), isLoading: isPending, fontWeight: "normal" }, getConfirmText()),
-                    React__default.createElement(Button, { onClick: resendCode, type: "button", fontWeight: "normal" }, getResendCodeText())),
+                    React__default.createElement(Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText(), isLoading: isPending }, getConfirmText()),
+                    React__default.createElement(Button, { onClick: resendCode, type: "button" }, getResendCodeText())),
                 React__default.createElement(Footer, null)))));
 }
 const DefaultHeader = () => {

package/dist/esm/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.mjs

@@ -46,7 +46,7 @@ const FederatedSignInButton = (props) => {
     else if (icon === 'apple') {
         iconComponent = React__default.createElement(AppleIcon, null);
     }
-    return (React__default.createElement(Button, { onClick: handleClick, className: "federated-sign-in-button", fontWeight: "normal", gap: "1rem" },
+    return (React__default.createElement(Button, { onClick: handleClick, className: "federated-sign-in-button", gap: "1rem" },
         iconComponent,
         React__default.createElement(Text, { as: "span" }, text)));
 };

package/dist/esm/components/Authenticator/ForceNewPassword/ForceNewPassword.mjs

@@ -26,8 +26,8 @@ const ForceNewPassword = ({ className, variation, }) => {
                 React__default.createElement(Header, null),
                 React__default.createElement(FormFields, null),
                 React__default.createElement(RemoteErrorMessage, null),
-                React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText(), fontWeight: "normal" }, getChangePasswordText()),
-                React__default.createElement(Button, { onClick: toSignIn, type: "button", fontWeight: "normal", variation: "link", size: "small" }, getBackToSignInText()),
+                React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText() }, getChangePasswordText()),
+                React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText()),
                 React__default.createElement(Footer, null)))));
 };
 ForceNewPassword.FormFields = function FormFields$1() {

package/dist/esm/components/Authenticator/SignIn/SignIn.mjs

@@ -28,15 +28,15 @@ function SignIn() {
                         React__default.createElement("legend", null, getSignInText())),
                     React__default.createElement(FormFields, null)),
                 React__default.createElement(RemoteErrorMessage, null),
-                React__default.createElement(Button, { isDisabled: isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()))),
-        React__default.createElement(Footer, null)));
+                React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()),
+                React__default.createElement(Footer, null)))));
 }
 const DefaultFooter = () => {
     const { toForgotPassword } = useAuthenticator((context) => [
         context.toForgotPassword,
     ]);
     return (React__default.createElement(View, { "data-amplify-footer": "" },
-        React__default.createElement(Button, { fontWeight: "normal", onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
+        React__default.createElement(Button, { onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
 };
 SignIn.Footer = DefaultFooter;
 SignIn.Header = function Header() {

package/dist/esm/components/Authenticator/SignUp/SignUp.mjs

@@ -28,8 +28,8 @@ function SignUp() {
                 React__default.createElement(Flex, { direction: "column" },
                     React__default.createElement(FormFields, null),
                     React__default.createElement(RemoteErrorMessage, null)),
-                React__default.createElement(Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()))),
-        React__default.createElement(Footer, null)));
+                React__default.createElement(Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()),
+                React__default.createElement(Footer, null)))));
 }
 SignUp.Header = function Header() {
     // @ts-ignore

package/dist/esm/components/Authenticator/VerifyUser/VerifyUser.mjs

@@ -13,9 +13,9 @@ import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
 
 const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
 const generateRadioGroup = (attributes) => {
-    return Object.entries(attributes).map(([key, value]) => {
+    return Object.entries(attributes).map(([key, value], index) => {
         const verificationType = defaultFormFieldOptions[key].label;
-        return (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
+        return (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key, defaultChecked: index === 0 },
             translate(verificationType),
             ":",
             ' ',

package/dist/esm/components/Authenticator/shared/ConfirmSignInFooter.mjs

@@ -11,8 +11,8 @@ const ConfirmSignInFooter = () => {
         context.toSignIn,
     ]);
     return (React__default.createElement(Flex, { direction: "column" },
-        React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", fontWeight: "normal", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
-        React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", fontWeight: "normal", size: "small" }, getBackToSignInText())));
+        React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
+        React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText())));
 };
 
 export { ConfirmSignInFooter };

package/dist/esm/components/Authenticator/shared/TwoButtonSubmitFooter.mjs

@@ -28,8 +28,9 @@ const TwoButtonSubmitFooter = (props) => {
         "\u2026")) : (React__default.createElement(React__default.Fragment, null, getSubmitText()));
     const submitText = submitButtonText ?? defaultSubmitText;
     return (React__default.createElement(Flex, { direction: "column" },
-        React__default.createElement(Button, { fontWeight: "normal", variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
-        React__default.createElement(Button, { onClick: onClick, type: "button", variation: "link", fontWeight: "normal", size: "small" }, cancelButtonText)));
+        React__default.createElement(Button, { variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
+        React__default.createElement(Flex, { direction: "column", alignItems: "center" },
+            React__default.createElement(Button, { onClick: onClick, type: "button", variation: "link", size: "small" }, cancelButtonText))));
 };
 
 export { TwoButtonSubmitFooter };

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as RadixDirection from '@radix-ui/react-direction';
 import { sanitizeNamespaceImport, createTheme } from '@aws-amplify/ui';
 import { ThemeContext } from './ThemeContext.mjs';
+import { ThemeStyle } from './ThemeStyle.mjs';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
 // We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
@@ -11,13 +12,10 @@ const { DirectionProvider } = sanitizeNamespaceImport(RadixDirection);
  */
 function ThemeProvider({ children, colorMode, direction = 'ltr', nonce, theme, }) {
     const value = React.useMemo(() => ({ theme: createTheme(theme), colorMode }), [theme, colorMode]);
-    const { theme: { name, cssText }, } = value;
     return (React.createElement(ThemeContext.Provider, { value: value },
         React.createElement(DirectionProvider, { dir: direction },
-            React.createElement("div", { "data-amplify-theme": name, "data-amplify-color-mode": colorMode, dir: direction }, children),
-            typeof theme === 'undefined' || /<\/style/i.test(cssText) ? null : (React.createElement("style", { id: `amplify-theme-${name}`, 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce })))));
+            React.createElement("div", { "data-amplify-theme": value.theme.name, "data-amplify-color-mode": colorMode, dir: direction }, children),
+            theme ? React.createElement(ThemeStyle, { theme: value.theme, nonce: nonce }) : null)));
 }
 
 export { ThemeProvider };

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.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 }));
+    }
+};
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ThemeStyle = primitiveWithForwardRef(ThemeStylePrimitive);
+ThemeStyle.displayName = 'ThemeStyle';
+
+export { ThemeStyle };

package/dist/esm/helpers/constants.mjs

@@ -0,0 +1,9 @@
+import { isFunction } from '@aws-amplify/ui';
+
+(typeof Symbol !== 'undefined' && isFunction(Symbol.for)
+    ? Symbol.for('amplify_default')
+    : '@@amplify_default');
+const ERROR_SUFFIX = 'error';
+const DESCRIPTION_SUFFIX = 'description';
+
+export { DESCRIPTION_SUFFIX, ERROR_SUFFIX };

package/dist/esm/primitives/Checkbox/Checkbox.mjs

@@ -10,7 +10,7 @@ import { IconIndeterminate } from '../Icon/icons/IconIndeterminate.mjs';
 import { Input } from '../Input/Input.mjs';
 import { Text } from '../Text/Text.mjs';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { getTestId } from '../utils/getTestId.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
 import { useFieldset } from '../Fieldset/useFieldset.mjs';
@@ -57,9 +57,9 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
                 isIndeterminate;
         }
     }, [dataId, isIndeterminate]);
-    const buttonTestId = getTestId(testId, ComponentClassName.CheckboxButton);
-    const iconTestId = getTestId(testId, ComponentClassName.CheckboxIcon);
-    const labelTestId = getTestId(testId, ComponentClassName.CheckboxLabel);
+    const buttonTestId = getUniqueComponentId(testId, ComponentClassName.CheckboxButton);
+    const iconTestId = getUniqueComponentId(testId, ComponentClassName.CheckboxIcon);
+    const labelTestId = getUniqueComponentId(testId, ComponentClassName.CheckboxLabel);
     const flexClasses = classNames(ComponentClassName.CheckboxButton, classNameModifierByFlag(ComponentClassName.CheckboxButton, 'disabled', shouldBeDisabled), classNameModifierByFlag(ComponentClassName.CheckboxButton, 'error', hasError), classNameModifierByFlag(ComponentClassName.CheckboxButton, 'focused', focused));
     const iconClasses = classNames(ComponentClassName.CheckboxIcon, classNameModifierByFlag(ComponentClassName.CheckboxIcon, 'checked', checked), classNameModifierByFlag(ComponentClassName.CheckboxIcon, 'disabled', shouldBeDisabled), classNameModifierByFlag(ComponentClassName.CheckboxIcon, 'indeterminate', isIndeterminate));
     const iconProps = {

package/dist/esm/primitives/CheckboxField/CheckboxField.mjs

@@ -5,12 +5,12 @@ import '../Field/FieldClearButton.mjs';
 import '../Field/FieldDescription.mjs';
 import { FieldErrorMessage } from '../Field/FieldErrorMessage.mjs';
 import '../Field/Field.mjs';
-import { getTestId } from '../utils/getTestId.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { Flex } from '../Flex/Flex.mjs';
 
 const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, labelHidden = false, labelPosition, testId, size, ...rest }, ref) => {
-    const checkboxTestId = getTestId(testId, ComponentClassName.Checkbox);
+    const checkboxTestId = getUniqueComponentId(testId, ComponentClassName.Checkbox);
     return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, ComponentClassName.CheckboxField, classNameModifier(ComponentClassName.Field, size), className), testId: testId },
         React.createElement(Checkbox, { hasError: hasError, labelHidden: labelHidden, testId: checkboxTestId, labelPosition: labelPosition, ref: ref, ...rest }),
         React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));

package/dist/esm/primitives/HighlightMatch/HighlightMatch.mjs

@@ -2,11 +2,11 @@ import { classNames, ComponentClassName } from '@aws-amplify/ui';
 import * as React from 'react';
 import { View } from '../View/View.mjs';
 import { strHasLength } from '../shared/utils.mjs';
-import { getTestId } from '../utils/getTestId.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
 const HighlightMatchPrimitive = ({ children, className, query, testId, ...rest }, ref) => {
-    const matchTestId = getTestId(testId, 'match');
+    const matchTestId = getUniqueComponentId(testId, 'match');
     const startIndex = children
         ?.toLocaleLowerCase()
         .indexOf(query?.toLocaleLowerCase());

package/dist/esm/primitives/RadioGroupField/RadioGroupField.mjs

@@ -8,15 +8,23 @@ import { Fieldset } from '../Fieldset/Fieldset.mjs';
 import '../Fieldset/useFieldset.mjs';
 import { Flex } from '../Flex/Flex.mjs';
 import { RadioGroupContext } from './context.mjs';
-import { getTestId } from '../utils/getTestId.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
+import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
 
 const RadioGroupFieldPrimitive = ({ children, className, defaultValue, descriptiveText, errorMessage, hasError = false, id, isDisabled, isRequired, isReadOnly, legend, legendHidden = false, labelPosition, onChange, name, size, testId, value, variation, ...rest }, ref) => {
     const fieldId = useStableId(id);
-    const descriptionId = useStableId();
-    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
-    const radioGroupTestId = getTestId(testId, ComponentClassName.RadioGroup);
+    const stableId = useStableId();
+    const descriptionId = descriptiveText
+        ? getUniqueComponentId(stableId, DESCRIPTION_SUFFIX)
+        : undefined;
+    const errorId = hasError
+        ? getUniqueComponentId(stableId, ERROR_SUFFIX)
+        : undefined;
+    const ariaDescribedBy = createSpaceSeparatedIds([errorId, descriptionId]);
+    const radioGroupTestId = getUniqueComponentId(testId, ComponentClassName.RadioGroup);
     const radioGroupContextValue = React.useMemo(() => ({
         currentValue: value,
         defaultValue,
@@ -44,7 +52,7 @@ const RadioGroupFieldPrimitive = ({ children, className, defaultValue, descripti
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: legendHidden, descriptiveText: descriptiveText }),
         React.createElement(Flex, { "aria-describedby": ariaDescribedBy, className: ComponentClassName.RadioGroup, id: fieldId, testId: radioGroupTestId },
             React.createElement(RadioGroupContext.Provider, { value: radioGroupContextValue }, children)),
-        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/radiogroupfield)

package/dist/esm/primitives/SelectField/SelectField.mjs

@@ -10,6 +10,9 @@ import { Select } from '../Select/Select.mjs';
 import { splitPrimitiveProps } from '../utils/splitPrimitiveProps.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
+import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
 const selectFieldChildren = ({ children, options, }) => {
     if (children) {
@@ -24,14 +27,20 @@ const selectFieldChildren = ({ children, options, }) => {
 const SelectFieldPrimitive = (props, ref) => {
     const { children, className, descriptiveText, errorMessage, hasError = false, id, label, labelHidden = false, options, size, testId, inputStyles, ..._rest } = props;
     const fieldId = useStableId(id);
-    const descriptionId = useStableId();
-    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const stableId = useStableId();
+    const descriptionId = descriptiveText
+        ? getUniqueComponentId(stableId, DESCRIPTION_SUFFIX)
+        : undefined;
+    const errorId = hasError
+        ? getUniqueComponentId(stableId, ERROR_SUFFIX)
+        : undefined;
+    const ariaDescribedBy = createSpaceSeparatedIds([errorId, descriptionId]);
     const { styleProps, rest } = splitPrimitiveProps(_rest);
     return (React.createElement(Flex, { className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.SelectField, className), testId: testId, ...styleProps },
         React.createElement(Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React.createElement(Select, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, ...rest, ...inputStyles }, selectFieldChildren({ children, options })),
-        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/selectfield)

package/dist/esm/primitives/SliderField/SliderField.mjs

@@ -13,6 +13,9 @@ import { View } from '../View/View.mjs';
 import { useStableId } from '../utils/useStableId.mjs';
 import { useFieldset } from '../Fieldset/useFieldset.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
+import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
+import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
+import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
 // We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
@@ -24,9 +27,14 @@ const SLIDER_RANGE_TEST_ID = 'slider-range';
 const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, descriptiveText, emptyTrackColor, errorMessage, filledTrackColor, formatValue, hasError = false, id, isDisabled, isValueHidden = false, label, labelHidden = false, onChange, orientation = 'horizontal', outerEndComponent, outerStartComponent, testId, thumbColor, trackSize, value, size, ..._rest }, ref) => {
     const { isFieldsetDisabled } = useFieldset();
     const fieldId = useStableId(id);
-    const labelId = useStableId();
-    const descriptionId = useStableId();
-    const ariaDescribedBy = descriptiveText ? descriptionId : undefined;
+    const stableId = useStableId();
+    const descriptionId = descriptiveText
+        ? getUniqueComponentId(stableId, DESCRIPTION_SUFFIX)
+        : undefined;
+    const errorId = hasError
+        ? getUniqueComponentId(stableId, ERROR_SUFFIX)
+        : undefined;
+    const ariaDescribedBy = createSpaceSeparatedIds([errorId, descriptionId]);
     const disabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
     const { styleProps, rest } = splitPrimitiveProps(_rest);
     const isControlled = value !== undefined;
@@ -54,7 +62,7 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
     , { 
         // Custom classnames will be added to Root below
         className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.SliderField), testId: testId, ...styleProps },
-        React.createElement(Label, { className: ComponentClassName.SliderFieldLabel, id: labelId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
+        React.createElement(Label, { className: ComponentClassName.SliderFieldLabel, id: stableId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
             React.createElement(View, { as: "span" }, label),
             !isValueHidden ? renderedValue : null),
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
@@ -65,8 +73,8 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
                         [`${isVertical ? 'width' : 'height'}`]: trackSize,
                     } },
                     React.createElement(Range, { className: classNames(ComponentClassName.SliderFieldRange, classNameModifier(ComponentClassName.SliderFieldRange, orientation), classNameModifierByFlag(ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
-                React.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": labelId, "aria-valuetext": ariaValuetext, className: classNames(ComponentClassName.SliderFieldThumb, classNameModifier(ComponentClassName.SliderFieldThumb, size), classNameModifierByFlag(ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
-        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+                React.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": stableId, "aria-valuetext": ariaValuetext, className: classNames(ComponentClassName.SliderFieldThumb, classNameModifier(ComponentClassName.SliderFieldThumb, size), classNameModifierByFlag(ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
+        React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/sliderfield)