@aws-amplify/ui-react 6.7.1 → 6.8.0

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"
             },
@@ -9900,12 +9912,18 @@ const PrimitiveCatalog = {
     },
     "Placeholder": {
         "properties": {
+            "endColor": {
+                "type": "string"
+            },
             "isLoaded": {
                 "type": "boolean"
             },
             "size": {
                 "type": "string"
             },
+            "startColor": {
+                "type": "string"
+            },
             "isDisabled": {
                 "type": "boolean"
             },
@@ -10756,7 +10774,7 @@ const PrimitiveCatalog = {
             "defaultChecked": {
                 "type": "boolean"
             },
-            "placeholder": {
+            "enterKeyHint": {
                 "type": "string"
             },
             "inputMode": {
@@ -10774,14 +10792,14 @@ const PrimitiveCatalog = {
             "hasError": {
                 "type": "boolean"
             },
-            "enterKeyHint": {
-                "type": "string"
-            },
             "isReadOnly": {
                 "type": "boolean"
             },
             "isRequired": {
                 "type": "boolean"
+            },
+            "placeholder": {
+                "type": "string"
             }
         }
     },
@@ -13333,6 +13351,9 @@ const PrimitiveCatalog = {
             "role": {
                 "type": "string"
             },
+            "ref": {
+                "type": "string"
+            },
             "key": {
                 "type": "string"
             }

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/Placeholder/Placeholder.mjs

@@ -3,11 +3,16 @@ import { classNames, ComponentClassName, classNameModifier } from '@aws-amplify/
 import { View } from '../View/View.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
-const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
+const CSS_VAR_START_COLOR = '--amplify-components-placeholder-start-color';
+const CSS_VAR_END_COLOR = '--amplify-components-placeholder-end-color';
+const PlaceholderPrimitive = ({ className, children, endColor, isLoaded, size, startColor, ...rest }, ref) => {
     if (isLoaded) {
         return React.createElement(React.Fragment, null, children);
     }
-    return (React.createElement(View, { className: classNames(ComponentClassName.Placeholder, classNameModifier(ComponentClassName.Placeholder, size), className), ref: ref, ...rest }));
+    return (React.createElement(View, { className: classNames(ComponentClassName.Placeholder, classNameModifier(ComponentClassName.Placeholder, size), className), ref: ref, style: {
+            [CSS_VAR_START_COLOR]: startColor && `${startColor}`,
+            [CSS_VAR_END_COLOR]: endColor && `${endColor}`,
+        }, ...rest }));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
@@ -15,4 +20,4 @@ const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest },
 const Placeholder = primitiveWithForwardRef(PlaceholderPrimitive);
 Placeholder.displayName = 'Placeholder';
 
-export { Placeholder };
+export { CSS_VAR_END_COLOR, CSS_VAR_START_COLOR, Placeholder };

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.7.1';
+const VERSION = '6.8.0';
 
 export { VERSION };

package/dist/index.js

@@ -1135,14 +1135,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 +1148,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 +1158,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');
@@ -1581,11 +1577,16 @@ const PhoneNumberFieldPrimitive = ({ autoComplete = 'tel-national', className, d
 const PhoneNumberField = Field.primitiveWithForwardRef(PhoneNumberFieldPrimitive);
 PhoneNumberField.displayName = 'PhoneNumberField';
 
-const PlaceholderPrimitive = ({ className, children, isLoaded, size, ...rest }, ref) => {
+const CSS_VAR_START_COLOR = '--amplify-components-placeholder-start-color';
+const CSS_VAR_END_COLOR = '--amplify-components-placeholder-end-color';
+const PlaceholderPrimitive = ({ className, children, endColor, isLoaded, size, startColor, ...rest }, ref) => {
     if (isLoaded) {
         return React__namespace.createElement(React__namespace.Fragment, null, children);
     }
-    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Placeholder, ui.classNameModifier(ui.ComponentClassName.Placeholder, size), className), ref: ref, ...rest }));
+    return (React__namespace.createElement(Field.View, { className: ui.classNames(ui.ComponentClassName.Placeholder, ui.classNameModifier(ui.ComponentClassName.Placeholder, size), className), ref: ref, style: {
+            [CSS_VAR_START_COLOR]: startColor && `${startColor}`,
+            [CSS_VAR_END_COLOR]: endColor && `${endColor}`,
+        }, ...rest }));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
@@ -2482,7 +2483,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.7.1';
+const VERSION = '6.8.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

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"
             },
@@ -10123,12 +10135,18 @@ const PrimitiveCatalog = {
     },
     "Placeholder": {
         "properties": {
+            "endColor": {
+                "type": "string"
+            },
             "isLoaded": {
                 "type": "boolean"
             },
             "size": {
                 "type": "string"
             },
+            "startColor": {
+                "type": "string"
+            },
             "isDisabled": {
                 "type": "boolean"
             },
@@ -10979,7 +10997,7 @@ const PrimitiveCatalog = {
             "defaultChecked": {
                 "type": "boolean"
             },
-            "placeholder": {
+            "enterKeyHint": {
                 "type": "string"
             },
             "inputMode": {
@@ -10997,14 +11015,14 @@ const PrimitiveCatalog = {
             "hasError": {
                 "type": "boolean"
             },
-            "enterKeyHint": {
-                "type": "string"
-            },
             "isReadOnly": {
                 "type": "boolean"
             },
             "isRequired": {
                 "type": "boolean"
+            },
+            "placeholder": {
+                "type": "string"
             }
         }
     },
@@ -13556,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 {};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RouteProps } from '../RouteContainer';
-export declare function ConfirmSignUp({ className, variation, }: RouteProps): JSX.Element;
+export declare function ConfirmSignUp({ className, variation, }: RouteProps): React.JSX.Element;
 export declare namespace ConfirmSignUp {
     var Header: () => React.JSX.Element;
-    var Footer: () => JSX.Element;
+    var Footer: () => React.JSX.Element;
 }

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function FederatedSignIn(): JSX.Element;
+import React from 'react';
+export declare function FederatedSignIn(): React.JSX.Element;

package/dist/types/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { FederatedIdentityProviders, SocialProvider } from '@aws-amplify/ui';
 export interface FederatedSignInButtonProps {
     icon?: SocialProvider;
     provider: FederatedIdentityProviders;
     text: string;
 }
-export declare const FederatedSignInButton: (props: FederatedSignInButtonProps) => JSX.Element;
+export declare const FederatedSignInButton: (props: FederatedSignInButtonProps) => React.JSX.Element;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const ForceNewPassword: {
-    ({ className, variation, }: RouteProps): JSX.Element;
-    FormFields(): JSX.Element | null;
-    Header(): JSX.Element | null;
-    Footer(): JSX.Element | null;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
+    FormFields(): React.JSX.Element | null;
+    Header(): React.JSX.Element | null;
+    Footer(): React.JSX.Element | null;
 };

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmResetPassword: {
-    ({ className, variation, }: RouteProps): JSX.Element;
-    Header(): JSX.Element;
-    Footer(): JSX.Element;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
+    Header(): React.JSX.Element;
+    Footer(): React.JSX.Element;
 };

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const ForgotPassword: {
-    ({ className, variation, }: RouteProps): JSX.Element;
-    Header(): JSX.Element;
-    Footer(): JSX.Element;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
+    Header(): React.JSX.Element;
+    Footer(): React.JSX.Element;
 };

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteContainerProps } from './types';
-export declare function RouteContainer({ children, className, variation, }: RouteContainerProps): JSX.Element;
+export declare function RouteContainer({ children, className, variation, }: RouteContainerProps): React.JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type RouteProps = {
     className: string;
     variation: 'default' | 'modal';

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouterProps } from './types';
-export declare function Router({ className, hideSignUp, variation, }: RouterProps): JSX.Element;
+export declare function Router({ className, hideSignUp, variation, }: RouterProps): React.JSX.Element;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const SetupTotp: {
-    ({ className, variation, }: RouteProps): JSX.Element;
-    Header(): JSX.Element;
-    Footer(): JSX.Element;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
+    Header(): React.JSX.Element;
+    Footer(): React.JSX.Element;
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare function SignIn(): JSX.Element;
+export declare function SignIn(): React.JSX.Element;
 export declare namespace SignIn {
     var Footer: () => React.JSX.Element;
-    var Header: () => JSX.Element;
+    var Header: () => React.JSX.Element;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
-export declare function SignUp(): JSX.Element;
+export declare function SignUp(): React.JSX.Element;
 export declare namespace SignUp {
-    var Header: () => JSX.Element;
+    var Header: () => React.JSX.Element;
     var FormFields: () => React.JSX.Element;
-    var Footer: () => JSX.Element;
+    var Footer: () => React.JSX.Element;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const ConfirmVerifyUser: {
-    ({ className, variation, }: RouteProps): JSX.Element;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
     Header(): React.JSX.Element;
-    Footer(): JSX.Element | null;
+    Footer(): React.JSX.Element | null;
 };

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const VerifyUser: {
-    ({ className, variation, }: RouteProps): JSX.Element;
-    Header(): JSX.Element;
-    Footer(): JSX.Element;
+    ({ className, variation, }: RouteProps): React.JSX.Element;
+    Header(): React.JSX.Element;
+    Footer(): React.JSX.Element;
 };

package/dist/types/components/Authenticator/hooks/useCustomComponents/defaultComponents.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 interface Components {
-    Footer?: () => JSX.Element | null;
-    FormFields?: () => JSX.Element | null;
-    Header?: () => JSX.Element | null;
+    Footer?: () => React.JSX.Element | null;
+    FormFields?: () => React.JSX.Element | null;
+    Header?: () => React.JSX.Element | null;
 }
 export interface DefaultComponents extends Omit<Components, 'FormFields'> {
     ConfirmSignIn?: Omit<Components, 'FormFields'>;

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const ConfirmSignInFooter: () => JSX.Element;
+import React from 'react';
+export declare const ConfirmSignInFooter: () => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ConfirmationCodeInputProps {
     errorText?: string;
     labelHidden?: boolean;
@@ -7,4 +7,4 @@ export interface ConfirmationCodeInputProps {
     required?: boolean;
     type?: string;
 }
-export declare const ConfirmationCodeInput: (props: ConfirmationCodeInputProps) => JSX.Element;
+export declare const ConfirmationCodeInput: (props: ConfirmationCodeInputProps) => React.JSX.Element;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { FormFieldOptions } from '@aws-amplify/ui';
 export interface FormFieldProps extends Omit<FormFieldOptions, 'label'> {
     label: string;
     name: string;
 }
-export declare function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props }: FormFieldProps): JSX.Element;
+export declare function FormField({ autocomplete: autoComplete, dialCode, name, type, ...props }: FormFieldProps): React.JSX.Element;

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function FormFields(): JSX.Element;
+import * as React from 'react';
+export declare function FormFields(): React.JSX.Element;

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

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const RemoteErrorMessage: () => JSX.Element;
+import React from 'react';
+export declare const RemoteErrorMessage: () => React.JSX.Element;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteProps } from '../RouteContainer';
 export declare const SignInSignUpTabs: ({ className, hideSignUp, variation, }: {
     hideSignUp: boolean;
-} & RouteProps) => JSX.Element;
+} & RouteProps) => React.JSX.Element;

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { AuthEventTypes } from '@aws-amplify/ui';
 export interface TwoButtonSubmitFooterProps {
     cancelButtonSendType: AuthEventTypes;
     cancelButtonText: string;
-    submitButtonText?: JSX.Element;
+    submitButtonText?: React.JSX.Element;
 }
-export declare const TwoButtonSubmitFooter: (props: TwoButtonSubmitFooterProps) => JSX.Element;
+export declare const TwoButtonSubmitFooter: (props: TwoButtonSubmitFooterProps) => React.JSX.Element;

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

@@ -9,4 +9,4 @@ export interface WithAuthenticatorProps {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
  */
-export declare function withAuthenticator<Props = {}>(Component: React.ComponentType<Props & WithAuthenticatorProps>, options?: WithAuthenticatorOptions): (props: Props) => JSX.Element;
+export declare function withAuthenticator<Props = {}>(Component: React.ComponentType<Props & WithAuthenticatorProps>, options?: WithAuthenticatorOptions): (props: Props) => React.JSX.Element;

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

@@ -7,4 +7,4 @@ export interface FilterChildrenProps {
     allowedFilters?: string[];
     targetFilter?: string;
 }
-export declare const FilterChildren: ({ allowedFilters, children, targetFilter, }: FilterChildrenProps) => JSX.Element | null;
+export declare const FilterChildren: ({ allowedFilters, children, targetFilter, }: FilterChildrenProps) => React.JSX.Element | null;

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

@@ -12,7 +12,7 @@ interface ComponentStyleProps extends React.ComponentProps<'style'> {
     componentThemes: BaseComponentTheme[];
 }
 export declare const ComponentStyle: {
-    ({ theme, componentThemes, ...rest }: ComponentStyleProps): JSX.Element | null;
+    ({ theme, componentThemes, ...rest }: ComponentStyleProps): React.JSX.Element | null;
     displayName: string;
 };
 export {};

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

@@ -10,7 +10,7 @@ interface GlobalStyleProps extends React.ComponentProps<'style'> {
     styles: Parameters<typeof createGlobalCSS>[0];
 }
 export declare const GlobalStyle: {
-    ({ styles, ...rest }: GlobalStyleProps): JSX.Element | null;
+    ({ styles, ...rest }: GlobalStyleProps): React.JSX.Element | null;
     displayName: string;
 };
 export {};

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

@@ -3,7 +3,7 @@ interface StyleProps extends React.ComponentProps<'style'> {
     cssText?: string;
 }
 export declare const Style: {
-    ({ cssText, ...rest }: StyleProps): JSX.Element | null;
+    ({ cssText, ...rest }: StyleProps): React.JSX.Element | null;
     displayName: string;
 };
 export {};

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

@@ -27,5 +27,5 @@ interface ThemeProviderProps {
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
  */
-export declare function ThemeProvider({ children, colorMode, direction, nonce, theme, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, colorMode, direction, nonce, theme, }: ThemeProviderProps): React.JSX.Element;
 export {};

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

@@ -10,7 +10,7 @@ interface ThemeStyleProps extends React.ComponentProps<'style'> {
     theme?: WebTheme;
 }
 export declare const ThemeStyle: {
-    ({ theme, ...rest }: ThemeStyleProps): JSX.Element | null;
+    ({ theme, ...rest }: ThemeStyleProps): React.JSX.Element | null;
     displayName: string;
 };
 export {};

package/dist/types/components/shared/ValidationErrors.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ValidationErrorsProps {
     errors: string[];
     id?: string;
     dataAttr?: string;
 }
-export declare const ValidationErrors: ({ errors, id, dataAttr, }: ValidationErrorsProps) => JSX.Element | null;
+export declare const ValidationErrors: ({ errors, id, dataAttr, }: ValidationErrorsProps) => React.JSX.Element | null;

package/dist/types/primitives/Alert/AlertIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { AlertVariations, ViewProps } from '../types';
 interface AlertIconProps extends Pick<ViewProps, 'role' | 'ariaLabel'> {
     variation?: AlertVariations;
@@ -8,7 +8,7 @@ interface AlertIconProps extends Pick<ViewProps, 'role' | 'ariaLabel'> {
  * @internal For internal Amplify UI use only. May be removed in a future release.
  */
 export declare const AlertIcon: {
-    ({ variation, ariaHidden, ariaLabel, role, }: AlertIconProps): JSX.Element | null;
+    ({ variation, ariaHidden, ariaLabel, role, }: AlertIconProps): React.JSX.Element | null;
     displayName: string;
 };
 export {};

package/dist/types/primitives/Collection/Collection.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BaseCollectionProps, ElementType } from '../types';
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/collection)
  */
 export declare const Collection: {
-    <Item, Element_1 extends ElementType>({ className, isSearchable, isPaginated, items, itemsPerPage, searchFilter, searchLabel, searchNoResultsFound, searchPlaceholder, type, testId, ...rest }: BaseCollectionProps<Item, Element_1>): JSX.Element;
+    <Item, Element_1 extends ElementType>({ className, isSearchable, isPaginated, items, itemsPerPage, searchFilter, searchLabel, searchNoResultsFound, searchPlaceholder, type, testId, ...rest }: BaseCollectionProps<Item, Element_1>): React.JSX.Element;
     displayName: string;
 };

package/dist/types/primitives/DropZone/DropZone.d.ts

@@ -1,10 +1,10 @@
 import { ForwardRefPrimitive } from '../types';
 import { BaseDropZoneProps } from './types';
-import { Accepted, Default, Rejected } from './DropZoneChildren';
+import { AcceptedType, DefaultType, RejectedType } from './DropZoneChildren';
 type DropZoneType = ForwardRefPrimitive<BaseDropZoneProps, 'div'> & {
-    Accepted: typeof Accepted;
-    Rejected: typeof Rejected;
-    Default: typeof Default;
+    Accepted: AcceptedType;
+    Rejected: RejectedType;
+    Default: DefaultType;
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/dropzone)

package/dist/types/primitives/DropZone/DropZoneChildren.d.ts

@@ -1,25 +1,26 @@
 import * as React from 'react';
-import { Primitive } from '../types';
 /**
  * These are syntactic sugar components that make it easy to compose children
  * in DropZone without having to expose the DropZoneContext.
  */
+export type AcceptedType = (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element | null;
 /**
  * This component renders when the user is dragging ONLY accepted files on the DropZone.
  */
-declare const Accepted: Primitive<{
+export declare const Accepted: AcceptedType;
+export type RejectedType = (props: {
     children?: React.ReactNode;
-}, 'div'>;
+}) => React.JSX.Element | null;
 /**
  * This component renders when the user is dragging ANY rejected files on the DropZone.
  */
-declare const Rejected: Primitive<{
+export declare const Rejected: RejectedType;
+export type DefaultType = (props: {
     children?: React.ReactNode;
-}, 'div'>;
+}) => React.JSX.Element | null;
 /**
  * This component renders by default when the user is not dragging.
  */
-declare const Default: Primitive<{
-    children?: React.ReactNode;
-}, 'div'>;
-export { Accepted, Rejected, Default };
+export declare const Default: DefaultType;

package/dist/types/primitives/DropZone/DropZoneProvider.d.ts

@@ -4,5 +4,5 @@ declare const DropZoneContext: React.Context<DragState>;
 declare const DropZoneProvider: ({ value, children, }: {
     value: DragState;
     children?: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export { DropZoneProvider, DropZoneContext };

package/dist/types/primitives/Icon/context/IconsProvider.d.ts

@@ -5,4 +5,4 @@ interface IconProviderProps {
     icons?: IconsContextInterface;
 }
 export { IconsContextInterface };
-export declare function IconsProvider({ children, icons, }: IconProviderProps): JSX.Element;
+export declare function IconsProvider({ children, icons, }: IconProviderProps): React.JSX.Element;

package/dist/types/primitives/Icon/icons/types.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import { ViewProps } from '../../types';
 export type InternalIcon = (props: ViewProps & {
     size?: string | number;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/dist/types/primitives/Pagination/usePaginationItems.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface UsePaginationItemsProps {
     currentPage: number;
     totalPages: number;
@@ -22,5 +22,5 @@ interface UsePaginationItemsProps {
  * @param onChange callback function triggered every time the page changes
  * @returns an array of pagination items
  */
-export declare const usePaginationItems: ({ currentPage, totalPages, hasMorePages, siblingCount, currentPageLabel, pageLabel, previousLabel, nextLabel, onNext, onPrevious, onChange, }: UsePaginationItemsProps) => JSX.Element[];
+export declare const usePaginationItems: ({ currentPage, totalPages, hasMorePages, siblingCount, currentPageLabel, pageLabel, previousLabel, nextLabel, onNext, onPrevious, onChange, }: UsePaginationItemsProps) => React.JSX.Element[];
 export {};

package/dist/types/primitives/Placeholder/Placeholder.d.ts

@@ -1,4 +1,6 @@
 import { BasePlaceholderProps, ForwardRefPrimitive } from '../types';
+export declare const CSS_VAR_START_COLOR: string;
+export declare const CSS_VAR_END_COLOR: string;
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/placeholder)
  */

package/dist/types/primitives/types/autocomplete.d.ts

@@ -47,7 +47,7 @@ export interface BaseAutocompleteMenuProps extends BaseViewProps {
      * @description
      * A list of Option JSX elements
      */
-    children: JSX.Element[];
+    children: React.JSX.Element[];
     /**
      * @description
      * This is a slot to label a list of options

package/dist/types/primitives/types/button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Sizes } from './base';
 import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 import { FlexContainerStyleProps } from './flex';

package/dist/types/primitives/types/collection.d.ts

@@ -56,7 +56,7 @@ interface CollectionChildren<Item> {
      * The component to be repeated
      * Same interface as Array.prototype.map
      */
-    children: (item: Item, index: number) => JSX.Element;
+    children: (item: Item, index: number) => React.JSX.Element;
 }
 export interface CollectionBaseProps<Item> extends CollectionChildren<Item> {
     /**
@@ -69,7 +69,7 @@ export type ListCollectionProps<Item> = Omit<BaseFlexProps, 'children'> & Collec
 export type GridCollectionProps<Item> = Omit<BaseGridProps, 'children'> & CollectionBaseProps<Item>;
 /**
  * Omits `React.ReactNode` as children to prevent intersection type for `children` of
- * `React.ReactNode & (item: Item, index: number) => JSX.Element`
+ * `React.ReactNode & (item: Item, index: number) => React.JSX.Element`
  * and replaces with `CollectionChildren`
  */
 type ReplaceChildren<T, Item> = Omit<T, 'children'> & CollectionChildren<Item>;

package/dist/types/primitives/types/field.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseFieldGroupIconButtonProps } from './fieldGroupIcon';
 import { BaseInputProps } from './input';
 import { BaseTextProps } from './text';

package/dist/types/primitives/types/fieldGroup.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BaseFlexProps } from './flex';
 import { FieldVariations } from './field';
 import { ElementType, PrimitiveProps } from './view';

package/dist/types/primitives/types/image.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 import { ResponsiveStyle } from './style';

package/dist/types/primitives/types/label.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 /** @deprecated For internal use only */
 export interface BaseLabelProps extends BaseViewProps {

package/dist/types/primitives/types/placeholder.d.ts

@@ -1,8 +1,15 @@
+import { Property } from 'csstype';
 import { Sizes } from './base';
+import { StyleToken } from './style';
 import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type PlaceholderSizes = Sizes;
 /** @deprecated For internal use only */
 export interface BasePlaceholderProps extends BaseViewProps {
+    /**
+     * @description
+     * This property will change the animation end color of the placeholder component
+     */
+    endColor?: StyleToken<Property.Color>;
     /**
      * @description
      * If true, the placeholder won't show, if false the placeholder will show.
@@ -15,5 +22,10 @@ export interface BasePlaceholderProps extends BaseViewProps {
      * Controls the display size of placeholder
      */
     size?: PlaceholderSizes;
+    /**
+     * @description
+     * This property will change the animation start color of the placeholder component
+     */
+    startColor?: StyleToken<Property.Color>;
 }
 export type PlaceholderProps<Element extends ElementType = 'div'> = PrimitiveProps<BasePlaceholderProps, Element>;

package/dist/types/primitives/types/rating.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { BaseFlexProps } from './flex';
 import { Sizes } from './base';
@@ -18,7 +17,7 @@ export interface RatingOptions {
      * override the empty icon an will create a rating component that uses
      * different icons for filled and empty icons.
      */
-    emptyIcon?: JSX.Element;
+    emptyIcon?: React.JSX.Element;
     /**
      * @description
      * The CSS color to use on the filled rating icon
@@ -32,7 +31,7 @@ export interface RatingOptions {
      * with the emptyIcon prop
      * Default is <IconStar />
      */
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     /**
      * @description
      * The max rating integer value

package/dist/types/primitives/types/style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { WebDesignToken } from '@aws-amplify/ui';
 import type { BoxShadowKeys, BorderWidthKeys, ColorKeys, FontFamilyKeys, FontSizeKeys, FontWeightKeys, LineHeightKeys, OpacityKeys, RadiiKeys, SpaceKeys, TransformKeys } from './theme';

package/dist/types/primitives/types/switchField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { Sizes } from './base';
 import { BaseStyleProps, StyleToken } from './style';

package/dist/types/primitives/types/textArea.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { Sizes } from './base';
 import { FieldVariations } from './field';

package/dist/types/primitives/types/view.d.ts

@@ -28,7 +28,7 @@ export type PrimitiveProps<Props extends BaseViewProps, Element extends ElementT
  * to allow usage in React 16
  */
 interface JSElementForwardRefRenderFunction<T, P = {}> {
-    (props: P, ref: React.ForwardedRef<T>): JSX.Element | null;
+    (props: P, ref: React.ForwardedRef<T>): React.JSX.Element | null;
     displayName?: string | undefined;
     /**
      * defaultProps are not supported on render functions
@@ -50,11 +50,11 @@ interface JSXElementForwardRefExoticComponent<P = {}> {
     (props: P): React.ReactElement | null;
     defaultProps?: Partial<P> | undefined;
     displayName?: string | undefined;
-    propTypes?: React.WeakValidationMap<P> | undefined;
+    propTypes?: any;
     readonly $$typeof: symbol;
 }
 export interface ForwardRefPrimitive<Props extends BaseViewProps, DefaultElement extends ElementType> extends JSXElementForwardRefExoticComponent<PrimitiveProps<Props, DefaultElement>> {
-    <Element extends ElementType = DefaultElement>(props: PrimitiveProps<Props, Element>): React.ReactElement | null;
+    <Element extends ElementType = DefaultElement>(props: PrimitiveProps<Props, Element>): React.ReactElement<Props, Element> | null;
 }
 /** @deprecated For internal use only */
 export interface BaseViewProps extends BaseComponentProps, BaseStyleProps, AriaProps {

package/dist/types/primitives/utils/primitiveWithForwardRef.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { BaseViewProps, ElementType, ForwardRefPrimitive, Primitive } from '../types';
 /**
  * Updates the return type for primitives wrapped in `React.forwardRef` to
@@ -8,4 +9,4 @@ import { BaseViewProps, ElementType, ForwardRefPrimitive, Primitive } from '../t
  * @param primitive UI Primitive to be wrapped with `React.forwardRef`
  * @returns ForwaredRef wrapped UI Primitive
  */
-export declare const primitiveWithForwardRef: <P extends BaseViewProps, E extends ElementType>(primitive: Primitive<P, E>) => ForwardRefPrimitive<P, E>;
+export declare const primitiveWithForwardRef: <P extends BaseViewProps, E extends ElementType>(primitive: Primitive<React.PropsWithoutRef<P>, E>) => ForwardRefPrimitive<P, E>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.7.1";
+export declare const VERSION = "6.8.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.7.1",
-    "@aws-amplify/ui-react-core": "3.1.1",
+    "@aws-amplify/ui": "6.7.2",
+    "@aws-amplify/ui-react-core": "3.2.0",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",
@@ -68,8 +68,8 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "react": "^16.14.0 || ^17.0 || ^18.0 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "peerDependenciesMeta": {
     "aws-amplify": {
@@ -79,8 +79,7 @@
   "devDependencies": {
     "@svgr/core": "^5.5.0",
     "@types/qrcode": "^1.4.2",
-    "jest-matchmedia-mock": "^1.1.0",
-    "react-router-dom": "^6.2.1"
+    "jest-matchmedia-mock": "^1.1.0"
   },
   "sideEffects": [
     "dist/**/*.css"