@aws-amplify/ui-react 6.1.14 → 6.2.1

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

package/dist/esm/primitives/StepperField/StepperField.mjs

@@ -21,6 +21,9 @@ import { ComponentText } from '../shared/constants.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 DECREASE_ICON = 'decrease-icon';
 const INCREASE_ICON = 'increase-icon';
@@ -33,8 +36,14 @@ const StepperFieldPrimitive = (props, ref) => {
     // this is only required in useStepper hook but deconstruct here to remove its existence in rest
     value: controlledValue, variation, ..._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);
     const icons = useIcons('stepperField');
     const { step, value, inputValue, handleDecrease, handleIncrease, handleOnBlur, handleOnChange, handleOnWheel, setInputValue, shouldDisableDecreaseButton, shouldDisableIncreaseButton, } = useStepper({ ...props, defaultValue, onStepChange });
@@ -49,7 +58,7 @@ const StepperFieldPrimitive = (props, ref) => {
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React.createElement(FieldGroup, { outerStartComponent: React.createElement(FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${decreaseButtonLabel} ${value - step}`, className: classNames(ComponentClassName.StepperFieldButtonDecrease, classNameModifier(ComponentClassName.StepperFieldButtonDecrease, variation), classNameModifierByFlag(ComponentClassName.StepperFieldButtonDecrease, 'disabled', shouldDisableDecreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableDecreaseButton, onClick: handleDecrease, size: size }, icons?.remove ?? React.createElement(IconRemove, { "data-testid": DECREASE_ICON })), outerEndComponent: React.createElement(FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${increaseButtonLabel} ${value + step}`, className: classNames(ComponentClassName.StepperFieldButtonIncrease, classNameModifier(ComponentClassName.StepperFieldButtonIncrease, variation), classNameModifierByFlag(ComponentClassName.StepperFieldButtonIncrease, 'disabled', shouldDisableIncreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableIncreaseButton, onClick: handleIncrease, size: size }, icons?.add ?? React.createElement(IconAdd, { "data-testid": INCREASE_ICON })) },
             React.createElement(Input, { "aria-describedby": ariaDescribedBy, className: ComponentClassName.StepperFieldInput, hasError: hasError, id: fieldId, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onBlur: handleOnBlur, onChange: handleOnChange, onWheel: handleOnWheel, ref: ref, size: size, variation: variation, type: "number", value: inputValue, ...inputStyles, ...rest })),
-        React.createElement(FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React.createElement(FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/stepperfield)

package/dist/esm/primitives/Tabs/TabsContainer.mjs

@@ -3,8 +3,10 @@ import { isFunction, classNames, ComponentClassName } from '@aws-amplify/ui';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { View } from '../View/View.mjs';
 import { TabsContext } from './TabsContext.mjs';
+import { useStableId } from '../utils/useStableId.mjs';
 
 const TabsContainerPrimitive = ({ children, defaultValue, className, value: controlledValue, onValueChange, isLazy, ...rest }, ref) => {
+    const groupId = useStableId(); // groupId is used to ensure uniqueness between Tab Groups in IDs
     const isControlled = controlledValue !== undefined;
     const [localValue, setLocalValue] = React.useState(() => isControlled ? controlledValue : defaultValue);
     const activeTab = isControlled ? controlledValue : localValue ?? '';
@@ -21,8 +23,9 @@ const TabsContainerPrimitive = ({ children, defaultValue, className, value: cont
             activeTab,
             isLazy,
             setActiveTab,
+            groupId,
         };
-    }, [activeTab, setActiveTab, isLazy]);
+    }, [activeTab, setActiveTab, isLazy, groupId]);
     return (React.createElement(TabsContext.Provider, { value: _value },
         React.createElement(View, { ...rest, ref: ref, className: classNames(className, ComponentClassName.Tabs) }, children)));
 };

package/dist/esm/primitives/Tabs/TabsContext.mjs

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 const TabsContext = React.createContext({
+    groupId: '',
     activeTab: '',
     setActiveTab: () => { },
 });

package/dist/esm/primitives/Tabs/TabsItem.mjs

@@ -3,9 +3,14 @@ import { classNames, ComponentClassName, classNameModifierByFlag, isTypedFunctio
 import { View } from '../View/View.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { TabsContext } from './TabsContext.mjs';
+import { WHITESPACE_VALUE } from './constants.mjs';
 
 const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button', role = 'tab', ...rest }, ref) => {
-    const { activeTab, setActiveTab } = React.useContext(TabsContext);
+    const { activeTab, setActiveTab, groupId } = React.useContext(TabsContext);
+    let idValue = value;
+    if (typeof idValue === 'string') {
+        idValue = idValue.replace(' ', WHITESPACE_VALUE);
+    }
     const isActive = activeTab === value;
     const handleOnClick = (e) => {
         if (isTypedFunction(onClick)) {
@@ -13,7 +18,7 @@ const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button',
         }
         setActiveTab(value);
     };
-    return (React.createElement(View, { ...rest, role: role, as: as, id: `${value}-tab`, "aria-selected": isActive, "aria-controls": `${value}-panel`, tabIndex: !isActive ? -1 : undefined, className: classNames(ComponentClassName.TabsItem, classNameModifierByFlag(ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
+    return (React.createElement(View, { ...rest, role: role, as: as, id: `${groupId}-tab-${idValue}`, "aria-selected": isActive, "aria-controls": `${groupId}-panel-${idValue}`, tabIndex: !isActive ? -1 : undefined, className: classNames(ComponentClassName.TabsItem, classNameModifierByFlag(ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)

package/dist/esm/primitives/Tabs/TabsPanel.mjs

@@ -3,12 +3,17 @@ import { classNames, ComponentClassName, classNameModifierByFlag } from '@aws-am
 import { View } from '../View/View.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 import { TabsContext } from './TabsContext.mjs';
+import { WHITESPACE_VALUE } from './constants.mjs';
 
 const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...rest }, ref) => {
-    const { activeTab, isLazy } = React.useContext(TabsContext);
+    const { activeTab, isLazy, groupId } = React.useContext(TabsContext);
     if (isLazy && activeTab !== value)
         return null;
-    return (React.createElement(View, { ...rest, role: role, id: `${value}-panel`, "aria-labelledby": `${value}-tab`, className: classNames(ComponentClassName.TabsPanel, classNameModifierByFlag(ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
+    let idValue = value;
+    if (typeof idValue === 'string') {
+        idValue = idValue.replace(' ', WHITESPACE_VALUE);
+    }
+    return (React.createElement(View, { ...rest, role: role, id: `${groupId}-panel-${idValue}`, "aria-labelledby": `${groupId}-tab-${idValue}`, className: classNames(ComponentClassName.TabsPanel, classNameModifierByFlag(ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)

package/dist/esm/primitives/Tabs/constants.mjs

@@ -0,0 +1,4 @@
+/* WHITESPACE_VALUE is used to fill whitespace present in user-inputed `value` when creating id for TabsItem and TabsPanel */
+const WHITESPACE_VALUE = '-';
+
+export { WHITESPACE_VALUE };