@aws-amplify/ui-react 6.1.14 → 6.2.0

package/dist/index.js

@@ -6,14 +6,16 @@ var React = require('react');
 var isEqual = require('lodash/isEqual.js');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
-var Field = require('./Field-1f747369.js');
+var Field = require('./Field-d47a49dc.js');
 require('aws-amplify/storage');
+var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 var debounce = require('lodash/debounce.js');
 var Dropdown = require('@radix-ui/react-dropdown-menu');
 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');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
 
@@ -91,20 +93,20 @@ const AlertPrimitive = ({ buttonRef, children, className, dismissButtonLabel = F
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/alert)
  */
-const Alert = Field.primitiveWithForwardRef(AlertPrimitive);
+const Alert = primitiveWithForwardRef.primitiveWithForwardRef(AlertPrimitive);
 Alert.displayName = 'Alert';
 
 const AutocompleteOptionPrimitive = ({ children, className, isActive, ...rest }, ref) => {
     return (React__namespace.createElement(Field.View, { "aria-selected": isActive, as: "li", role: "option", className: ui.classNames(ui.ComponentClassName.AutocompleteMenuOption, ui.classNameModifierByFlag(ui.ComponentClassName.AutocompleteMenuOption, 'active', isActive), className), ref: ref, ...rest }, children));
 };
-const AutocompleteOption = Field.primitiveWithForwardRef(AutocompleteOptionPrimitive);
+const AutocompleteOption = primitiveWithForwardRef.primitiveWithForwardRef(AutocompleteOptionPrimitive);
 AutocompleteOption.displayName = 'AutocompleteOption';
 
 const ScrollViewPrimitive = ({ children, className, orientation, ...rest }, ref) => (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.ScrollView, ui.classNameModifier(ui.ComponentClassName.ScrollView, orientation), className), ref: ref, ...rest }, children));
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/scrollview)
  */
-const ScrollView = Field.primitiveWithForwardRef(ScrollViewPrimitive);
+const ScrollView = primitiveWithForwardRef.primitiveWithForwardRef(ScrollViewPrimitive);
 ScrollView.displayName = 'ScrollView';
 
 const MenuHeader = ({ children }) => {
@@ -131,7 +133,7 @@ const AutocompleteMenuPrimitive = ({ ariaLabel, children, Header = null, Footer
         children.length > 0 ? (React__namespace.createElement(ScrollView, { as: "ul", ariaLabel: ariaLabel, className: ui.ComponentClassName.AutocompleteMenuOptions, id: listboxId, role: "listbox" }, children)) : (React__namespace.createElement(MenuEmpty, null, Empty)),
         React__namespace.createElement(MenuFooter, null, Footer)))));
 };
-const AutocompleteMenu = Field.primitiveWithForwardRef(AutocompleteMenuPrimitive);
+const AutocompleteMenu = primitiveWithForwardRef.primitiveWithForwardRef(AutocompleteMenuPrimitive);
 AutocompleteMenu.displayName = 'AutocompleteMenu';
 
 // Source: https://github.com/radix-ui/primitives/blob/7ae63b6cce6ea53ea5d65b6d411894c004b38f47/packages/react/use-layout-effect/src/useLayoutEffect.tsx
@@ -355,10 +357,10 @@ const useAutocomplete = ({ defaultValue = '', value, options, optionFilter, onBl
     };
 };
 
-const getTestId = (testId, component) => testId && component ? `${testId}-${component}` : undefined;
+const getUniqueComponentId = (id, suffix) => (id && suffix ? `${id}-${suffix}` : undefined);
 
 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());
@@ -374,7 +376,7 @@ const HighlightMatchPrimitive = ({ children, className, query, testId, ...rest }
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/highlightmatch)
  */
-const HighlightMatch = Field.primitiveWithForwardRef(HighlightMatchPrimitive);
+const HighlightMatch = primitiveWithForwardRef.primitiveWithForwardRef(HighlightMatchPrimitive);
 HighlightMatch.displayName = 'HighlightMatch';
 
 const ariaLabelText = Field.ComponentText.SearchField.searchButtonLabel;
@@ -382,7 +384,7 @@ const SearchFieldButtonPrimitive = ({ size, ...props }, ref) => {
     const icons = Field.useIcons('searchField');
     return (React__namespace.createElement(Field.FieldGroupIconButton, { ariaLabel: ariaLabelText, className: ui.ComponentClassName.SearchFieldSearch, size: size, ref: ref, type: "submit", ...props }, icons?.search ?? React__namespace.createElement(Field.IconSearch, null)));
 };
-const SearchFieldButton = Field.primitiveWithForwardRef(SearchFieldButtonPrimitive);
+const SearchFieldButton = primitiveWithForwardRef.primitiveWithForwardRef(SearchFieldButtonPrimitive);
 SearchFieldButton.displayName = 'SearchFieldButton';
 
 const FieldGroupPrimitive = ({ children, className, innerEndComponent, innerStartComponent, orientation = 'horizontal', outerEndComponent, outerStartComponent, variation, ...rest }, ref) => {
@@ -404,7 +406,7 @@ const FieldGroupPrimitive = ({ children, className, innerEndComponent, innerStar
             innerEndComponent && (React__namespace.createElement(Field.View, { className: ui.ComponentClassName.FieldGroupInnerEnd }, innerEndComponent))),
         outerEndComponent && (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.FieldGroupOuterEnd, ui.classNameModifier(ui.ComponentClassName.FieldGroupOuterEnd, variation)) }, outerEndComponent))));
 };
-const FieldGroup = Field.primitiveWithForwardRef(FieldGroupPrimitive);
+const FieldGroup = primitiveWithForwardRef.primitiveWithForwardRef(FieldGroupPrimitive);
 FieldGroup.displayName = 'FieldGroup';
 
 const InputPrimitive = ({ autoComplete, checked, className, defaultChecked, defaultValue, id, isDisabled, isReadOnly, isRequired, size, type = 'text', hasError = false, value, variation, ...rest }, ref) => {
@@ -412,7 +414,7 @@ const InputPrimitive = ({ autoComplete, checked, className, defaultChecked, defa
     const { isFieldsetDisabled } = Field.useFieldset();
     return (React__namespace.createElement(Field.View, { "aria-invalid": hasError, as: "input", autoComplete: autoComplete, checked: checked, className: componentClasses, defaultChecked: defaultChecked, defaultValue: defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, id: id, readOnly: isReadOnly, ref: ref, required: isRequired, type: type, value: value, ...rest }));
 };
-const Input = Field.primitiveWithForwardRef(InputPrimitive);
+const Input = primitiveWithForwardRef.primitiveWithForwardRef(InputPrimitive);
 Input.displayName = 'Input';
 
 const isStyleKey = (prop) => {
@@ -448,23 +450,47 @@ const splitPrimitiveProps = (props) => {
     return splitProps;
 };
 
+/**
+ * Joins an array of strings and undefined values into a single string with spaces as separators.
+ * If all elements are undefined, returns undefined.
+ *
+ * @param {(string | undefined)[]} ids - An array of strings or undefined values.
+ * @returns {string | undefined} A single string with space-separated IDs, or undefined if all elements are undefined.
+ */
+const createSpaceSeparatedIds = (ids) => {
+    const joinedIds = ids.filter((id) => id !== undefined).join(' ');
+    return joinedIds.length > 0 ? joinedIds : undefined;
+};
+
+(typeof Symbol !== 'undefined' && ui.isFunction(Symbol.for)
+    ? Symbol.for('amplify_default')
+    : '@@amplify_default');
+const ERROR_SUFFIX = 'error';
+const DESCRIPTION_SUFFIX = 'description';
+
 const TextFieldPrimitive = (props, ref) => {
     const { className, descriptiveText, errorMessage, hasError = false, id, innerEndComponent, innerStartComponent, label, labelHidden = false, outerEndComponent, outerStartComponent, size, testId, variation, 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__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.TextField, className), testId: testId, ...styleProps },
         React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(FieldGroup, { outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent, innerStartComponent: innerStartComponent, innerEndComponent: innerEndComponent, variation: variation },
             React__namespace.createElement(Input, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, variation: variation, ...inputStyles, ...rest })),
-        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/textfield)
  */
-const TextField = Field.primitiveWithForwardRef(TextFieldPrimitive);
+const TextField = primitiveWithForwardRef.primitiveWithForwardRef(TextFieldPrimitive);
 TextField.displayName = 'TextField';
 
 /**
@@ -558,7 +584,7 @@ const SearchFieldPrimitive = ({ autoComplete = 'off', className, isDisabled, cle
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)
  */
-const SearchField = Field.primitiveWithForwardRef(SearchFieldPrimitive);
+const SearchField = primitiveWithForwardRef.primitiveWithForwardRef(SearchFieldPrimitive);
 SearchField.displayName = 'SearchField';
 
 const AutocompletePrimitive = ({ className, defaultValue, value, isLoading = false, menuSlots = {}, options, optionFilter, onBlur, onChange, onClear, onClick, onSelect, onSubmit, renderOption, testId, ...rest }, ref) => {
@@ -614,7 +640,7 @@ const AutocompletePrimitive = ({ className, defaultValue, value, isLoading = fal
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/autocomplete)
  */
-const Autocomplete = Field.primitiveWithForwardRef(AutocompletePrimitive);
+const Autocomplete = primitiveWithForwardRef.primitiveWithForwardRef(AutocompletePrimitive);
 Autocomplete.displayName = 'Autocomplete';
 
 const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref) => {
@@ -624,7 +650,7 @@ const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref)
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/badge)
  */
-const Badge = Field.primitiveWithForwardRef(BadgePrimitive);
+const Badge = primitiveWithForwardRef.primitiveWithForwardRef(BadgePrimitive);
 Badge.displayName = 'Badge';
 
 const BreadcrumbItemPrimitive = ({ className, children, as = 'li', ...rest }, ref) => {
@@ -634,7 +660,7 @@ const BreadcrumbItemPrimitive = ({ className, children, as = 'li', ...rest }, re
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbItem = Field.primitiveWithForwardRef(BreadcrumbItemPrimitive);
+const BreadcrumbItem = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbItemPrimitive);
 BreadcrumbItem.displayName = 'Breadcrumbs.Item';
 
 const LinkPrimitive = ({ as = 'a', children, className, isExternal, ...rest }, ref) => {
@@ -643,7 +669,7 @@ const LinkPrimitive = ({ as = 'a', children, className, isExternal, ...rest }, r
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/link)
  */
-const Link = Field.primitiveWithForwardRef(LinkPrimitive);
+const Link = primitiveWithForwardRef.primitiveWithForwardRef(LinkPrimitive);
 Link.displayName = 'Link';
 
 const BreadcrumbLinkPrimitive = ({ className, children, href, isCurrent, ...rest }, ref) => {
@@ -660,7 +686,7 @@ const BreadcrumbLinkPrimitive = ({ className, children, href, isCurrent, ...rest
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbLink = Field.primitiveWithForwardRef(BreadcrumbLinkPrimitive);
+const BreadcrumbLink = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbLinkPrimitive);
 BreadcrumbLink.displayName = 'Breadcrumbs.Link';
 
 const BreadcrumbSeparatorPrimitive = ({ className, children = '/', as = 'span', ...rest }, ref) => {
@@ -670,7 +696,7 @@ const BreadcrumbSeparatorPrimitive = ({ className, children = '/', as = 'span',
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbSeparator = Field.primitiveWithForwardRef(BreadcrumbSeparatorPrimitive);
+const BreadcrumbSeparator = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbSeparatorPrimitive);
 BreadcrumbSeparator.displayName = 'Breadcrumbs.Separator';
 
 const BreadcrumbContainerPrimitive = ({ className, children, ...rest }, ref) => {
@@ -682,7 +708,7 @@ const BreadcrumbContainerPrimitive = ({ className, children, ...rest }, ref) =>
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbContainer = Field.primitiveWithForwardRef(BreadcrumbContainerPrimitive);
+const BreadcrumbContainer = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbContainerPrimitive);
 BreadcrumbContainer.displayName = 'Breadcrumbs.Container';
 
 const BreadcrumbsPrimitive = ({ className, items, separator = React__namespace.createElement(BreadcrumbSeparator, null), ...rest }, ref) => {
@@ -697,7 +723,7 @@ const BreadcrumbsPrimitive = ({ className, items, separator = React__namespace.c
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const Breadcrumbs = Object.assign(Field.primitiveWithForwardRef(BreadcrumbsPrimitive), {
+const Breadcrumbs = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbsPrimitive), {
     Item: BreadcrumbItem,
     Link: BreadcrumbLink,
     Separator: BreadcrumbSeparator,
@@ -715,7 +741,7 @@ const ButtonGroupPrimitive = ({ className, children, isDisabled: _isDisabled = f
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/button#buttongroup)
  */
-const ButtonGroup = Field.primitiveWithForwardRef(ButtonGroupPrimitive);
+const ButtonGroup = primitiveWithForwardRef.primitiveWithForwardRef(ButtonGroupPrimitive);
 ButtonGroup.displayName = 'ButtonGroup';
 
 const CardPrimitive = ({ className, children, variation, ...rest }, ref) => {
@@ -724,14 +750,14 @@ const CardPrimitive = ({ className, children, variation, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/card)
  */
-const Card = Field.primitiveWithForwardRef(CardPrimitive);
+const Card = primitiveWithForwardRef.primitiveWithForwardRef(CardPrimitive);
 Card.displayName = 'Card';
 
 const VisuallyHiddenPrimitive = ({ as = 'span', children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: as, className: ui.classNames(ui.ComponentClassName.VisuallyHidden, className), ref: ref, ...rest }, children));
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/visuallyhidden)
  */
-const VisuallyHidden = Field.primitiveWithForwardRef(VisuallyHiddenPrimitive);
+const VisuallyHidden = primitiveWithForwardRef.primitiveWithForwardRef(VisuallyHiddenPrimitive);
 VisuallyHidden.displayName = 'VisuallyHidden';
 
 const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultChecked, hasError, isDisabled, isIndeterminate, label, labelHidden, labelPosition, onBlur: _onBlur, onFocus: _onFocus, onChange: _onChange, testId, inputStyles, ..._rest }, ref) => {
@@ -775,9 +801,9 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
                 isIndeterminate;
         }
     }, [dataId, isIndeterminate]);
-    const buttonTestId = getTestId(testId, ui.ComponentClassName.CheckboxButton);
-    const iconTestId = getTestId(testId, ui.ComponentClassName.CheckboxIcon);
-    const labelTestId = getTestId(testId, ui.ComponentClassName.CheckboxLabel);
+    const buttonTestId = getUniqueComponentId(testId, ui.ComponentClassName.CheckboxButton);
+    const iconTestId = getUniqueComponentId(testId, ui.ComponentClassName.CheckboxIcon);
+    const labelTestId = getUniqueComponentId(testId, ui.ComponentClassName.CheckboxLabel);
     const flexClasses = ui.classNames(ui.ComponentClassName.CheckboxButton, ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxButton, 'disabled', shouldBeDisabled), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxButton, 'error', hasError), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxButton, 'focused', focused));
     const iconClasses = ui.classNames(ui.ComponentClassName.CheckboxIcon, ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxIcon, 'checked', checked), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxIcon, 'disabled', shouldBeDisabled), ui.classNameModifierByFlag(ui.ComponentClassName.CheckboxIcon, 'indeterminate', isIndeterminate));
     const iconProps = {
@@ -796,11 +822,11 @@ const CheckboxPrimitive = ({ checked: controlledChecked, className, defaultCheck
             }), "data-disabled": shouldBeDisabled, testId: labelTestId }, label)),
         React__namespace.createElement(Field.Flex, { "aria-hidden": "true", as: "span", className: flexClasses, "data-checked": checked, "data-disabled": shouldBeDisabled, "data-focus": focused, "data-error": hasError, testId: buttonTestId, ...inputStyles }, isIndeterminate ? indeterminateIcon : checkedIcon)));
 };
-const Checkbox = Field.primitiveWithForwardRef(CheckboxPrimitive);
+const Checkbox = primitiveWithForwardRef.primitiveWithForwardRef(CheckboxPrimitive);
 Checkbox.displayName = 'Checkbox';
 
 const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, labelHidden = false, labelPosition, testId, size, ...rest }, ref) => {
-    const checkboxTestId = getTestId(testId, ui.ComponentClassName.Checkbox);
+    const checkboxTestId = getUniqueComponentId(testId, ui.ComponentClassName.Checkbox);
     return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.ComponentClassName.CheckboxField, ui.classNameModifier(ui.ComponentClassName.Field, size), className), testId: testId },
         React__namespace.createElement(Checkbox, { hasError: hasError, labelHidden: labelHidden, testId: checkboxTestId, labelPosition: labelPosition, ref: ref, ...rest }),
         React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
@@ -808,14 +834,14 @@ const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, lab
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/checkboxfield)
  */
-const CheckboxField = Field.primitiveWithForwardRef(CheckboxFieldPrimitive);
+const CheckboxField = primitiveWithForwardRef.primitiveWithForwardRef(CheckboxFieldPrimitive);
 CheckboxField.displayName = 'CheckboxField';
 
 const GridPrimitive = ({ className, children, ...rest }, ref) => (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Grid, className), ref: ref, ...rest }, children));
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/grid)
  */
-const Grid = Field.primitiveWithForwardRef(GridPrimitive);
+const Grid = primitiveWithForwardRef.primitiveWithForwardRef(GridPrimitive);
 Grid.displayName = 'Grid';
 
 const ELLIPSIS = '...';
@@ -973,7 +999,7 @@ const PaginationPrimitive = ({ className, currentPage = 1, totalPages, hasMorePa
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/pagination)
  */
-const Pagination = Field.primitiveWithForwardRef(PaginationPrimitive);
+const Pagination = primitiveWithForwardRef.primitiveWithForwardRef(PaginationPrimitive);
 Pagination.displayName = 'Pagination';
 
 const usePagination = (props) => {
@@ -1092,7 +1118,7 @@ const DividerPrimitive = ({ className, orientation = 'horizontal', size, label,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/divider)
  */
-const Divider = Field.primitiveWithForwardRef(DividerPrimitive);
+const Divider = primitiveWithForwardRef.primitiveWithForwardRef(DividerPrimitive);
 Divider.displayName = 'Divider';
 
 const DropZoneContext = React__namespace.createContext('inactive');
@@ -1108,7 +1134,7 @@ const Container = ({ className, children, testId, isDisabled, onDragEnter, onDra
         : { onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop };
     return (React__default["default"].createElement(Field.View, { ...rest, ...dragProps, isDisabled: isDisabled, className: ui.classNames(className, ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'rejected', dragState === 'reject'), ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'accepted', dragState === 'accept'), ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'disabled', isDisabled), ui.ComponentClassName.DropZone), "data-testid": testId, ref: ref }, children));
 };
-const DropZoneContainer = Field.primitiveWithForwardRef(Container);
+const DropZoneContainer = primitiveWithForwardRef.primitiveWithForwardRef(Container);
 DropZoneContainer.displayName = 'DropZoneContainer';
 
 /**
@@ -1158,7 +1184,7 @@ const DropZonePrimitive = ({ children, testId, isDisabled, acceptedFileTypes, on
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/dropzone)
  */
-const DropZone = Object.assign(Field.primitiveWithForwardRef(DropZonePrimitive), {
+const DropZone = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(DropZonePrimitive), {
     Accepted,
     Rejected,
     Default,
@@ -1177,7 +1203,7 @@ const AccordionItemPrimitive = ({ children, className, value, as = 'details', ..
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionItem = Field.primitiveWithForwardRef(AccordionItemPrimitive);
+const AccordionItem = primitiveWithForwardRef.primitiveWithForwardRef(AccordionItemPrimitive);
 AccordionItem.displayName = 'AccordionItem';
 
 const AccordionContentPrimitive = ({ className, children, ...rest }, ref) => {
@@ -1186,7 +1212,7 @@ const AccordionContentPrimitive = ({ className, children, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionContent = Field.primitiveWithForwardRef(AccordionContentPrimitive);
+const AccordionContent = primitiveWithForwardRef.primitiveWithForwardRef(AccordionContentPrimitive);
 AccordionContent.displayName = 'Accordion.Content';
 
 const AccordionTriggerPrimitive = ({ children, className, ...rest }, ref) => {
@@ -1206,7 +1232,7 @@ const AccordionTriggerPrimitive = ({ children, className, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionTrigger = Field.primitiveWithForwardRef(AccordionTriggerPrimitive);
+const AccordionTrigger = primitiveWithForwardRef.primitiveWithForwardRef(AccordionTriggerPrimitive);
 AccordionTrigger.displayName = 'Accordion.Trigger';
 
 const AccordionIconPrimitive = ({ className, as = 'span', ...rest }, ref) => {
@@ -1216,7 +1242,7 @@ const AccordionIconPrimitive = ({ className, as = 'span', ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionIcon = Field.primitiveWithForwardRef(AccordionIconPrimitive);
+const AccordionIcon = primitiveWithForwardRef.primitiveWithForwardRef(AccordionIconPrimitive);
 AccordionIcon.displayName = 'Accordion.Icon';
 
 const AccordionContainerPrimitive = ({ children, className, defaultValue, allowMultiple, preventCollapse, onValueChange, testId, value: controlledValue, ...rest }, ref) => {
@@ -1258,7 +1284,7 @@ const AccordionContainerPrimitive = ({ children, className, defaultValue, allowM
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionContainer = Field.primitiveWithForwardRef(AccordionContainerPrimitive);
+const AccordionContainer = primitiveWithForwardRef.primitiveWithForwardRef(AccordionContainerPrimitive);
 AccordionContainer.displayName = 'Accordion.Container';
 
 const AccordionPrimitive = ({ items, ...rest }, ref) => {
@@ -1271,7 +1297,7 @@ const AccordionPrimitive = ({ items, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const Accordion = Object.assign(Field.primitiveWithForwardRef(AccordionPrimitive), {
+const Accordion = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(AccordionPrimitive), {
     Container: AccordionContainer,
     Content: AccordionContent,
     Icon: AccordionIcon,
@@ -1301,7 +1327,7 @@ const FieldsetPrimitive = ({ children, className, isDisabled, legend, legendHidd
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/fieldset)
  */
-const Fieldset = Field.primitiveWithForwardRef(FieldsetPrimitive);
+const Fieldset = primitiveWithForwardRef.primitiveWithForwardRef(FieldsetPrimitive);
 Fieldset.displayName = 'Fieldset';
 
 const headingLevels = {
@@ -1316,14 +1342,14 @@ const HeadingPrimitive = ({ className, children, isTruncated, level = 6, ...rest
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/heading)
  */
-const Heading = Field.primitiveWithForwardRef(HeadingPrimitive);
+const Heading = primitiveWithForwardRef.primitiveWithForwardRef(HeadingPrimitive);
 Heading.displayName = 'Heading';
 
 const ImagePrimitive = ({ className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "img", ref: ref, className: ui.classNames(ui.ComponentClassName.Image, className), ...rest }));
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/image)
  */
-const Image = Field.primitiveWithForwardRef(ImagePrimitive);
+const Image = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
 Image.displayName = 'Image';
 
 /**
@@ -1334,7 +1360,7 @@ const MenuButtonPrimitive = ({ ariaLabel, className, children, isDisabled = fals
     const componentClasses = ui.classNames(ui.ComponentClassName.Button, ui.classNameModifier(ui.ComponentClassName.Button, size), ui.classNameModifier(ui.ComponentClassName.Button, variation), className);
     return (React__namespace.createElement(Field.Button, { ref: ref, className: componentClasses, disabled: isDisabled || isLoading, isDisabled: isDisabled || isLoading, type: type, testId: testId, "aria-label": ariaLabel, style: propStyles, ...nonStyleProps }, children));
 };
-const MenuButton = Field.primitiveWithForwardRef(MenuButtonPrimitive);
+const MenuButton = primitiveWithForwardRef.primitiveWithForwardRef(MenuButtonPrimitive);
 MenuButton.displayName = 'MenuButton';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
@@ -1352,7 +1378,7 @@ const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
  */
-const Menu = Field.primitiveWithForwardRef(MenuPrimitive);
+const Menu = primitiveWithForwardRef.primitiveWithForwardRef(MenuPrimitive);
 Menu.displayName = 'Menu';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
@@ -1367,13 +1393,13 @@ const MenuItemPrimitive = ({ children, className, ...rest }, ref) => {
         React__namespace.createElement(MenuButton, { className: ui.classNames(ui.ComponentClassName.MenuItem, className), testId: MENU_ITEM_TEST_ID, ...rest, variation: "menu" // ensures `menu` variation is not overwritten
          }, children)));
 };
-const MenuItem = Field.primitiveWithForwardRef(MenuItemPrimitive);
+const MenuItem = primitiveWithForwardRef.primitiveWithForwardRef(MenuItemPrimitive);
 MenuItem.displayName = 'MenuItem';
 
 const MessageHeadingPrimitive = ({ children, className, ...rest }, ref) => {
     return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.MessageHeading, className), ref: ref, ...rest }, children));
 };
-const MessageHeading = Field.primitiveWithForwardRef(MessageHeadingPrimitive);
+const MessageHeading = primitiveWithForwardRef.primitiveWithForwardRef(MessageHeadingPrimitive);
 MessageHeading.displayName = 'MessageHeading';
 
 const MessageContext = React__namespace.createContext({
@@ -1402,7 +1428,7 @@ const MessageIconPrimitive = ({ className, ...rest }, ref) => {
     }
     return icon ? (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.MessageIcon, className), "aria-hidden": "true", ref: ref, ...rest }, icon)) : null;
 };
-const MessageIcon = Field.primitiveWithForwardRef(MessageIconPrimitive);
+const MessageIcon = primitiveWithForwardRef.primitiveWithForwardRef(MessageIconPrimitive);
 MessageIcon.displayName = 'MessageIcon';
 
 const MessageDismissPrimitive = ({ onDismiss, dismissLabel, hasIcon = true, children, className, ...rest }, ref) => {
@@ -1418,13 +1444,13 @@ const MessageDismissPrimitive = ({ onDismiss, dismissLabel, hasIcon = true, chil
         hasIcon ? icons?.close ?? React__namespace.createElement(Field.IconClose, { "aria-hidden": "true" }) : null,
         children ? (children) : (React__namespace.createElement(VisuallyHidden, null, dismissLabel ? dismissLabel : Field.ComponentText.Message.dismissLabel))));
 };
-const MessageDismiss = Field.primitiveWithForwardRef(MessageDismissPrimitive);
+const MessageDismiss = primitiveWithForwardRef.primitiveWithForwardRef(MessageDismissPrimitive);
 MessageDismiss.displayName = 'MessageContent';
 
 const MessageContentPrimitive = ({ children, className, ...rest }, ref) => {
     return (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.MessageContent, className), ref: ref, ...rest }, children));
 };
-const MessageContent = Field.primitiveWithForwardRef(MessageContentPrimitive);
+const MessageContent = primitiveWithForwardRef.primitiveWithForwardRef(MessageContentPrimitive);
 MessageContent.displayName = 'MessageContent';
 
 const MessageContainerPrimitive = ({ children, className, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
@@ -1436,7 +1462,7 @@ const MessageContainerPrimitive = ({ children, className, colorTheme = 'neutral'
     }), [colorTheme, dismissed]);
     return (React__namespace.createElement(MessageContext.Provider, { value: value }, !dismissed ? (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Message, ui.classNameModifier(ui.ComponentClassName.Message, variation), ui.classNameModifier(ui.ComponentClassName.Message, colorTheme), className), ref: ref, ...rest }, children)) : null));
 };
-const MessageContainer = Field.primitiveWithForwardRef(MessageContainerPrimitive);
+const MessageContainer = primitiveWithForwardRef.primitiveWithForwardRef(MessageContainerPrimitive);
 MessageContainer.displayName = 'MessageContainer';
 
 const MessagePrimitive = ({ children, heading, dismissLabel, isDismissible, onDismiss, hasIcon = true, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
@@ -1450,7 +1476,7 @@ const MessagePrimitive = ({ children, heading, dismissLabel, isDismissible, onDi
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/message)
  */
-const Message = Field.primitiveWithForwardRef(MessagePrimitive);
+const Message = primitiveWithForwardRef.primitiveWithForwardRef(MessagePrimitive);
 Message.displayName = 'Message';
 
 const { passwordIsHidden, passwordIsShown, showPassword } = Field.ComponentText.PasswordField;
@@ -1466,7 +1492,7 @@ const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwo
             : passwordIsShownLabel),
         icon));
 };
-const ShowPasswordButton = Field.primitiveWithForwardRef(ShowPasswordButtonPrimitive);
+const ShowPasswordButton = primitiveWithForwardRef.primitiveWithForwardRef(ShowPasswordButtonPrimitive);
 ShowPasswordButton.displayName = 'ShowPasswordButton';
 
 const PasswordFieldPrimitive = ({ autoComplete = 'current-password', label, className, hideShowPassword = false, passwordIsHiddenLabel, passwordIsShownLabel, showPasswordButtonLabel, showPasswordButtonRef, size, hasError, ...rest }, ref) => {
@@ -1484,7 +1510,7 @@ const PasswordFieldPrimitive = ({ autoComplete = 'current-password', label, clas
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/passwordfield)
  */
-const PasswordField = Field.primitiveWithForwardRef(PasswordFieldPrimitive);
+const PasswordField = primitiveWithForwardRef.primitiveWithForwardRef(PasswordFieldPrimitive);
 PasswordField.displayName = 'PasswordField';
 
 const SelectPrimitive = ({ autoComplete, className, size, variation, value, defaultValue, hasError, icon, iconColor, children, placeholder, isDisabled, isRequired, isMultiple = false, selectSize = 1, ...rest }, ref) => {
@@ -1503,7 +1529,7 @@ const SelectPrimitive = ({ autoComplete, className, size, variation, value, defa
             children),
         isExpanded ? null : (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.SelectIcon, ui.classNameModifier(ui.ComponentClassName.SelectIcon, size)), color: iconColor, "aria-hidden": "true" }, icon ?? icons?.expand ?? React__namespace.createElement(Field.IconExpandMore, null)))));
 };
-const Select = Field.primitiveWithForwardRef(SelectPrimitive);
+const Select = primitiveWithForwardRef.primitiveWithForwardRef(SelectPrimitive);
 Select.displayName = 'Select';
 
 const selectFieldChildren = ({ children, options, }) => {
@@ -1519,19 +1545,25 @@ 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__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.SelectField, className), testId: testId, ...styleProps },
         React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(Select, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, size: size, ...rest, ...inputStyles }, selectFieldChildren({ children, options })),
-        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/selectfield)
  */
-const SelectField = Field.primitiveWithForwardRef(SelectFieldPrimitive);
+const SelectField = primitiveWithForwardRef.primitiveWithForwardRef(SelectFieldPrimitive);
 SelectField.displayName = 'SelectField';
 
 const DialCodeSelectPrimitive = ({ className, dialCodeList, isReadOnly, ...props }, ref) => {
@@ -1546,7 +1578,7 @@ const DialCodeSelectPrimitive = ({ className, dialCodeList, isReadOnly, ...props
       */
     , { "aria-disabled": isReadOnly, autoComplete: "tel-country-code", className: ui.classNames(ui.ComponentClassName.CountryCodeSelect, ui.ComponentClassName.DialCodeSelect, className), labelHidden: true, ref: ref, ...props }, dialCodeOptions));
 };
-const DialCodeSelect = Field.primitiveWithForwardRef(DialCodeSelectPrimitive);
+const DialCodeSelect = primitiveWithForwardRef.primitiveWithForwardRef(DialCodeSelectPrimitive);
 DialCodeSelect.displayName = 'DialCodeSelect';
 
 const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, defaultDialCode, dialCodeLabel = Field.ComponentText.PhoneNumberField.countryCodeLabel, dialCodeList, dialCodeName, dialCodeRef, hasError, isDisabled, isReadOnly, onDialCodeChange, onInput, size, variation, ...rest }, ref) => {
@@ -1555,7 +1587,7 @@ const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, d
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/phonenumberfield)
  */
-const PhoneNumberField = Field.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
+const PhoneNumberField = primitiveWithForwardRef.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
 PhoneNumberField.displayName = 'PhoneNumberField';
 
 const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
@@ -1567,7 +1599,7 @@ const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest },
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
  */
-const Placeholder = Field.primitiveWithForwardRef(PlaceholderPrimitive);
+const Placeholder = primitiveWithForwardRef.primitiveWithForwardRef(PlaceholderPrimitive);
 Placeholder.displayName = 'Placeholder';
 
 const defaultValue = { name: 'default' };
@@ -1594,14 +1626,20 @@ const RadioPrimitive = ({ children, className, id, isDisabled = false, testId, v
         React__namespace.createElement(Input, { checked: checked, className: ui.classNames(ui.ComponentClassName.VisuallyHidden, ui.ComponentClassName.RadioInput), defaultChecked: defaultChecked, hasError: hasError, id: id, isDisabled: shouldBeDisabled, isReadOnly: isReadOnly, isRequired: isRequired, onChange: onChange, ref: ref, type: "radio", name: name, value: value, ...rest }),
         React__namespace.createElement(Field.Flex, { "aria-hidden": "true", as: "span", className: ui.classNames(ui.ComponentClassName.RadioButton, ui.classNameModifier(ui.ComponentClassName.RadioButton, size)), testId: testId })));
 };
-const Radio = Field.primitiveWithForwardRef(RadioPrimitive);
+const Radio = primitiveWithForwardRef.primitiveWithForwardRef(RadioPrimitive);
 Radio.displayName = 'Radio';
 
 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, ui.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, ui.ComponentClassName.RadioGroup);
     const radioGroupContextValue = React__namespace.useMemo(() => ({
         currentValue: value,
         defaultValue,
@@ -1629,12 +1667,12 @@ const RadioGroupFieldPrimitive = ({ children, className, defaultValue, descripti
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: legendHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(Field.Flex, { "aria-describedby": ariaDescribedBy, className: ui.ComponentClassName.RadioGroup, id: fieldId, testId: radioGroupTestId },
             React__namespace.createElement(RadioGroupContext.Provider, { value: radioGroupContextValue }, children)),
-        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/radiogroupfield)
  */
-const RadioGroupField = Field.primitiveWithForwardRef(RadioGroupFieldPrimitive);
+const RadioGroupField = primitiveWithForwardRef.primitiveWithForwardRef(RadioGroupFieldPrimitive);
 RadioGroupField.displayName = 'RadioGroupField';
 
 const isIconFilled = (currentIconIndex, ratingValue) => {
@@ -1694,7 +1732,7 @@ const RatingPrimitive = ({ className, emptyColor, emptyIcon, fillColor, icon, ma
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/rating)
  */
-const Rating = Field.primitiveWithForwardRef(RatingPrimitive);
+const Rating = primitiveWithForwardRef.primitiveWithForwardRef(RatingPrimitive);
 Rating.displayName = 'Rating';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
@@ -1707,9 +1745,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 } = Field.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;
@@ -1737,7 +1780,7 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
     , { 
         // Custom classnames will be added to Root below
         className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.SliderField), testId: testId, ...styleProps },
-        React__namespace.createElement(Field.Label, { className: ui.ComponentClassName.SliderFieldLabel, id: labelId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
+        React__namespace.createElement(Field.Label, { className: ui.ComponentClassName.SliderFieldLabel, id: stableId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
             React__namespace.createElement(Field.View, { as: "span" }, label),
             !isValueHidden ? renderedValue : null),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
@@ -1748,13 +1791,13 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
                         [`${isVertical ? 'width' : 'height'}`]: trackSize,
                     } },
                     React__namespace.createElement(Range, { className: ui.classNames(ui.ComponentClassName.SliderFieldRange, ui.classNameModifier(ui.ComponentClassName.SliderFieldRange, orientation), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
-                React__namespace.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": labelId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
-        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+                React__namespace.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": stableId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
+        React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/sliderfield)
  */
-const SliderField = Field.primitiveWithForwardRef(SliderFieldPrimitive);
+const SliderField = primitiveWithForwardRef.primitiveWithForwardRef(SliderFieldPrimitive);
 SliderField.displayName = 'SliderField';
 
 const getCorrectSteppingValue = ({ max, min, step, value, }) => {
@@ -1877,8 +1920,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 = Field.useIcons('stepperField');
     const { step, value, inputValue, handleDecrease, handleIncrease, handleOnBlur, handleOnChange, handleOnWheel, setInputValue, shouldDisableDecreaseButton, shouldDisableIncreaseButton, } = useStepper({ ...props, defaultValue, onStepChange });
@@ -1893,12 +1942,12 @@ const StepperFieldPrimitive = (props, ref) => {
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(FieldGroup, { outerStartComponent: React__namespace.createElement(Field.FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${decreaseButtonLabel} ${value - step}`, className: ui.classNames(ui.ComponentClassName.StepperFieldButtonDecrease, ui.classNameModifier(ui.ComponentClassName.StepperFieldButtonDecrease, variation), ui.classNameModifierByFlag(ui.ComponentClassName.StepperFieldButtonDecrease, 'disabled', shouldDisableDecreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableDecreaseButton, onClick: handleDecrease, size: size }, icons?.remove ?? React__namespace.createElement(Field.IconRemove, { "data-testid": DECREASE_ICON })), outerEndComponent: React__namespace.createElement(Field.FieldGroupIconButton, { "aria-controls": fieldId, ariaLabel: `${increaseButtonLabel} ${value + step}`, className: ui.classNames(ui.ComponentClassName.StepperFieldButtonIncrease, ui.classNameModifier(ui.ComponentClassName.StepperFieldButtonIncrease, variation), ui.classNameModifierByFlag(ui.ComponentClassName.StepperFieldButtonIncrease, 'disabled', shouldDisableIncreaseButton)), "data-invalid": hasError, isDisabled: shouldDisableIncreaseButton, onClick: handleIncrease, size: size }, icons?.add ?? React__namespace.createElement(Field.IconAdd, { "data-testid": INCREASE_ICON })) },
             React__namespace.createElement(Input, { "aria-describedby": ariaDescribedBy, className: ui.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__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/stepperfield)
  */
-const StepperField = Field.primitiveWithForwardRef(StepperFieldPrimitive);
+const StepperField = primitiveWithForwardRef.primitiveWithForwardRef(StepperFieldPrimitive);
 StepperField.displayName = 'StepperField';
 
 const useSwitch = (props) => {
@@ -1955,7 +2004,7 @@ const SwitchFieldPrimitive = ({ className, defaultChecked, id, isChecked, isDisa
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/switchfield)
  */
-const SwitchField = Field.primitiveWithForwardRef(SwitchFieldPrimitive);
+const SwitchField = primitiveWithForwardRef.primitiveWithForwardRef(SwitchFieldPrimitive);
 SwitchField.displayName = 'SwitchField';
 
 const TablePrimitive = ({ caption, children, className, highlightOnHover = false, size, variation, ...rest }, ref) => {
@@ -1967,38 +2016,46 @@ const TablePrimitive = ({ caption, children, className, highlightOnHover = false
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/table)
  */
-const Table = Field.primitiveWithForwardRef(TablePrimitive);
+const Table = primitiveWithForwardRef.primitiveWithForwardRef(TablePrimitive);
 Table.displayName = 'Table';
 
 const TableBodyPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tbody", className: ui.classNames(ui.ComponentClassName.TableBody, className), ref: ref, ...rest }, children));
-const TableBody = Field.primitiveWithForwardRef(TableBodyPrimitive);
+const TableBody = primitiveWithForwardRef.primitiveWithForwardRef(TableBodyPrimitive);
 TableBody.displayName = 'TableBody';
 
 const TableCellPrimitive = ({ as: asElementTag = 'td', children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: asElementTag, className: ui.classNames(asElementTag === 'td'
         ? ui.ComponentClassName.TableTd
         : ui.ComponentClassName.TableTh, className), ref: ref, ...rest }, children));
-const TableCell = Field.primitiveWithForwardRef(TableCellPrimitive);
+const TableCell = primitiveWithForwardRef.primitiveWithForwardRef(TableCellPrimitive);
 TableCell.displayName = 'TableCell';
 
 const TableFootPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tfoot", className: ui.classNames(ui.ComponentClassName.TableFoot, className), ref: ref, ...rest }, children));
-const TableFoot = Field.primitiveWithForwardRef(TableFootPrimitive);
+const TableFoot = primitiveWithForwardRef.primitiveWithForwardRef(TableFootPrimitive);
 TableFoot.displayName = 'TableFoot';
 
 const TableHeadPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "thead", className: ui.classNames(ui.ComponentClassName.TableHead, className), ref: ref, ...rest }, children));
-const TableHead = Field.primitiveWithForwardRef(TableHeadPrimitive);
+const TableHead = primitiveWithForwardRef.primitiveWithForwardRef(TableHeadPrimitive);
 TableHead.displayName = 'TableHead';
 
 const TableRowPrimitive = ({ children, className, ...rest }, ref) => (React__namespace.createElement(Field.View, { as: "tr", className: ui.classNames(ui.ComponentClassName.TableRow, className), ref: ref, ...rest }, children));
-const TableRow = Field.primitiveWithForwardRef(TableRowPrimitive);
+const TableRow = primitiveWithForwardRef.primitiveWithForwardRef(TableRowPrimitive);
 TableRow.displayName = 'TableRow';
 
 const TabsContext = React__namespace.createContext({
+    groupId: '',
     activeTab: '',
     setActiveTab: () => { },
 });
 
+/* WHITESPACE_VALUE is used to fill whitespace present in user-inputed `value` when creating id for TabsItem and TabsPanel */
+const WHITESPACE_VALUE = '-';
+
 const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button', role = 'tab', ...rest }, ref) => {
-    const { activeTab, setActiveTab } = React__namespace.useContext(TabsContext);
+    const { activeTab, setActiveTab, groupId } = React__namespace.useContext(TabsContext);
+    let idValue = value;
+    if (typeof idValue === 'string') {
+        idValue = idValue.replace(' ', WHITESPACE_VALUE);
+    }
     const isActive = activeTab === value;
     const handleOnClick = (e) => {
         if (ui.isTypedFunction(onClick)) {
@@ -2006,12 +2063,12 @@ const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button',
         }
         setActiveTab(value);
     };
-    return (React__namespace.createElement(Field.View, { ...rest, role: role, as: as, id: `${value}-tab`, "aria-selected": isActive, "aria-controls": `${value}-panel`, tabIndex: !isActive ? -1 : undefined, className: ui.classNames(ui.ComponentClassName.TabsItem, ui.classNameModifierByFlag(ui.ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
+    return (React__namespace.createElement(Field.View, { ...rest, role: role, as: as, id: `${groupId}-tab-${idValue}`, "aria-selected": isActive, "aria-controls": `${groupId}-panel-${idValue}`, tabIndex: !isActive ? -1 : undefined, className: ui.classNames(ui.ComponentClassName.TabsItem, ui.classNameModifierByFlag(ui.ComponentClassName.TabsItem, 'active', activeTab === value), className), ref: ref, onClick: handleOnClick }, children));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabsItem = Field.primitiveWithForwardRef(TabsItemPrimitive);
+const TabsItem = primitiveWithForwardRef.primitiveWithForwardRef(TabsItemPrimitive);
 TabsItem.displayName = 'Tabs.Item';
 
 const isValidTab = (child) => React__namespace.isValidElement(child);
@@ -2089,22 +2146,27 @@ const TabListPrimitive = ({ className, children, indicatorPosition, spacing, rol
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabList = Field.primitiveWithForwardRef(TabListPrimitive);
+const TabList = primitiveWithForwardRef.primitiveWithForwardRef(TabListPrimitive);
 TabList.displayName = 'Tabs.List';
 
 const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...rest }, ref) => {
-    const { activeTab, isLazy } = React__namespace.useContext(TabsContext);
+    const { activeTab, isLazy, groupId } = React__namespace.useContext(TabsContext);
     if (isLazy && activeTab !== value)
         return null;
-    return (React__namespace.createElement(Field.View, { ...rest, role: role, id: `${value}-panel`, "aria-labelledby": `${value}-tab`, className: ui.classNames(ui.ComponentClassName.TabsPanel, ui.classNameModifierByFlag(ui.ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
+    let idValue = value;
+    if (typeof idValue === 'string') {
+        idValue = idValue.replace(' ', WHITESPACE_VALUE);
+    }
+    return (React__namespace.createElement(Field.View, { ...rest, role: role, id: `${groupId}-panel-${idValue}`, "aria-labelledby": `${groupId}-tab-${idValue}`, className: ui.classNames(ui.ComponentClassName.TabsPanel, ui.classNameModifierByFlag(ui.ComponentClassName.TabsPanel, 'active', activeTab === value), className), ref: ref }, children));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabPanel = Field.primitiveWithForwardRef(TabPanelPrimitive);
+const TabPanel = primitiveWithForwardRef.primitiveWithForwardRef(TabPanelPrimitive);
 TabPanel.displayName = 'Tabs.Panel';
 
 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__namespace.useState(() => isControlled ? controlledValue : defaultValue);
     const activeTab = isControlled ? controlledValue : localValue ?? '';
@@ -2121,15 +2183,16 @@ const TabsContainerPrimitive = ({ children, defaultValue, className, value: cont
             activeTab,
             isLazy,
             setActiveTab,
+            groupId,
         };
-    }, [activeTab, setActiveTab, isLazy]);
+    }, [activeTab, setActiveTab, isLazy, groupId]);
     return (React__namespace.createElement(TabsContext.Provider, { value: _value },
         React__namespace.createElement(Field.View, { ...rest, ref: ref, className: ui.classNames(className, ui.ComponentClassName.Tabs) }, children)));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabsContainer = Field.primitiveWithForwardRef(TabsContainerPrimitive);
+const TabsContainer = primitiveWithForwardRef.primitiveWithForwardRef(TabsContainerPrimitive);
 TabsContainer.displayName = 'Tabs.Container';
 
 const TabsPrimitive = ({ items, indicatorPosition, justifyContent, spacing, ...rest }, ref) => {
@@ -2140,7 +2203,7 @@ const TabsPrimitive = ({ items, indicatorPosition, justifyContent, spacing, ...r
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const Tabs = Object.assign(Field.primitiveWithForwardRef(TabsPrimitive), {
+const Tabs = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(TabsPrimitive), {
     Item: TabsItem,
     List: TabList,
     Panel: TabPanel,
@@ -2153,7 +2216,7 @@ const TextAreaPrimitive = ({ className, isDisabled, isReadOnly, isRequired, size
     const { isFieldsetDisabled } = Field.useFieldset();
     return (React__namespace.createElement(Field.View, { "aria-invalid": hasError, as: "textarea", className: componentClasses, disabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, readOnly: isReadOnly, ref: ref, required: isRequired, ...rest }));
 };
-const TextArea = Field.primitiveWithForwardRef(TextAreaPrimitive);
+const TextArea = primitiveWithForwardRef.primitiveWithForwardRef(TextAreaPrimitive);
 TextArea.displayName = 'TextArea';
 
 const DEFAULT_ROW_COUNT = 3;
@@ -2163,19 +2226,25 @@ const TextAreaFieldPrimitive = (props, ref) => {
     // it should go on the textarea element and not the wrapper div.
     resize, ..._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__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.TextAreaField, className), testId: testId, ...styleProps },
         React__namespace.createElement(Field.Label, { htmlFor: fieldId, visuallyHidden: labelHidden }, label),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(TextArea, { "aria-describedby": ariaDescribedBy, hasError: hasError, id: fieldId, ref: ref, rows: rows ?? DEFAULT_ROW_COUNT, size: size, resize: resize, ...rest, ...inputStyles }),
-        React__namespace.createElement(Field.FieldErrorMessage, { hasError: hasError, errorMessage: errorMessage })));
+        React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/textareafield)
  */
-const TextAreaField = Field.primitiveWithForwardRef(TextAreaFieldPrimitive);
+const TextAreaField = primitiveWithForwardRef.primitiveWithForwardRef(TextAreaFieldPrimitive);
 TextAreaField.displayName = 'TextAreaField';
 
 const useToggleButton = ({ isPressed, defaultPressed, onClick, onChange, value, }) => {
@@ -2211,7 +2280,7 @@ const ToggleButtonPrimitive = ({ className, children, defaultPressed = false, is
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton)
  */
-const ToggleButton = Field.primitiveWithForwardRef(ToggleButtonPrimitive);
+const ToggleButton = primitiveWithForwardRef.primitiveWithForwardRef(ToggleButtonPrimitive);
 ToggleButton.displayName = 'ToggleButton';
 
 const useToggleButtonGroup = ({ onChange, value, isExclusive = false, isSelectionRequired = false, }) => {
@@ -2271,7 +2340,7 @@ const ToggleButtonGroupPrimitive = ({ children, className, isExclusive, isSelect
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton#togglebuttongroup)
  */
-const ToggleButtonGroup = Field.primitiveWithForwardRef(ToggleButtonGroupPrimitive);
+const ToggleButtonGroup = primitiveWithForwardRef.primitiveWithForwardRef(ToggleButtonGroupPrimitive);
 ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -2383,7 +2452,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.1.14';
+const VERSION = '6.2.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -3360,13 +3429,10 @@ const { DirectionProvider } = ui.sanitizeNamespaceImport(RadixDirection__namespa
  */
 function ThemeProvider({ children, colorMode, direction = 'ltr', nonce, theme, }) {
     const value = React__namespace.useMemo(() => ({ theme: ui.createTheme(theme), colorMode }), [theme, colorMode]);
-    const { theme: { name, cssText }, } = value;
     return (React__namespace.createElement(Field.ThemeContext.Provider, { value: value },
         React__namespace.createElement(DirectionProvider, { dir: direction },
-            React__namespace.createElement("div", { "data-amplify-theme": name, "data-amplify-color-mode": colorMode, dir: direction }, children),
-            typeof theme === 'undefined' || /<\/style/i.test(cssText) ? null : (React__namespace.createElement("style", { id: `amplify-theme-${name}`, 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: { __html: cssText }, nonce: nonce })))));
+            React__namespace.createElement("div", { "data-amplify-theme": value.theme.name, "data-amplify-color-mode": colorMode, dir: direction }, children),
+            theme ? React__namespace.createElement(ThemeStyle.ThemeStyle, { theme: value.theme, nonce: nonce }) : null)));
 }
 
 var index = /*#__PURE__*/Object.freeze({