@aws-amplify/ui-react 6.5.0 → 6.5.2

package/dist/index.js

@@ -6,20 +6,19 @@ 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-4b189104.js');
+var Field = require('./Field-CIQvkMkM.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-1fee4302.js');
+var ThemeStyle = require('./ThemeStyle-CgfvQJ7V.js');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -40,12 +39,11 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
 var Dropdown__namespace = /*#__PURE__*/_interopNamespace(Dropdown);
 var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
-var QRCode__default = /*#__PURE__*/_interopDefaultLegacy(QRCode);
+var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 var RadixDirection__namespace = /*#__PURE__*/_interopNamespace(RadixDirection);
 
 /**
@@ -93,13 +91,13 @@ const AlertPrimitive = ({ buttonRef, children, className, dismissButtonLabel = F
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/alert)
  */
-const Alert = primitiveWithForwardRef.primitiveWithForwardRef(AlertPrimitive);
+const Alert = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(AutocompleteOptionPrimitive);
+const AutocompleteOption = Field.primitiveWithForwardRef(AutocompleteOptionPrimitive);
 AutocompleteOption.displayName = 'AutocompleteOption';
 
 /**
@@ -141,7 +139,7 @@ const ScrollViewPrimitive = ({ children, className, orientation, autoScroll, ...
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/scrollview)
  */
-const ScrollView = primitiveWithForwardRef.primitiveWithForwardRef(ScrollViewPrimitive);
+const ScrollView = Field.primitiveWithForwardRef(ScrollViewPrimitive);
 ScrollView.displayName = 'ScrollView';
 
 const MenuHeader = ({ children }) => {
@@ -168,7 +166,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 = primitiveWithForwardRef.primitiveWithForwardRef(AutocompleteMenuPrimitive);
+const AutocompleteMenu = Field.primitiveWithForwardRef(AutocompleteMenuPrimitive);
 AutocompleteMenu.displayName = 'AutocompleteMenu';
 
 // Source: https://github.com/radix-ui/primitives/blob/7ae63b6cce6ea53ea5d65b6d411894c004b38f47/packages/react/use-layout-effect/src/useLayoutEffect.tsx
@@ -411,7 +409,7 @@ const HighlightMatchPrimitive = ({ children, className, query, testId, ...rest }
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/highlightmatch)
  */
-const HighlightMatch = primitiveWithForwardRef.primitiveWithForwardRef(HighlightMatchPrimitive);
+const HighlightMatch = Field.primitiveWithForwardRef(HighlightMatchPrimitive);
 HighlightMatch.displayName = 'HighlightMatch';
 
 const ariaLabelText = Field.ComponentText.SearchField.searchButtonLabel;
@@ -419,7 +417,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 = primitiveWithForwardRef.primitiveWithForwardRef(SearchFieldButtonPrimitive);
+const SearchFieldButton = Field.primitiveWithForwardRef(SearchFieldButtonPrimitive);
 SearchFieldButton.displayName = 'SearchFieldButton';
 
 const FieldGroupPrimitive = ({ children, className, innerEndComponent, innerStartComponent, orientation = 'horizontal', outerEndComponent, outerStartComponent, variation, ...rest }, ref) => {
@@ -441,7 +439,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 = primitiveWithForwardRef.primitiveWithForwardRef(FieldGroupPrimitive);
+const FieldGroup = Field.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) => {
@@ -449,7 +447,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 = primitiveWithForwardRef.primitiveWithForwardRef(InputPrimitive);
+const Input = Field.primitiveWithForwardRef(InputPrimitive);
 Input.displayName = 'Input';
 
 const isStyleKey = (prop) => {
@@ -525,7 +523,7 @@ const TextFieldPrimitive = (props, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/textfield)
  */
-const TextField = primitiveWithForwardRef.primitiveWithForwardRef(TextFieldPrimitive);
+const TextField = Field.primitiveWithForwardRef(TextFieldPrimitive);
 TextField.displayName = 'TextField';
 
 const DEFAULT_KEYS = new Set([Field.ESCAPE_KEY, Field.ENTER_KEY]);
@@ -603,7 +601,7 @@ const SearchFieldPrimitive = ({ autoComplete = 'off', className, isDisabled, cle
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)
  */
-const SearchField = primitiveWithForwardRef.primitiveWithForwardRef(SearchFieldPrimitive);
+const SearchField = Field.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) => {
@@ -659,14 +657,14 @@ const AutocompletePrimitive = ({ className, defaultValue, value, isLoading = fal
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/autocomplete)
  */
-const Autocomplete = primitiveWithForwardRef.primitiveWithForwardRef(AutocompletePrimitive);
+const Autocomplete = Field.primitiveWithForwardRef(AutocompletePrimitive);
 Autocomplete.displayName = 'Autocomplete';
 
 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 = primitiveWithForwardRef.primitiveWithForwardRef(ImagePrimitive);
+const Image = Field.primitiveWithForwardRef(ImagePrimitive);
 Image.displayName = 'Image';
 
 const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src, alt, isLoading, ...rest }, ref) => {
@@ -680,7 +678,7 @@ const AvatarPrimitive = ({ className, children, variation, colorTheme, size, src
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
  */
-const Avatar = primitiveWithForwardRef.primitiveWithForwardRef(AvatarPrimitive);
+const Avatar = Field.primitiveWithForwardRef(AvatarPrimitive);
 Avatar.displayName = 'Avatar';
 
 const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref) => {
@@ -690,7 +688,7 @@ const BadgePrimitive = ({ className, children, variation, size, ...rest }, ref)
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/badge)
  */
-const Badge = primitiveWithForwardRef.primitiveWithForwardRef(BadgePrimitive);
+const Badge = Field.primitiveWithForwardRef(BadgePrimitive);
 Badge.displayName = 'Badge';
 
 const BreadcrumbItemPrimitive = ({ className, children, as = 'li', ...rest }, ref) => {
@@ -700,7 +698,7 @@ const BreadcrumbItemPrimitive = ({ className, children, as = 'li', ...rest }, re
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbItem = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbItemPrimitive);
+const BreadcrumbItem = Field.primitiveWithForwardRef(BreadcrumbItemPrimitive);
 BreadcrumbItem.displayName = 'Breadcrumbs.Item';
 
 const LinkPrimitive = ({ as = 'a', children, className, isExternal, ...rest }, ref) => {
@@ -709,7 +707,7 @@ const LinkPrimitive = ({ as = 'a', children, className, isExternal, ...rest }, r
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/link)
  */
-const Link = primitiveWithForwardRef.primitiveWithForwardRef(LinkPrimitive);
+const Link = Field.primitiveWithForwardRef(LinkPrimitive);
 Link.displayName = 'Link';
 
 const BreadcrumbLinkPrimitive = ({ className, children, href, isCurrent, ...rest }, ref) => {
@@ -726,7 +724,7 @@ const BreadcrumbLinkPrimitive = ({ className, children, href, isCurrent, ...rest
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbLink = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbLinkPrimitive);
+const BreadcrumbLink = Field.primitiveWithForwardRef(BreadcrumbLinkPrimitive);
 BreadcrumbLink.displayName = 'Breadcrumbs.Link';
 
 const BreadcrumbSeparatorPrimitive = ({ className, children = '/', as = 'span', ...rest }, ref) => {
@@ -736,7 +734,7 @@ const BreadcrumbSeparatorPrimitive = ({ className, children = '/', as = 'span',
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbSeparator = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbSeparatorPrimitive);
+const BreadcrumbSeparator = Field.primitiveWithForwardRef(BreadcrumbSeparatorPrimitive);
 BreadcrumbSeparator.displayName = 'Breadcrumbs.Separator';
 
 const BreadcrumbContainerPrimitive = ({ className, children, ...rest }, ref) => {
@@ -748,7 +746,7 @@ const BreadcrumbContainerPrimitive = ({ className, children, ...rest }, ref) =>
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const BreadcrumbContainer = primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbContainerPrimitive);
+const BreadcrumbContainer = Field.primitiveWithForwardRef(BreadcrumbContainerPrimitive);
 BreadcrumbContainer.displayName = 'Breadcrumbs.Container';
 
 const BreadcrumbsPrimitive = ({ className, items, separator = React__namespace.createElement(BreadcrumbSeparator, null), ...rest }, ref) => {
@@ -763,7 +761,7 @@ const BreadcrumbsPrimitive = ({ className, items, separator = React__namespace.c
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/breadcrumbs)
  */
-const Breadcrumbs = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(BreadcrumbsPrimitive), {
+const Breadcrumbs = Object.assign(Field.primitiveWithForwardRef(BreadcrumbsPrimitive), {
     Item: BreadcrumbItem,
     Link: BreadcrumbLink,
     Separator: BreadcrumbSeparator,
@@ -781,7 +779,7 @@ const ButtonGroupPrimitive = ({ className, children, isDisabled: _isDisabled = f
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/button#buttongroup)
  */
-const ButtonGroup = primitiveWithForwardRef.primitiveWithForwardRef(ButtonGroupPrimitive);
+const ButtonGroup = Field.primitiveWithForwardRef(ButtonGroupPrimitive);
 ButtonGroup.displayName = 'ButtonGroup';
 
 const CardPrimitive = ({ className, children, variation, ...rest }, ref) => {
@@ -790,14 +788,14 @@ const CardPrimitive = ({ className, children, variation, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/card)
  */
-const Card = primitiveWithForwardRef.primitiveWithForwardRef(CardPrimitive);
+const Card = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(VisuallyHiddenPrimitive);
+const VisuallyHidden = Field.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) => {
@@ -862,7 +860,7 @@ 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 = primitiveWithForwardRef.primitiveWithForwardRef(CheckboxPrimitive);
+const Checkbox = Field.primitiveWithForwardRef(CheckboxPrimitive);
 Checkbox.displayName = 'Checkbox';
 
 const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, labelHidden = false, labelPosition, testId, size, ...rest }, ref) => {
@@ -874,14 +872,14 @@ const CheckboxFieldPrimitive = ({ className, errorMessage, hasError = false, lab
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/checkboxfield)
  */
-const CheckboxField = primitiveWithForwardRef.primitiveWithForwardRef(CheckboxFieldPrimitive);
+const CheckboxField = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(GridPrimitive);
+const Grid = Field.primitiveWithForwardRef(GridPrimitive);
 Grid.displayName = 'Grid';
 
 const ELLIPSIS = '...';
@@ -1039,7 +1037,7 @@ const PaginationPrimitive = ({ className, currentPage = 1, totalPages, hasMorePa
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/pagination)
  */
-const Pagination = primitiveWithForwardRef.primitiveWithForwardRef(PaginationPrimitive);
+const Pagination = Field.primitiveWithForwardRef(PaginationPrimitive);
 Pagination.displayName = 'Pagination';
 
 const usePagination = (props) => {
@@ -1158,7 +1156,7 @@ const DividerPrimitive = ({ className, orientation = 'horizontal', size, label,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/divider)
  */
-const Divider = primitiveWithForwardRef.primitiveWithForwardRef(DividerPrimitive);
+const Divider = Field.primitiveWithForwardRef(DividerPrimitive);
 Divider.displayName = 'Divider';
 
 const DropZoneContext = React__namespace.createContext('inactive');
@@ -1167,14 +1165,14 @@ const DropZoneProvider = ({ value, children, }) => {
 };
 
 const Container = ({ className, children, testId, isDisabled, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, ...rest }, ref) => {
-    const dragState = React__default["default"].useContext(DropZoneContext);
+    const dragState = React__namespace["default"].useContext(DropZoneContext);
     // Don't add drag event handlers if it is disabled.
     const dragProps = isDisabled
         ? {}
         : { 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));
+    return (React__namespace["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 = primitiveWithForwardRef.primitiveWithForwardRef(Container);
+const DropZoneContainer = Field.primitiveWithForwardRef(Container);
 DropZoneContainer.displayName = 'DropZoneContainer';
 
 /**
@@ -1213,7 +1211,7 @@ const Default = ({ children, }) => {
 };
 
 const DropZonePrimitive = ({ children, testId, isDisabled, acceptedFileTypes, onDropComplete, ...rest }, ref) => {
-    const { dragState, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, } = Field.useDropZone({
+    const { dragState, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, } = uiReactCore.useDropZone({
         acceptedFileTypes,
         onDropComplete,
         ...rest,
@@ -1224,7 +1222,7 @@ const DropZonePrimitive = ({ children, testId, isDisabled, acceptedFileTypes, on
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/dropzone)
  */
-const DropZone = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(DropZonePrimitive), {
+const DropZone = Object.assign(Field.primitiveWithForwardRef(DropZonePrimitive), {
     Accepted,
     Rejected,
     Default,
@@ -1243,7 +1241,7 @@ const AccordionItemPrimitive = ({ children, className, value, as = 'details', ..
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionItem = primitiveWithForwardRef.primitiveWithForwardRef(AccordionItemPrimitive);
+const AccordionItem = Field.primitiveWithForwardRef(AccordionItemPrimitive);
 AccordionItem.displayName = 'AccordionItem';
 
 const AccordionContentPrimitive = ({ className, children, ...rest }, ref) => {
@@ -1252,14 +1250,14 @@ const AccordionContentPrimitive = ({ className, children, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionContent = primitiveWithForwardRef.primitiveWithForwardRef(AccordionContentPrimitive);
+const AccordionContent = Field.primitiveWithForwardRef(AccordionContentPrimitive);
 AccordionContent.displayName = 'Accordion.Content';
 
 const AccordionTriggerPrimitive = ({ children, className, ...rest }, ref) => {
     const context = React__namespace.useContext(AccordionContext);
     const value = React__namespace.useContext(AccordionItemContext);
     const handleOnClick = (e) => {
-        if (ui.isTypedFunction(rest.onClick)) {
+        if (ui.isFunction(rest.onClick)) {
             rest.onClick(e);
         }
         if (context?.setValue && value) {
@@ -1272,7 +1270,7 @@ const AccordionTriggerPrimitive = ({ children, className, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionTrigger = primitiveWithForwardRef.primitiveWithForwardRef(AccordionTriggerPrimitive);
+const AccordionTrigger = Field.primitiveWithForwardRef(AccordionTriggerPrimitive);
 AccordionTrigger.displayName = 'Accordion.Trigger';
 
 const AccordionIconPrimitive = ({ className, as = 'span', ...rest }, ref) => {
@@ -1282,7 +1280,7 @@ const AccordionIconPrimitive = ({ className, as = 'span', ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionIcon = primitiveWithForwardRef.primitiveWithForwardRef(AccordionIconPrimitive);
+const AccordionIcon = Field.primitiveWithForwardRef(AccordionIconPrimitive);
 AccordionIcon.displayName = 'Accordion.Icon';
 
 const AccordionContainerPrimitive = ({ children, className, defaultValue, allowMultiple, preventCollapse, onValueChange, testId, value: controlledValue, ...rest }, ref) => {
@@ -1324,7 +1322,7 @@ const AccordionContainerPrimitive = ({ children, className, defaultValue, allowM
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const AccordionContainer = primitiveWithForwardRef.primitiveWithForwardRef(AccordionContainerPrimitive);
+const AccordionContainer = Field.primitiveWithForwardRef(AccordionContainerPrimitive);
 AccordionContainer.displayName = 'Accordion.Container';
 
 const AccordionPrimitive = ({ items, ...rest }, ref) => {
@@ -1337,7 +1335,7 @@ const AccordionPrimitive = ({ items, ...rest }, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/accordion)
  */
-const Accordion = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(AccordionPrimitive), {
+const Accordion = Object.assign(Field.primitiveWithForwardRef(AccordionPrimitive), {
     Container: AccordionContainer,
     Content: AccordionContent,
     Icon: AccordionIcon,
@@ -1367,7 +1365,7 @@ const FieldsetPrimitive = ({ children, className, isDisabled, legend, legendHidd
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/fieldset)
  */
-const Fieldset = primitiveWithForwardRef.primitiveWithForwardRef(FieldsetPrimitive);
+const Fieldset = Field.primitiveWithForwardRef(FieldsetPrimitive);
 Fieldset.displayName = 'Fieldset';
 
 const headingLevels = {
@@ -1382,7 +1380,7 @@ const HeadingPrimitive = ({ className, children, isTruncated, level = 6, ...rest
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/heading)
  */
-const Heading = primitiveWithForwardRef.primitiveWithForwardRef(HeadingPrimitive);
+const Heading = Field.primitiveWithForwardRef(HeadingPrimitive);
 Heading.displayName = 'Heading';
 
 /**
@@ -1393,7 +1391,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 = primitiveWithForwardRef.primitiveWithForwardRef(MenuButtonPrimitive);
+const MenuButton = Field.primitiveWithForwardRef(MenuButtonPrimitive);
 MenuButton.displayName = 'MenuButton';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
@@ -1411,7 +1409,7 @@ const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size,
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
  */
-const Menu = primitiveWithForwardRef.primitiveWithForwardRef(MenuPrimitive);
+const Menu = Field.primitiveWithForwardRef(MenuPrimitive);
 Menu.displayName = 'Menu';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
@@ -1426,13 +1424,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 = primitiveWithForwardRef.primitiveWithForwardRef(MenuItemPrimitive);
+const MenuItem = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(MessageHeadingPrimitive);
+const MessageHeading = Field.primitiveWithForwardRef(MessageHeadingPrimitive);
 MessageHeading.displayName = 'MessageHeading';
 
 const MessageContext = React__namespace.createContext({
@@ -1461,7 +1459,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 = primitiveWithForwardRef.primitiveWithForwardRef(MessageIconPrimitive);
+const MessageIcon = Field.primitiveWithForwardRef(MessageIconPrimitive);
 MessageIcon.displayName = 'MessageIcon';
 
 const MessageDismissPrimitive = ({ onDismiss, dismissLabel, hasIcon = true, children, className, ...rest }, ref) => {
@@ -1477,13 +1475,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 = primitiveWithForwardRef.primitiveWithForwardRef(MessageDismissPrimitive);
+const MessageDismiss = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(MessageContentPrimitive);
+const MessageContent = Field.primitiveWithForwardRef(MessageContentPrimitive);
 MessageContent.displayName = 'MessageContent';
 
 const MessageContainerPrimitive = ({ children, className, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
@@ -1495,7 +1493,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 = primitiveWithForwardRef.primitiveWithForwardRef(MessageContainerPrimitive);
+const MessageContainer = Field.primitiveWithForwardRef(MessageContainerPrimitive);
 MessageContainer.displayName = 'MessageContainer';
 
 const MessagePrimitive = ({ children, heading, dismissLabel, isDismissible, onDismiss, hasIcon = true, colorTheme = 'neutral', variation = 'filled', ...rest }, ref) => {
@@ -1509,7 +1507,7 @@ const MessagePrimitive = ({ children, heading, dismissLabel, isDismissible, onDi
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/message)
  */
-const Message = primitiveWithForwardRef.primitiveWithForwardRef(MessagePrimitive);
+const Message = Field.primitiveWithForwardRef(MessagePrimitive);
 Message.displayName = 'Message';
 
 const { passwordIsHidden, passwordIsShown, showPassword } = Field.ComponentText.PasswordField;
@@ -1525,7 +1523,7 @@ const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwo
             : passwordIsShownLabel),
         icon));
 };
-const ShowPasswordButton = primitiveWithForwardRef.primitiveWithForwardRef(ShowPasswordButtonPrimitive);
+const ShowPasswordButton = Field.primitiveWithForwardRef(ShowPasswordButtonPrimitive);
 ShowPasswordButton.displayName = 'ShowPasswordButton';
 
 const PasswordFieldPrimitive = ({ autoComplete = 'current-password', label, className, hideShowPassword = false, passwordIsHiddenLabel, passwordIsShownLabel, showPasswordButtonLabel, showPasswordButtonRef, size, hasError, ...rest }, ref) => {
@@ -1543,7 +1541,7 @@ const PasswordFieldPrimitive = ({ autoComplete = 'current-password', label, clas
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/passwordfield)
  */
-const PasswordField = primitiveWithForwardRef.primitiveWithForwardRef(PasswordFieldPrimitive);
+const PasswordField = Field.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) => {
@@ -1562,7 +1560,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 = primitiveWithForwardRef.primitiveWithForwardRef(SelectPrimitive);
+const Select = Field.primitiveWithForwardRef(SelectPrimitive);
 Select.displayName = 'Select';
 
 const selectFieldChildren = ({ children, options, }) => {
@@ -1596,7 +1594,7 @@ const SelectFieldPrimitive = (props, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/selectfield)
  */
-const SelectField = primitiveWithForwardRef.primitiveWithForwardRef(SelectFieldPrimitive);
+const SelectField = Field.primitiveWithForwardRef(SelectFieldPrimitive);
 SelectField.displayName = 'SelectField';
 
 const DialCodeSelectPrimitive = ({ className, dialCodeList, isReadOnly, ...props }, ref) => {
@@ -1611,7 +1609,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 = primitiveWithForwardRef.primitiveWithForwardRef(DialCodeSelectPrimitive);
+const DialCodeSelect = Field.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) => {
@@ -1620,7 +1618,7 @@ const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, d
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/phonenumberfield)
  */
-const PhoneNumberField = primitiveWithForwardRef.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
+const PhoneNumberField = Field.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
 PhoneNumberField.displayName = 'PhoneNumberField';
 
 const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
@@ -1632,11 +1630,11 @@ const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest },
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
  */
-const Placeholder = primitiveWithForwardRef.primitiveWithForwardRef(PlaceholderPrimitive);
+const Placeholder = Field.primitiveWithForwardRef(PlaceholderPrimitive);
 Placeholder.displayName = 'Placeholder';
 
 const defaultValue = { name: 'default' };
-const RadioGroupContext = React__default["default"].createContext(defaultValue);
+const RadioGroupContext = React__namespace["default"].createContext(defaultValue);
 const useRadioGroupContext = () => {
     return React.useContext(RadioGroupContext);
 };
@@ -1659,7 +1657,7 @@ 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 = primitiveWithForwardRef.primitiveWithForwardRef(RadioPrimitive);
+const Radio = Field.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) => {
@@ -1705,7 +1703,7 @@ const RadioGroupFieldPrimitive = ({ children, className, defaultValue, descripti
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/radiogroupfield)
  */
-const RadioGroupField = primitiveWithForwardRef.primitiveWithForwardRef(RadioGroupFieldPrimitive);
+const RadioGroupField = Field.primitiveWithForwardRef(RadioGroupFieldPrimitive);
 RadioGroupField.displayName = 'RadioGroupField';
 
 const isIconFilled = (currentIconIndex, ratingValue) => {
@@ -1765,7 +1763,7 @@ const RatingPrimitive = ({ className, emptyColor, emptyIcon, fillColor, icon, ma
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/rating)
  */
-const Rating = primitiveWithForwardRef.primitiveWithForwardRef(RatingPrimitive);
+const Rating = Field.primitiveWithForwardRef(RatingPrimitive);
 Rating.displayName = 'Rating';
 
 // Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
@@ -1830,7 +1828,7 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/sliderfield)
  */
-const SliderField = primitiveWithForwardRef.primitiveWithForwardRef(SliderFieldPrimitive);
+const SliderField = Field.primitiveWithForwardRef(SliderFieldPrimitive);
 SliderField.displayName = 'SliderField';
 
 const getCorrectSteppingValue = ({ max, min, step, value, }) => {
@@ -1980,7 +1978,7 @@ const StepperFieldPrimitive = (props, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/stepperfield)
  */
-const StepperField = primitiveWithForwardRef.primitiveWithForwardRef(StepperFieldPrimitive);
+const StepperField = Field.primitiveWithForwardRef(StepperFieldPrimitive);
 StepperField.displayName = 'StepperField';
 
 const useSwitch = (props) => {
@@ -2037,7 +2035,7 @@ const SwitchFieldPrimitive = ({ className, defaultChecked, id, isChecked, isDisa
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/switchfield)
  */
-const SwitchField = primitiveWithForwardRef.primitiveWithForwardRef(SwitchFieldPrimitive);
+const SwitchField = Field.primitiveWithForwardRef(SwitchFieldPrimitive);
 SwitchField.displayName = 'SwitchField';
 
 const TablePrimitive = ({ caption, children, className, highlightOnHover = false, size, variation, ...rest }, ref) => {
@@ -2049,29 +2047,29 @@ const TablePrimitive = ({ caption, children, className, highlightOnHover = false
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/table)
  */
-const Table = primitiveWithForwardRef.primitiveWithForwardRef(TablePrimitive);
+const Table = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(TableBodyPrimitive);
+const TableBody = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(TableCellPrimitive);
+const TableCell = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(TableFootPrimitive);
+const TableFoot = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(TableHeadPrimitive);
+const TableHead = Field.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 = primitiveWithForwardRef.primitiveWithForwardRef(TableRowPrimitive);
+const TableRow = Field.primitiveWithForwardRef(TableRowPrimitive);
 TableRow.displayName = 'TableRow';
 
 const TabsContext = React__namespace.createContext({
@@ -2091,7 +2089,7 @@ const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button',
     }
     const isActive = activeTab === value;
     const handleOnClick = (e) => {
-        if (ui.isTypedFunction(onClick)) {
+        if (ui.isFunction(onClick)) {
             onClick?.(e);
         }
         setActiveTab(value);
@@ -2101,7 +2099,7 @@ const TabsItemPrimitive = ({ className, value, children, onClick, as = 'button',
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabsItem = primitiveWithForwardRef.primitiveWithForwardRef(TabsItemPrimitive);
+const TabsItem = Field.primitiveWithForwardRef(TabsItemPrimitive);
 TabsItem.displayName = 'Tabs.Item';
 
 const isValidTab = (child) => React__namespace.isValidElement(child);
@@ -2179,7 +2177,7 @@ const TabListPrimitive = ({ className, children, indicatorPosition, spacing, rol
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabList = primitiveWithForwardRef.primitiveWithForwardRef(TabListPrimitive);
+const TabList = Field.primitiveWithForwardRef(TabListPrimitive);
 TabList.displayName = 'Tabs.List';
 
 const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...rest }, ref) => {
@@ -2195,7 +2193,7 @@ const TabPanelPrimitive = ({ className, value, children, role = 'tabpanel', ...r
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabPanel = primitiveWithForwardRef.primitiveWithForwardRef(TabPanelPrimitive);
+const TabPanel = Field.primitiveWithForwardRef(TabPanelPrimitive);
 TabPanel.displayName = 'Tabs.Panel';
 
 const TabsContainerPrimitive = ({ children, defaultValue, className, value: controlledValue, onValueChange, isLazy, ...rest }, ref) => {
@@ -2225,7 +2223,7 @@ const TabsContainerPrimitive = ({ children, defaultValue, className, value: cont
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const TabsContainer = primitiveWithForwardRef.primitiveWithForwardRef(TabsContainerPrimitive);
+const TabsContainer = Field.primitiveWithForwardRef(TabsContainerPrimitive);
 TabsContainer.displayName = 'Tabs.Container';
 
 const TabsPrimitive = ({ items, indicatorPosition, justifyContent, spacing, ...rest }, ref) => {
@@ -2236,7 +2234,7 @@ const TabsPrimitive = ({ items, indicatorPosition, justifyContent, spacing, ...r
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/tabs)
  */
-const Tabs = Object.assign(primitiveWithForwardRef.primitiveWithForwardRef(TabsPrimitive), {
+const Tabs = Object.assign(Field.primitiveWithForwardRef(TabsPrimitive), {
     Item: TabsItem,
     List: TabList,
     Panel: TabPanel,
@@ -2249,7 +2247,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 = primitiveWithForwardRef.primitiveWithForwardRef(TextAreaPrimitive);
+const TextArea = Field.primitiveWithForwardRef(TextAreaPrimitive);
 TextArea.displayName = 'TextArea';
 
 // Updates the height of a <textarea> when the value changes.
@@ -2286,7 +2284,7 @@ const AutoresizeTextAreaPrimitive = ({ value, ...rest }, externalRef) => {
     });
     return React__namespace.createElement(TextArea, { ...rest, ref: composedRef, value: value });
 };
-const AutoresizeTextArea = primitiveWithForwardRef.primitiveWithForwardRef(AutoresizeTextAreaPrimitive);
+const AutoresizeTextArea = Field.primitiveWithForwardRef(AutoresizeTextAreaPrimitive);
 AutoresizeTextArea.displayName = 'AutoresizeTextArea';
 
 const DEFAULT_ROW_COUNT = 3;
@@ -2314,7 +2312,7 @@ const TextAreaFieldPrimitive = (props, ref) => {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/textareafield)
  */
-const TextAreaField = primitiveWithForwardRef.primitiveWithForwardRef(TextAreaFieldPrimitive);
+const TextAreaField = Field.primitiveWithForwardRef(TextAreaFieldPrimitive);
 TextAreaField.displayName = 'TextAreaField';
 
 const useToggleButton = ({ isPressed, defaultPressed, onClick, onChange, value, }) => {
@@ -2350,7 +2348,7 @@ const ToggleButtonPrimitive = ({ className, children, defaultPressed = false, is
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton)
  */
-const ToggleButton = primitiveWithForwardRef.primitiveWithForwardRef(ToggleButtonPrimitive);
+const ToggleButton = Field.primitiveWithForwardRef(ToggleButtonPrimitive);
 ToggleButton.displayName = 'ToggleButton';
 
 const useToggleButtonGroup = ({ onChange, value, isExclusive = false, isSelectionRequired = false, }) => {
@@ -2410,12 +2408,12 @@ const ToggleButtonGroupPrimitive = ({ children, className, isExclusive, isSelect
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/togglebutton#togglebuttongroup)
  */
-const ToggleButtonGroup = primitiveWithForwardRef.primitiveWithForwardRef(ToggleButtonGroupPrimitive);
+const ToggleButtonGroup = Field.primitiveWithForwardRef(ToggleButtonGroupPrimitive);
 ToggleButtonGroup.displayName = 'ToggleButtonGroup';
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    IconsProvider: IconsProvider,
+    Accordion: Accordion,
     Alert: Alert,
     Autocomplete: Autocomplete,
     Avatar: Avatar,
@@ -2426,9 +2424,10 @@ var index$1 = /*#__PURE__*/Object.freeze({
     Card: Card,
     CheckboxField: CheckboxField,
     Collection: Collection,
+    ComponentPropsToStylePropsMap: Field.ComponentPropsToStylePropsMap,
+    ComponentPropsToStylePropsMapKeys: Field.ComponentPropsToStylePropsMapKeys,
     Divider: Divider,
     DropZone: DropZone,
-    Accordion: Accordion,
     FieldGroupIcon: Field.FieldGroupIcon,
     FieldGroupIconButton: Field.FieldGroupIconButton,
     Fieldset: Fieldset,
@@ -2437,6 +2436,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     Heading: Heading,
     HighlightMatch: HighlightMatch,
     Icon: Field.Icon,
+    IconsProvider: IconsProvider,
     Image: Image,
     Input: Input,
     Label: Field.Label,
@@ -2459,6 +2459,12 @@ var index$1 = /*#__PURE__*/Object.freeze({
     SliderField: SliderField,
     StepperField: StepperField,
     SwitchField: SwitchField,
+    Table: Table,
+    TableBody: TableBody,
+    TableCell: TableCell,
+    TableFoot: TableFoot,
+    TableHead: TableHead,
+    TableRow: TableRow,
     Tabs: Tabs,
     Text: Field.Text,
     TextAreaField: TextAreaField,
@@ -2467,15 +2473,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     ToggleButtonGroup: ToggleButtonGroup,
     View: Field.View,
     VisuallyHidden: VisuallyHidden,
-    Table: Table,
-    TableBody: TableBody,
-    TableCell: TableCell,
-    TableFoot: TableFoot,
-    TableHead: TableHead,
-    TableRow: TableRow,
-    usePagination: usePagination,
-    ComponentPropsToStylePropsMap: Field.ComponentPropsToStylePropsMap,
-    ComponentPropsToStylePropsMapKeys: Field.ComponentPropsToStylePropsMapKeys
+    usePagination: usePagination
 });
 
 var ComponentClassName;
@@ -2488,19 +2486,19 @@ const ValidationErrors = ({ errors, id, dataAttr, }) => {
     if (!(errors?.length > 0))
         return null;
     const dataAttrProp = dataAttr ? { [dataAttr]: true } : {};
-    return (React__default["default"].createElement(Field.View, { ...dataAttrProp, id: id }, errors.map((error) => {
-        return (React__default["default"].createElement(Field.Text, { key: error, role: "alert", variation: "error" }, ui.translate(error)));
+    return (React__namespace["default"].createElement(Field.View, { ...dataAttrProp, id: id }, errors.map((error) => {
+        return (React__namespace["default"].createElement(Field.Text, { key: error, role: "alert", variation: "error" }, ui.translate(error)));
     })));
 };
 
 const DefaultErrorMessage = (props) => {
-    return React__default["default"].createElement(Alert, { variation: "error", ...props });
+    return React__namespace["default"].createElement(Alert, { variation: "error", ...props });
 };
 
 const DefaultPasswordField = ({ fieldValidationErrors, label, ...rest }) => {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(PasswordField, { ...rest, label: label }),
-        fieldValidationErrors ? (React__default["default"].createElement(ValidationErrors, { errors: fieldValidationErrors })) : null));
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
+        React__namespace["default"].createElement(PasswordField, { ...rest, label: label }),
+        fieldValidationErrors ? (React__namespace["default"].createElement(ValidationErrors, { errors: fieldValidationErrors })) : null));
 };
 const DEFAULTS$1 = {
     CurrentPasswordField: DefaultPasswordField,
@@ -2523,7 +2521,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.5.0';
+const VERSION = '6.5.2';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -2537,13 +2535,13 @@ const getIsDisabled = (formValues, validationError) => {
     return arePasswordsInvalid;
 };
 function ChangePassword({ components, displayText: overrideDisplayText, onError, onSuccess, validators, }) {
-    const [errorMessage, setErrorMessage] = React__default["default"].useState(null);
-    const [formValues, setFormValues] = React__default["default"].useState({});
-    const [validationError, setValidationError] = React__default["default"].useState({});
-    const blurredFields = React__default["default"].useRef([]);
+    const [errorMessage, setErrorMessage] = React__namespace["default"].useState(null);
+    const [formValues, setFormValues] = React__namespace["default"].useState({});
+    const [validationError, setValidationError] = React__namespace["default"].useState({});
+    const blurredFields = React__namespace["default"].useRef([]);
     const { user, isLoading } = Field.useAuth();
     const isDisabled = getIsDisabled(formValues, validationError);
-    const passwordValidators = React__default["default"].useMemo(() => {
+    const passwordValidators = React__namespace["default"].useMemo(() => {
         return validators ?? ui.getDefaultPasswordValidators();
     }, [validators]);
     uiReactCore.useSetUserAgent({
@@ -2555,7 +2553,7 @@ function ChangePassword({ components, displayText: overrideDisplayText, onError,
      * Note that formValues and other states are passed in as props so that
      * it does not depend on whether or not those states have been updated yet
      */
-    const validateNewPassword = React__default["default"].useCallback(({ formValues, eventType }) => {
+    const validateNewPassword = React__namespace["default"].useCallback(({ formValues, eventType }) => {
         const { newPassword } = formValues;
         const hasBlurred = blurredFields.current.includes('newPassword');
         return ui.runFieldValidators({
@@ -2565,7 +2563,7 @@ function ChangePassword({ components, displayText: overrideDisplayText, onError,
             hasBlurred,
         });
     }, [passwordValidators]);
-    const validateConfirmPassword = React__default["default"].useCallback(({ formValues, eventType }) => {
+    const validateConfirmPassword = React__namespace["default"].useCallback(({ formValues, eventType }) => {
         const { newPassword, confirmPassword } = formValues;
         const hasBlurred = blurredFields.current.includes('confirmPassword');
         const confirmPasswordValidators = ui.getDefaultConfirmPasswordValidators(newPassword);
@@ -2576,7 +2574,7 @@ function ChangePassword({ components, displayText: overrideDisplayText, onError,
             hasBlurred,
         });
     }, []);
-    const runValidation = React__default["default"].useCallback((param) => {
+    const runValidation = React__namespace["default"].useCallback((param) => {
         const passwordErrors = validateNewPassword(param);
         const confirmPasswordErrors = validateConfirmPassword(param);
         const newValidationError = {
@@ -2595,7 +2593,7 @@ function ChangePassword({ components, displayText: overrideDisplayText, onError,
     };
     const { confirmPasswordFieldLabel, currentPasswordFieldLabel, newPasswordFieldLabel, updatePasswordButtonText, } = displayText;
     /* Subcomponents */
-    const { CurrentPasswordField, NewPasswordField, ConfirmPasswordField, SubmitButton, ErrorMessage, } = React__default["default"].useMemo(() => ({ ...DEFAULTS$1, ...(components ?? {}) }), [components]);
+    const { CurrentPasswordField, NewPasswordField, ConfirmPasswordField, SubmitButton, ErrorMessage, } = React__namespace["default"].useMemo(() => ({ ...DEFAULTS$1, ...(components ?? {}) }), [components]);
     /* Event Handlers */
     const handleChange = (event) => {
         event.preventDefault();
@@ -2644,13 +2642,13 @@ function ChangePassword({ components, displayText: overrideDisplayText, onError,
         logger$2.warn('<ChangePassword /> requires user to be authenticated.');
         return null;
     }
-    return (React__default["default"].createElement(Field.View, { as: "form", className: ComponentClassName.ChangePassword, onSubmit: handleSubmit },
-        React__default["default"].createElement(Field.Flex, { direction: "column" },
-            React__default["default"].createElement(CurrentPasswordField, { autoComplete: "current-password", isRequired: true, label: currentPasswordFieldLabel, name: "currentPassword", onBlur: handleBlur, onChange: handleChange }),
-            React__default["default"].createElement(NewPasswordField, { autoComplete: "new-password", fieldValidationErrors: validationError?.newPassword, isRequired: true, label: newPasswordFieldLabel, name: "newPassword", onBlur: handleBlur, onChange: handleChange }),
-            React__default["default"].createElement(ConfirmPasswordField, { autoComplete: "new-password", fieldValidationErrors: validationError?.confirmPassword, isRequired: true, label: confirmPasswordFieldLabel, name: "confirmPassword", onBlur: handleBlur, onChange: handleChange }),
-            React__default["default"].createElement(SubmitButton, { isDisabled: isDisabled, type: "submit" }, updatePasswordButtonText),
-            errorMessage ? React__default["default"].createElement(ErrorMessage, null, errorMessage) : null)));
+    return (React__namespace["default"].createElement(Field.View, { as: "form", className: ComponentClassName.ChangePassword, onSubmit: handleSubmit },
+        React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+            React__namespace["default"].createElement(CurrentPasswordField, { autoComplete: "current-password", isRequired: true, label: currentPasswordFieldLabel, name: "currentPassword", onBlur: handleBlur, onChange: handleChange }),
+            React__namespace["default"].createElement(NewPasswordField, { autoComplete: "new-password", fieldValidationErrors: validationError?.newPassword, isRequired: true, label: newPasswordFieldLabel, name: "newPassword", onBlur: handleBlur, onChange: handleChange }),
+            React__namespace["default"].createElement(ConfirmPasswordField, { autoComplete: "new-password", fieldValidationErrors: validationError?.confirmPassword, isRequired: true, label: confirmPasswordFieldLabel, name: "confirmPassword", onBlur: handleBlur, onChange: handleChange }),
+            React__namespace["default"].createElement(SubmitButton, { isDisabled: isDisabled, type: "submit" }, updatePasswordButtonText),
+            errorMessage ? React__namespace["default"].createElement(ErrorMessage, null, errorMessage) : null)));
 }
 ChangePassword.CurrentPasswordField = DEFAULTS$1.CurrentPasswordField;
 ChangePassword.NewPasswordField = DEFAULTS$1.NewPasswordField;
@@ -2665,14 +2663,14 @@ const DefaultWarningView = ({ displayText: overrideDisplayText, isDisabled, onCa
         ...overrideDisplayText,
     };
     const { cancelButtonText, confirmDeleteButtonText, warningText } = displayText;
-    return (React__default["default"].createElement(Card, null,
-        React__default["default"].createElement(Field.Flex, { direction: "column" },
-            React__default["default"].createElement(Field.Text, { color: "font.error" }, warningText),
-            React__default["default"].createElement(Field.Flex, null,
-                React__default["default"].createElement(Field.Button, { variation: "link", onClick: onCancel, isDisabled: isDisabled }, cancelButtonText),
-                React__default["default"].createElement(Field.Button, { variation: "destructive", onClick: onConfirm, isDisabled: isDisabled }, confirmDeleteButtonText)))));
-};
-const DefaultDeleteButton = (props) => (React__default["default"].createElement(Field.Button, { ...props, variation: "warning" }));
+    return (React__namespace["default"].createElement(Card, null,
+        React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+            React__namespace["default"].createElement(Field.Text, { color: "font.error" }, warningText),
+            React__namespace["default"].createElement(Field.Flex, null,
+                React__namespace["default"].createElement(Field.Button, { variation: "link", onClick: onCancel, isDisabled: isDisabled }, cancelButtonText),
+                React__namespace["default"].createElement(Field.Button, { variation: "destructive", onClick: onConfirm, isDisabled: isDisabled }, confirmDeleteButtonText)))));
+};
+const DefaultDeleteButton = (props) => (React__namespace["default"].createElement(Field.Button, { ...props, variation: "warning" }));
 const DEFAULTS = {
     ErrorMessage: DefaultErrorMessage,
     DeleteButton: DefaultDeleteButton,
@@ -2681,8 +2679,8 @@ const DEFAULTS = {
 
 const logger$1 = ui.getLogger('AccountSettings');
 function DeleteUser({ components, displayText: overrideDisplayText, handleDelete, onError, onSuccess, }) {
-    const [state, setState] = React__default["default"].useState('IDLE');
-    const [errorMessage, setErrorMessage] = React__default["default"].useState(null);
+    const [state, setState] = React__namespace["default"].useState('IDLE');
+    const [errorMessage, setErrorMessage] = React__namespace["default"].useState(null);
     uiReactCore.useSetUserAgent({
         componentName: 'DeleteUser',
         packageName: 'react',
@@ -2696,12 +2694,12 @@ function DeleteUser({ components, displayText: overrideDisplayText, handleDelete
     const { deleteAccountButtonText } = displayText;
     const { user, isLoading } = Field.useAuth();
     // subcomponents
-    const { ErrorMessage, DeleteButton, WarningView } = React__default["default"].useMemo(() => ({ ...DEFAULTS, ...(components ?? {}) }), [components]);
+    const { ErrorMessage, DeleteButton, WarningView } = React__namespace["default"].useMemo(() => ({ ...DEFAULTS, ...(components ?? {}) }), [components]);
     const startConfirmation = (event) => {
         event.preventDefault();
         setState('CONFIRMATION');
     };
-    const runDeleteUser = React__default["default"].useCallback(async () => {
+    const runDeleteUser = React__namespace["default"].useCallback(async () => {
         if (!user) {
             return;
         }
@@ -2732,10 +2730,10 @@ function DeleteUser({ components, displayText: overrideDisplayText, handleDelete
         }
     }, [errorMessage, handleDelete, onError, onSuccess, user]);
     // called when end user cancels account deletion confirmation
-    const handleCancel = React__default["default"].useCallback(() => {
+    const handleCancel = React__namespace["default"].useCallback(() => {
         setState('IDLE');
     }, []);
-    const handleConfirmDelete = React__default["default"].useCallback(() => {
+    const handleConfirmDelete = React__namespace["default"].useCallback(() => {
         runDeleteUser();
     }, [runDeleteUser]);
     // Return null if Auth.getgetCurrentUser is still in progress
@@ -2751,10 +2749,10 @@ function DeleteUser({ components, displayText: overrideDisplayText, handleDelete
     if (state === 'DONE') {
         return null;
     }
-    return (React__default["default"].createElement(Field.Flex, { className: ComponentClassName.DeleteUser, direction: "column" },
-        React__default["default"].createElement(DeleteButton, { isDisabled: state === 'CONFIRMATION' || state === 'DELETING', onClick: startConfirmation }, deleteAccountButtonText),
-        state === 'CONFIRMATION' || state === 'DELETING' ? (React__default["default"].createElement(WarningView, { displayText: displayText, isDisabled: state === 'DELETING', onCancel: handleCancel, onConfirm: handleConfirmDelete })) : null,
-        errorMessage ? React__default["default"].createElement(ErrorMessage, null, errorMessage) : null));
+    return (React__namespace["default"].createElement(Field.Flex, { className: ComponentClassName.DeleteUser, direction: "column" },
+        React__namespace["default"].createElement(DeleteButton, { isDisabled: state === 'CONFIRMATION' || state === 'DELETING', onClick: startConfirmation }, deleteAccountButtonText),
+        state === 'CONFIRMATION' || state === 'DELETING' ? (React__namespace["default"].createElement(WarningView, { displayText: displayText, isDisabled: state === 'DELETING', onCancel: handleCancel, onConfirm: handleConfirmDelete })) : null,
+        errorMessage ? React__namespace["default"].createElement(ErrorMessage, null, errorMessage) : null));
 }
 DeleteUser.ErrorMessage = DEFAULTS.ErrorMessage;
 DeleteUser.DeleteButton = DEFAULTS.DeleteButton;
@@ -2786,11 +2784,11 @@ function RouteContainer({ children, className, variation = 'default', }) {
     const { 
     // @ts-ignore
     components: { Header, Footer }, } = useCustomComponents();
-    return (React__default["default"].createElement(Field.View, { className: className, "data-amplify-authenticator": "", "data-variation": variation },
-        React__default["default"].createElement(Field.View, { "data-amplify-container": "" },
-            React__default["default"].createElement(Header, null),
-            React__default["default"].createElement(Field.View, { "data-amplify-router": "", "data-amplify-router-content": hasTabs(route) ? undefined : '' }, children),
-            React__default["default"].createElement(Footer, null))));
+    return (React__namespace["default"].createElement(Field.View, { className: className, "data-amplify-authenticator": "", "data-variation": variation },
+        React__namespace["default"].createElement(Field.View, { "data-amplify-container": "" },
+            React__namespace["default"].createElement(Header, null),
+            React__namespace["default"].createElement(Field.View, { "data-amplify-router": "", "data-amplify-router-content": hasTabs(route) ? undefined : '' }, children),
+            React__namespace["default"].createElement(Footer, null))));
 }
 
 const getFormDataFromEvent = (event) => {
@@ -2825,7 +2823,7 @@ function useFormHandlers() {
 
 const RemoteErrorMessage = () => {
     const { error } = uiReactCore.useAuthenticator((context) => [context.error]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, error ? (React__default["default"].createElement(Alert, { variation: "error", isDismissible: true }, ui.translate(error))) : null));
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, error ? (React__namespace["default"].createElement(Alert, { variation: "error", isDismissible: true }, ui.translate(error))) : null));
 };
 
 function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props }) {
@@ -2876,23 +2874,23 @@ function ConfirmSignUp({ className, variation, }) {
     ConfirmSignUp: { Header = ConfirmSignUp.Header, Footer = ConfirmSignUp.Footer, }, }, } = useCustomComponents();
     return (
     // TODO Automatically add these namespaces again from `useAmplify`
-    React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
-                React__default["default"].createElement(Field.Flex, { direction: "column" },
-                    React__default["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
-                    React__default["default"].createElement(FormFields, null),
-                    React__default["default"].createElement(RemoteErrorMessage, null),
-                    React__default["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText$1(), isLoading: isPending }, getConfirmText$1()),
-                    React__default["default"].createElement(Field.Button, { onClick: resendCode, type: "button" }, getResendCodeText$1())),
-                React__default["default"].createElement(Footer, null)))));
+    React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    React__namespace["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
+                    React__namespace["default"].createElement(FormFields, null),
+                    React__namespace["default"].createElement(RemoteErrorMessage, null),
+                    React__namespace["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText$1(), isLoading: isPending }, getConfirmText$1()),
+                    React__namespace["default"].createElement(Field.Button, { onClick: resendCode, type: "button" }, getResendCodeText$1())),
+                React__namespace["default"].createElement(Footer, null)))));
 }
 const DefaultHeader = () => {
     const { codeDeliveryDetails } = uiReactCore.useAuthenticator((context) => [
         context.codeDeliveryDetails,
     ]);
-    return (React__default["default"].createElement(Heading, { level: 4 }, getDeliveryMethodText(codeDeliveryDetails)));
+    return (React__namespace["default"].createElement(Heading, { level: 4 }, getDeliveryMethodText(codeDeliveryDetails)));
 };
 ConfirmSignUp.Header = DefaultHeader;
 ConfirmSignUp.Footer = function Footer() {
@@ -2910,21 +2908,21 @@ const ForceNewPassword = ({ className, variation, }) => {
     const { components: { 
     // @ts-ignore
     ForceNewPassword: { FormFields = ForceNewPassword.FormFields, Header = ForceNewPassword.Header, Footer = ForceNewPassword.Footer, }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-forcenewpassword": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
-                React__default["default"].createElement(FormFields, null),
-                React__default["default"].createElement(RemoteErrorMessage, null),
-                React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText() }, getChangePasswordText()),
-                React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$2()),
-                React__default["default"].createElement(Footer, null)))));
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-forcenewpassword": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
+                React__namespace["default"].createElement(FormFields, null),
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText() }, getChangePasswordText()),
+                React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$2()),
+                React__namespace["default"].createElement(Footer, null)))));
 };
 ForceNewPassword.FormFields = function FormFields$1() {
-    return React__default["default"].createElement(FormFields, null);
+    return React__namespace["default"].createElement(FormFields, null);
 };
 ForceNewPassword.Header = function Header() {
-    return React__default["default"].createElement(Heading, { level: 4 }, getChangePasswordText());
+    return React__namespace["default"].createElement(Heading, { level: 4 }, getChangePasswordText());
 };
 ForceNewPassword.Footer = function Footer() {
     return null;
@@ -2936,9 +2934,9 @@ const ConfirmSignInFooter = () => {
         context.isPending,
         context.toSignIn,
     ]);
-    return (React__default["default"].createElement(Field.Flex, { direction: "column" },
-        React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
-        React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$1())));
+    return (React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+        React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
+        React__namespace["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$1())));
 };
 
 const logger = new utils.ConsoleLogger('SetupTotp-logger');
@@ -3021,34 +3019,34 @@ const TwoButtonSubmitFooter = (props) => {
                 return;
         }
     };
-    const defaultSubmitText = isPending ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+    const defaultSubmitText = isPending ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
         getSubmittingText(),
-        "\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getSubmitText()));
+        "\u2026")) : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, getSubmitText()));
     const submitText = submitButtonText ?? defaultSubmitText;
-    return (React__default["default"].createElement(Field.Flex, { direction: "column" },
-        React__default["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
-        React__default["default"].createElement(Field.Flex, { direction: "column", alignItems: "center" },
-            React__default["default"].createElement(Field.Button, { onClick: onClick, type: "button", variation: "link", size: "small" }, cancelButtonText))));
+    return (React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+        React__namespace["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
+        React__namespace["default"].createElement(Field.Flex, { direction: "column", alignItems: "center" },
+            React__namespace["default"].createElement(Field.Button, { onClick: onClick, type: "button", variation: "link", size: "small" }, cancelButtonText))));
 };
 
 const AppleIcon = () => {
-    return (React__default["default"].createElement("svg", { "aria-label": "Apple icon", className: "amplify-icon federated-sign-in-icon", fill: "#000", preserveAspectRatio: "xMidYMid", stroke: "#000", strokeWidth: "0", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" },
-        React__default["default"].createElement("path", { d: "M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z" })));
+    return (React__namespace["default"].createElement("svg", { "aria-label": "Apple icon", className: "amplify-icon federated-sign-in-icon", fill: "#000", preserveAspectRatio: "xMidYMid", stroke: "#000", strokeWidth: "0", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" },
+        React__namespace["default"].createElement("path", { d: "M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z" })));
 };
 const GoogleIcon = () => {
-    return (React__default["default"].createElement("svg", { "aria-label": "Google icon", className: "amplify-icon federated-sign-in-icon", viewBox: "0 0 256 262", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" },
-        React__default["default"].createElement("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }),
-        React__default["default"].createElement("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }),
-        React__default["default"].createElement("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }),
-        React__default["default"].createElement("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })));
+    return (React__namespace["default"].createElement("svg", { "aria-label": "Google icon", className: "amplify-icon federated-sign-in-icon", viewBox: "0 0 256 262", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" },
+        React__namespace["default"].createElement("path", { d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027", fill: "#4285F4" }),
+        React__namespace["default"].createElement("path", { d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1", fill: "#34A853" }),
+        React__namespace["default"].createElement("path", { d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782", fill: "#FBBC05" }),
+        React__namespace["default"].createElement("path", { d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251", fill: "#EB4335" })));
 };
 const FacebookIcon = () => {
-    return (React__default["default"].createElement(Field.Icon, { className: "federated-sign-in-icon", ariaLabel: "Facebook icon", viewBox: { minX: 0, minY: 0, width: 279, height: 538 }, pathData: "M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z", fill: "#1877F2" }));
+    return (React__namespace["default"].createElement(Field.Icon, { className: "federated-sign-in-icon", ariaLabel: "Facebook icon", viewBox: { minX: 0, minY: 0, width: 279, height: 538 }, pathData: "M82.3409742,538 L82.3409742,292.936652 L0,292.936652 L0,196.990154 L82.2410458,196.990154 L82.2410458,126.4295 C82.2410458,44.575144 132.205229,0 205.252865,0 C240.227794,0 270.306232,2.59855099 279,3.79788222 L279,89.2502322 L228.536175,89.2502322 C188.964542,89.2502322 181.270057,108.139699 181.270057,135.824262 L181.270057,196.89021 L276.202006,196.89021 L263.810888,292.836708 L181.16913,292.836708 L181.16913,538 L82.3409742,538 Z", fill: "#1877F2" }));
 };
 const AmazonIcon = () => {
-    return (React__default["default"].createElement("svg", { "aria-label": "Amazon icon", className: "amplify-icon federated-sign-in-icon", viewBox: "0 0 243 264", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" },
-        React__default["default"].createElement("path", { d: "M230.826 208.039C227.468 203.683 208.551 205.982 200.056 206.998C197.471 207.321 197.076 205.042 199.407 203.405C214.475 192.665 239.201 195.766 242.082 199.364C244.966 202.982 241.337 228.071 227.173 240.049C225.001 241.888 222.93 240.904 223.898 238.468C227.077 230.431 234.205 212.419 230.826 208.039ZM123.769 264C71.0234 264 39.0764 241.955 14.7853 217.542C9.97339 212.706 3.71799 206.296 0.311513 200.691C-1.09773 198.372 2.59096 195.022 5.04421 196.844C35.239 219.268 79.1012 239.538 122.53 239.538C151.82 239.538 188.046 227.47 217.669 214.868C222.147 212.966 222.147 219.18 221.512 221.061C221.183 222.032 206.515 236.221 186.247 247.047C167.304 257.166 143.397 264 123.769 264Z", fill: "#F2541B" }),
-        React__default["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M142.943 111.185C142.943 124.756 143.268 136.054 136.406 148.123C130.856 157.913 122.027 163.95 112.222 163.95C98.8288 163.95 90.9806 153.772 90.9806 138.693C90.9806 109.036 117.677 103.647 142.943 103.647V111.185ZM178.166 196.081C175.858 198.15 171.635 198.22 169.914 196.894C157.974 187.684 149.89 173.688 149.89 173.688C130.706 193.156 117.127 199 92.2879 199C62.8772 199 40 180.905 40 144.729C40 116.461 55.3552 97.2408 77.2563 87.823C96.2094 79.5256 122.684 78.0173 142.943 75.7517C142.943 75.7517 144.633 53.933 138.699 45.9806C134.098 39.8163 126.272 36.9329 119.089 36.9329C106.127 36.8829 93.61 43.9051 91.1262 57.4188C90.4136 61.2829 87.5533 64.5261 84.54 64.206L51.0823 60.5922C48.5156 60.2951 45.0381 57.6639 45.8636 53.3081C53.644 12.3684 90.7373 0 123.989 0C140.983 0 163.21 4.51651 176.608 17.3349C193.597 33.1648 191.969 54.2755 191.969 77.2722V131.51C191.969 147.835 198.768 154.987 205.151 163.775C207.376 166.953 207.886 170.714 205.04 173.032C197.902 178.999 178.166 196.081 178.166 196.081Z", fill: "#F2541B" })));
+    return (React__namespace["default"].createElement("svg", { "aria-label": "Amazon icon", className: "amplify-icon federated-sign-in-icon", viewBox: "0 0 243 264", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid" },
+        React__namespace["default"].createElement("path", { d: "M230.826 208.039C227.468 203.683 208.551 205.982 200.056 206.998C197.471 207.321 197.076 205.042 199.407 203.405C214.475 192.665 239.201 195.766 242.082 199.364C244.966 202.982 241.337 228.071 227.173 240.049C225.001 241.888 222.93 240.904 223.898 238.468C227.077 230.431 234.205 212.419 230.826 208.039ZM123.769 264C71.0234 264 39.0764 241.955 14.7853 217.542C9.97339 212.706 3.71799 206.296 0.311513 200.691C-1.09773 198.372 2.59096 195.022 5.04421 196.844C35.239 219.268 79.1012 239.538 122.53 239.538C151.82 239.538 188.046 227.47 217.669 214.868C222.147 212.966 222.147 219.18 221.512 221.061C221.183 222.032 206.515 236.221 186.247 247.047C167.304 257.166 143.397 264 123.769 264Z", fill: "#F2541B" }),
+        React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M142.943 111.185C142.943 124.756 143.268 136.054 136.406 148.123C130.856 157.913 122.027 163.95 112.222 163.95C98.8288 163.95 90.9806 153.772 90.9806 138.693C90.9806 109.036 117.677 103.647 142.943 103.647V111.185ZM178.166 196.081C175.858 198.15 171.635 198.22 169.914 196.894C157.974 187.684 149.89 173.688 149.89 173.688C130.706 193.156 117.127 199 92.2879 199C62.8772 199 40 180.905 40 144.729C40 116.461 55.3552 97.2408 77.2563 87.823C96.2094 79.5256 122.684 78.0173 142.943 75.7517C142.943 75.7517 144.633 53.933 138.699 45.9806C134.098 39.8163 126.272 36.9329 119.089 36.9329C106.127 36.8829 93.61 43.9051 91.1262 57.4188C90.4136 61.2829 87.5533 64.5261 84.54 64.206L51.0823 60.5922C48.5156 60.2951 45.0381 57.6639 45.8636 53.3081C53.644 12.3684 90.7373 0 123.989 0C140.983 0 163.21 4.51651 176.608 17.3349C193.597 33.1648 191.969 54.2755 191.969 77.2722V131.51C191.969 147.835 198.768 154.987 205.151 163.775C207.376 166.953 207.886 170.714 205.04 173.032C197.902 178.999 178.166 196.081 178.166 196.081Z", fill: "#F2541B" })));
 };
 const FederatedSignInButton = (props) => {
     const { icon, provider, text } = props;
@@ -3059,20 +3057,20 @@ const FederatedSignInButton = (props) => {
     };
     let iconComponent;
     if (icon === 'facebook') {
-        iconComponent = React__default["default"].createElement(FacebookIcon, null);
+        iconComponent = React__namespace["default"].createElement(FacebookIcon, null);
     }
     else if (icon === 'google') {
-        iconComponent = React__default["default"].createElement(GoogleIcon, null);
+        iconComponent = React__namespace["default"].createElement(GoogleIcon, null);
     }
     else if (icon === 'amazon') {
-        iconComponent = React__default["default"].createElement(AmazonIcon, null);
+        iconComponent = React__namespace["default"].createElement(AmazonIcon, null);
     }
     else if (icon === 'apple') {
-        iconComponent = React__default["default"].createElement(AppleIcon, null);
+        iconComponent = React__namespace["default"].createElement(AppleIcon, null);
     }
-    return (React__default["default"].createElement(Field.Button, { onClick: handleClick, className: "federated-sign-in-button", gap: "1rem" },
+    return (React__namespace["default"].createElement(Field.Button, { onClick: handleClick, className: "federated-sign-in-button", gap: "1rem" },
         iconComponent,
-        React__default["default"].createElement(Field.Text, { as: "span" }, text)));
+        React__namespace["default"].createElement(Field.Text, { as: "span" }, text)));
 };
 
 const { getSignInWithFederationText, getOrText } = ui.authenticatorTextUtil;
@@ -3082,23 +3080,23 @@ function FederatedSignIn() {
         // @ts-ignore
         return null;
     }
-    return (React__default["default"].createElement(Field.Flex, { direction: "column", padding: `0 0 1rem 0`, className: "federated-sign-in-container" },
+    return (React__namespace["default"].createElement(Field.Flex, { direction: "column", padding: `0 0 1rem 0`, className: "federated-sign-in-container" },
         socialProviders.map((provider) => {
             switch (provider) {
                 case 'amazon':
-                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "amazon", key: provider, provider: ui.FederatedIdentityProviders.Amazon, text: getSignInWithFederationText(route, provider) }));
+                    return (React__namespace["default"].createElement(FederatedSignInButton, { icon: "amazon", key: provider, provider: ui.FederatedIdentityProviders.Amazon, text: getSignInWithFederationText(route, provider) }));
                 case 'apple':
-                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "apple", key: provider, provider: ui.FederatedIdentityProviders.Apple, text: getSignInWithFederationText(route, provider) }));
+                    return (React__namespace["default"].createElement(FederatedSignInButton, { icon: "apple", key: provider, provider: ui.FederatedIdentityProviders.Apple, text: getSignInWithFederationText(route, provider) }));
                 case 'facebook':
-                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "facebook", key: provider, provider: ui.FederatedIdentityProviders.Facebook, text: getSignInWithFederationText(route, provider) }));
+                    return (React__namespace["default"].createElement(FederatedSignInButton, { icon: "facebook", key: provider, provider: ui.FederatedIdentityProviders.Facebook, text: getSignInWithFederationText(route, provider) }));
                 case 'google':
-                    return (React__default["default"].createElement(FederatedSignInButton, { icon: "google", key: provider, provider: ui.FederatedIdentityProviders.Google, text: getSignInWithFederationText(route, provider) }));
+                    return (React__namespace["default"].createElement(FederatedSignInButton, { icon: "google", key: provider, provider: ui.FederatedIdentityProviders.Google, text: getSignInWithFederationText(route, provider) }));
                 default:
                     // eslint-disable-next-line no-console
                     console.error(`Authenticator does not support ${provider}. Please open an issue: https://github.com/aws-amplify/amplify-ui/issues/choose`);
             }
         }),
-        React__default["default"].createElement(Divider, { size: "small", label: getOrText() })));
+        React__namespace["default"].createElement(Divider, { size: "small", label: getOrText() })));
 }
 
 const { getSignInText, getSigningInText, getForgotPasswordText } = ui.authenticatorTextUtil;
@@ -3108,25 +3106,25 @@ function SignIn() {
     const { components: { 
     // @ts-ignore
     SignIn: { Header = SignIn.Header, Footer = SignIn.Footer }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(Field.View, null,
-        React__default["default"].createElement(Header, null),
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signin": "", method: "post", onSubmit: handleSubmit, onChange: handleChange },
-            React__default["default"].createElement(FederatedSignIn, null),
-            React__default["default"].createElement(Field.Flex, { direction: "column" },
-                React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                    React__default["default"].createElement(VisuallyHidden, null,
-                        React__default["default"].createElement("legend", null, getSignInText())),
-                    React__default["default"].createElement(FormFields, null)),
-                React__default["default"].createElement(RemoteErrorMessage, null),
-                React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()),
-                React__default["default"].createElement(Footer, null)))));
+    return (React__namespace["default"].createElement(Field.View, null,
+        React__namespace["default"].createElement(Header, null),
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signin": "", method: "post", onSubmit: handleSubmit, onChange: handleChange },
+            React__namespace["default"].createElement(FederatedSignIn, null),
+            React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                    React__namespace["default"].createElement(VisuallyHidden, null,
+                        React__namespace["default"].createElement("legend", null, getSignInText())),
+                    React__namespace["default"].createElement(FormFields, null)),
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()),
+                React__namespace["default"].createElement(Footer, null)))));
 }
 const DefaultFooter = () => {
     const { toForgotPassword } = uiReactCore.useAuthenticator((context) => [
         context.toForgotPassword,
     ]);
-    return (React__default["default"].createElement(Field.View, { "data-amplify-footer": "" },
-        React__default["default"].createElement(Field.Button, { onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
+    return (React__namespace["default"].createElement(Field.View, { "data-amplify-footer": "" },
+        React__namespace["default"].createElement(Field.Button, { onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
 };
 SignIn.Footer = DefaultFooter;
 SignIn.Header = function Header() {
@@ -3144,23 +3142,23 @@ function SignUp() {
     const { components: { 
     // @ts-ignore
     SignUp: { Header = SignUp.Header, FormFields = SignUp.FormFields, Footer = SignUp.Footer, }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(Field.View, null,
-        React__default["default"].createElement(Header, null),
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
-            React__default["default"].createElement(FederatedSignIn, null),
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Field.Flex, { direction: "column" },
-                    React__default["default"].createElement(FormFields, null),
-                    React__default["default"].createElement(RemoteErrorMessage, null)),
-                React__default["default"].createElement(Field.Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()),
-                React__default["default"].createElement(Footer, null)))));
+    return (React__namespace["default"].createElement(Field.View, null,
+        React__namespace["default"].createElement(Header, null),
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-signup": "", method: "post", onChange: handleChange, onSubmit: handleSubmit, onBlur: handleBlur },
+            React__namespace["default"].createElement(FederatedSignIn, null),
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    React__namespace["default"].createElement(FormFields, null),
+                    React__namespace["default"].createElement(RemoteErrorMessage, null)),
+                React__namespace["default"].createElement(Field.Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()),
+                React__namespace["default"].createElement(Footer, null)))));
 }
 SignUp.Header = function Header() {
     // @ts-ignore
     return null;
 };
 SignUp.FormFields = function FormFields$1() {
-    return React__default["default"].createElement(FormFields, null);
+    return React__namespace["default"].createElement(FormFields, null);
 };
 SignUp.Footer = function Footer() {
     // @ts-ignore
@@ -3174,14 +3172,14 @@ const SignInSignUpTabs = ({ className, hideSignUp, variation, }) => {
         context.toSignIn,
         context.toSignUp,
     ]);
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation }, hideSignUp ? (React__default["default"].createElement(Field.View, { "data-amplify-router-content": "" }, route === 'signIn' && React__default["default"].createElement(SignIn, null))) : (React__default["default"].createElement(Tabs.Container, { value: route, isLazy: true, onValueChange: () => (route === 'signIn' ? toSignUp() : toSignIn()) },
-        React__default["default"].createElement(Tabs.List, { spacing: "equal", indicatorPosition: "top" },
-            React__default["default"].createElement(Tabs.Item, { value: "signIn" }, getSignInTabText()),
-            React__default["default"].createElement(Tabs.Item, { value: "signUp" }, getSignUpTabText())),
-        React__default["default"].createElement(Tabs.Panel, { value: "signIn", "data-amplify-router-content": "" },
-            React__default["default"].createElement(SignIn, null)),
-        React__default["default"].createElement(Tabs.Panel, { value: "signUp", "data-amplify-router-content": "" },
-            React__default["default"].createElement(SignUp, null))))));
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation }, hideSignUp ? (React__namespace["default"].createElement(Field.View, { "data-amplify-router-content": "" }, route === 'signIn' && React__namespace["default"].createElement(SignIn, null))) : (React__namespace["default"].createElement(Tabs.Container, { value: route, isLazy: true, onValueChange: () => (route === 'signIn' ? toSignUp() : toSignIn()) },
+        React__namespace["default"].createElement(Tabs.List, { spacing: "equal", indicatorPosition: "top" },
+            React__namespace["default"].createElement(Tabs.Item, { value: "signIn" }, getSignInTabText()),
+            React__namespace["default"].createElement(Tabs.Item, { value: "signUp" }, getSignUpTabText())),
+        React__namespace["default"].createElement(Tabs.Panel, { value: "signIn", "data-amplify-router-content": "" },
+            React__namespace["default"].createElement(SignIn, null)),
+        React__namespace["default"].createElement(Tabs.Panel, { value: "signUp", "data-amplify-router-content": "" },
+            React__namespace["default"].createElement(SignUp, null))))));
 };
 
 const { getAccountRecoveryInfoText: getAccountRecoveryInfoText$1, getSkipText: getSkipText$1 } = ui.authenticatorTextUtil;
@@ -3191,18 +3189,18 @@ const ConfirmVerifyUser = ({ className, variation, }) => {
     const { components: { 
     // @ts-ignore
     ConfirmVerifyUser: { Header = ConfirmVerifyUser.Header, Footer = ConfirmVerifyUser.Footer, }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmverifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
-                React__default["default"].createElement(Field.Flex, { direction: "column" },
-                    React__default["default"].createElement(FormFields, null)),
-                React__default["default"].createElement(RemoteErrorMessage, null),
-                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText$1(), cancelButtonSendType: "SKIP" }),
-                React__default["default"].createElement(Footer, null)))));
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmverifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    React__namespace["default"].createElement(FormFields, null)),
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText$1(), cancelButtonSendType: "SKIP" }),
+                React__namespace["default"].createElement(Footer, null)))));
 };
 ConfirmVerifyUser.Header = function Header() {
-    return React__default["default"].createElement(Heading, { level: 3 }, getAccountRecoveryInfoText$1());
+    return React__namespace["default"].createElement(Heading, { level: 3 }, getAccountRecoveryInfoText$1());
 };
 ConfirmVerifyUser.Footer = function Footer() {
     return null;
@@ -3212,7 +3210,7 @@ const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfo
 const generateRadioGroup = (attributes) => {
     return Object.entries(attributes).map(([key, value], index) => {
         const verificationType = ui.defaultFormFieldOptions[key].label;
-        return (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key, defaultChecked: index === 0 },
+        return (React__namespace["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key, defaultChecked: index === 0 },
             ui.translate(verificationType),
             ":",
             ' ',
@@ -3228,19 +3226,19 @@ const VerifyUser = ({ className, variation, }) => {
         unverifiedUserAttributes,
     ]);
     const { handleChange, handleSubmit } = useFormHandlers();
-    const footerSubmitText = isPending ? (React__default["default"].createElement(React__default["default"].Fragment, null, "Verifying\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getVerifyText()));
-    const verificationRadioGroup = (React__default["default"].createElement(RadioGroupField, { legend: getVerifyContactText(), name: "verify_context", isDisabled: isPending, legendHidden: true }, generateRadioGroup(unverifiedUserAttributes)));
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-verifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
+    const footerSubmitText = isPending ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, "Verifying\u2026")) : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, getVerifyText()));
+    const verificationRadioGroup = (React__namespace["default"].createElement(RadioGroupField, { legend: getVerifyContactText(), name: "verify_context", isDisabled: isPending, legendHidden: true }, generateRadioGroup(unverifiedUserAttributes)));
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-verifyuser": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
                 verificationRadioGroup,
-                React__default["default"].createElement(RemoteErrorMessage, null),
-                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText(), cancelButtonSendType: "SKIP", submitButtonText: footerSubmitText }),
-                React__default["default"].createElement(Footer, null)))));
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getSkipText(), cancelButtonSendType: "SKIP", submitButtonText: footerSubmitText }),
+                React__namespace["default"].createElement(Footer, null)))));
 };
 VerifyUser.Header = function Header() {
-    return React__default["default"].createElement(Heading, { level: 3 }, getAccountRecoveryInfoText());
+    return React__namespace["default"].createElement(Heading, { level: 3 }, getAccountRecoveryInfoText());
 };
 VerifyUser.Footer = function Footer() {
     // @ts-ignore
@@ -3254,21 +3252,21 @@ const ConfirmSignIn = ({ className, variation, }) => {
     const { components: { 
     // @ts-ignore
     ConfirmSignIn: { Header = ConfirmSignIn.Header, Footer = ConfirmSignIn.Footer, }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignin": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
-                React__default["default"].createElement(Field.Flex, { direction: "column" },
-                    React__default["default"].createElement(FormFields, null),
-                    React__default["default"].createElement(RemoteErrorMessage, null)),
-                React__default["default"].createElement(ConfirmSignInFooter, null),
-                React__default["default"].createElement(Footer, null)))));
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmsignin": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    React__namespace["default"].createElement(FormFields, null),
+                    React__namespace["default"].createElement(RemoteErrorMessage, null)),
+                React__namespace["default"].createElement(ConfirmSignInFooter, null),
+                React__namespace["default"].createElement(Footer, null)))));
 };
 function Header() {
     const { challengeName } = uiReactCore.useAuthenticator(({ challengeName }) => [
         challengeName,
     ]);
-    return React__default["default"].createElement(Heading, { level: 3 }, getChallengeText(challengeName));
+    return React__namespace["default"].createElement(Heading, { level: 3 }, getChallengeText(challengeName));
 }
 ConfirmSignIn.Header = Header;
 ConfirmSignIn.Footer = function Footer() {
@@ -3283,19 +3281,19 @@ const ConfirmResetPassword = ({ className, variation, }) => {
     const { components: { 
     // @ts-ignore
     ConfirmResetPassword: { Header = ConfirmResetPassword.Header, Footer = ConfirmResetPassword.Footer, }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmresetpassword": "", method: "post", onSubmit: handleSubmit, onChange: handleChange, onBlur: handleBlur },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
-                React__default["default"].createElement(Field.Flex, { direction: "column" },
-                    React__default["default"].createElement(FormFields, null)),
-                React__default["default"].createElement(RemoteErrorMessage, null),
-                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonSendType: "RESEND", cancelButtonText: getResendCodeText() }),
-                React__default["default"].createElement(Footer, null)))));
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-confirmresetpassword": "", method: "post", onSubmit: handleSubmit, onChange: handleChange, onBlur: handleBlur },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    React__namespace["default"].createElement(FormFields, null)),
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(TwoButtonSubmitFooter, { cancelButtonSendType: "RESEND", cancelButtonText: getResendCodeText() }),
+                React__namespace["default"].createElement(Footer, null)))));
 };
 ConfirmResetPassword.Header = function Header() {
     const headerText = getResetYourPasswordText$1();
-    return React__default["default"].createElement(Heading, { level: 3 }, headerText);
+    return React__namespace["default"].createElement(Heading, { level: 3 }, headerText);
 };
 ConfirmResetPassword.Footer = function Footer() {
     // @ts-ignore
@@ -3309,20 +3307,20 @@ const ForgotPassword = ({ className, variation, }) => {
     const { components: { 
     // @ts-ignore
     ForgotPassword: { Header = ForgotPassword.Header, Footer = ForgotPassword.Footer, }, }, } = useCustomComponents();
-    return (React__default["default"].createElement(RouteContainer, { className: className, variation: variation },
-        React__default["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-forgotpassword": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
-            React__default["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
-                React__default["default"].createElement(Header, null),
-                React__default["default"].createElement(Field.Flex, { direction: "column" },
-                    React__default["default"].createElement(FormFields, null)),
-                React__default["default"].createElement(RemoteErrorMessage, null),
-                React__default["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getBackToSignInText(), cancelButtonSendType: "SIGN_IN", submitButtonText: isPending ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__namespace["default"].createElement(RouteContainer, { className: className, variation: variation },
+        React__namespace["default"].createElement("form", { "data-amplify-form": "", "data-amplify-authenticator-forgotpassword": "", method: "post", onChange: handleChange, onSubmit: handleSubmit },
+            React__namespace["default"].createElement(Field.Flex, { as: "fieldset", direction: "column", isDisabled: isPending },
+                React__namespace["default"].createElement(Header, null),
+                React__namespace["default"].createElement(Field.Flex, { direction: "column" },
+                    React__namespace["default"].createElement(FormFields, null)),
+                React__namespace["default"].createElement(RemoteErrorMessage, null),
+                React__namespace["default"].createElement(TwoButtonSubmitFooter, { cancelButtonText: getBackToSignInText(), cancelButtonSendType: "SIGN_IN", submitButtonText: isPending ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
                         getSendingText(),
-                        "\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getSendCodeText())) }),
-                React__default["default"].createElement(Footer, null)))));
+                        "\u2026")) : (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, getSendCodeText())) }),
+                React__namespace["default"].createElement(Footer, null)))));
 };
 ForgotPassword.Header = function Header() {
-    return React__default["default"].createElement(Heading, { level: 3 }, getResetYourPasswordText());
+    return React__namespace["default"].createElement(Heading, { level: 3 }, getResetYourPasswordText());
 };
 ForgotPassword.Footer = function Footer() {
     // @ts-ignore
@@ -3370,7 +3368,7 @@ const getRouteComponent = (route) => {
 function Router({ className, hideSignUp, variation, }) {
     const { route } = uiReactCore.useAuthenticator(({ route }) => [route]);
     const RouterChildren = React.useMemo(() => getRouteComponent(route), [route]);
-    return (React__default["default"].createElement(RouterChildren, { className: className, 
+    return (React__namespace["default"].createElement(RouterChildren, { className: className, 
         // @ts-ignore
         hideSignUp: isSignInOrSignUpRoute(route) ? hideSignUp : undefined, variation: variation }));
 }
@@ -3488,7 +3486,7 @@ Authenticator.ForceNewPassword = ForceNewPassword;
 function withAuthenticator(Component, options = {}) {
     const { variation = 'modal' } = options;
     return function WrappedWithAuthenticator(props) {
-        return (React__default["default"].createElement(Authenticator, { variation: variation, ...options }, (withAuthenticatorProps) => (React__default["default"].createElement(Component, { ...props, ...withAuthenticatorProps }))));
+        return (React__namespace["default"].createElement(Authenticator, { variation: variation, ...options }, (withAuthenticatorProps) => (React__namespace["default"].createElement(Component, { ...props, ...withAuthenticatorProps }))));
     };
 }
 
@@ -3510,28 +3508,28 @@ var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     AccountSettings: AccountSettings,
     Authenticator: Authenticator,
-    withAuthenticator: withAuthenticator,
+    ThemeProvider: ThemeProvider,
     useAuthenticator: uiReactCore.useAuthenticator,
-    ThemeProvider: ThemeProvider
+    withAuthenticator: withAuthenticator
 });
 
-Object.defineProperty(exports, 'useAuthenticator', {
+Object.defineProperty(exports, "useAuthenticator", {
     enumerable: true,
     get: function () { return uiReactCore.useAuthenticator; }
 });
-Object.defineProperty(exports, 'createTheme', {
+Object.defineProperty(exports, "createTheme", {
     enumerable: true,
     get: function () { return ui.createTheme; }
 });
-Object.defineProperty(exports, 'defaultDarkModeOverride', {
+Object.defineProperty(exports, "defaultDarkModeOverride", {
     enumerable: true,
     get: function () { return ui.defaultDarkModeOverride; }
 });
-Object.defineProperty(exports, 'defaultTheme', {
+Object.defineProperty(exports, "defaultTheme", {
     enumerable: true,
     get: function () { return ui.defaultTheme; }
 });
-Object.defineProperty(exports, 'translations', {
+Object.defineProperty(exports, "translations", {
     enumerable: true,
     get: function () { return ui.translations; }
 });