@aws-amplify/ui-react 6.8.1 → 6.9.1

package/dist/esm/PrimitiveCatalog.mjs

@@ -1407,6 +1407,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }
@@ -3683,6 +3686,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }
@@ -3933,6 +3939,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }
@@ -9450,9 +9459,8 @@ const PrimitiveCatalog = {
             "defaultValue": {
                 "type": "string"
             },
-            "placeholder": {
-                "type": "string",
-                "priority": true
+            "enterKeyHint": {
+                "type": "string"
             },
             "inputMode": {
                 "type": "string"
@@ -9536,9 +9544,6 @@ const PrimitiveCatalog = {
             "hasError": {
                 "type": "boolean"
             },
-            "enterKeyHint": {
-                "type": "string"
-            },
             "isReadOnly": {
                 "type": "boolean"
             },
@@ -9548,12 +9553,19 @@ const PrimitiveCatalog = {
             "name": {
                 "type": "string"
             },
+            "placeholder": {
+                "type": "string",
+                "priority": true
+            },
             "countryCodeLabel": {
                 "type": "string"
             },
             "countryCodeName": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             },
@@ -9596,6 +9608,9 @@ const PrimitiveCatalog = {
             "accessKey": {
                 "type": "string"
             },
+            "autoCapitalize": {
+                "type": "string"
+            },
             "autoFocus": {
                 "type": "boolean"
             },
@@ -9656,9 +9671,6 @@ const PrimitiveCatalog = {
             "vocab": {
                 "type": "string"
             },
-            "autoCapitalize": {
-                "type": "string"
-            },
             "autoCorrect": {
                 "type": "string"
             },
@@ -10762,7 +10774,7 @@ const PrimitiveCatalog = {
             "defaultChecked": {
                 "type": "boolean"
             },
-            "placeholder": {
+            "enterKeyHint": {
                 "type": "string"
             },
             "inputMode": {
@@ -10780,14 +10792,14 @@ const PrimitiveCatalog = {
             "hasError": {
                 "type": "boolean"
             },
-            "enterKeyHint": {
-                "type": "string"
-            },
             "isReadOnly": {
                 "type": "boolean"
             },
             "isRequired": {
                 "type": "boolean"
+            },
+            "placeholder": {
+                "type": "string"
             }
         }
     },
@@ -13339,6 +13351,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }

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

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import * as RadixDirection from '@radix-ui/react-direction';
-import { sanitizeNamespaceImport, createTheme } from '@aws-amplify/ui';
+import { DirectionProvider } from '@radix-ui/react-direction';
+import { createTheme } from '@aws-amplify/ui';
 import { ThemeContext } from './ThemeContext.mjs';
 import { ThemeStyle } from './ThemeStyle.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DirectionProvider } = sanitizeNamespaceImport(RadixDirection);
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
  */

package/dist/esm/primitives/DropZone/DropZoneChildren.mjs

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import { DropZoneContext } from './DropZoneProvider.mjs';
 
-/**
- * These are syntactic sugar components that make it easy to compose children
- * in DropZone without having to expose the DropZoneContext.
- */
 /**
  * This component renders when the user is dragging ONLY accepted files on the DropZone.
  */
-const Accepted = ({ children, }) => {
+const Accepted = ({ children }) => {
     const dragState = React.useContext(DropZoneContext);
     if (!dragState) {
         throw new Error('`DropZone.Accept` must be used inside a DropZone');
@@ -18,7 +14,7 @@ const Accepted = ({ children, }) => {
 /**
  * This component renders when the user is dragging ANY rejected files on the DropZone.
  */
-const Rejected = ({ children, }) => {
+const Rejected = ({ children }) => {
     const dragState = React.useContext(DropZoneContext);
     if (!dragState) {
         throw new Error('`DropZone.Rejected` must be used inside a DropZone');
@@ -28,7 +24,7 @@ const Rejected = ({ children, }) => {
 /**
  * This component renders by default when the user is not dragging.
  */
-const Default = ({ children, }) => {
+const Default = ({ children }) => {
     const dragState = React.useContext(DropZoneContext);
     if (!dragState) {
         throw new Error('`DropZone.Default` must be used inside a DropZone');

package/dist/esm/primitives/Menu/Menu.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { sanitizeNamespaceImport, classNames, ComponentClassName } from '@aws-amplify/ui';
-import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@radix-ui/react-dropdown-menu';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.mjs';
 import '../Icon/Icon.mjs';
 import '../Icon/context/IconsContext.mjs';
@@ -10,9 +10,6 @@ import { IconMenu } from '../Icon/icons/IconMenu.mjs';
 import { MenuButton } from './MenuButton.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = sanitizeNamespaceImport(Dropdown);
 const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
 const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
 const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size, trigger, triggerClassName, ariaLabel, onOpenChange, isDisabled, ...rest }, ref) => {

package/dist/esm/primitives/Menu/MenuItem.mjs

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { sanitizeNamespaceImport, classNames, ComponentClassName } from '@aws-amplify/ui';
-import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
 import { MenuButton } from './MenuButton.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenuItem } = sanitizeNamespaceImport(Dropdown);
 const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)

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

@@ -1,5 +1,5 @@
-import { sanitizeNamespaceImport, isFunction, classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
-import * as RadixSlider from '@radix-ui/react-slider';
+import { isFunction, classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { Root, Track, Range, Thumb } from '@radix-ui/react-slider';
 import * as React from 'react';
 import '../Field/FieldClearButton.mjs';
 import { FieldDescription } from '../Field/FieldDescription.mjs';
@@ -17,9 +17,6 @@ import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
 import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
 import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { Range, Root, Thumb, Track } = sanitizeNamespaceImport(RadixSlider);
 const SLIDER_LABEL_TEST_ID = 'slider-label';
 const SLIDER_ROOT_TEST_ID = 'slider-root';
 const SLIDER_TRACK_TEST_ID = 'slider-track';
@@ -48,12 +45,10 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
             onChange(value[0]);
         }
     }, [onChange]);
-    const renderedValue = React.useMemo(() => {
-        const formattedValue = isFunction(formatValue)
-            ? formatValue(currentValue)
-            : currentValue;
-        return typeof formatValue === 'string' ? (React.createElement(View, { as: "span" }, formattedValue)) : (formattedValue);
-    }, [currentValue, formatValue]);
+    const realValue = isControlled ? value : currentValue;
+    const formattedValue = isFunction(formatValue)
+        ? formatValue(realValue)
+        : realValue;
     const isVertical = orientation === 'vertical';
     const componentClasses = classNames(ComponentClassName.SliderFieldTrack, classNameModifier(ComponentClassName.SliderFieldTrack, orientation), classNameModifier(ComponentClassName.SliderFieldTrack, size));
     const rootComponentClasses = classNames(ComponentClassName.SliderFieldRoot, classNameModifier(ComponentClassName.SliderFieldRoot, orientation), classNameModifier(ComponentClassName.SliderFieldRoot, size), classNameModifierByFlag(ComponentClassName.SliderFieldRoot, 'disabled', disabled), className);
@@ -64,7 +59,7 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
         className: classNames(ComponentClassName.Field, classNameModifier(ComponentClassName.Field, size), ComponentClassName.SliderField), testId: testId, ...styleProps },
         React.createElement(Label, { className: ComponentClassName.SliderFieldLabel, id: stableId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
             React.createElement(View, { as: "span" }, label),
-            !isValueHidden ? renderedValue : null),
+            !isValueHidden ? (typeof formatValue === 'string' ? (React.createElement(View, { as: "span" }, formattedValue)) : (formattedValue)) : null),
         React.createElement(FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React.createElement(FieldGroup, { className: ComponentClassName.SliderFieldGroup, id: fieldId, orientation: orientation, outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent },
             React.createElement(Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.8.1';
+const VERSION = '6.9.1';
 
 export { VERSION };

package/dist/index.js

@@ -9,11 +9,11 @@ var ui = require('@aws-amplify/ui');
 var Field = require('./Field-DbA9eYRa.js');
 require('aws-amplify/storage');
 var debounce = require('lodash/debounce.js');
-var Dropdown = require('@radix-ui/react-dropdown-menu');
-var RadixSlider = require('@radix-ui/react-slider');
+var reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
+var reactSlider = require('@radix-ui/react-slider');
 var QRCode = require('qrcode');
 var utils = require('aws-amplify/utils');
-var RadixDirection = require('@radix-ui/react-direction');
+var reactDirection = require('@radix-ui/react-direction');
 var ThemeStyle = require('./ThemeStyle-DA2-Clfz.js');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
@@ -41,10 +41,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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__*/_interopDefault(QRCode);
-var RadixDirection__namespace = /*#__PURE__*/_interopNamespace(RadixDirection);
 
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming/responsive#usebreakpointvalue)
@@ -1135,14 +1132,10 @@ const Container = ({ className, children, testId, isDisabled, onDragEnter, onDra
 const DropZoneContainer = Field.primitiveWithForwardRef(Container);
 DropZoneContainer.displayName = 'DropZoneContainer';
 
-/**
- * These are syntactic sugar components that make it easy to compose children
- * in DropZone without having to expose the DropZoneContext.
- */
 /**
  * This component renders when the user is dragging ONLY accepted files on the DropZone.
  */
-const Accepted = ({ children, }) => {
+const Accepted = ({ children }) => {
     const dragState = React__namespace.useContext(DropZoneContext);
     if (!dragState) {
         throw new Error('`DropZone.Accept` must be used inside a DropZone');
@@ -1152,7 +1145,7 @@ const Accepted = ({ children, }) => {
 /**
  * This component renders when the user is dragging ANY rejected files on the DropZone.
  */
-const Rejected = ({ children, }) => {
+const Rejected = ({ children }) => {
     const dragState = React__namespace.useContext(DropZoneContext);
     if (!dragState) {
         throw new Error('`DropZone.Rejected` must be used inside a DropZone');
@@ -1162,7 +1155,7 @@ const Rejected = ({ children, }) => {
 /**
  * This component renders by default when the user is not dragging.
  */
-const Default = ({ children, }) => {
+const Default = ({ children }) => {
     const dragState = React__namespace.useContext(DropZoneContext);
     if (!dragState) {
         throw new Error('`DropZone.Default` must be used inside a DropZone');
@@ -1354,16 +1347,13 @@ const MenuButtonPrimitive = ({ ariaLabel, className, children, isDisabled = fals
 const MenuButton = Field.primitiveWithForwardRef(MenuButtonPrimitive);
 MenuButton.displayName = 'MenuButton';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = ui.sanitizeNamespaceImport(Dropdown__namespace);
 const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
 const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
 const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size, trigger, triggerClassName, ariaLabel, onOpenChange, isDisabled, ...rest }, ref) => {
     const icons = Field.useIcons('menu');
-    return (React__namespace.createElement(DropdownMenu, { onOpenChange: onOpenChange, open: isOpen },
-        React__namespace.createElement(DropdownMenuTrigger, { disabled: isDisabled, asChild: true }, trigger ?? (React__namespace.createElement(MenuButton, { ariaLabel: ariaLabel, size: size, testId: MENU_TRIGGER_TEST_ID, className: ui.classNames(ui.ComponentClassName.MenuTrigger, triggerClassName) }, icons?.menu ?? React__namespace.createElement(Field.IconMenu, null)))),
-        React__namespace.createElement(DropdownMenuContent, { align: menuAlign, className: ui.ComponentClassName.MenuWrapper },
+    return (React__namespace.createElement(reactDropdownMenu.DropdownMenu, { onOpenChange: onOpenChange, open: isOpen },
+        React__namespace.createElement(reactDropdownMenu.DropdownMenuTrigger, { disabled: isDisabled, asChild: true }, trigger ?? (React__namespace.createElement(MenuButton, { ariaLabel: ariaLabel, size: size, testId: MENU_TRIGGER_TEST_ID, className: ui.classNames(ui.ComponentClassName.MenuTrigger, triggerClassName) }, icons?.menu ?? React__namespace.createElement(Field.IconMenu, null)))),
+        React__namespace.createElement(reactDropdownMenu.DropdownMenuContent, { align: menuAlign, className: ui.ComponentClassName.MenuWrapper },
             React__namespace.createElement(ButtonGroup, { className: ui.classNames(ui.ComponentClassName.MenuContent, className), ref: ref, isDisabled: isDisabled, size: size, testId: MENU_ITEMS_GROUP_TEST_ID, ...rest }, children))));
 };
 /**
@@ -1372,15 +1362,12 @@ const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size,
 const Menu = Field.primitiveWithForwardRef(MenuPrimitive);
 Menu.displayName = 'Menu';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenuItem } = ui.sanitizeNamespaceImport(Dropdown__namespace);
 const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
  */
 const MenuItemPrimitive = ({ children, className, ...rest }, ref) => {
-    return (React__namespace.createElement(DropdownMenuItem, { asChild: true, ref: ref },
+    return (React__namespace.createElement(reactDropdownMenu.DropdownMenuItem, { asChild: true, ref: 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)));
 };
@@ -1731,9 +1718,6 @@ const RatingPrimitive = ({ className, emptyColor, emptyIcon, fillColor, icon, ma
 const Rating = Field.primitiveWithForwardRef(RatingPrimitive);
 Rating.displayName = 'Rating';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { Range, Root, Thumb, Track } = ui.sanitizeNamespaceImport(RadixSlider__namespace);
 const SLIDER_LABEL_TEST_ID = 'slider-label';
 const SLIDER_ROOT_TEST_ID = 'slider-root';
 const SLIDER_TRACK_TEST_ID = 'slider-track';
@@ -1762,12 +1746,10 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
             onChange(value[0]);
         }
     }, [onChange]);
-    const renderedValue = React__namespace.useMemo(() => {
-        const formattedValue = ui.isFunction(formatValue)
-            ? formatValue(currentValue)
-            : currentValue;
-        return typeof formatValue === 'string' ? (React__namespace.createElement(Field.View, { as: "span" }, formattedValue)) : (formattedValue);
-    }, [currentValue, formatValue]);
+    const realValue = isControlled ? value : currentValue;
+    const formattedValue = ui.isFunction(formatValue)
+        ? formatValue(realValue)
+        : realValue;
     const isVertical = orientation === 'vertical';
     const componentClasses = ui.classNames(ui.ComponentClassName.SliderFieldTrack, ui.classNameModifier(ui.ComponentClassName.SliderFieldTrack, orientation), ui.classNameModifier(ui.ComponentClassName.SliderFieldTrack, size));
     const rootComponentClasses = ui.classNames(ui.ComponentClassName.SliderFieldRoot, ui.classNameModifier(ui.ComponentClassName.SliderFieldRoot, orientation), ui.classNameModifier(ui.ComponentClassName.SliderFieldRoot, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRoot, 'disabled', disabled), className);
@@ -1778,16 +1760,16 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
         className: ui.classNames(ui.ComponentClassName.Field, ui.classNameModifier(ui.ComponentClassName.Field, size), ui.ComponentClassName.SliderField), testId: testId, ...styleProps },
         React__namespace.createElement(Field.Label, { className: ui.ComponentClassName.SliderFieldLabel, id: stableId, testId: SLIDER_LABEL_TEST_ID, visuallyHidden: labelHidden },
             React__namespace.createElement(Field.View, { as: "span" }, label),
-            !isValueHidden ? renderedValue : null),
+            !isValueHidden ? (typeof formatValue === 'string' ? (React__namespace.createElement(Field.View, { as: "span" }, formattedValue)) : (formattedValue)) : null),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(FieldGroup, { className: ui.ComponentClassName.SliderFieldGroup, id: fieldId, orientation: orientation, outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent },
-            React__namespace.createElement(Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },
-                React__namespace.createElement(Track, { className: componentClasses, "data-testid": SLIDER_TRACK_TEST_ID, style: {
+            React__namespace.createElement(reactSlider.Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },
+                React__namespace.createElement(reactSlider.Track, { className: componentClasses, "data-testid": SLIDER_TRACK_TEST_ID, style: {
                         backgroundColor: String(emptyTrackColor),
                         [`${isVertical ? 'width' : 'height'}`]: trackSize,
                     } },
-                    React__namespace.createElement(Range, { className: ui.classNames(ui.ComponentClassName.SliderFieldRange, ui.classNameModifier(ui.ComponentClassName.SliderFieldRange, orientation), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
-                React__namespace.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": stableId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
+                    React__namespace.createElement(reactSlider.Range, { className: ui.classNames(ui.ComponentClassName.SliderFieldRange, ui.classNameModifier(ui.ComponentClassName.SliderFieldRange, orientation), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
+                React__namespace.createElement(reactSlider.Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": stableId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
         React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
@@ -2487,7 +2469,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.8.1';
+const VERSION = '6.9.1';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -3460,16 +3442,13 @@ function withAuthenticator(Component, options = {}) {
     };
 }
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DirectionProvider } = ui.sanitizeNamespaceImport(RadixDirection__namespace);
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
  */
 function ThemeProvider({ children, colorMode, direction = 'ltr', nonce, theme, }) {
     const value = React__namespace.useMemo(() => ({ theme: ui.createTheme(theme), colorMode }), [theme, colorMode]);
     return (React__namespace.createElement(Field.ThemeContext.Provider, { value: value },
-        React__namespace.createElement(DirectionProvider, { dir: direction },
+        React__namespace.createElement(reactDirection.DirectionProvider, { dir: direction },
             React__namespace.createElement("div", { "data-amplify-theme": value.theme.name, "data-amplify-color-mode": colorMode, dir: direction }, children),
             theme ? React__namespace.createElement(ThemeStyle.ThemeStyle, { theme: value.theme, nonce: nonce }) : null)));
 }

package/dist/internal.js

@@ -1630,6 +1630,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }
@@ -3906,6 +3909,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }
@@ -4156,6 +4162,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }
@@ -9673,9 +9682,8 @@ const PrimitiveCatalog = {
             "defaultValue": {
                 "type": "string"
             },
-            "placeholder": {
-                "type": "string",
-                "priority": true
+            "enterKeyHint": {
+                "type": "string"
             },
             "inputMode": {
                 "type": "string"
@@ -9759,9 +9767,6 @@ const PrimitiveCatalog = {
             "hasError": {
                 "type": "boolean"
             },
-            "enterKeyHint": {
-                "type": "string"
-            },
             "isReadOnly": {
                 "type": "boolean"
             },
@@ -9771,12 +9776,19 @@ const PrimitiveCatalog = {
             "name": {
                 "type": "string"
             },
+            "placeholder": {
+                "type": "string",
+                "priority": true
+            },
             "countryCodeLabel": {
                 "type": "string"
             },
             "countryCodeName": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             },
@@ -9819,6 +9831,9 @@ const PrimitiveCatalog = {
             "accessKey": {
                 "type": "string"
             },
+            "autoCapitalize": {
+                "type": "string"
+            },
             "autoFocus": {
                 "type": "boolean"
             },
@@ -9879,9 +9894,6 @@ const PrimitiveCatalog = {
             "vocab": {
                 "type": "string"
             },
-            "autoCapitalize": {
-                "type": "string"
-            },
             "autoCorrect": {
                 "type": "string"
             },
@@ -10985,7 +10997,7 @@ const PrimitiveCatalog = {
             "defaultChecked": {
                 "type": "boolean"
             },
-            "placeholder": {
+            "enterKeyHint": {
                 "type": "string"
             },
             "inputMode": {
@@ -11003,14 +11015,14 @@ const PrimitiveCatalog = {
             "hasError": {
                 "type": "boolean"
             },
-            "enterKeyHint": {
-                "type": "string"
-            },
             "isReadOnly": {
                 "type": "boolean"
             },
             "isRequired": {
                 "type": "boolean"
+            },
+            "placeholder": {
+                "type": "string"
             }
         }
     },
@@ -13562,6 +13574,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }

package/dist/types/components/AccountSettings/ChangePassword/ChangePassword.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { ChangePasswordProps } from './types';
-declare function ChangePassword({ components, displayText: overrideDisplayText, onError, onSuccess, validators, }: ChangePasswordProps): JSX.Element | null;
+declare function ChangePassword({ components, displayText: overrideDisplayText, onError, onSuccess, validators, }: ChangePasswordProps): React.JSX.Element | null;
 declare namespace ChangePassword {
     var CurrentPasswordField: import("../types").PasswordFieldComponent;
     var NewPasswordField: import("../types").PasswordFieldComponent;

package/dist/types/components/AccountSettings/DeleteUser/DeleteUser.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { DeleteUserProps } from './types';
-declare function DeleteUser({ components, displayText: overrideDisplayText, handleDelete, onError, onSuccess, }: DeleteUserProps): JSX.Element | null;
+declare function DeleteUser({ components, displayText: overrideDisplayText, handleDelete, onError, onSuccess, }: DeleteUserProps): React.JSX.Element | null;
 declare namespace DeleteUser {
     var ErrorMessage: import("../types").ErrorMessageComponent;
     var DeleteButton: import("../types").ButtonComponent;

package/dist/types/components/Authenticator/Authenticator.d.ts

@@ -9,7 +9,7 @@ export type AuthenticatorProps = Partial<Omit<AuthenticatorMachineOptions, 'form
     children: React.ReactNode | ((props: {
         signOut?: SignOut;
         user?: AuthUser;
-    }) => JSX.Element);
+    }) => React.JSX.Element);
     formFields: {
         [key in FormFieldComponents]?: {
             [field_name: string]: ReactFormFieldOptions;
@@ -28,30 +28,30 @@ interface ReactFormFieldOptions extends FormFieldOptions {
     /** Desired HTML maxLength type */
     maxLength?: number;
 }
-export declare function AuthenticatorInternal({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, passwordSettings, signUpAttributes, services, socialProviders, variation, }: AuthenticatorProps): JSX.Element;
+export declare function AuthenticatorInternal({ children, className, components: customComponents, formFields, hideSignUp, initialState, loginMechanisms, passwordSettings, signUpAttributes, services, socialProviders, variation, }: AuthenticatorProps): React.JSX.Element;
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
  */
-export declare function Authenticator(props: AuthenticatorProps): JSX.Element;
+export declare function Authenticator(props: AuthenticatorProps): React.JSX.Element;
 export declare namespace Authenticator {
     var Provider: typeof import("@aws-amplify/ui-react-core").AuthenticatorProvider;
     var ForgotPassword: {
-        ({ className, variation, }: import("./RouteContainer").RouteProps): JSX.Element;
-        Header(): JSX.Element;
-        Footer(): JSX.Element;
+        ({ className, variation, }: import("./RouteContainer").RouteProps): React.JSX.Element;
+        Header(): React.JSX.Element;
+        Footer(): React.JSX.Element;
     };
     var SetupTotp: {
-        ({ className, variation, }: import("./RouteContainer").RouteProps): JSX.Element;
-        Header(): JSX.Element;
-        Footer(): JSX.Element;
+        ({ className, variation, }: import("./RouteContainer").RouteProps): React.JSX.Element;
+        Header(): React.JSX.Element;
+        Footer(): React.JSX.Element;
     };
     var SignIn: typeof import("./SignIn").SignIn;
     var SignUp: typeof import("./SignUp").SignUp;
     var ForceNewPassword: {
-        ({ className, variation, }: import("./RouteContainer").RouteProps): JSX.Element;
-        FormFields(): JSX.Element | null;
-        Header(): JSX.Element | null;
-        Footer(): JSX.Element | null;
+        ({ className, variation, }: import("./RouteContainer").RouteProps): React.JSX.Element;
+        FormFields(): React.JSX.Element | null;
+        Header(): React.JSX.Element | null;
+        Footer(): React.JSX.Element | null;
     };
 }
 export {};

package/dist/types/components/Authenticator/ConfirmSignIn/ConfirmSignIn.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmSignIn: {
-    ({ className, variation, }: RouteProps): JSX.Element;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
     Header: typeof Header;
-    Footer(): JSX.Element;
+    Footer(): React.JSX.Element;
 };
 declare function Header(): React.JSX.Element;
 export {};