@aws-amplify/ui-react 6.5.0 → 6.5.1

package/dist/{Field-4b189104.js → Field-3db91851.js}

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

package/dist/{ThemeStyle-1fee4302.js → ThemeStyle-7d5abbc4.js}

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -23,7 +22,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const StylePrimitive = ({ cssText, ...rest }, ref) => {
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const Style = ({ cssText, ...rest }) => {
     /*
       Only inject theme CSS variables if given a theme.
       The CSS file users import already has the default theme variables in it.
@@ -72,28 +75,22 @@ const StylePrimitive = ({ cssText, ...rest }, ref) => {
     if (cssText === undefined || /<\/style/i.test(cssText)) {
         return null;
     }
-    return (React__namespace.createElement("style", { ...rest, ref: ref, 
+    return (React__namespace.createElement("style", { ...rest, 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: { __html: cssText } }));
 };
+Style.displayName = 'Style';
+
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-const Style = primitiveWithForwardRef.primitiveWithForwardRef(StylePrimitive);
-Style.displayName = 'Style';
-
-const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
+const ThemeStyle = ({ theme, ...rest }) => {
     if (!theme)
         return null;
     const { name, cssText } = theme;
-    return (React__namespace.createElement(Style, { ...rest, ref: ref, cssText: cssText, nonce: nonce, id: `amplify-theme-${name}` }));
+    return React__namespace.createElement(Style, { ...rest, cssText: cssText, id: `amplify-theme-${name}` });
 };
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
-const ThemeStyle = primitiveWithForwardRef.primitiveWithForwardRef(ThemeStylePrimitive);
 ThemeStyle.displayName = 'ThemeStyle';
 
 exports.Style = Style;

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

@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { createComponentCSS } from '@aws-amplify/ui';
-import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
 import { Style } from './Style.mjs';
 
-const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref) => {
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ComponentStyle = ({ theme, componentThemes = [], ...rest }) => {
     if (!theme || !componentThemes.length) {
         return null;
     }
@@ -11,13 +14,8 @@ const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref)
         theme,
         components: componentThemes,
     });
-    return React.createElement(Style, { ...rest, ref: ref, cssText: cssText });
+    return React.createElement(Style, { ...rest, cssText: cssText });
 };
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
-const ComponentStyle = primitiveWithForwardRef(ComponentStylePrimitive);
 ComponentStyle.displayName = 'ComponentStyle';
 
 export { ComponentStyle };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createGlobalCSS } from '@aws-amplify/ui';
+import { Style } from './Style.mjs';
+
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const GlobalStyle = ({ styles, ...rest }) => {
+    if (!styles) {
+        return null;
+    }
+    const cssText = createGlobalCSS(styles);
+    return React.createElement(Style, { ...rest, cssText: cssText });
+};
+GlobalStyle.displayName = 'GlobalStyle';
+
+export { GlobalStyle };

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

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
 
-const StylePrimitive = ({ cssText, ...rest }, ref) => {
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const Style = ({ cssText, ...rest }) => {
     /*
       Only inject theme CSS variables if given a theme.
       The CSS file users import already has the default theme variables in it.
@@ -50,15 +53,10 @@ const StylePrimitive = ({ cssText, ...rest }, ref) => {
     if (cssText === undefined || /<\/style/i.test(cssText)) {
         return null;
     }
-    return (React.createElement("style", { ...rest, ref: ref, 
+    return (React.createElement("style", { ...rest, 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: { __html: cssText } }));
 };
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
-const Style = primitiveWithForwardRef(StylePrimitive);
 Style.displayName = 'Style';
 
 export { Style };

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

@@ -1,18 +1,16 @@
 import * as React from 'react';
-import { primitiveWithForwardRef } from '../../primitives/utils/primitiveWithForwardRef.mjs';
 import { Style } from './Style.mjs';
 
-const ThemeStylePrimitive = ({ theme, nonce, ...rest }, ref) => {
-    if (!theme)
-        return null;
-    const { name, cssText } = theme;
-    return (React.createElement(Style, { ...rest, ref: ref, cssText: cssText, nonce: nonce, id: `amplify-theme-${name}` }));
-};
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-const ThemeStyle = primitiveWithForwardRef(ThemeStylePrimitive);
+const ThemeStyle = ({ theme, ...rest }) => {
+    if (!theme)
+        return null;
+    const { name, cssText } = theme;
+    return React.createElement(Style, { ...rest, cssText: cssText, id: `amplify-theme-${name}` });
+};
 ThemeStyle.displayName = 'ThemeStyle';
 
 export { ThemeStyle };

package/dist/esm/server.mjs

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

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.5.0';
+const VERSION = '6.5.1';
 
 export { VERSION };

package/dist/index.js

@@ -6,16 +6,15 @@ 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-3db91851.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-7d5abbc4.js');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
 
@@ -93,13 +92,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 +140,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 +167,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 +410,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 +418,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 +440,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 +448,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 +524,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 +602,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 +658,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 +679,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 +689,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 +699,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 +708,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 +725,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 +735,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 +747,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 +762,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 +780,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 +789,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 +861,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 +873,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 +1038,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 +1157,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');
@@ -1174,7 +1173,7 @@ const Container = ({ className, children, testId, isDisabled, onDragEnter, onDra
         : { onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop };
     return (React__default["default"].createElement(Field.View, { ...rest, ...dragProps, isDisabled: isDisabled, className: ui.classNames(className, ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'rejected', dragState === 'reject'), ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'accepted', dragState === 'accept'), ui.classNameModifierByFlag(ui.ComponentClassName.DropZone, 'disabled', isDisabled), ui.ComponentClassName.DropZone), "data-testid": testId, ref: ref }, children));
 };
-const DropZoneContainer = primitiveWithForwardRef.primitiveWithForwardRef(Container);
+const DropZoneContainer = Field.primitiveWithForwardRef(Container);
 DropZoneContainer.displayName = 'DropZoneContainer';
 
 /**
@@ -1224,7 +1223,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 +1242,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,7 +1251,7 @@ 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) => {
@@ -1272,7 +1271,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 +1281,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 +1323,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 +1336,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 +1366,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 +1381,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 +1392,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 +1410,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 +1425,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 +1460,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 +1476,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 +1494,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 +1508,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 +1524,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 +1542,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 +1561,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 +1595,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 +1610,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 +1619,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,7 +1631,7 @@ 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' };
@@ -1659,7 +1658,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 +1704,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 +1764,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 +1829,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 +1979,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 +2036,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 +2048,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({
@@ -2101,7 +2100,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 +2178,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 +2194,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 +2224,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 +2235,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 +2248,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 +2285,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 +2313,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 +2349,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,7 +2409,7 @@ 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({
@@ -2523,7 +2522,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.1';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

package/dist/internal.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Field = require('./Field-4b189104.js');
+var Field = require('./Field-3db91851.js');
 var React = require('react');
 var Storage = require('aws-amplify/storage');
 var ui = require('@aws-amplify/ui');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
-require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/server.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ThemeStyle = require('./ThemeStyle-1fee4302.js');
+var ThemeStyle = require('./ThemeStyle-7d5abbc4.js');
 var React = require('react');
 var ui = require('@aws-amplify/ui');
-var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -27,7 +26,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref) => {
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ComponentStyle = ({ theme, componentThemes = [], ...rest }) => {
     if (!theme || !componentThemes.length) {
         return null;
     }
@@ -35,14 +38,22 @@ const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref)
         theme,
         components: componentThemes,
     });
-    return React__namespace.createElement(ThemeStyle.Style, { ...rest, ref: ref, cssText: cssText });
+    return React__namespace.createElement(ThemeStyle.Style, { ...rest, cssText: cssText });
 };
+ComponentStyle.displayName = 'ComponentStyle';
+
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-const ComponentStyle = primitiveWithForwardRef.primitiveWithForwardRef(ComponentStylePrimitive);
-ComponentStyle.displayName = 'ComponentStyle';
+const GlobalStyle = ({ styles, ...rest }) => {
+    if (!styles) {
+        return null;
+    }
+    const cssText = ui.createGlobalCSS(styles);
+    return React__namespace.createElement(ThemeStyle.Style, { ...rest, cssText: cssText });
+};
+GlobalStyle.displayName = 'GlobalStyle';
 
 exports.ThemeStyle = ThemeStyle.ThemeStyle;
 Object.defineProperty(exports, 'createComponentClasses', {
@@ -66,3 +77,4 @@ Object.defineProperty(exports, 'defineComponentTheme', {
     get: function () { return ui.defineComponentTheme; }
 });
 exports.ComponentStyle = ComponentStyle;
+exports.GlobalStyle = GlobalStyle;

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

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { WebTheme } from '@aws-amplify/ui';
-import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
 import { BaseComponentTheme } from '@aws-amplify/ui';
-interface BaseComponentStyleProps extends BaseComponentProps {
+interface ComponentStyleProps extends React.ComponentProps<'style'> {
     /**
      * Provide a server generated nonce which matches your CSP `style-src` rule.
      * This will be attached to the generated <style> tag.
@@ -11,10 +11,12 @@ interface BaseComponentStyleProps extends BaseComponentProps {
     theme: Pick<WebTheme, 'name' | 'breakpoints' | 'tokens'>;
     componentThemes: BaseComponentTheme[];
 }
-export type ComponentStyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseComponentStyleProps, Element>;
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-export declare const ComponentStyle: ForwardRefPrimitive<BaseComponentStyleProps, 'style'>;
+export declare const ComponentStyle: {
+    ({ theme, componentThemes, ...rest }: ComponentStyleProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { createGlobalCSS } from '@aws-amplify/ui';
+interface GlobalStyleProps extends React.ComponentProps<'style'> {
+    /**
+     * Provide a server generated nonce which matches your CSP `style-src` rule.
+     * This will be attached to the generated <style> tag.
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+     */
+    nonce?: string;
+    styles: Parameters<typeof createGlobalCSS>[0];
+}
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const GlobalStyle: {
+    ({ styles, ...rest }: GlobalStyleProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

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

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

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

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { WebTheme } from '@aws-amplify/ui';
-import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
-interface BaseStyleThemeProps extends BaseComponentProps {
+interface ThemeStyleProps extends React.ComponentProps<'style'> {
     /**
      * Provide a server generated nonce which matches your CSP `style-src` rule.
      * This will be attached to the generated <style> tag.
@@ -9,10 +9,12 @@ interface BaseStyleThemeProps extends BaseComponentProps {
     nonce?: string;
     theme?: WebTheme;
 }
-export type ThemeStyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseStyleThemeProps, Element>;
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-export declare const ThemeStyle: ForwardRefPrimitive<BaseStyleThemeProps, 'style'>;
+export declare const ThemeStyle: {
+    ({ theme, ...rest }: ThemeStyleProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/types/primitives/shared/responsive/utils.d.ts

@@ -1,6 +1,6 @@
 import { Breakpoint, Breakpoints, ValueBreakpoints } from '../../types/responsive';
 export declare const getValueAtCurrentBreakpoint: <Value = string | number>({ breakpoint, breakpoints, values, }: {
-    values: Partial<Record<"small" | "large" | "medium" | "xl" | "xxl" | "base", Value>> | Value[];
+    values: Partial<Record<"base" | "small" | "large" | "medium" | "xl" | "xxl", Value>> | Value[];
     breakpoint: Breakpoint;
     breakpoints: Breakpoints;
 }) => string | number | Value | null;

package/dist/types/server.d.ts

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

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.5.0",
+  "version": "6.5.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.6.0",
-    "@aws-amplify/ui-react-core": "3.0.24",
+    "@aws-amplify/ui": "6.6.1",
+    "@aws-amplify/ui-react-core": "3.0.25",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",
@@ -66,7 +66,8 @@
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "aws-amplify": "^6.3.2",
+    "@aws-amplify/core": "^6.4.0",
+    "aws-amplify": "^6.6.0",
     "react": "^16.14.0 || ^17.0 || ^18.0",
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },

package/dist/primitiveWithForwardRef-7e929242.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n["default"] = e;
-	return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-/**
- * Updates the return type for primitives wrapped in `React.forwardRef` to
- * `React.ReactElement`. In React 18 the return type of `React.ExoticComponent`
- * was changed from `React.ReactElement` to `React.ReactNode`, which breaks
- * clients using React 16 and 17.
- *
- * @param primitive UI Primitive to be wrapped with `React.forwardRef`
- * @returns ForwaredRef wrapped UI Primitive
- */
-const primitiveWithForwardRef = (primitive) => React__namespace.forwardRef(primitive);
-
-exports.primitiveWithForwardRef = primitiveWithForwardRef;

package/dist/types/primitives/Card/__test__/Card.test.d.ts

@@ -1 +0,0 @@
-export {};