// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`amplify render tests actions DataStore DataStoreCreateItem 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreCreateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CreateCustomerButtonOverridesProps = {
  CreateCustomerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CreateCustomerButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: CreateCustomerButtonOverridesProps | undefined | null;
  }
>;
export default function CreateCustomerButton(
  props: CreateCustomerButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const createCustomerButtonOnClick = useDataStoreCreateAction({
    model: Customer,
    fields: { firstName: \\"Din\\", lastName: \\"Djarin\\" },
    schema: schema,
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Create\\"
      onClick={() => {
        createCustomerButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"CreateCustomerButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions DataStore DataStoreDeleteItem 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreDeleteAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type DeleteCustomerButtonOverridesProps = {
  DeleteCustomerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type DeleteCustomerButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: DeleteCustomerButtonOverridesProps | undefined | null;
  }
>;
export default function DeleteCustomerButton(
  props: DeleteCustomerButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const deleteCustomerButtonOnClick = useDataStoreDeleteAction({
    model: Customer,
    id: \\"d9887268-47dd-4899-9568-db5809218751\\",
    schema: schema,
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Delete\\"
      onClick={() => {
        deleteCustomerButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"DeleteCustomerButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions DataStore DataStoreUpdateItem 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreUpdateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type UpdateCustomerButtonOverridesProps = {
  UpdateCustomerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type UpdateCustomerButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: UpdateCustomerButtonOverridesProps | undefined | null;
  }
>;
export default function UpdateCustomerButton(
  props: UpdateCustomerButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const updateCustomerButtonOnClick = useDataStoreUpdateAction({
    model: Customer,
    id: \\"d9887268-47dd-4899-9568-db5809218751\\",
    fields: { firstName: \\"Din\\", lastName: \\"Djarin\\" },
    schema: schema,
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Update\\"
      onClick={() => {
        updateCustomerButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"UpdateCustomerButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions GraphQL DataStoreCreateItem 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { API } from \\"aws-amplify\\";
import { createCustomer } from \\"../graphql/mutations\\";
import { Customer } from \\"../API\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CreateCustomerButtonOverridesProps = {
  CreateCustomerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CreateCustomerButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: CreateCustomerButtonOverridesProps | undefined | null;
  }
>;
export default function CreateCustomerButton(
  props: CreateCustomerButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const createCustomerButtonOnClick = async () => {
    await API.graphql({
      query: createCustomer,
      variables: {
        input: {
          firstName: \\"Din\\",
          lastName: \\"Djarin\\",
        },
      },
    });
  };
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Create\\"
      onClick={() => {
        createCustomerButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"CreateCustomerButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions GraphQL DataStoreDeleteItem 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { API } from \\"aws-amplify\\";
import { deleteCustomer } from \\"../graphql/mutations\\";
import { Customer } from \\"../API\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type DeleteCustomerButtonOverridesProps = {
  DeleteCustomerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type DeleteCustomerButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: DeleteCustomerButtonOverridesProps | undefined | null;
  }
>;
export default function DeleteCustomerButton(
  props: DeleteCustomerButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const deleteCustomerButtonOnClick = async () => {
    await API.graphql({
      query: deleteCustomer,
      variables: {
        input: {
          id: \\"d9887268-47dd-4899-9568-db5809218751\\",
        },
      },
    });
  };
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Delete\\"
      onClick={() => {
        deleteCustomerButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"DeleteCustomerButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions GraphQL DataStoreUpdateItem 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { API } from \\"aws-amplify\\";
import { updateCustomer } from \\"../graphql/mutations\\";
import { Customer } from \\"../API\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type UpdateCustomerButtonOverridesProps = {
  UpdateCustomerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type UpdateCustomerButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: UpdateCustomerButtonOverridesProps | undefined | null;
  }
>;
export default function UpdateCustomerButton(
  props: UpdateCustomerButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const updateCustomerButtonOnClick = async () => {
    await API.graphql({
      query: updateCustomer,
      variables: {
        input: {
          firstName: \\"Din\\",
          lastName: \\"Djarin\\",
          id: \\"d9887268-47dd-4899-9568-db5809218751\\",
        },
      },
    });
  };
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Update\\"
      onClick={() => {
        updateCustomerButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"UpdateCustomerButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions auth signs out 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useAuthSignOutAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SignOutButtonOverridesProps = {
  SignOutButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type SignOutButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: SignOutButtonOverridesProps | undefined | null;
  }
>;
export default function SignOutButton(
  props: SignOutButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const signOutButtonOnClick = useAuthSignOutAction({ global: false });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Sign out\\"
      onClick={() => {
        signOutButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"SignOutButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions navigation anchor navigation action 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useNavigateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type NavigateButtonOverridesProps = {
  NavigateButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type NavigateButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: NavigateButtonOverridesProps | undefined | null;
  }
>;
export default function NavigateButton(
  props: NavigateButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const navigateButtonOnClick = useNavigateAction({
    type: \\"anchor\\",
    about: \\"#about\\",
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Go to About section\\"
      onClick={() => {
        navigateButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"NavigateButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions navigation hard navigation action 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useNavigateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type NavigateButtonOverridesProps = {
  NavigateButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type NavigateButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: NavigateButtonOverridesProps | undefined | null;
  }
>;
export default function NavigateButton(
  props: NavigateButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const navigateButtonOnClick = useNavigateAction({
    type: \\"url\\",
    url: \\"https://www.amazon.com/\\",
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Go to Amazon.com\\"
      onClick={() => {
        navigateButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"NavigateButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions navigation new tab navigation action 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useNavigateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type NavigateButtonOverridesProps = {
  NavigateButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type NavigateButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: NavigateButtonOverridesProps | undefined | null;
  }
>;
export default function NavigateButton(
  props: NavigateButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const navigateButtonOnClick = useNavigateAction({
    type: \\"url\\",
    url: \\"https://www.amazon.com/\\",
    target: \\"newtab\\",
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Go to Amazon.com (Open in new tab)\\"
      onClick={() => {
        navigateButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"NavigateButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions navigation reload navigation action 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useNavigateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ReloadButtonOverridesProps = {
  ReloadButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ReloadButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: ReloadButtonOverridesProps | undefined | null;
  }
>;
export default function ReloadButton(
  props: ReloadButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const reloadButtonOnClick = useNavigateAction({ type: \\"reload\\" });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Reload the page.\\"
      onClick={() => {
        reloadButtonOnClick();
      }}
      {...getOverrideProps(overrides, \\"ReloadButton\\")}
      {...rest}
    ></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests actions with conditional in parameters 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
  EscapeHatchProps,
  createDataStorePredicate,
  getOverrideProps,
  useDataStoreBinding,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ConditionalInMutationOverridesProps = {
  ConditionalInMutation?: PrimitiveOverrideProps<FlexProps>;
  MutatedValue?: PrimitiveOverrideProps<TextProps>;
  ConditionalPropertyMutation?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ConditionalInMutationProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    user?: User;
  } & {
    overrides?: ConditionalInMutationOverridesProps | undefined | null;
  }
>;
export default function ConditionalInMutation(
  props: ConditionalInMutationProps
): React.ReactElement {
  const { user: userProp, overrides, ...rest } = props;
  const userFilterObj = {
    field: \\"firstName\\",
    operand: \\"Johnny\\",
    operator: \\"eq\\",
  };
  const userFilter = createDataStorePredicate<User>(userFilterObj);
  const userDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: User,
    criteria: userFilter,
  }).items[0];
  const user = userProp !== undefined ? userProp : userDataStore;
  const [mutatedValueChildren, setMutatedValueChildren] =
    useStateMutationAction(\\"Default Value\\");
  const conditionalPropertyMutationOnClick = () => {
    setMutatedValueChildren(
      user?.age == 45 ? \\"Conditional Value\\" : \\"Unconditional Value\\"
    );
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"ConditionalInMutation\\")} {...rest}>
      <Text
        children={mutatedValueChildren}
        {...getOverrideProps(overrides, \\"MutatedValue\\")}
      ></Text>
      <Button
        children=\\"Apply Conditional Property Mutation\\"
        onClick={() => {
          conditionalPropertyMutationOnClick();
        }}
        {...getOverrideProps(overrides, \\"ConditionalPropertyMutation\\")}
      ></Button>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests basic component tests should generate a simple button component 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      color=\\"#ff0000\\"
      width={20}
      isDisabled={true}
      {...getOverrideProps(overrides, \\"CustomButton\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests basic component tests should generate a simple text component 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomTextOverridesProps = {
  CustomText?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type CustomTextProps = React.PropsWithChildren<
  Partial<TextProps> & {
    overrides?: CustomTextOverridesProps | undefined | null;
  }
>;
export default function CustomText(props: CustomTextProps): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      color=\\"#ff0000\\"
      width=\\"20px\\"
      children=\\"Text Value\\"
      {...getOverrideProps(overrides, \\"CustomText\\")}
      {...rest}
    ></Text>
  );
}
"
`;

exports[`amplify render tests basic component tests should generate a simple view component 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TestOverridesProps = {
  Test?: PrimitiveOverrideProps<ViewProps>;
} & EscapeHatchProps;
export type TestProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: TestOverridesProps | undefined | null;
  }
>;
export default function Test(props: TestProps): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View
      fontFamily=\\"Times New Roman\\"
      fontSize=\\"20px\\"
      {...getOverrideProps(overrides, \\"Test\\")}
      {...rest}
    ></View>
  );
}
"
`;

exports[`amplify render tests bindings auth supports auth bindings in actions 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useAuth,
  useDataStoreCreateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComponentWithAuthEventBindingOverridesProps = {
  ComponentWithAuthEventBinding?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ComponentWithAuthEventBindingProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: ComponentWithAuthEventBindingOverridesProps | undefined | null;
  }
>;
export default function ComponentWithAuthEventBinding(
  props: ComponentWithAuthEventBindingProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const authAttributes = useAuth().user?.attributes ?? {};
  const componentWithAuthEventBindingOnClick = useDataStoreCreateAction({
    model: Customer,
    fields: {
      userName: authAttributes[\\"username\\"],
      favoriteIceCream: authAttributes[\\"custom:favorite_icecream\\"],
    },
    schema: schema,
  });
  return (
    /* @ts-ignore: TS2322 */
    <Button
      children=\\"Create\\"
      onClick={() => {
        componentWithAuthEventBindingOnClick();
      }}
      {...getOverrideProps(overrides, \\"ComponentWithAuthEventBinding\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests bindings data supports bindings with reserved keywords 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Class } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type DataBindingNamedClassOverridesProps = {
  DataBindingNamedClass?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type DataBindingNamedClassProps = React.PropsWithChildren<
  Partial<TextProps> & {
    class?: Class;
  } & {
    overrides?: DataBindingNamedClassOverridesProps | undefined | null;
  }
>;
export default function DataBindingNamedClass(
  props: DataBindingNamedClassProps
): React.ReactElement {
  const { class: classProp, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      children={classProp?.name}
      {...getOverrideProps(overrides, \\"DataBindingNamedClass\\")}
      {...rest}
    ></Text>
  );
}
"
`;

exports[`amplify render tests bindings data supports model with conflicting component type 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Flex as Flex0 } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { FlexProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type DataBindingNamedClassOverridesProps = {
  DataBindingNamedClass?: PrimitiveOverrideProps<TextProps>;
  FlexChild?: PrimitiveOverrideProps<FlexProps>;
} & EscapeHatchProps;
export type DataBindingNamedClassProps = React.PropsWithChildren<
  Partial<TextProps> & {
    class?: Flex0;
  } & {
    overrides?: DataBindingNamedClassOverridesProps | undefined | null;
  }
>;
export default function DataBindingNamedClass(
  props: DataBindingNamedClassProps
): React.ReactElement {
  const { class: classProp, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      children={classProp?.name}
      {...getOverrideProps(overrides, \\"DataBindingNamedClass\\")}
      {...rest}
    ></Text>
  );
}
"
`;

exports[`amplify render tests collection GraphQL should not render nested query if the data schema is not provided 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { listAuthors } from \\"../graphql/queries\\";
import AuthorProfile, { AuthorProfileProps } from \\"./AuthorProfile\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Collection,
  CollectionProps,
  Pagination,
  Placeholder,
} from \\"@aws-amplify/ui-react\\";
import { API } from \\"aws-amplify\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type AuthorProfileCollectionOverridesProps = {
  AuthorProfileCollection?: PrimitiveOverrideProps<CollectionProps>;
  AuthorProfile?: AuthorProfileProps;
} & EscapeHatchProps;
export type AuthorProfileCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => AuthorProfileProps;
  } & {
    overrides?: AuthorProfileCollectionOverridesProps | undefined | null;
  }
>;

const nextToken = {};
const apiCache = {};
export default function AuthorProfileCollection(
  props: AuthorProfileCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [pageIndex, setPageIndex] = React.useState(1);
  const [hasMorePages, setHasMorePages] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [isApiPagination, setIsApiPagination] = React.useState(false);
  const [instanceKey, setInstanceKey] = React.useState(\\"newGuid\\");
  const [loading, setLoading] = React.useState(true);
  const [maxViewed, setMaxViewed] = React.useState(1);
  const pageSize = 4;
  React.useEffect(() => {
    nextToken[instanceKey] = \\"\\";
    apiCache[instanceKey] = [];
  }, [instanceKey]);
  React.useEffect(() => {
    setIsApiPagination(!!!itemsProp);
  }, [itemsProp]);
  const handlePreviousPage = () => {
    setPageIndex(pageIndex - 1);
  };
  const handleNextPage = () => {
    setPageIndex(pageIndex + 1);
  };
  const jumpToPage = (pageNum?: number) => {
    setPageIndex(pageNum!);
  };
  const loadPage = async (page: number) => {
    const cacheUntil = page * pageSize + 1;
    const newCache = apiCache[instanceKey].slice();
    let newNext = nextToken[instanceKey];
    while (newCache.length < cacheUntil && newNext != null) {
      setLoading(true);
      const variables: any = {
        limit: pageSize,
      };
      if (newNext) {
        variables[\\"nextToken\\"] = newNext;
      }
      const result = (
        await API.graphql({
          query: listAuthors,
          variables,
        })
      ).data.listAuthors;
      var loaded = await Promise.all(
        result.items.map(async (item) => {
          return {
            ...item,
          };
        })
      );
      newCache.push(...loaded);
      newNext = result.nextToken;
    }
    const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
    setItems(cacheSlice);
    setHasMorePages(!!newNext);
    setLoading(false);
    apiCache[instanceKey] = newCache;
    nextToken[instanceKey] = newNext;
  };
  React.useEffect(() => {
    loadPage(pageIndex);
  }, [pageIndex]);
  React.useEffect(() => {
    setMaxViewed(Math.max(maxViewed, pageIndex));
  }, [pageIndex, maxViewed, setMaxViewed]);
  return (
    /* @ts-ignore: TS2322 */
    <div>
      <Collection
        type=\\"list\\"
        itemsPerPage={6}
        templateColumns=\\"1fr 1fr\\"
        autoFlow=\\"row\\"
        alignItems=\\"stretch\\"
        justifyContent=\\"stretch\\"
        itemsPerPage={pageSize}
        items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
        {...getOverrideProps(overrides, \\"AuthorProfileCollection\\")}
        {...rest}
      >
        {(item, index) => {
          if (loading) {
            return <Placeholder key={index} size=\\"large\\" />;
          }
          return (
            <AuthorProfile
              author={item}
              key={item.id}
              {...(overrideItems && overrideItems({ item, index }))}
            ></AuthorProfile>
          );
        }}
      </Collection>
      {isApiPagination && (
        <Pagination
          currentPage={pageIndex}
          totalPages={maxViewed}
          hasMorePages={hasMorePages}
          onNext={handleNextPage}
          onPrevious={handlePreviousPage}
          onChange={jumpToPage}
        />
      )}
    </div>
  );
}
"
`;

exports[`amplify render tests collection GraphQL should render collection with data binding 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { UserPreferences } from \\"../API\\";
import { listUserPreferences, listUsers } from \\"../graphql/queries\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { API } from \\"aws-amplify\\";
import {
  Button,
  ButtonProps,
  Collection,
  CollectionProps,
  Flex,
  FlexProps,
  Pagination,
  Placeholder,
} from \\"@aws-amplify/ui-react\\";
import { MyFlexProps } from \\"./MyFlex\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CollectionOfCustomButtonsOverridesProps = {
  CollectionOfCustomButtons?: PrimitiveOverrideProps<CollectionProps>;
  MyFlex?: PrimitiveOverrideProps<FlexProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    width?: Number;
    backgroundColor?: String;
    buttonColor?: UserPreferences;
    buttonEnabled?: UserPreferences;
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => MyFlexProps;
  } & {
    overrides?: CollectionOfCustomButtonsOverridesProps | undefined | null;
  }
>;

const nextToken = {};
const apiCache = {};
export default function CollectionOfCustomButtons(
  props: CollectionOfCustomButtonsProps
): React.ReactElement {
  const {
    width,
    backgroundColor,
    buttonColor: buttonColorProp,
    buttonEnabled: buttonEnabledProp,
    items: itemsProp,
    overrideItems,
    overrides,
    ...rest
  } = props;
  const [pageIndex, setPageIndex] = React.useState(1);
  const [hasMorePages, setHasMorePages] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [isApiPagination, setIsApiPagination] = React.useState(false);
  const [instanceKey, setInstanceKey] = React.useState(\\"newGuid\\");
  const [loading, setLoading] = React.useState(true);
  const [maxViewed, setMaxViewed] = React.useState(1);
  const pageSize = 4;
  React.useEffect(() => {
    nextToken[instanceKey] = \\"\\";
    apiCache[instanceKey] = [];
  }, [instanceKey]);
  React.useEffect(() => {
    setIsApiPagination(!!!itemsProp);
  }, [itemsProp]);
  const handlePreviousPage = () => {
    setPageIndex(pageIndex - 1);
  };
  const handleNextPage = () => {
    setPageIndex(pageIndex + 1);
  };
  const jumpToPage = (pageNum?: number) => {
    setPageIndex(pageNum!);
  };
  const loadPage = async (page: number) => {
    const cacheUntil = page * pageSize + 1;
    const newCache = apiCache[instanceKey].slice();
    let newNext = nextToken[instanceKey];
    while (newCache.length < cacheUntil && newNext != null) {
      setLoading(true);
      const variables: any = {
        limit: pageSize,
        filter: {
          and: [
            { age: { gt: \\"10\\" } },
            { lastName: { beginsWith: \\"L\\" } },
            {
              and: [
                { date: { ge: \\"2022-03-10\\" } },
                { date: { le: \\"2023-03-11\\" } },
              ],
            },
          ],
        },
      };
      if (newNext) {
        variables[\\"nextToken\\"] = newNext;
      }
      const result = (
        await API.graphql({
          query: listUsers,
          variables,
        })
      ).data.listUsers;
      var loaded = await Promise.all(
        result.items.map(async (item) => {
          return {
            ...item,
          };
        })
      );
      newCache.push(...loaded);
      newNext = result.nextToken;
    }
    const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
    setItems(cacheSlice);
    setHasMorePages(!!newNext);
    setLoading(false);
    apiCache[instanceKey] = newCache;
    nextToken[instanceKey] = newNext;
  };
  React.useEffect(() => {
    loadPage(pageIndex);
  }, [pageIndex]);
  React.useEffect(() => {
    setMaxViewed(Math.max(maxViewed, pageIndex));
  }, [pageIndex, maxViewed, setMaxViewed]);
  const buttonColorFilterObj = { userID: { eq: \\"user@email.com\\" } };
  const buttonColorDataStore = API.graphql({
    query: listUserPreferences,
    variables: { ...buttonColorFilterObj },
  }).items[0];
  const buttonColor =
    buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
  const buttonEnabledFilterObj = {
    and: [{ date: { ge: \\"2022-03-10\\" } }, { date: { le: \\"2023-03-11\\" } }],
  };
  const buttonEnabledDataStore = API.graphql({
    query: listUserPreferences,
    variables: { ...buttonEnabledFilterObj },
  }).items[0];
  const buttonEnabled =
    buttonEnabledProp !== undefined
      ? buttonEnabledProp
      : buttonEnabledDataStore;
  return (
    /* @ts-ignore: TS2322 */
    <div>
      <Collection
        type=\\"list\\"
        isPaginated={!isApiPagination}
        gap=\\"1.5rem\\"
        backgroundColor={backgroundColor}
        itemsPerPage={pageSize}
        items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
        {...getOverrideProps(overrides, \\"CollectionOfCustomButtons\\")}
        {...rest}
      >
        {(item, index) => {
          if (loading) {
            return <Placeholder key={index} size=\\"large\\" />;
          }
          return (
            <Flex
              key={item.id}
              {...(overrideItems && overrideItems({ item, index }))}
            >
              <Button
                labelWidth={width}
                backgroundColor={buttonColor?.favoriteColor}
                disabled={isDisabled}
                children={item.username || \\"hspain@gmail.com\\"}
                {...(overrideItems && overrideItems({ item, index }))}
              ></Button>
            </Flex>
          );
        }}
      </Collection>
      {isApiPagination && (
        <Pagination
          currentPage={pageIndex}
          totalPages={maxViewed}
          hasMorePages={hasMorePages}
          onNext={handleNextPage}
          onPrevious={handlePreviousPage}
          onChange={jumpToPage}
        />
      )}
    </div>
  );
}
"
`;

exports[`amplify render tests collection GraphQL should render collection with data binding with no predicate 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { listUntitledModels } from \\"../graphql/queries\\";
import ListingCard, { ListingCardProps } from \\"./ListingCard\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Collection,
  CollectionProps,
  Pagination,
  Placeholder,
} from \\"@aws-amplify/ui-react\\";
import { API } from \\"aws-amplify\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ListingCardCollectionOverridesProps = {
  ListingCardCollection?: PrimitiveOverrideProps<CollectionProps>;
  ListingCard?: ListingCardProps;
} & EscapeHatchProps;
export type ListingCardCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => ListingCardProps;
  } & {
    overrides?: ListingCardCollectionOverridesProps | undefined | null;
  }
>;

const nextToken = {};
const apiCache = {};
export default function ListingCardCollection(
  props: ListingCardCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [pageIndex, setPageIndex] = React.useState(1);
  const [hasMorePages, setHasMorePages] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [isApiPagination, setIsApiPagination] = React.useState(false);
  const [instanceKey, setInstanceKey] = React.useState(\\"newGuid\\");
  const [loading, setLoading] = React.useState(true);
  const [maxViewed, setMaxViewed] = React.useState(1);
  const pageSize = 4;
  React.useEffect(() => {
    nextToken[instanceKey] = \\"\\";
    apiCache[instanceKey] = [];
  }, [instanceKey]);
  React.useEffect(() => {
    setIsApiPagination(!!!itemsProp);
  }, [itemsProp]);
  const handlePreviousPage = () => {
    setPageIndex(pageIndex - 1);
  };
  const handleNextPage = () => {
    setPageIndex(pageIndex + 1);
  };
  const jumpToPage = (pageNum?: number) => {
    setPageIndex(pageNum!);
  };
  const loadPage = async (page: number) => {
    const cacheUntil = page * pageSize + 1;
    const newCache = apiCache[instanceKey].slice();
    let newNext = nextToken[instanceKey];
    while (newCache.length < cacheUntil && newNext != null) {
      setLoading(true);
      const variables: any = {
        limit: pageSize,
      };
      if (newNext) {
        variables[\\"nextToken\\"] = newNext;
      }
      const result = (
        await API.graphql({
          query: listUntitledModels,
          variables,
        })
      ).data.listUntitledModels;
      var loaded = await Promise.all(
        result.items.map(async (item) => {
          return {
            ...item,
          };
        })
      );
      newCache.push(...loaded);
      newNext = result.nextToken;
    }
    const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
    setItems(cacheSlice);
    setHasMorePages(!!newNext);
    setLoading(false);
    apiCache[instanceKey] = newCache;
    nextToken[instanceKey] = newNext;
  };
  React.useEffect(() => {
    loadPage(pageIndex);
  }, [pageIndex]);
  React.useEffect(() => {
    setMaxViewed(Math.max(maxViewed, pageIndex));
  }, [pageIndex, maxViewed, setMaxViewed]);
  return (
    /* @ts-ignore: TS2322 */
    <div>
      <Collection
        isPaginated={!isApiPagination}
        collectionType=\\"grid\\"
        type=\\"list\\"
        columns=\\"2\\"
        order=\\"left-to-right\\"
        itemsPerPage={pageSize}
        items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
        {...getOverrideProps(overrides, \\"ListingCardCollection\\")}
        {...rest}
      >
        {(item, index) => {
          if (loading) {
            return <Placeholder key={index} size=\\"large\\" />;
          }
          return (
            <ListingCard
              marginRight=\\"0\\"
              marginBottom=\\"0\\"
              marginTop=\\"0\\"
              marginLeft=\\"0\\"
              key={item.id}
              {...(overrideItems && overrideItems({ item, index }))}
            ></ListingCard>
          );
        }}
      </Collection>
      {isApiPagination && (
        <Pagination
          currentPage={pageIndex}
          totalPages={maxViewed}
          hasMorePages={hasMorePages}
          onNext={handleNextPage}
          onPrevious={handlePreviousPage}
          onChange={jumpToPage}
        />
      )}
    </div>
  );
}
"
`;

exports[`amplify render tests collection GraphQL should render collection without data binding 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import ListingCard, { ListingCardProps } from \\"./ListingCard\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Collection,
  CollectionProps,
  Pagination,
  Placeholder,
} from \\"@aws-amplify/ui-react\\";
import { API } from \\"aws-amplify\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ListingCardCollectionOverridesProps = {
  ListingCardCollection?: PrimitiveOverrideProps<CollectionProps>;
  ListingCard?: ListingCardProps;
} & EscapeHatchProps;
export type ListingCardCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => ListingCardProps;
  } & {
    overrides?: ListingCardCollectionOverridesProps | undefined | null;
  }
>;

const nextToken = {};
const apiCache = {};
export default function ListingCardCollection(
  props: ListingCardCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [pageIndex, setPageIndex] = React.useState(1);
  const [hasMorePages, setHasMorePages] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [isApiPagination, setIsApiPagination] = React.useState(false);
  const [instanceKey, setInstanceKey] = React.useState(\\"newGuid\\");
  const [loading, setLoading] = React.useState(true);
  const [maxViewed, setMaxViewed] = React.useState(1);
  const pageSize = 4;
  React.useEffect(() => {
    nextToken[instanceKey] = \\"\\";
    apiCache[instanceKey] = [];
  }, [instanceKey]);
  React.useEffect(() => {
    setIsApiPagination(!!!itemsProp);
  }, [itemsProp]);
  const handlePreviousPage = () => {
    setPageIndex(pageIndex - 1);
  };
  const handleNextPage = () => {
    setPageIndex(pageIndex + 1);
  };
  const jumpToPage = (pageNum?: number) => {
    setPageIndex(pageNum!);
  };
  const loadPage = async (page: number) => {
    const cacheUntil = page * pageSize + 1;
    const newCache = apiCache[instanceKey].slice();
    let newNext = nextToken[instanceKey];
    const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
    setItems(cacheSlice);
    setHasMorePages(!!newNext);
    setLoading(false);
    apiCache[instanceKey] = newCache;
    nextToken[instanceKey] = newNext;
  };
  React.useEffect(() => {
    loadPage(pageIndex);
  }, [pageIndex]);
  React.useEffect(() => {
    setMaxViewed(Math.max(maxViewed, pageIndex));
  }, [pageIndex, maxViewed, setMaxViewed]);
  return (
    /* @ts-ignore: TS2322 */
    <div>
      <Collection
        type=\\"list\\"
        isPaginated={!isApiPagination}
        itemsPerPage={pageSize}
        items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
        {...getOverrideProps(overrides, \\"ListingCardCollection\\")}
        {...rest}
      >
        {(item, index) => {
          if (loading) {
            return <Placeholder key={index} size=\\"large\\" />;
          }
          return (
            <ListingCard
              key={item.id}
              {...(overrideItems && overrideItems({ item, index }))}
            ></ListingCard>
          );
        }}
      </Collection>
      {isApiPagination && (
        <Pagination
          currentPage={pageIndex}
          totalPages={maxViewed}
          hasMorePages={hasMorePages}
          onNext={handleNextPage}
          onPrevious={handlePreviousPage}
          onChange={jumpToPage}
        />
      )}
    </div>
  );
}
"
`;

exports[`amplify render tests collection GraphQL should render nested query if model has a hasMany relationship 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { listAuthors } from \\"../graphql/queries\\";
import AuthorProfile, { AuthorProfileProps } from \\"./AuthorProfile\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Collection,
  CollectionProps,
  Pagination,
  Placeholder,
} from \\"@aws-amplify/ui-react\\";
import { API } from \\"aws-amplify\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type AuthorProfileCollectionOverridesProps = {
  AuthorProfileCollection?: PrimitiveOverrideProps<CollectionProps>;
  AuthorProfile?: AuthorProfileProps;
} & EscapeHatchProps;
export type AuthorProfileCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => AuthorProfileProps;
  } & {
    overrides?: AuthorProfileCollectionOverridesProps | undefined | null;
  }
>;

const nextToken = {};
const apiCache = {};
export default function AuthorProfileCollection(
  props: AuthorProfileCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [pageIndex, setPageIndex] = React.useState(1);
  const [hasMorePages, setHasMorePages] = React.useState(true);
  const [items, setItems] = React.useState([]);
  const [isApiPagination, setIsApiPagination] = React.useState(false);
  const [instanceKey, setInstanceKey] = React.useState(\\"newGuid\\");
  const [loading, setLoading] = React.useState(true);
  const [maxViewed, setMaxViewed] = React.useState(1);
  const pageSize = 4;
  React.useEffect(() => {
    nextToken[instanceKey] = \\"\\";
    apiCache[instanceKey] = [];
  }, [instanceKey]);
  React.useEffect(() => {
    setIsApiPagination(!!!itemsProp);
  }, [itemsProp]);
  const handlePreviousPage = () => {
    setPageIndex(pageIndex - 1);
  };
  const handleNextPage = () => {
    setPageIndex(pageIndex + 1);
  };
  const jumpToPage = (pageNum?: number) => {
    setPageIndex(pageNum!);
  };
  const loadPage = async (page: number) => {
    const cacheUntil = page * pageSize + 1;
    const newCache = apiCache[instanceKey].slice();
    let newNext = nextToken[instanceKey];
    while (newCache.length < cacheUntil && newNext != null) {
      setLoading(true);
      const variables: any = {
        limit: pageSize,
      };
      if (newNext) {
        variables[\\"nextToken\\"] = newNext;
      }
      const result = (
        await API.graphql({
          query: listAuthors,
          variables,
        })
      ).data.listAuthors;
      var loaded = await Promise.all(
        result.items.map(async (item) => {
          const Books = (
            await API.graphql({
              query: booksByAuthorID,
              variables: { authorID: item.id },
            })
          ).data.booksByAuthorID.items;
          const Publishers = (
            await API.graphql({
              query: publishersByAuthorID,
              variables: { authorID: item.id },
            })
          ).data.publishersByAuthorID.items;
          return {
            ...item,
            Books,
            Publisher,
          };
        })
      );
      newCache.push(...loaded);
      newNext = result.nextToken;
    }
    const cacheSlice = newCache.slice((page - 1) * pageSize, page * pageSize);
    setItems(cacheSlice);
    setHasMorePages(!!newNext);
    setLoading(false);
    apiCache[instanceKey] = newCache;
    nextToken[instanceKey] = newNext;
  };
  React.useEffect(() => {
    loadPage(pageIndex);
  }, [pageIndex]);
  React.useEffect(() => {
    setMaxViewed(Math.max(maxViewed, pageIndex));
  }, [pageIndex, maxViewed, setMaxViewed]);
  return (
    /* @ts-ignore: TS2322 */
    <div>
      <Collection
        type=\\"list\\"
        itemsPerPage={6}
        templateColumns=\\"1fr 1fr\\"
        autoFlow=\\"row\\"
        alignItems=\\"stretch\\"
        justifyContent=\\"stretch\\"
        itemsPerPage={pageSize}
        items={itemsProp || (loading ? new Array(pageSize).fill({}) : items)}
        {...getOverrideProps(overrides, \\"AuthorProfileCollection\\")}
        {...rest}
      >
        {(item, index) => {
          if (loading) {
            return <Placeholder key={index} size=\\"large\\" />;
          }
          return (
            <AuthorProfile
              author={item}
              key={item.id}
              {...(overrideItems && overrideItems({ item, index }))}
            ></AuthorProfile>
          );
        }}
      </Collection>
      {isApiPagination && (
        <Pagination
          currentPage={pageIndex}
          totalPages={maxViewed}
          hasMorePages={hasMorePages}
          onNext={handleNextPage}
          onPrevious={handlePreviousPage}
          onChange={jumpToPage}
        />
      )}
    </div>
  );
}
"
`;

exports[`amplify render tests collection should not render nested query if the data schema is not provided 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Author } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import AuthorProfile, { AuthorProfileProps } from \\"./AuthorProfile\\";
import { Collection, CollectionProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type AuthorProfileCollectionOverridesProps = {
  AuthorProfileCollection?: PrimitiveOverrideProps<CollectionProps>;
  AuthorProfile?: AuthorProfileProps;
} & EscapeHatchProps;
export type AuthorProfileCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => AuthorProfileProps;
  } & {
    overrides?: AuthorProfileCollectionOverridesProps | undefined | null;
  }
>;
export default function AuthorProfileCollection(
  props: AuthorProfileCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [items, setItems] = React.useState(undefined);
  const itemsDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: Author,
  }).items;
  React.useEffect(() => {
    if (itemsProp !== undefined) {
      setItems(itemsProp);
      return;
    }
    setItems(itemsDataStore);
  }, [itemsProp, itemsDataStore]);
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      itemsPerPage={6}
      templateColumns=\\"1fr 1fr\\"
      autoFlow=\\"row\\"
      alignItems=\\"stretch\\"
      justifyContent=\\"stretch\\"
      items={items || []}
      {...getOverrideProps(overrides, \\"AuthorProfileCollection\\")}
      {...rest}
    >
      {(item, index) => (
        <AuthorProfile
          author={item}
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        ></AuthorProfile>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render collection with data binding 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { UserPreferences, User } from \\"../models\\";
import {
  EscapeHatchProps,
  createDataStorePredicate,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Collection,
  CollectionProps,
  Flex,
  FlexProps,
} from \\"@aws-amplify/ui-react\\";
import { MyFlexProps } from \\"./MyFlex\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CollectionOfCustomButtonsOverridesProps = {
  CollectionOfCustomButtons?: PrimitiveOverrideProps<CollectionProps>;
  MyFlex?: PrimitiveOverrideProps<FlexProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    width?: Number;
    backgroundColor?: String;
    buttonColor?: UserPreferences;
    buttonEnabled?: UserPreferences;
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => MyFlexProps;
  } & {
    overrides?: CollectionOfCustomButtonsOverridesProps | undefined | null;
  }
>;
export default function CollectionOfCustomButtons(
  props: CollectionOfCustomButtonsProps
): React.ReactElement {
  const {
    width,
    backgroundColor,
    buttonColor: buttonColorProp,
    buttonEnabled: buttonEnabledProp,
    items,
    overrideItems,
    overrides,
    ...rest
  } = props;
  const buttonUserFilterObj = {
    and: [
      { field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
      { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
      {
        and: [
          { field: \\"date\\", operator: \\"ge\\", operand: \\"2022-03-10\\" },
          { field: \\"date\\", operator: \\"le\\", operand: \\"2023-03-11\\" },
        ],
      },
    ],
  };
  const buttonUserFilter = createDataStorePredicate<User>(buttonUserFilterObj);
  const [buttonUser, setButtonUser] = React.useState(undefined);
  const buttonUserDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: User,
    criteria: buttonUserFilter,
  }).items;
  React.useEffect(() => {
    if (items !== undefined) {
      setButtonUser(items);
      return;
    }
    setButtonUser(buttonUserDataStore);
  }, [items, buttonUserDataStore]);
  const buttonColorFilterObj = {
    field: \\"userID\\",
    operand: \\"user@email.com\\",
    operator: \\"eq\\",
  };
  const buttonColorFilter =
    createDataStorePredicate<UserPreferences>(buttonColorFilterObj);
  const buttonColorDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: UserPreferences,
    criteria: buttonColorFilter,
  }).items[0];
  const buttonColor =
    buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
  const buttonEnabledFilterObj = {
    and: [
      { field: \\"date\\", operator: \\"ge\\", operand: \\"2022-03-10\\" },
      { field: \\"date\\", operator: \\"le\\", operand: \\"2023-03-11\\" },
    ],
  };
  const buttonEnabledFilter = createDataStorePredicate<UserPreferences>(
    buttonEnabledFilterObj
  );
  const buttonEnabledDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: UserPreferences,
    criteria: buttonEnabledFilter,
  }).items[0];
  const buttonEnabled =
    buttonEnabledProp !== undefined
      ? buttonEnabledProp
      : buttonEnabledDataStore;
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      isPaginated={true}
      gap=\\"1.5rem\\"
      backgroundColor={backgroundColor}
      items={buttonUser || []}
      {...getOverrideProps(overrides, \\"CollectionOfCustomButtons\\")}
      {...rest}
    >
      {(item, index) => (
        <Flex
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        >
          <Button
            labelWidth={width}
            backgroundColor={buttonColor?.favoriteColor}
            disabled={isDisabled}
            children={item.username || \\"hspain@gmail.com\\"}
            {...(overrideItems && overrideItems({ item, index }))}
          ></Button>
        </Flex>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render collection with data binding and sort 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { UserPreferences, User } from \\"../models\\";
import {
  EscapeHatchProps,
  createDataStorePredicate,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection, SortPredicate } from \\"@aws-amplify/datastore\\";
import {
  Button,
  ButtonProps,
  Collection,
  CollectionProps,
  Flex,
  FlexProps,
} from \\"@aws-amplify/ui-react\\";
import { MyFlexProps } from \\"./MyFlex\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CollectionOfCustomButtonsOverridesProps = {
  CollectionOfCustomButtons?: PrimitiveOverrideProps<CollectionProps>;
  MyFlex?: PrimitiveOverrideProps<FlexProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    width?: Number;
    backgroundColor?: String;
    buttonColor?: UserPreferences;
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => MyFlexProps;
  } & {
    overrides?: CollectionOfCustomButtonsOverridesProps | undefined | null;
  }
>;
export default function CollectionOfCustomButtons(
  props: CollectionOfCustomButtonsProps
): React.ReactElement {
  const {
    width,
    backgroundColor,
    buttonColor: buttonColorProp,
    items,
    overrideItems,
    overrides,
    ...rest
  } = props;
  const buttonUserFilterObj = {
    and: [
      { field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
      { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
    ],
  };
  const buttonUserFilter = createDataStorePredicate<User>(buttonUserFilterObj);
  const buttonUserPagination = {
    sort: (s: SortPredicate<User>) =>
      s.firstName(SortDirection.ASCENDING).lastName(SortDirection.DESCENDING),
  };
  const [buttonUser, setButtonUser] = React.useState(undefined);
  const buttonUserDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: User,
    criteria: buttonUserFilter,
    pagination: buttonUserPagination,
  }).items;
  React.useEffect(() => {
    if (items !== undefined) {
      setButtonUser(items);
      return;
    }
    setButtonUser(buttonUserDataStore);
  }, [items, buttonUserDataStore]);
  const buttonColorFilterObj = {
    field: \\"userID\\",
    operand: \\"user@email.com\\",
    operator: \\"eq\\",
  };
  const buttonColorFilter =
    createDataStorePredicate<UserPreferences>(buttonColorFilterObj);
  const buttonColorDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: UserPreferences,
    criteria: buttonColorFilter,
  }).items[0];
  const buttonColor =
    buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      isPaginated={true}
      gap=\\"1.5rem\\"
      backgroundColor={backgroundColor}
      items={buttonUser || []}
      {...getOverrideProps(overrides, \\"CollectionOfCustomButtons\\")}
      {...rest}
    >
      {(item, index) => (
        <Flex
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        >
          <Button
            labelWidth={width}
            backgroundColor={buttonColor?.favoriteColor}
            disabled={isDisabled}
            children={item.username || \\"hspain@gmail.com\\"}
            {...(overrideItems && overrideItems({ item, index }))}
          ></Button>
        </Flex>
      )}
    </Collection>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests collection should render collection with data binding if binding name is items 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { UserPreferences, User } from \\"../models\\";
import {
  EscapeHatchProps,
  createDataStorePredicate,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Collection,
  CollectionProps,
  Flex,
  FlexProps,
} from \\"@aws-amplify/ui-react\\";
import { MyFlexProps } from \\"./MyFlex\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CollectionOfCustomButtonsOverridesProps = {
  CollectionOfCustomButtons?: PrimitiveOverrideProps<CollectionProps>;
  MyFlex?: PrimitiveOverrideProps<FlexProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CollectionOfCustomButtonsProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    width?: Number;
    backgroundColor?: String;
    buttonColor?: UserPreferences;
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => MyFlexProps;
  } & {
    overrides?: CollectionOfCustomButtonsOverridesProps | undefined | null;
  }
>;
export default function CollectionOfCustomButtons(
  props: CollectionOfCustomButtonsProps
): React.ReactElement {
  const {
    width,
    backgroundColor,
    buttonColor: buttonColorProp,
    items: itemsProp,
    overrideItems,
    overrides,
    ...rest
  } = props;
  const itemsFilterObj = {
    and: [
      { field: \\"age\\", operand: 10, operator: \\"eq\\" },
      { field: \\"lastName\\", operand: \\"L\\", operator: \\"beginsWith\\" },
    ],
  };
  const itemsFilter = createDataStorePredicate<User>(itemsFilterObj);
  const [items, setItems] = React.useState(undefined);
  const itemsDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: User,
    criteria: itemsFilter,
  }).items;
  React.useEffect(() => {
    if (itemsProp !== undefined) {
      setItems(itemsProp);
      return;
    }
    setItems(itemsDataStore);
  }, [itemsProp, itemsDataStore]);
  const buttonColorFilterObj = {
    field: \\"userID\\",
    operand: \\"user@email.com\\",
    operator: \\"eq\\",
  };
  const buttonColorFilter =
    createDataStorePredicate<UserPreferences>(buttonColorFilterObj);
  const buttonColorDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: UserPreferences,
    criteria: buttonColorFilter,
  }).items[0];
  const buttonColor =
    buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      isPaginated={true}
      gap=\\"1.5rem\\"
      backgroundColor={backgroundColor}
      items={items || []}
      {...getOverrideProps(overrides, \\"CollectionOfCustomButtons\\")}
      {...rest}
    >
      {(item, index) => (
        <Flex
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        >
          <Button
            labelWidth={width}
            backgroundColor={buttonColor?.favoriteColor}
            disabled={isDisabled}
            children={item.username || \\"hspain@gmail.com\\"}
            {...(overrideItems && overrideItems({ item, index }))}
          ></Button>
        </Flex>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render collection with data binding with no predicate 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { UntitledModel } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import ListingCard, { ListingCardProps } from \\"./ListingCard\\";
import { Collection, CollectionProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ListingCardCollectionOverridesProps = {
  ListingCardCollection?: PrimitiveOverrideProps<CollectionProps>;
  ListingCard?: ListingCardProps;
} & EscapeHatchProps;
export type ListingCardCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => ListingCardProps;
  } & {
    overrides?: ListingCardCollectionOverridesProps | undefined | null;
  }
>;
export default function ListingCardCollection(
  props: ListingCardCollectionProps
): React.ReactElement {
  const { items, overrideItems, overrides, ...rest } = props;
  const [bananas, setBananas] = React.useState(undefined);
  const bananasDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: UntitledModel,
  }).items;
  React.useEffect(() => {
    if (items !== undefined) {
      setBananas(items);
      return;
    }
    setBananas(bananasDataStore);
  }, [items, bananasDataStore]);
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      isPaginated=\\"true\\"
      collectionType=\\"grid\\"
      type=\\"list\\"
      columns=\\"2\\"
      order=\\"left-to-right\\"
      items={bananas || []}
      {...getOverrideProps(overrides, \\"ListingCardCollection\\")}
      {...rest}
    >
      {(item, index) => (
        <ListingCard
          marginRight=\\"0\\"
          marginBottom=\\"0\\"
          marginTop=\\"0\\"
          marginLeft=\\"0\\"
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        ></ListingCard>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render collection without data binding 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import ListingCard, { ListingCardProps } from \\"./ListingCard\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Collection, CollectionProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ListingCardCollectionOverridesProps = {
  ListingCardCollection?: PrimitiveOverrideProps<CollectionProps>;
  ListingCard?: ListingCardProps;
} & EscapeHatchProps;
export type ListingCardCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => ListingCardProps;
  } & {
    overrides?: ListingCardCollectionOverridesProps | undefined | null;
  }
>;
export default function ListingCardCollection(
  props: ListingCardCollectionProps
): React.ReactElement {
  const { items, overrideItems, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      isPaginated=\\"true\\"
      items={items || []}
      {...getOverrideProps(overrides, \\"ListingCardCollection\\")}
      {...rest}
    >
      {(item, index) => (
        <ListingCard
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        ></ListingCard>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render concatenated keys if model has composite keys 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { CompositePerson } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import CompositePersonProfile, {
  CompositePersonProfileProps,
} from \\"./CompositePersonProfile\\";
import { Collection, CollectionProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CompositePersonProfileCollectionOverridesProps = {
  CompositePersonProfileCollection?: PrimitiveOverrideProps<CollectionProps>;
  CompositePersonProfile?: CompositePersonProfileProps;
} & EscapeHatchProps;
export type CompositePersonProfileCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => CompositePersonProfileProps;
  } & {
    overrides?:
      | CompositePersonProfileCollectionOverridesProps
      | undefined
      | null;
  }
>;
export default function CompositePersonProfileCollection(
  props: CompositePersonProfileCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [items, setItems] = React.useState(undefined);
  const itemsDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: CompositePerson,
  }).items;
  React.useEffect(() => {
    if (itemsProp !== undefined) {
      setItems(itemsProp);
      return;
    }
    setItems(itemsDataStore);
  }, [itemsProp, itemsDataStore]);
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      itemsPerPage={6}
      templateColumns=\\"1fr 1fr\\"
      autoFlow=\\"row\\"
      alignItems=\\"stretch\\"
      justifyContent=\\"stretch\\"
      items={items || []}
      {...getOverrideProps(overrides, \\"CompositePersonProfileCollection\\")}
      {...rest}
    >
      {(item, index) => (
        <CompositePersonProfile
          author={item}
          key={\`\${item.name}\${item.description}\`}
          {...(overrideItems && overrideItems({ item, index }))}
        ></CompositePersonProfile>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render if model name collides with component types 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Flex as Flex0, FlexModel, Button as Button0 } from \\"../models\\";
import {
  EscapeHatchProps,
  createDataStorePredicate,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection, SortPredicate } from \\"@aws-amplify/datastore\\";
import {
  Button,
  ButtonProps,
  Collection,
  CollectionProps,
  Flex,
  FlexProps,
} from \\"@aws-amplify/ui-react\\";
import { MyFlexProps } from \\"./MyFlex\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CollectionWithModelNameCollisionsOverridesProps = {
  CollectionWithModelNameCollisions?: PrimitiveOverrideProps<CollectionProps>;
  MyFlex?: PrimitiveOverrideProps<FlexProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CollectionWithModelNameCollisionsProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    backgroundColor?: String;
    buttonColor?: Flex0;
    buttonShape?: FlexModel;
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => MyFlexProps;
  } & {
    overrides?:
      | CollectionWithModelNameCollisionsOverridesProps
      | undefined
      | null;
  }
>;
export default function CollectionWithModelNameCollisions(
  props: CollectionWithModelNameCollisionsProps
): React.ReactElement {
  const {
    backgroundColor,
    buttonColor: buttonColorProp,
    buttonShape: buttonShapeProp,
    items,
    overrideItems,
    overrides,
    ...rest
  } = props;
  const buttonModelFilterObj = {
    and: [
      { field: \\"age\\", operand: \\"10\\", operator: \\"gt\\" },
      { field: \\"isActive\\", operand: true, operator: \\"eq\\" },
    ],
  };
  const buttonModelFilter =
    createDataStorePredicate<Button0>(buttonModelFilterObj);
  const buttonModelPagination = {
    sort: (s: SortPredicate<Button0>) => s.lastName(SortDirection.ASCENDING),
  };
  const [buttonModel, setButtonModel] = React.useState(undefined);
  const buttonModelDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: Button0,
    criteria: buttonModelFilter,
    pagination: buttonModelPagination,
  }).items;
  React.useEffect(() => {
    if (items !== undefined) {
      setButtonModel(items);
      return;
    }
    setButtonModel(buttonModelDataStore);
  }, [items, buttonModelDataStore]);
  const buttonColorFilterObj = {
    field: \\"userID\\",
    operand: \\"user@email.com\\",
    operator: \\"eq\\",
  };
  const buttonColorFilter =
    createDataStorePredicate<Flex0>(buttonColorFilterObj);
  const buttonColorDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: Flex0,
    criteria: buttonColorFilter,
  }).items[0];
  const buttonColor =
    buttonColorProp !== undefined ? buttonColorProp : buttonColorDataStore;
  const buttonShapeFilterObj = {
    field: \\"userID\\",
    operand: \\"user@email.com\\",
    operator: \\"eq\\",
  };
  const buttonShapeFilter =
    createDataStorePredicate<FlexModel>(buttonShapeFilterObj);
  const buttonShapeDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: FlexModel,
    criteria: buttonShapeFilter,
  }).items[0];
  const buttonShape =
    buttonShapeProp !== undefined ? buttonShapeProp : buttonShapeDataStore;
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      items={buttonModel || []}
      {...getOverrideProps(overrides, \\"CollectionWithModelNameCollisions\\")}
      {...rest}
    >
      {(item, index) => (
        <Flex
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        >
          <Button
            backgroundColor={buttonColor?.favoriteColor}
            children={item.lastName}
            {...(overrideItems && overrideItems({ item, index }))}
          ></Button>
        </Flex>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests collection should render nested query if model has a hasMany relationship 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Author } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import AuthorProfile, { AuthorProfileProps } from \\"./AuthorProfile\\";
import { Collection, CollectionProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type AuthorProfileCollectionOverridesProps = {
  AuthorProfileCollection?: PrimitiveOverrideProps<CollectionProps>;
  AuthorProfile?: AuthorProfileProps;
} & EscapeHatchProps;
export type AuthorProfileCollectionProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => AuthorProfileProps;
  } & {
    overrides?: AuthorProfileCollectionOverridesProps | undefined | null;
  }
>;
export default function AuthorProfileCollection(
  props: AuthorProfileCollectionProps
): React.ReactElement {
  const { items: itemsProp, overrideItems, overrides, ...rest } = props;
  const [items, setItems] = React.useState(undefined);
  const itemsDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: Author,
  }).items;
  React.useEffect(() => {
    if (itemsProp !== undefined) {
      setItems(itemsProp);
      return;
    }
    async function setItemsFromDataStore() {
      var loaded = await Promise.all(
        itemsDataStore.map(async (item) => ({
          ...item,
          Books: await item.Books.toArray(),
          Publisher: await item.Publisher,
        }))
      );
      setItems(loaded);
    }
    setItemsFromDataStore();
  }, [itemsProp, itemsDataStore]);
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      type=\\"list\\"
      itemsPerPage={6}
      templateColumns=\\"1fr 1fr\\"
      autoFlow=\\"row\\"
      alignItems=\\"stretch\\"
      justifyContent=\\"stretch\\"
      items={items || []}
      {...getOverrideProps(overrides, \\"AuthorProfileCollection\\")}
      {...rest}
    >
      {(item, index) => (
        <AuthorProfile
          author={item}
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        ></AuthorProfile>
      )}
    </Collection>
  );
}
"
`;

exports[`amplify render tests complex component tests should generate a button within a view component 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps, View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ViewWithButtonOverridesProps = {
  ViewWithButton?: PrimitiveOverrideProps<ViewProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ViewWithButtonProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ViewWithButtonOverridesProps | undefined | null;
  }
>;
export default function ViewWithButton(
  props: ViewWithButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View {...getOverrideProps(overrides, \\"ViewWithButton\\")} {...rest}>
      <Button
        color=\\"#ff0000\\"
        width=\\"20px\\"
        {...getOverrideProps(overrides, \\"MyButton\\")}
      ></Button>
    </View>
  );
}
"
`;

exports[`amplify render tests complex component tests should generate a component with custom child (malformed property) 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
import { View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ViewWithCustomButtonOverridesProps = {
  ViewWithCustomButton?: PrimitiveOverrideProps<ViewProps>;
  MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export type ViewWithCustomButtonProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ViewWithCustomButtonOverridesProps | undefined | null;
  }
>;
export default function ViewWithCustomButton(
  props: ViewWithCustomButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View {...getOverrideProps(overrides, \\"ViewWithCustomButton\\")} {...rest}>
      <CustomButton
        color={\`\${\\"Concatenated \\"}\${\\"Value!\\"}\`}
        {...getOverrideProps(overrides, \\"MyCustomButton\\")}
      ></CustomButton>
    </View>
  );
}
"
`;

exports[`amplify render tests complex component tests should generate a component with custom child 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
import { View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ViewWithCustomButtonOverridesProps = {
  ViewWithCustomButton?: PrimitiveOverrideProps<ViewProps>;
  MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export type ViewWithCustomButtonProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ViewWithCustomButtonOverridesProps | undefined | null;
  }
>;
export default function ViewWithCustomButton(
  props: ViewWithCustomButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View {...getOverrideProps(overrides, \\"ViewWithCustomButton\\")} {...rest}>
      <CustomButton
        color=\\"#ff0000\\"
        width=\\"20px\\"
        {...getOverrideProps(overrides, \\"MyCustomButton\\")}
      ></CustomButton>
    </View>
  );
}
"
`;

exports[`amplify render tests complex component tests should generate a component with exposeAs prop 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps, View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ViewWithButtonOverridesProps = {
  ViewWithButton?: PrimitiveOverrideProps<ViewProps>;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ViewWithButtonProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ViewWithButtonOverridesProps | undefined | null;
  }
>;
export default function ViewWithButton(
  props: ViewWithButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View {...getOverrideProps(overrides, \\"ViewWithButton\\")} {...rest}>
      <Button
        color=\\"#ff0000\\"
        width=\\"20px\\"
        {...getOverrideProps(overrides, \\"MyButton\\")}
      ></Button>
    </View>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 1 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest1OverridesProps = {
  ComplexTest1?: PrimitiveOverrideProps<FlexProps>;
  \\"Hi harriso\\"?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ComplexTest1Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest1OverridesProps | undefined | null;
  }
>;
export default function ComplexTest1(
  props: ComplexTest1Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"34px 56px 34px 56px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      overflow=\\"hidden\\"
      alignItems=\\"flex-start\\"
      gap=\\"10px\\"
      position=\\"relative\\"
      direction=\\"row\\"
      {...getOverrideProps(overrides, \\"ComplexTest1\\")}
      {...rest}
    >
      <Text
        padding=\\"0px 0px 0px 0px\\"
        fontFamily=\\"Roboto\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        width=\\"52px\\"
        fontSize=\\"12px\\"
        lineHeight=\\"14.0625px\\"
        position=\\"relative\\"
        fontWeight=\\"400\\"
        height=\\"14px\\"
        children=\\"Hi harriso\\"
        {...getOverrideProps(overrides, \\"Hi harriso\\")}
      ></Text>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 2 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest2OverridesProps = {
  ComplexTest2?: PrimitiveOverrideProps<FlexProps>;
  Container?: PrimitiveOverrideProps<FlexProps>;
  RectangleRed?: PrimitiveOverrideProps<ViewProps>;
  RectangleYellow?: PrimitiveOverrideProps<ViewProps>;
} & EscapeHatchProps;
export type ComplexTest2Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest2OverridesProps | undefined | null;
  }
>;
export default function ComplexTest2(
  props: ComplexTest2Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"0px 0px 0px 0px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      alignItems=\\"flex-start\\"
      gap=\\"0\\"
      width=\\"153px\\"
      position=\\"relative\\"
      direction=\\"row\\"
      height=\\"289px\\"
      {...getOverrideProps(overrides, \\"ComplexTest2\\")}
      {...rest}
    >
      <Flex
        padding=\\"10px 10px 10px 10px\\"
        alignSelf=\\"stretch\\"
        flexGrow=\\"1\\"
        overflow=\\"hidden\\"
        gap=\\"10px\\"
        width=\\"100%\\"
        position=\\"relative\\"
        height=\\"100%\\"
        direction=\\"column\\"
        {...getOverrideProps(overrides, \\"Container\\")}
      >
        <View
          width=\\"123px\\"
          padding=\\"0px 0px 0px 0px\\"
          backgroundColor=\\"rgb(255,0,0)\\"
          position=\\"relative\\"
          src=\\"https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!\\"
          height=\\"125px\\"
          {...getOverrideProps(overrides, \\"RectangleRed\\")}
        ></View>
        <View
          width=\\"123px\\"
          padding=\\"0px 0px 0px 0px\\"
          backgroundColor=\\"rgb(219.30000364780426,255,0)\\"
          position=\\"relative\\"
          src=\\"https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!\\"
          height=\\"122px\\"
          {...getOverrideProps(overrides, \\"RectangleYellow\\")}
        ></View>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 3 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  Text,
  TextProps,
  View,
  ViewProps,
} from \\"@aws-amplify/ui-react\\";
import ReneButton, { ReneButtonProps } from \\"./ReneButton\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest3OverridesProps = {
  ComplexTest3?: PrimitiveOverrideProps<FlexProps>;
  \\"Hello World!\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Rectangle 58\\"?: PrimitiveOverrideProps<ViewProps>;
  ReneButton?: ReneButtonProps;
  \\"Testing 123\\"?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ComplexTest3Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest3OverridesProps | undefined | null;
  }
>;
export default function ComplexTest3(
  props: ComplexTest3Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"20px 20px 20px 20px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      overflow=\\"hidden\\"
      alignItems=\\"center\\"
      gap=\\"80px\\"
      position=\\"relative\\"
      justifyContent=\\"center\\"
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"ComplexTest3\\")}
      {...rest}
    >
      <Text
        padding=\\"0px 0px 0px 0px\\"
        fontFamily=\\"Inter\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        width=\\"146px\\"
        fontSize=\\"24px\\"
        lineHeight=\\"28.80000114440918px\\"
        position=\\"relative\\"
        fontWeight=\\"400\\"
        height=\\"29px\\"
        children=\\"Hello World!\\"
        {...getOverrideProps(overrides, \\"Hello World!\\")}
      ></Text>
      <View
        width=\\"390px\\"
        padding=\\"0px 0px 0px 0px\\"
        backgroundColor=\\"rgb(196.00000351667404,196.00000351667404,196.00000351667404)\\"
        position=\\"relative\\"
        src=\\"https://via.placeholder.com/430x452?text=Amplify+Studio+is+Awesome!\\"
        height=\\"69px\\"
        {...getOverrideProps(overrides, \\"Rectangle 58\\")}
      ></View>
      <ReneButton
        width=\\"293px\\"
        height=\\"45px\\"
        {...getOverrideProps(overrides, \\"ReneButton\\")}
      ></ReneButton>
      <Text
        padding=\\"0px 0px 0px 0px\\"
        fontFamily=\\"Inter\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        width=\\"138px\\"
        fontSize=\\"24px\\"
        lineHeight=\\"28.80000114440918px\\"
        position=\\"relative\\"
        fontWeight=\\"400\\"
        height=\\"29px\\"
        children=\\"Testing 123\\"
        {...getOverrideProps(overrides, \\"Testing 123\\")}
      ></Text>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 4 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
  mergeVariantsAndOverrides,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest4OverridesProps = {
  ComplexTest4?: PrimitiveOverrideProps<FlexProps>;
  GroupTest?: PrimitiveOverrideProps<FlexProps>;
  RectangleGreen?: PrimitiveOverrideProps<ViewProps>;
  RectangleBlue?: PrimitiveOverrideProps<ViewProps>;
} & EscapeHatchProps;
export type ComplexTest4Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    colors?: \\"Red/Orange\\";
  } & {
    overrides?: ComplexTest4OverridesProps | undefined | null;
  }
>;
export default function ComplexTest4(
  props: ComplexTest4Props
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      overrides: {
        ComplexTest4: {
          padding: \\"10px 10px 10px 10px\\",
          backgroundColor: \\"rgb(255,255,255)\\",
          overflow: \\"hidden\\",
          alignItems: \\"flex-start\\",
          gap: \\"10px\\",
          position: \\"relative\\",
          direction: \\"row\\",
        },
        RectangleBlue: {
          padding: \\"0px 0px 0px 0px\\",
          backgroundColor: \\"rgb(255,153.00000607967377,0)\\",
          top: \\"1px\\",
          left: \\"203px\\",
          src: \\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\",
          width: \\"120px\\",
          position: \\"absolute\\",
          height: \\"122px\\",
        },
        RectangleGreen: {
          padding: \\"0px 0px 0px 0px\\",
          backgroundColor: \\"rgb(255,0,0)\\",
          top: \\"0px\\",
          left: \\"0px\\",
          src: \\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\",
          width: \\"122px\\",
          position: \\"absolute\\",
          height: \\"123px\\",
        },
        GroupTest: {
          width: \\"323px\\",
          padding: \\"0px 0px 0px 0px\\",
          position: \\"relative\\",
          height: \\"123px\\",
        },
      },
      variantValues: { colors: \\"Red/Orange\\" },
    },
  ];
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"10px 10px 10px 10px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      overflow=\\"hidden\\"
      alignItems=\\"flex-start\\"
      gap=\\"10px\\"
      position=\\"relative\\"
      direction=\\"row\\"
      {...getOverrideProps(overrides, \\"ComplexTest4\\")}
      {...rest}
    >
      <Flex
        width=\\"323px\\"
        padding=\\"0px 0px 0px 0px\\"
        position=\\"relative\\"
        height=\\"123px\\"
        {...getOverrideProps(overrides, \\"GroupTest\\")}
      >
        <View
          padding=\\"0px 0px 0px 0px\\"
          backgroundColor=\\"rgb(35.699965953826904,0,255)\\"
          top=\\"0px\\"
          left=\\"0px\\"
          src=\\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\"
          width=\\"122px\\"
          position=\\"absolute\\"
          height=\\"123px\\"
          {...getOverrideProps(overrides, \\"RectangleGreen\\")}
        ></View>
        <View
          padding=\\"0px 0px 0px 0px\\"
          backgroundColor=\\"rgb(0,255,25.49997568130493)\\"
          top=\\"1px\\"
          left=\\"203px\\"
          src=\\"https://via.placeholder.com/323x123?text=Amplify+Studio+is+Awesome!\\"
          width=\\"120px\\"
          position=\\"absolute\\"
          height=\\"122px\\"
          {...getOverrideProps(overrides, \\"RectangleBlue\\")}
        ></View>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 5 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest5OverridesProps = {
  ComplexTest5?: PrimitiveOverrideProps<FlexProps>;
  RectangleGreen?: PrimitiveOverrideProps<ViewProps>;
  RectangleBlue?: PrimitiveOverrideProps<ViewProps>;
} & EscapeHatchProps;
export type ComplexTest5Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest5OverridesProps | undefined | null;
  }
>;
export default function ComplexTest5(
  props: ComplexTest5Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"0px 0px 0px 0px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      position=\\"relative\\"
      alignItems=\\"flex-start\\"
      gap=\\"0\\"
      direction=\\"row\\"
      {...getOverrideProps(overrides, \\"ComplexTest5\\")}
      {...rest}
    >
      <View
        width=\\"120px\\"
        padding=\\"0px 0px 0px 0px\\"
        backgroundColor=\\"rgb(35.699965953826904,0,255)\\"
        position=\\"relative\\"
        src=\\"https://via.placeholder.com/240x120?text=Amplify+Studio+is+Awesome!\\"
        height=\\"120px\\"
        {...getOverrideProps(overrides, \\"RectangleGreen\\")}
      ></View>
      <View
        width=\\"120px\\"
        padding=\\"0px 0px 0px 0px\\"
        backgroundColor=\\"rgb(0,255,25.49997568130493)\\"
        position=\\"relative\\"
        src=\\"https://via.placeholder.com/240x120?text=Amplify+Studio+is+Awesome!\\"
        height=\\"120px\\"
        {...getOverrideProps(overrides, \\"RectangleBlue\\")}
      ></View>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 6 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest6OverridesProps = {
  ComplexTest6?: PrimitiveOverrideProps<FlexProps>;
  Name?: PrimitiveOverrideProps<TextProps>;
  \\"Price / Address\\"?: PrimitiveOverrideProps<TextProps>;
  Sqft?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ComplexTest6Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest6OverridesProps | undefined | null;
  }
>;
export default function ComplexTest6(
  props: ComplexTest6Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"21px 42px 21px 42px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      overflow=\\"hidden\\"
      position=\\"relative\\"
      gap=\\"22px\\"
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"ComplexTest6\\")}
      {...rest}
    >
      <Text
        padding=\\"0px 0px 0px 0px\\"
        fontFamily=\\"Inter\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        width=\\"68px\\"
        fontSize=\\"24px\\"
        lineHeight=\\"28.125px\\"
        position=\\"relative\\"
        fontWeight=\\"700\\"
        height=\\"29px\\"
        children=\\"Name\\"
        {...getOverrideProps(overrides, \\"Name\\")}
      ></Text>
      <Text
        padding=\\"0px 0px 0px 0px\\"
        fontFamily=\\"Roboto\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        width=\\"83px\\"
        fontSize=\\"12px\\"
        lineHeight=\\"14.0625px\\"
        position=\\"relative\\"
        fontWeight=\\"400\\"
        height=\\"14px\\"
        children=\\"Price / Address\\"
        {...getOverrideProps(overrides, \\"Price / Address\\")}
      ></Text>
      <Text
        padding=\\"0px 0px 0px 0px\\"
        fontFamily=\\"Roboto\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        width=\\"23px\\"
        fontSize=\\"12px\\"
        lineHeight=\\"14.0625px\\"
        position=\\"relative\\"
        fontWeight=\\"400\\"
        height=\\"14px\\"
        children=\\"Sqft\\"
        {...getOverrideProps(overrides, \\"Sqft\\")}
      ></Text>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 7 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Image,
  ImageProps,
  Text,
  TextProps,
  View,
  ViewProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest7OverridesProps = {
  ComplexTest7?: PrimitiveOverrideProps<ViewProps>;
  Imageexy?: PrimitiveOverrideProps<ImageProps>;
  Test?: PrimitiveOverrideProps<TextProps>;
  Imagecgh?: PrimitiveOverrideProps<ImageProps>;
} & EscapeHatchProps;
export type ComplexTest7Props = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ComplexTest7OverridesProps | undefined | null;
  }
>;
export default function ComplexTest7(
  props: ComplexTest7Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View
      width=\\"401px\\"
      padding=\\"0px 0px 0px 0px\\"
      position=\\"relative\\"
      height=\\"192px\\"
      {...getOverrideProps(overrides, \\"ComplexTest7\\")}
      {...rest}
    >
      <Image
        border=\\"4px SOLID rgb(0,0,0)\\"
        padding=\\"0px 0px 0px 0px\\"
        top=\\"0px\\"
        borderRadius=\\"45px\\"
        left=\\"254.15074157714844px\\"
        src=\\"https://via.placeholder.com/401x192?text=Amplify+Studio+is+Awesome!\\"
        width=\\"150.84925842285156px\\"
        position=\\"absolute\\"
        height=\\"196px\\"
        {...getOverrideProps(overrides, \\"Imageexy\\")}
      ></Image>
      <Text
        padding=\\"0px 0px 0px 0px\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        fontFamily=\\"Inter\\"
        top=\\"0px\\"
        left=\\"187.4011993408203px\\"
        width=\\"54.426666259765625px\\"
        fontSize=\\"24px\\"
        lineHeight=\\"28.80000114440918px\\"
        position=\\"absolute\\"
        fontWeight=\\"400\\"
        height=\\"27.839996337890625px\\"
        children=\\"Test\\"
        {...getOverrideProps(overrides, \\"Test\\")}
      ></Text>
      <Image
        border=\\"4px SOLID rgb(0,0,0)\\"
        padding=\\"0px 0px 0px 0px\\"
        top=\\"0px\\"
        borderRadius=\\"27px\\"
        left=\\"0px\\"
        src=\\"https://via.placeholder.com/401x192?text=Amplify+Studio+is+Awesome!\\"
        width=\\"169.42330932617188px\\"
        position=\\"absolute\\"
        height=\\"189.0880126953125px\\"
        {...getOverrideProps(overrides, \\"Imagecgh\\")}
      ></Image>
    </View>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 8 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest8OverridesProps = {
  ComplexTest8?: PrimitiveOverrideProps<FlexProps>;
  \\"Frame 107\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Rectangle 57\\"?: PrimitiveOverrideProps<ViewProps>;
  \\"Rectangle 56\\"?: PrimitiveOverrideProps<ViewProps>;
} & EscapeHatchProps;
export type ComplexTest8Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest8OverridesProps | undefined | null;
  }
>;
export default function ComplexTest8(
  props: ComplexTest8Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"0px 0px 0px 0px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      alignItems=\\"flex-start\\"
      gap=\\"0\\"
      width=\\"145px\\"
      position=\\"relative\\"
      direction=\\"row\\"
      height=\\"243px\\"
      {...getOverrideProps(overrides, \\"ComplexTest8\\")}
      {...rest}
    >
      <Flex
        padding=\\"0px 0px 0px 0px\\"
        flexGrow=\\"0\\"
        gap=\\"0\\"
        width=\\"472px\\"
        position=\\"relative\\"
        height=\\"723px\\"
        direction=\\"column\\"
        {...getOverrideProps(overrides, \\"Frame 107\\")}
      >
        <View
          width=\\"145px\\"
          padding=\\"0px 0px 0px 0px\\"
          backgroundColor=\\"rgb(219.30000364780426,255,0)\\"
          position=\\"relative\\"
          src=\\"https://via.placeholder.com/472x723?text=Amplify+Studio+is+Awesome!\\"
          height=\\"119px\\"
          {...getOverrideProps(overrides, \\"Rectangle 57\\")}
        ></View>
        <View
          width=\\"145px\\"
          padding=\\"0px 0px 0px 0px\\"
          backgroundColor=\\"rgb(255,0,0)\\"
          position=\\"relative\\"
          src=\\"https://via.placeholder.com/472x723?text=Amplify+Studio+is+Awesome!\\"
          height=\\"124px\\"
          {...getOverrideProps(overrides, \\"Rectangle 56\\")}
        ></View>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 9 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
  mergeVariantsAndOverrides,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest9OverridesProps = {
  ComplexTest9?: PrimitiveOverrideProps<FlexProps>;
  Left?: PrimitiveOverrideProps<FlexProps>;
  HeroMessage?: PrimitiveOverrideProps<FlexProps>;
  \\"LOREM IPSUM\\"?: PrimitiveOverrideProps<TextProps>;
  Message?: PrimitiveOverrideProps<FlexProps>;
  \\"Ut enim ad minim veniam quis nostrud\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\\"?: PrimitiveOverrideProps<TextProps>;
  Button?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ComplexTest9Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    mode?: \\"Dark\\" | \\"Light\\";
  } & {
    overrides?: ComplexTest9OverridesProps | undefined | null;
  }
>;
export default function ComplexTest9(
  props: ComplexTest9Props
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      nodeId: \\"2878:3221\\",
      variantValues: { mode: \\"Light\\" },
      overrides: {
        \\"LOREM IPSUM\\": {
          fontFamily: \\"Inter\\",
          fontSize: \\"16px\\",
          fontWeight: \\"700\\",
          color:
            \\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\",
          lineHeight: \\"20px\\",
          textAlign: \\"center\\",
          display: \\"flex\\",
          direction: \\"column\\",
          justifyContent: \\"flex-start\\",
          letterSpacing: \\"0.49px\\",
          width: \\"701px\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
          children: \\"LOREM IPSUM\\",
        },
        \\"Ut enim ad minim veniam quis nostrud\\": {
          fontFamily: \\"Inter\\",
          fontSize: \\"40px\\",
          fontWeight: \\"700\\",
          color:
            \\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\",
          lineHeight: \\"48px\\",
          textAlign: \\"center\\",
          display: \\"flex\\",
          direction: \\"column\\",
          justifyContent: \\"flex-start\\",
          width: \\"701px\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
          children: \\"Ut enim ad minim veniam quis nostrud\\",
        },
        \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\\":
          {
            fontFamily: \\"Inter\\",
            fontSize: \\"16px\\",
            fontWeight: \\"400\\",
            color:
              \\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\",
            lineHeight: \\"24px\\",
            textAlign: \\"center\\",
            display: \\"flex\\",
            direction: \\"column\\",
            justifyContent: \\"flex-start\\",
            letterSpacing: \\"0.010000000000000009px\\",
            width: \\"701px\\",
            shrink: \\"0\\",
            alignSelf: \\"stretch\\",
            position: \\"relative\\",
            padding: \\"0px 0px 0px 0px\\",
            children:
              \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\\",
          },
        Message: {
          gap: \\"16px\\",
          direction: \\"column\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
        Button: {
          display: \\"flex\\",
          shrink: \\"0\\",
          width: \\"206px\\",
          size: \\"large\\",
          variation: \\"primary\\",
          children: \\"Primary Button\\",
        },
        HeroMessage: {
          gap: \\"24px\\",
          direction: \\"column\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
        Left: {
          gap: \\"10px\\",
          direction: \\"column\\",
          height: \\"324px\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          grow: \\"1\\",
          basis: \\"941px\\",
          alignSelf: \\"stretch\\",
          overflow: \\"hidden\\",
          position: \\"relative\\",
          padding: \\"120px 120px 120px 120px\\",
          backgroundColor: \\"rgba(255,255,255,1)\\",
        },
        ComplexTest9: {
          gap: \\"0\\",
          direction: \\"row\\",
          width: \\"941px\\",
          height: \\"324px\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
      },
    },
    {
      nodeId: \\"2878:3272\\",
      variantValues: { mode: \\"Dark\\" },
      overrides: {
        \\"LOREM IPSUM\\": {
          fontFamily: \\"Inter\\",
          fontSize: \\"16px\\",
          fontWeight: \\"700\\",
          color:
            \\"rgba(233.00000131130219,249.00000035762787,252.00000017881393,1)\\",
          lineHeight: \\"20px\\",
          textAlign: \\"center\\",
          display: \\"flex\\",
          direction: \\"column\\",
          justifyContent: \\"flex-start\\",
          letterSpacing: \\"0.49px\\",
          width: \\"445px\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
          children: \\"TestMessage1\\",
        },
        \\"Ut enim ad minim veniam quis nostrud\\": {
          fontFamily: \\"Inter\\",
          fontSize: \\"40px\\",
          fontWeight: \\"700\\",
          color:
            \\"rgba(233.00000131130219,249.00000035762787,252.00000017881393,1)\\",
          lineHeight: \\"48px\\",
          textAlign: \\"center\\",
          display: \\"flex\\",
          direction: \\"column\\",
          justifyContent: \\"flex-start\\",
          width: \\"445px\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
          children: \\"TestMessage2\\",
        },
        \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\\":
          {
            fontFamily: \\"Inter\\",
            fontSize: \\"16px\\",
            fontWeight: \\"400\\",
            color:
              \\"rgba(233.00000131130219,249.00000035762787,252.00000017881393,1)\\",
            lineHeight: \\"24px\\",
            textAlign: \\"center\\",
            display: \\"flex\\",
            direction: \\"column\\",
            justifyContent: \\"flex-start\\",
            letterSpacing: \\"0.010000000000000009px\\",
            width: \\"445px\\",
            shrink: \\"0\\",
            alignSelf: \\"stretch\\",
            position: \\"relative\\",
            padding: \\"0px 0px 0px 0px\\",
            children: \\"TestMessage3\\",
          },
        Message: {
          gap: \\"16px\\",
          direction: \\"column\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
        Button: {
          display: \\"flex\\",
          shrink: \\"0\\",
          width: \\"174px\\",
          size: \\"large\\",
          variation: \\"primary\\",
          children: \\"TestButton1\\",
        },
        HeroMessage: {
          gap: \\"24px\\",
          direction: \\"column\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
        Left: {
          gap: \\"10px\\",
          direction: \\"column\\",
          height: \\"422px\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          grow: \\"1\\",
          basis: \\"685px\\",
          alignSelf: \\"stretch\\",
          overflow: \\"hidden\\",
          position: \\"relative\\",
          padding: \\"120px 120px 120px 120px\\",
          backgroundColor: \\"rgba(0,63.750030398368835,76.50000303983688,1)\\",
        },
        ComplexTest9: {
          gap: \\"0\\",
          direction: \\"row\\",
          width: \\"908px\\",
          height: \\"422px\\",
          justifyContent: \\"center\\",
          alignItems: \\"center\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
      },
    },
  ];
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      gap=\\"0\\"
      direction=\\"row\\"
      width=\\"941px\\"
      height=\\"324px\\"
      justifyContent=\\"center\\"
      alignItems=\\"center\\"
      position=\\"relative\\"
      padding=\\"0px 0px 0px 0px\\"
      {...getOverrideProps(overrides, \\"ComplexTest9\\")}
      {...rest}
    >
      <Flex
        gap=\\"10px\\"
        direction=\\"column\\"
        height=\\"324px\\"
        justifyContent=\\"center\\"
        alignItems=\\"center\\"
        grow=\\"1\\"
        basis=\\"941px\\"
        alignSelf=\\"stretch\\"
        overflow=\\"hidden\\"
        position=\\"relative\\"
        padding=\\"120px 120px 120px 120px\\"
        backgroundColor=\\"rgba(255,255,255,1)\\"
        {...getOverrideProps(overrides, \\"Left\\")}
      >
        <Flex
          gap=\\"24px\\"
          direction=\\"column\\"
          justifyContent=\\"center\\"
          alignItems=\\"center\\"
          shrink=\\"0\\"
          alignSelf=\\"stretch\\"
          position=\\"relative\\"
          padding=\\"0px 0px 0px 0px\\"
          {...getOverrideProps(overrides, \\"HeroMessage\\")}
        >
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"16px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
            lineHeight=\\"20px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            letterSpacing=\\"0.49px\\"
            width=\\"701px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"LOREM IPSUM\\"
            {...getOverrideProps(overrides, \\"LOREM IPSUM\\")}
          ></Text>
          <Flex
            gap=\\"16px\\"
            direction=\\"column\\"
            justifyContent=\\"center\\"
            alignItems=\\"center\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Message\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"40px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"48px\\"
              textAlign=\\"center\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              width=\\"701px\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Ut enim ad minim veniam quis nostrud\\"
              {...getOverrideProps(
                overrides,
                \\"Ut enim ad minim veniam quis nostrud\\"
              )}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"center\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"701px\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.\\"
              )}
            ></Text>
          </Flex>
          <Button
            display=\\"flex\\"
            shrink=\\"0\\"
            width=\\"206px\\"
            size=\\"large\\"
            variation=\\"primary\\"
            children=\\"Primary Button\\"
            {...getOverrideProps(overrides, \\"Button\\")}
          ></Button>
        </Flex>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 10 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Divider,
  DividerProps,
  Flex,
  FlexProps,
  Icon,
  IconProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest10OverridesProps = {
  ComplexTest10?: PrimitiveOverrideProps<FlexProps>;
  \\"Frame 63\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Frame 390\\"?: PrimitiveOverrideProps<FlexProps>;
  Free?: PrimitiveOverrideProps<TextProps>;
  \\"$0/mo\\"?: PrimitiveOverrideProps<TextProps>;
  Buttondmi?: PrimitiveOverrideProps<ButtonProps>;
  Dividerxhd?: PrimitiveOverrideProps<DividerProps>;
  \\"Frame 138mkm\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconunz?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.oat\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 139jki\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconrca?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.yfq\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 137zde\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconwrc?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.lum\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 391\\"?: PrimitiveOverrideProps<FlexProps>;
  Hobby?: PrimitiveOverrideProps<TextProps>;
  \\"$10/mo\\"?: PrimitiveOverrideProps<TextProps>;
  Buttoncej?: PrimitiveOverrideProps<ButtonProps>;
  Dividerovm?: PrimitiveOverrideProps<DividerProps>;
  \\"Frame 138upy\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconxzy?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.vxv\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 139tvb\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconpjz?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.gwp\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 137fsd\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconhpq?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.riv\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 392\\"?: PrimitiveOverrideProps<FlexProps>;
  Premium?: PrimitiveOverrideProps<TextProps>;
  \\"$100/mo\\"?: PrimitiveOverrideProps<TextProps>;
  Buttonizv?: PrimitiveOverrideProps<ButtonProps>;
  Dividerftq?: PrimitiveOverrideProps<DividerProps>;
  \\"Frame 138lgm\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconoyx?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.kai\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 139vsq\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconcsj?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.nuy\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 137kjg\\"?: PrimitiveOverrideProps<FlexProps>;
  Icongvd?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.hjl\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 393\\"?: PrimitiveOverrideProps<FlexProps>;
  Enterprise?: PrimitiveOverrideProps<TextProps>;
  \\"Contact us\\"?: PrimitiveOverrideProps<TextProps>;
  Buttonwez?: PrimitiveOverrideProps<ButtonProps>;
  Dividerzxk?: PrimitiveOverrideProps<DividerProps>;
  \\"Frame 138udv\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconkmb?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.zfj\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 139cwp\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconzyv?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.dcz\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Frame 137pog\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconsrt?: PrimitiveOverrideProps<IconProps>;
  \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.rug\\"?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ComplexTest10Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest10OverridesProps | undefined | null;
  }
>;
export default function ComplexTest10(
  props: ComplexTest10Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      gap=\\"24px\\"
      direction=\\"row\\"
      width=\\"1440px\\"
      justifyContent=\\"center\\"
      alignItems=\\"center\\"
      overflow=\\"hidden\\"
      position=\\"relative\\"
      padding=\\"40px 140px 40px 140px\\"
      backgroundColor=\\"rgba(239.00000095367432,240.00000089406967,240.00000089406967,1)\\"
      {...getOverrideProps(overrides, \\"ComplexTest10\\")}
      {...rest}
    >
      <Flex
        gap=\\"24px\\"
        direction=\\"row\\"
        width=\\"1160px\\"
        alignItems=\\"flex-start\\"
        grow=\\"1\\"
        basis=\\"1160px\\"
        height=\\"618px\\"
        position=\\"relative\\"
        padding=\\"0px 0px 0px 0px\\"
        {...getOverrideProps(overrides, \\"Frame 63\\")}
      >
        <Flex
          gap=\\"24px\\"
          direction=\\"column\\"
          width=\\"272px\\"
          justifyContent=\\"center\\"
          alignItems=\\"center\\"
          grow=\\"1\\"
          basis=\\"272px\\"
          height=\\"618px\\"
          position=\\"relative\\"
          padding=\\"24px 24px 24px 24px\\"
          backgroundColor=\\"rgba(255,255,255,1)\\"
          {...getOverrideProps(overrides, \\"Frame 390\\")}
        >
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"40px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
            lineHeight=\\"48px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"Free\\"
            {...getOverrideProps(overrides, \\"Free\\")}
          ></Text>
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"32px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
            lineHeight=\\"40px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"$0/mo\\"
            {...getOverrideProps(overrides, \\"$0/mo\\")}
          ></Text>
          <Button
            display=\\"flex\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"large\\"
            variation=\\"primary\\"
            children=\\"Primary Button\\"
            {...getOverrideProps(overrides, \\"Buttondmi\\")}
          ></Button>
          <Divider
            width=\\"224px\\"
            height=\\"2px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"default\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerxhd\\")}
          ></Divider>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 138mkm\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconunz\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.oat\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 139jki\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconrca\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.yfq\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 137zde\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconwrc\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.lum\\"
              )}
            ></Text>
          </Flex>
        </Flex>
        <Flex
          gap=\\"24px\\"
          direction=\\"column\\"
          width=\\"272px\\"
          justifyContent=\\"center\\"
          alignItems=\\"center\\"
          grow=\\"1\\"
          basis=\\"272px\\"
          height=\\"618px\\"
          position=\\"relative\\"
          padding=\\"24px 24px 24px 24px\\"
          backgroundColor=\\"rgba(255,255,255,1)\\"
          {...getOverrideProps(overrides, \\"Frame 391\\")}
        >
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"40px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
            lineHeight=\\"48px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"Hobby\\"
            {...getOverrideProps(overrides, \\"Hobby\\")}
          ></Text>
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"32px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
            lineHeight=\\"40px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"$10/mo\\"
            {...getOverrideProps(overrides, \\"$10/mo\\")}
          ></Text>
          <Button
            display=\\"flex\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"large\\"
            variation=\\"primary\\"
            children=\\"Primary Button\\"
            {...getOverrideProps(overrides, \\"Buttoncej\\")}
          ></Button>
          <Divider
            width=\\"224px\\"
            height=\\"2px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"default\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerovm\\")}
          ></Divider>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 138upy\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconxzy\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.vxv\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 139tvb\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconpjz\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.gwp\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 137fsd\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconhpq\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.riv\\"
              )}
            ></Text>
          </Flex>
        </Flex>
        <Flex
          gap=\\"24px\\"
          direction=\\"column\\"
          width=\\"272px\\"
          justifyContent=\\"center\\"
          alignItems=\\"center\\"
          grow=\\"1\\"
          basis=\\"272px\\"
          height=\\"618px\\"
          position=\\"relative\\"
          padding=\\"24px 24px 24px 24px\\"
          backgroundColor=\\"rgba(255,255,255,1)\\"
          {...getOverrideProps(overrides, \\"Frame 392\\")}
        >
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"40px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
            lineHeight=\\"48px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"Premium\\"
            {...getOverrideProps(overrides, \\"Premium\\")}
          ></Text>
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"32px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
            lineHeight=\\"40px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"$100/mo\\"
            {...getOverrideProps(overrides, \\"$100/mo\\")}
          ></Text>
          <Button
            display=\\"flex\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"large\\"
            variation=\\"primary\\"
            children=\\"Primary Button\\"
            {...getOverrideProps(overrides, \\"Buttonizv\\")}
          ></Button>
          <Divider
            width=\\"224px\\"
            height=\\"2px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"default\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerftq\\")}
          ></Divider>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 138lgm\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconoyx\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.kai\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 139vsq\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconcsj\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.nuy\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 137kjg\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Icongvd\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.hjl\\"
              )}
            ></Text>
          </Flex>
        </Flex>
        <Flex
          gap=\\"24px\\"
          direction=\\"column\\"
          width=\\"272px\\"
          justifyContent=\\"center\\"
          alignItems=\\"center\\"
          grow=\\"1\\"
          basis=\\"272px\\"
          height=\\"618px\\"
          position=\\"relative\\"
          padding=\\"24px 24px 24px 24px\\"
          backgroundColor=\\"rgba(255,255,255,1)\\"
          {...getOverrideProps(overrides, \\"Frame 393\\")}
        >
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"40px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
            lineHeight=\\"48px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"Enterprise\\"
            {...getOverrideProps(overrides, \\"Enterprise\\")}
          ></Text>
          <Text
            fontFamily=\\"Inter\\"
            fontSize=\\"32px\\"
            fontWeight=\\"700\\"
            color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
            lineHeight=\\"40px\\"
            textAlign=\\"center\\"
            display=\\"flex\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            width=\\"224px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            children=\\"Contact us\\"
            {...getOverrideProps(overrides, \\"Contact us\\")}
          ></Text>
          <Button
            display=\\"flex\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"large\\"
            variation=\\"primary\\"
            children=\\"Primary Button\\"
            {...getOverrideProps(overrides, \\"Buttonwez\\")}
          ></Button>
          <Divider
            width=\\"224px\\"
            height=\\"2px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"default\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerzxk\\")}
          ></Divider>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 138udv\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconkmb\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor123123.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.zfj\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 139cwp\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconzyv\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.dcz\\"
              )}
            ></Text>
          </Flex>
          <Flex
            gap=\\"16px\\"
            direction=\\"row\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 0px 0px 0px\\"
            {...getOverrideProps(overrides, \\"Frame 137pog\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              shrink=\\"0\\"
              overflow=\\"hidden\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(63.999996185302734,169.83334600925446,191.00000381469727,1)\\"
              type=\\"check\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconsrt\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"184px\\"
              grow=\\"1\\"
              basis=\\"184px\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.\\"
              {...getOverrideProps(
                overrides,
                \\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.rug\\"
              )}
            ></Text>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests complex examples should render complex sample 11 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Badge,
  BadgeProps,
  Button,
  ButtonProps,
  Divider,
  DividerProps,
  Flex,
  FlexProps,
  Icon,
  IconProps,
  Image,
  ImageProps,
  SelectField,
  SelectFieldProps,
  Text,
  TextField,
  TextFieldProps,
  TextProps,
  View,
  ViewProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComplexTest11OverridesProps = {
  ComplexTest11?: PrimitiveOverrideProps<FlexProps>;
  \\"Frame 411\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Frame 313vza\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Frame 406\\"?: PrimitiveOverrideProps<FlexProps>;
  Info?: PrimitiveOverrideProps<TextProps>;
  TextFieldlrg?: PrimitiveOverrideProps<TextFieldProps>;
  TextFieldbcu?: PrimitiveOverrideProps<TextFieldProps>;
  Dividervgv?: PrimitiveOverrideProps<DividerProps>;
  \\"Frame 409\\"?: PrimitiveOverrideProps<FlexProps>;
  Shippinguim?: PrimitiveOverrideProps<TextProps>;
  TextFieldxak?: PrimitiveOverrideProps<TextFieldProps>;
  TextFieldsju?: PrimitiveOverrideProps<TextFieldProps>;
  \\"Frame 407\\"?: PrimitiveOverrideProps<FlexProps>;
  TextFieldmoq?: PrimitiveOverrideProps<TextFieldProps>;
  SelectFieldqqj?: PrimitiveOverrideProps<SelectFieldProps>;
  \\"Frame 408\\"?: PrimitiveOverrideProps<FlexProps>;
  TextFieldnts?: PrimitiveOverrideProps<TextFieldProps>;
  SelectFieldpiz?: PrimitiveOverrideProps<SelectFieldProps>;
  Dividerluf?: PrimitiveOverrideProps<DividerProps>;
  \\"Frame 313pea\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Card info\\"?: PrimitiveOverrideProps<TextProps>;
  TextFieldavv?: PrimitiveOverrideProps<TextFieldProps>;
  TextFieldakg?: PrimitiveOverrideProps<TextFieldProps>;
  \\"Frame 410\\"?: PrimitiveOverrideProps<FlexProps>;
  SelectFieldugk?: PrimitiveOverrideProps<SelectFieldProps>;
  SelectFieldqku?: PrimitiveOverrideProps<SelectFieldProps>;
  \\"Frame 412\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Group 320\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Group 314\\"?: PrimitiveOverrideProps<ViewProps>;
  imagefpq?: PrimitiveOverrideProps<ImageProps>;
  \\"Order Summaryogp\\"?: PrimitiveOverrideProps<TextProps>;
  Blackjlp?: PrimitiveOverrideProps<TextProps>;
  \\"Basic Teebko\\"?: PrimitiveOverrideProps<TextProps>;
  Largeqzy?: PrimitiveOverrideProps<TextProps>;
  Iconvrz?: PrimitiveOverrideProps<IconProps>;
  SelectFieldglx?: PrimitiveOverrideProps<SelectFieldProps>;
  Dividerqbo?: PrimitiveOverrideProps<DividerProps>;
  Dividerxgl?: PrimitiveOverrideProps<DividerProps>;
  Dividerpxl?: PrimitiveOverrideProps<DividerProps>;
  \\"Group 315\\"?: PrimitiveOverrideProps<ViewProps>;
  imageklz?: PrimitiveOverrideProps<ImageProps>;
  \\"Order Summaryiil\\"?: PrimitiveOverrideProps<TextProps>;
  Blackrig?: PrimitiveOverrideProps<TextProps>;
  \\"Basic Teeyvl\\"?: PrimitiveOverrideProps<TextProps>;
  Largedkg?: PrimitiveOverrideProps<TextProps>;
  Iconzad?: PrimitiveOverrideProps<IconProps>;
  SelectFieldawu?: PrimitiveOverrideProps<SelectFieldProps>;
  Dividercos?: PrimitiveOverrideProps<DividerProps>;
  \\"Group 316\\"?: PrimitiveOverrideProps<ViewProps>;
  Subtotal?: PrimitiveOverrideProps<TextProps>;
  \\"$320.00\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Group 317\\"?: PrimitiveOverrideProps<ViewProps>;
  Shippingtjp?: PrimitiveOverrideProps<TextProps>;
  \\"$15.00\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Group 318\\"?: PrimitiveOverrideProps<ViewProps>;
  Taxes?: PrimitiveOverrideProps<TextProps>;
  \\"$26.80\\"?: PrimitiveOverrideProps<TextProps>;
  Dividerelu?: PrimitiveOverrideProps<DividerProps>;
  \\"Group 319\\"?: PrimitiveOverrideProps<ViewProps>;
  Total?: PrimitiveOverrideProps<TextProps>;
  \\"$361.80\\"?: PrimitiveOverrideProps<TextProps>;
  Divideruix?: PrimitiveOverrideProps<DividerProps>;
  Button?: PrimitiveOverrideProps<ButtonProps>;
  \\"Group 313\\"?: PrimitiveOverrideProps<ViewProps>;
  Iconhpw?: PrimitiveOverrideProps<IconProps>;
  \\"Cart (2)\\"?: PrimitiveOverrideProps<TextProps>;
  \\"$101.70\\"?: PrimitiveOverrideProps<TextProps>;
  Badge?: PrimitiveOverrideProps<BadgeProps>;
} & EscapeHatchProps;
export type ComplexTest11Props = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ComplexTest11OverridesProps | undefined | null;
  }
>;
export default function ComplexTest11(
  props: ComplexTest11Props
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      gap=\\"24px\\"
      direction=\\"row\\"
      width=\\"1160px\\"
      alignItems=\\"flex-start\\"
      position=\\"relative\\"
      padding=\\"0px 0px 0px 0px\\"
      {...getOverrideProps(overrides, \\"ComplexTest11\\")}
      {...rest}
    >
      <Flex
        gap=\\"0\\"
        direction=\\"row\\"
        width=\\"667px\\"
        alignItems=\\"flex-start\\"
        grow=\\"1\\"
        basis=\\"667px\\"
        height=\\"1148px\\"
        position=\\"relative\\"
        padding=\\"32px 0px 32px 0px\\"
        backgroundColor=\\"rgba(255,255,255,1)\\"
        {...getOverrideProps(overrides, \\"Frame 411\\")}
      >
        <Flex
          gap=\\"32px\\"
          direction=\\"column\\"
          width=\\"667px\\"
          justifyContent=\\"center\\"
          alignItems=\\"center\\"
          grow=\\"1\\"
          basis=\\"667px\\"
          height=\\"1084px\\"
          position=\\"relative\\"
          padding=\\"0px 0px 0px 0px\\"
          {...getOverrideProps(overrides, \\"Frame 313vza\\")}
        >
          <Flex
            gap=\\"24px\\"
            direction=\\"column\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 32px 0px 32px\\"
            {...getOverrideProps(overrides, \\"Frame 406\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              shrink=\\"0\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Info\\"
              {...getOverrideProps(overrides, \\"Info\\")}
            ></Text>
            <TextField
              display=\\"flex\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              label=\\"Label\\"
              size=\\"large\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"TextFieldlrg\\")}
            ></TextField>
            <TextField
              display=\\"flex\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              label=\\"Label\\"
              size=\\"large\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"TextFieldbcu\\")}
            ></TextField>
          </Flex>
          <Divider
            width=\\"667px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividervgv\\")}
          ></Divider>
          <Flex
            gap=\\"24px\\"
            direction=\\"column\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 32px 0px 32px\\"
            {...getOverrideProps(overrides, \\"Frame 409\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              shrink=\\"0\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Shipping\\"
              {...getOverrideProps(overrides, \\"Shippinguim\\")}
            ></Text>
            <TextField
              display=\\"flex\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              label=\\"Label\\"
              size=\\"large\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"TextFieldxak\\")}
            ></TextField>
            <TextField
              display=\\"flex\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              label=\\"Label\\"
              size=\\"large\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"TextFieldsju\\")}
            ></TextField>
            <Flex
              gap=\\"24px\\"
              direction=\\"row\\"
              alignItems=\\"flex-start\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              {...getOverrideProps(overrides, \\"Frame 407\\")}
            >
              <TextField
                width=\\"289.5px\\"
                display=\\"flex\\"
                grow=\\"1\\"
                basis=\\"289.5px\\"
                height=\\"74px\\"
                label=\\"Label\\"
                size=\\"large\\"
                variation=\\"default\\"
                {...getOverrideProps(overrides, \\"TextFieldmoq\\")}
              ></TextField>
              <SelectField
                width=\\"289.5px\\"
                display=\\"flex\\"
                grow=\\"1\\"
                basis=\\"289.5px\\"
                height=\\"74px\\"
                label=\\"Label\\"
                size=\\"large\\"
                variation=\\"default\\"
                {...getOverrideProps(overrides, \\"SelectFieldqqj\\")}
              ></SelectField>
            </Flex>
            <Flex
              gap=\\"24px\\"
              direction=\\"row\\"
              alignItems=\\"flex-start\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              {...getOverrideProps(overrides, \\"Frame 408\\")}
            >
              <TextField
                width=\\"289.5px\\"
                display=\\"flex\\"
                grow=\\"1\\"
                basis=\\"289.5px\\"
                height=\\"74px\\"
                label=\\"Label\\"
                size=\\"large\\"
                variation=\\"default\\"
                {...getOverrideProps(overrides, \\"TextFieldnts\\")}
              ></TextField>
              <SelectField
                width=\\"289.5px\\"
                display=\\"flex\\"
                grow=\\"1\\"
                basis=\\"289.5px\\"
                height=\\"74px\\"
                label=\\"Label\\"
                size=\\"large\\"
                variation=\\"default\\"
                {...getOverrideProps(overrides, \\"SelectFieldpiz\\")}
              ></SelectField>
            </Flex>
          </Flex>
          <Divider
            width=\\"667px\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerluf\\")}
          ></Divider>
          <Flex
            gap=\\"24px\\"
            direction=\\"column\\"
            shrink=\\"0\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            padding=\\"0px 32px 0px 32px\\"
            {...getOverrideProps(overrides, \\"Frame 313pea\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              shrink=\\"0\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Card info\\"
              {...getOverrideProps(overrides, \\"Card info\\")}
            ></Text>
            <TextField
              display=\\"flex\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              label=\\"Label\\"
              size=\\"large\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"TextFieldavv\\")}
            ></TextField>
            <TextField
              display=\\"flex\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              label=\\"Label\\"
              size=\\"large\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"TextFieldakg\\")}
            ></TextField>
            <Flex
              gap=\\"24px\\"
              direction=\\"row\\"
              alignItems=\\"flex-start\\"
              shrink=\\"0\\"
              alignSelf=\\"stretch\\"
              position=\\"relative\\"
              padding=\\"0px 0px 0px 0px\\"
              {...getOverrideProps(overrides, \\"Frame 410\\")}
            >
              <SelectField
                width=\\"289.5px\\"
                display=\\"flex\\"
                grow=\\"1\\"
                basis=\\"289.5px\\"
                height=\\"74px\\"
                label=\\"Label\\"
                size=\\"large\\"
                variation=\\"default\\"
                {...getOverrideProps(overrides, \\"SelectFieldugk\\")}
              ></SelectField>
              <SelectField
                width=\\"289.5px\\"
                display=\\"flex\\"
                grow=\\"1\\"
                basis=\\"289.5px\\"
                height=\\"74px\\"
                label=\\"Label\\"
                size=\\"large\\"
                variation=\\"default\\"
                {...getOverrideProps(overrides, \\"SelectFieldqku\\")}
              ></SelectField>
            </Flex>
          </Flex>
        </Flex>
      </Flex>
      <Flex
        gap=\\"10px\\"
        direction=\\"row\\"
        alignItems=\\"flex-start\\"
        shrink=\\"0\\"
        height=\\"934px\\"
        position=\\"relative\\"
        padding=\\"32px 0px 32px 0px\\"
        backgroundColor=\\"rgba(255,255,255,1)\\"
        {...getOverrideProps(overrides, \\"Frame 412\\")}
      >
        <Flex
          padding=\\"0px 0px 0px 0px\\"
          width=\\"469px\\"
          height=\\"870px\\"
          shrink=\\"0\\"
          position=\\"relative\\"
          {...getOverrideProps(overrides, \\"Group 320\\")}
        >
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"134px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"194px\\"
            {...getOverrideProps(overrides, \\"Group 314\\")}
          >
            <Image
              width=\\"89px\\"
              height=\\"130px\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              {...getOverrideProps(overrides, \\"imagefpq\\")}
            ></Image>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"20px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.49px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"112px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Order Summary\\"
              {...getOverrideProps(overrides, \\"Order Summaryogp\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(92.00000211596489,102.00000151991844,112.000000923872,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"32px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Black\\"
              {...getOverrideProps(overrides, \\"Blackjlp\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Basic Tee\\"
              {...getOverrideProps(overrides, \\"Basic Teebko\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(92.00000211596489,102.00000151991844,112.000000923872,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"64px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Large\\"
              {...getOverrideProps(overrides, \\"Largeqzy\\")}
            ></Text>
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              overflow=\\"hidden\\"
              position=\\"absolute\\"
              left=\\"381px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              type=\\"delete\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconvrz\\")}
            ></Icon>
            <SelectField
              width=\\"64px\\"
              position=\\"absolute\\"
              display=\\"flex\\"
              left=\\"341px\\"
              top=\\"104px\\"
              size=\\"small\\"
              labelHidden=\\"true\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"SelectFieldglx\\")}
            ></SelectField>
          </View>
          <Divider
            width=\\"469px\\"
            position=\\"absolute\\"
            left=\\"0px\\"
            top=\\"362px\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerqbo\\")}
          ></Divider>
          <Divider
            width=\\"469px\\"
            position=\\"absolute\\"
            left=\\"0px\\"
            top=\\"161px\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerxgl\\")}
          ></Divider>
          <Divider
            width=\\"469px\\"
            position=\\"absolute\\"
            left=\\"0px\\"
            top=\\"72px\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerpxl\\")}
          ></Divider>
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"134px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"395px\\"
            {...getOverrideProps(overrides, \\"Group 315\\")}
          >
            <Image
              width=\\"89px\\"
              height=\\"130px\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              {...getOverrideProps(overrides, \\"imageklz\\")}
            ></Image>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"20px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.49px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"112px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Order Summary\\"
              {...getOverrideProps(overrides, \\"Order Summaryiil\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(92.00000211596489,102.00000151991844,112.000000923872,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"32px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Black\\"
              {...getOverrideProps(overrides, \\"Blackrig\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Basic Tee\\"
              {...getOverrideProps(overrides, \\"Basic Teeyvl\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(92.00000211596489,102.00000151991844,112.000000923872,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"121px\\"
              top=\\"64px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Large\\"
              {...getOverrideProps(overrides, \\"Largedkg\\")}
            ></Text>
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              overflow=\\"hidden\\"
              position=\\"absolute\\"
              left=\\"381px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              type=\\"delete\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconzad\\")}
            ></Icon>
            <SelectField
              width=\\"64px\\"
              position=\\"absolute\\"
              display=\\"flex\\"
              left=\\"341px\\"
              top=\\"104px\\"
              size=\\"small\\"
              labelHidden=\\"true\\"
              variation=\\"default\\"
              {...getOverrideProps(overrides, \\"SelectFieldawu\\")}
            ></SelectField>
          </View>
          <Divider
            width=\\"469px\\"
            position=\\"absolute\\"
            left=\\"0px\\"
            top=\\"563px\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividercos\\")}
          ></Divider>
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"24px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"596px\\"
            {...getOverrideProps(overrides, \\"Group 316\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"77.75053405761719px\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Subtotal\\"
              {...getOverrideProps(overrides, \\"Subtotal\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"right\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"340px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"$320.00\\"
              {...getOverrideProps(overrides, \\"$320.00\\")}
            ></Text>
          </View>
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"24px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"636px\\"
            {...getOverrideProps(overrides, \\"Group 317\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"80.14285278320312px\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Shipping\\"
              {...getOverrideProps(overrides, \\"Shippingtjp\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"right\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"353px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"$15.00\\"
              {...getOverrideProps(overrides, \\"$15.00\\")}
            ></Text>
          </View>
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"24px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"676px\\"
            {...getOverrideProps(overrides, \\"Group 318\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(48.000000938773155,64.00000378489494,80.00000283122063,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              width=\\"53.82728958129883px\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Taxes\\"
              {...getOverrideProps(overrides, \\"Taxes\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"400\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"right\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.010000000000000009px\\"
              position=\\"absolute\\"
              left=\\"350px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"$26.80\\"
              {...getOverrideProps(overrides, \\"$26.80\\")}
            ></Text>
          </View>
          <Divider
            width=\\"405px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"716px\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Dividerelu\\")}
          ></Divider>
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"20px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"733px\\"
            {...getOverrideProps(overrides, \\"Group 319\\")}
          >
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"20px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.49px\\"
              width=\\"50.23880386352539px\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Total\\"
              {...getOverrideProps(overrides, \\"Total\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"20px\\"
              textAlign=\\"right\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              letterSpacing=\\"0.49px\\"
              position=\\"absolute\\"
              left=\\"336px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"$361.80\\"
              {...getOverrideProps(overrides, \\"$361.80\\")}
            ></Text>
          </View>
          <Divider
            width=\\"469px\\"
            position=\\"absolute\\"
            left=\\"0px\\"
            top=\\"789px\\"
            size=\\"small\\"
            orientation=\\"horizontal\\"
            {...getOverrideProps(overrides, \\"Divideruix\\")}
          ></Divider>
          <Button
            position=\\"absolute\\"
            display=\\"flex\\"
            width=\\"405px\\"
            left=\\"32px\\"
            top=\\"822px\\"
            size=\\"large\\"
            variation=\\"primary\\"
            children=\\"Place Order\\"
            {...getOverrideProps(overrides, \\"Button\\")}
          ></Button>
          <View
            padding=\\"0px 0px 0px 0px\\"
            width=\\"405px\\"
            height=\\"24px\\"
            position=\\"absolute\\"
            left=\\"32px\\"
            top=\\"105px\\"
            {...getOverrideProps(overrides, \\"Group 313\\")}
          >
            <Icon
              width=\\"24px\\"
              height=\\"24px\\"
              overflow=\\"hidden\\"
              position=\\"absolute\\"
              left=\\"0px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              type=\\"shopping_bag\\"
              fontSize=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconhpw\\")}
            ></Icon>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              position=\\"absolute\\"
              left=\\"40px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"Cart (2)\\"
              {...getOverrideProps(overrides, \\"Cart (2)\\")}
            ></Text>
            <Text
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              fontWeight=\\"700\\"
              color=\\"rgba(13.000000175088644,26.000000350177288,38.0000015348196,1)\\"
              lineHeight=\\"24px\\"
              textAlign=\\"right\\"
              display=\\"flex\\"
              direction=\\"column\\"
              justifyContent=\\"flex-start\\"
              position=\\"absolute\\"
              left=\\"343px\\"
              top=\\"0px\\"
              padding=\\"0px 0px 0px 0px\\"
              children=\\"$101.70\\"
              {...getOverrideProps(overrides, \\"$101.70\\")}
            ></Text>
          </View>
          <Badge
            color=\\"rgba(54.00000058114529,94.0000019967556,61.00000016391277,1)\\"
            position=\\"absolute\\"
            backgroundColor=\\"rgba(214.00000244379044,245.00000059604645,219.0000021457672,1)\\"
            display=\\"flex\\"
            width=\\"405px\\"
            left=\\"32px\\"
            top=\\"0px\\"
            fontFamily=\\"Inter\\"
            fontWeight=\\"700\\"
            fontSize=\\"16px\\"
            textAlign=\\"left\\"
            lineHeight=\\"20px\\"
            direction=\\"column\\"
            justifyContent=\\"flex-start\\"
            letterSpacing=\\"0.49px\\"
            size=\\"default\\"
            variation=\\"success\\"
            children=\\"Discount - 10% off\\"
            {...getOverrideProps(overrides, \\"Badge\\")}
          ></Badge>
        </Flex>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests component with binding should render build property on Text 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TextWithDataBindingOverridesProps = {
  TextWithDataBinding?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type TextWithDataBindingProps = React.PropsWithChildren<
  Partial<TextProps> & {
    textValue?: String;
  } & {
    overrides?: TextWithDataBindingOverridesProps | undefined | null;
  }
>;
export default function TextWithDataBinding(
  props: TextWithDataBindingProps
): React.ReactElement {
  const { textValue, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      color=\\"#ff0000\\"
      width=\\"20px\\"
      children={textValue}
      {...getOverrideProps(overrides, \\"TextWithDataBinding\\")}
      {...rest}
    ></Text>
  );
}
"
`;

exports[`amplify render tests component with binding should render slot binding 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  TextProps,
  View,
  ViewProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComponentWithSlotBindingOverridesProps = {
  ComponentWithSlotBinding?: PrimitiveOverrideProps<FlexProps>;
  Rectangle?: PrimitiveOverrideProps<ViewProps>;
  ChildText?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ComponentWithSlotBindingProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    mySlot?: React.ReactNode;
  } & {
    overrides?: ComponentWithSlotBindingOverridesProps | undefined | null;
  }
>;
export default function ComponentWithSlotBinding(
  props: ComponentWithSlotBindingProps
): React.ReactElement {
  const { mySlot, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      {...getOverrideProps(overrides, \\"ComponentWithSlotBinding\\")}
      {...rest}
    >
      <View
        children={mySlot}
        {...getOverrideProps(overrides, \\"Rectangle\\")}
      ></View>
    </Flex>
  );
}
"
`;

exports[`amplify render tests component with data binding should add GraphQL model imports 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../API\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComponentWithDataBindingOverridesProps = {
  ComponentWithDataBinding?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ComponentWithDataBindingProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    width?: Number;
    isDisabled?: Boolean;
    buttonUser?: User;
    buttonColor?: String;
  } & {
    overrides?: ComponentWithDataBindingOverridesProps | undefined | null;
  }
>;
export default function ComponentWithDataBinding(
  props: ComponentWithDataBindingProps
): React.ReactElement {
  const { width, isDisabled, buttonUser, buttonColor, overrides, ...rest } =
    props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      labelWidth={width}
      disabled={isDisabled}
      children={buttonUser?.username || \\"hspain@gmail.com\\"}
      {...getOverrideProps(overrides, \\"ComponentWithDataBinding\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests component with data binding should add model imports 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ComponentWithDataBindingOverridesProps = {
  ComponentWithDataBinding?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ComponentWithDataBindingProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    width?: Number;
    isDisabled?: Boolean;
    buttonUser?: User;
    buttonColor?: String;
  } & {
    overrides?: ComponentWithDataBindingOverridesProps | undefined | null;
  }
>;
export default function ComponentWithDataBinding(
  props: ComponentWithDataBindingProps
): React.ReactElement {
  const { width, isDisabled, buttonUser, buttonColor, overrides, ...rest } =
    props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      labelWidth={width}
      disabled={isDisabled}
      children={buttonUser?.username || \\"hspain@gmail.com\\"}
      {...getOverrideProps(overrides, \\"ComponentWithDataBinding\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests component with data binding should not have useDataStoreBinding when there is no predicate 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { UntitledModel } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SectionHeadingOverridesProps = {
  SectionHeading?: PrimitiveOverrideProps<FlexProps>;
  Heading?: PrimitiveOverrideProps<FlexProps>;
  \\"Heading 2\\"?: PrimitiveOverrideProps<TextProps>;
  subtitle?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type SectionHeadingProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    newProp6fd1?: UntitledModel;
  } & {
    overrides?: SectionHeadingOverridesProps | undefined | null;
  }
>;
export default function SectionHeading(
  props: SectionHeadingProps
): React.ReactElement {
  const { newProp6fd1, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      padding=\\"0px 0px 10px 0px\\"
      backgroundColor=\\"rgb(255,255,255)\\"
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"SectionHeading\\")}
      {...rest}
    >
      <Flex
        tes={newProp6fd1.untitledfield}
        {...getOverrideProps(overrides, \\"Heading\\")}
      >
        <Text
          fontFamily=\\"Inter\\"
          color=\\"rgb(15.539060980081558,29.73937589675188,47.8125)\\"
          textAlign=\\"left\\"
          fontSize=\\"48px\\"
          lineHeight=\\"48px\\"
          fontWeight=\\"300\\"
          children=\\"Heading 2\\"
          {...getOverrideProps(overrides, \\"Heading 2\\")}
        ></Text>
      </Flex>
      <Text
        fontFamily=\\"Inter\\"
        color=\\"rgb(0,0,0)\\"
        textAlign=\\"left\\"
        fontSize=\\"32px\\"
        lineHeight=\\"48px\\"
        fontWeight=\\"400\\"
        children=\\"subtitle\\"
        {...getOverrideProps(overrides, \\"subtitle\\")}
      ></Text>
    </Flex>
  );
}
"
`;

exports[`amplify render tests component with data binding should render with data binding in child elements 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ChildComponentWithDataBindingOverridesProps = {
  ChildComponentWithDataBinding?: PrimitiveOverrideProps<ButtonProps>;
  TextWithDataBinding?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ChildComponentWithDataBindingProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    textValue?: String;
  } & {
    overrides?: ChildComponentWithDataBindingOverridesProps | undefined | null;
  }
>;
export default function ChildComponentWithDataBinding(
  props: ChildComponentWithDataBindingProps
): React.ReactElement {
  const { textValue, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      {...getOverrideProps(overrides, \\"ChildComponentWithDataBinding\\")}
      {...rest}
    >
      <Text
        children={textValue}
        {...getOverrideProps(overrides, \\"TextWithDataBinding\\")}
      ></Text>
    </Button>
  );
}
"
`;

exports[`amplify render tests component with variants and not override children prop should render variants with options provided, and not override children prop 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
  mergeVariantsAndOverrides,
} from \\"@aws-amplify/ui-react/internal\\";
import { View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ViewPrimitiveOverridesProps = {
  ViewPrimitive?: PrimitiveOverrideProps<ViewProps>;
} & EscapeHatchProps;
export type ViewPrimitiveProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    variant?: \\"primary\\";
  } & {
    overrides?: ViewPrimitiveOverridesProps | undefined | null;
  }
>;
export default function ViewPrimitive(
  props: ViewPrimitiveProps
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      variantValues: { variant: \\"primary\\" },
      overrides: {
        ViewPrimitive: { label: \\"componentWithVariantsWithLabelProp\\" },
      },
    },
  ];
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <View
      children=\\"Nice view! 🏔\\"
      {...getOverrideProps(overrides, \\"ViewPrimitive\\")}
      {...rest}
    ></View>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests component with variants should render object variants 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
  mergeVariantsAndOverrides,
} from \\"@aws-amplify/ui-react/internal\\";
import { Icon, IconProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type IconVariantsOverridesProps = {
  IconVariants?: PrimitiveOverrideProps<IconProps>;
} & EscapeHatchProps;
export type IconVariantsProps = React.PropsWithChildren<
  Partial<IconProps> & {
    variant?: \\"primary\\" | \\"secondary\\";
  } & {
    overrides?: IconVariantsOverridesProps | undefined | null;
  }
>;
export default function IconVariants(
  props: IconVariantsProps
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      variantValues: { variant: \\"primary\\" },
      overrides: {
        IconVariants: {
          paths: [
            {
              d: \\"M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z\\",
              fill: \\"black\\",
            },
          ],
        },
      },
    },
    {
      variantValues: { variant: \\"secondary\\" },
      overrides: {
        IconVariants: {
          paths: [
            {
              d: \\"M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z\\",
              fill: \\"black\\",
            },
            {
              d: \\"M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z\\",
              fill: \\"white\\",
            },
          ],
        },
      },
    },
  ];
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <Icon {...getOverrideProps(overrides, \\"IconVariants\\")} {...rest}></Icon>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests component with variants should render variants with options provided 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
  mergeVariantsAndOverrides,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    variant?: \\"primary\\" | \\"secondary\\";
    size?: \\"large\\";
  } & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      variantValues: { variant: \\"primary\\" },
      overrides: { CustomButton: { fontSize: \\"12px\\" } },
    },
    {
      variantValues: { variant: \\"secondary\\" },
      overrides: { CustomButton: { fontSize: \\"40px\\" } },
    },
    {
      variantValues: { variant: \\"primary\\", size: \\"large\\" },
      overrides: { CustomButton: { width: \\"500\\" } },
    },
  ];
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <Button {...getOverrideProps(overrides, \\"CustomButton\\")} {...rest}></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests component with variants with mapped children prop should render variants with options provided, and mapped children prop 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  Variant,
  getOverrideProps,
  getOverridesFromVariants,
  mergeVariantsAndOverrides,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    variant?: \\"primary\\" | \\"secondary\\";
    size?: \\"large\\";
  } & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { overrides: overridesProp, ...rest } = props;
  const variants: Variant[] = [
    {
      variantValues: { variant: \\"primary\\" },
      overrides: {
        CustomButton: {
          label: \\"componentWithVariantsWithMappedChildrenProp\\",
          children: \\"componentWithVariantsWithChildrenProp\\",
          fontSize: \\"12px\\",
        },
      },
    },
    {
      variantValues: { variant: \\"secondary\\" },
      overrides: { CustomButton: { fontSize: \\"40px\\" } },
    },
    {
      variantValues: { variant: \\"primary\\", size: \\"large\\" },
      overrides: {
        CustomButton: {
          width: \\"500\\",
          children: \\"componentWithVariantsWithMappedChildrenProp\\",
        },
      },
    },
  ];
  const overrides = mergeVariantsAndOverrides(
    getOverridesFromVariants(variants, props),
    overridesProp || {}
  );
  return (
    /* @ts-ignore: TS2322 */
    <Button {...getOverrideProps(overrides, \\"CustomButton\\")} {...rest}></Button>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests concat and conditional transform should render child component with data bound concatenation 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ChildComponentWithDataBoundConcatenationOverridesProps = {
  ChildComponentWithDataBoundConcatenation?: PrimitiveOverrideProps<ButtonProps>;
  TextWithConcatenation?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ChildComponentWithDataBoundConcatenationProps =
  React.PropsWithChildren<
    Partial<ButtonProps> & {
      textValue?: String;
    } & {
      overrides?:
        | ChildComponentWithDataBoundConcatenationOverridesProps
        | undefined
        | null;
    }
  >;
export default function ChildComponentWithDataBoundConcatenation(
  props: ChildComponentWithDataBoundConcatenationProps
): React.ReactElement {
  const { textValue, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      {...getOverrideProps(
        overrides,
        \\"ChildComponentWithDataBoundConcatenation\\"
      )}
      {...rest}
    >
      <Text
        children={\`\${buttonUser?.firstname || \\"Harrison\\"}\${\\" \\"}\${
          buttonUser?.lastname || \\"Spain\\"
        }\`}
        {...getOverrideProps(overrides, \\"TextWithConcatenation\\")}
      ></Text>
    </Button>
  );
}
"
`;

exports[`amplify render tests concat and conditional transform should render child component with static concatenation 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ChildComponentWithStaticConcatenationOverridesProps = {
  ChildComponentWithStaticConcatenation?: PrimitiveOverrideProps<ButtonProps>;
  TextWithConcatenation?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type ChildComponentWithStaticConcatenationProps =
  React.PropsWithChildren<
    Partial<ButtonProps> & {
      overrides?:
        | ChildComponentWithStaticConcatenationOverridesProps
        | undefined
        | null;
    }
  >;
export default function ChildComponentWithStaticConcatenation(
  props: ChildComponentWithStaticConcatenationProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      {...getOverrideProps(overrides, \\"ChildComponentWithStaticConcatenation\\")}
      {...rest}
    >
      <Text
        children={\`\${\\"Concatenate\\"}\${\\" \\"}\${\\"Me!\\"}\`}
        {...getOverrideProps(overrides, \\"TextWithConcatenation\\")}
      ></Text>
    </Button>
  );
}
"
`;

exports[`amplify render tests concat and conditional transform should render component with concatenation prop 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    width?: Number;
    buttonUser?: User;
    buttonColor?: String;
  } & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { width, buttonUser, buttonColor, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      labelWidth={width}
      children={\`\${buttonUser?.firstname || \\"Harrison\\"}\${\\" \\"}\${
        buttonUser?.lastname || \\"Spain\\"
      }\`}
      {...getOverrideProps(overrides, \\"CustomButton\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests concat and conditional transform should render component with conditional data binding prop 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    width?: Number;
    buttonUser?: User;
    buttonColor?: String;
  } & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { width, buttonUser, buttonColor, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      labelWidth={width}
      disabled={buttonUser?.isLoggedIn == true ? true : false}
      prompt={
        buttonUser?.age > 18
          ? \`\${buttonUser?.firstname}\${\\", cast your vote.\\"}\`
          : \\"Sorry you cannot vote\\"
      }
      backgroundColor={
        buttonUser?.isLoggedIn == true
          ? buttonUser?.loggedInColor
          : buttonUser?.loggedOutColor
      }
      children={\`\${buttonUser?.firstname || \\"Harrison\\"}\${\\" \\"}\${
        buttonUser?.lastname || \\"Spain\\"
      }\`}
      {...getOverrideProps(overrides, \\"CustomButton\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests concat and conditional transform should render component with conditional data binding prop from a bug 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { Student } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ConditionalComponentWithDataBindingOverridesProps = {
  ConditionalComponentWithDataBinding?: PrimitiveOverrideProps<FlexProps>;
  \\"Placeholder text\\"?: PrimitiveOverrideProps<TextProps>;
  \\"Placeholder Button\\"?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ConditionalComponentWithDataBindingProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    student?: Student;
  } & {
    overrides?:
      | ConditionalComponentWithDataBindingOverridesProps
      | undefined
      | null;
  }
>;
export default function ConditionalComponentWithDataBinding(
  props: ConditionalComponentWithDataBindingProps
): React.ReactElement {
  const { student, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      {...getOverrideProps(overrides, \\"ConditionalComponentWithDataBinding\\")}
      {...rest}
    >
      <Text
        value={
          student?.id == \\"idstringuserinput\\" ? student?.createdAt : student?.id
        }
        children={
          student?.id == \\"idstringuserinput\\" ? student?.createdAt : student?.id
        }
        {...getOverrideProps(overrides, \\"Placeholder text\\")}
      ></Text>
      <Button
        value={
          student?.id == \\"idstringuserinput\\" ? student?.createdAt : student?.id
        }
        {...getOverrideProps(overrides, \\"Placeholder Button\\")}
      ></Button>
    </Flex>
  );
}
"
`;

exports[`amplify render tests concat and conditional transform should render component with conditional simple binding prop 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    buttonColor?: String;
  } & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { buttonColor, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      disabled={buttonColor == \\"red\\" ? true : false}
      {...getOverrideProps(overrides, \\"CustomButton\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests custom components alias parent should render declarations 1`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { GridProps } from \\"./Grid\\";
import { ButtonProps } from \\"@aws-amplify/ui-react\\";
import { ViewTestProps } from \\"./ViewTest\\";
export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type AliasParentOverridesProps = {
    AliasParent?: ViewTestProps;
    Grid?: GridProps;
    Button?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export declare type AliasParentProps = React.PropsWithChildren<Partial<ViewTestProps> & {
    overrides?: AliasParentOverridesProps | undefined | null;
}>;
export default function AliasParent(props: AliasParentProps): React.ReactElement;
"
`;

exports[`amplify render tests custom components alias parent should render parent with aliased child instead of primitive 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Grid as GridCustom, GridProps } from \\"./Grid\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
import ViewTest, { ViewTestProps } from \\"./ViewTest\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type AliasParentOverridesProps = {
  AliasParent?: ViewTestProps;
  Grid?: GridProps;
  Button?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type AliasParentProps = React.PropsWithChildren<
  Partial<ViewTestProps> & {
    overrides?: AliasParentOverridesProps | undefined | null;
  }
>;
export default function AliasParent(
  props: AliasParentProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <ViewTest {...getOverrideProps(overrides, \\"AliasParent\\")} {...rest}>
      <GridCustom {...getOverrideProps(overrides, \\"Grid\\")}></GridCustom>
      <Button {...getOverrideProps(overrides, \\"Button\\")}></Button>
    </ViewTest>
  );
}
"
`;

exports[`amplify render tests custom components custom children should render component with custom children 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
import MyView, { MyViewProps } from \\"./MyView\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomChildrenOverridesProps = {
  CustomChildren?: MyViewProps;
  MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export type CustomChildrenProps = React.PropsWithChildren<
  Partial<MyViewProps> & {
    overrides?: CustomChildrenOverridesProps | undefined | null;
  }
>;
export default function CustomChildren(
  props: CustomChildrenProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <MyView {...getOverrideProps(overrides, \\"CustomChildren\\")} {...rest}>
      <CustomButton
        {...getOverrideProps(overrides, \\"MyCustomButton\\")}
      ></CustomButton>
    </MyView>
  );
}
"
`;

exports[`amplify render tests custom components custom children should render component with custom children with ES5 1`] = `
"var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s)
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
import CustomButton from \\"./CustomButton\\";
import MyView from \\"./MyView\\";
export default function CustomChildren(props) {
  var overrides = props.overrides,
    rest = __rest(props, [\\"overrides\\"]);
  return React.createElement(
    MyView,
    __assign({}, getOverrideProps(overrides, \\"CustomChildren\\"), rest),
    React.createElement(
      CustomButton,
      __assign({}, getOverrideProps(overrides, \\"MyCustomButton\\"))
    )
  );
}
"
`;

exports[`amplify render tests custom components custom children should render declarations 1`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { CustomButtonProps } from \\"./CustomButton\\";
import { MyViewProps } from \\"./MyView\\";
export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type CustomChildrenOverridesProps = {
    CustomChildren?: MyViewProps;
    MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export declare type CustomChildrenProps = React.PropsWithChildren<Partial<MyViewProps> & {
    overrides?: CustomChildrenOverridesProps | undefined | null;
}>;
export default function CustomChildren(props: CustomChildrenProps): React.ReactElement;
"
`;

exports[`amplify render tests custom components custom parent and children should render component with custom parent and children 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
import ViewTest, { ViewTestProps } from \\"./ViewTest\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomParentAndChildrenOverridesProps = {
  CustomParentAndChildren?: ViewTestProps;
  MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export type CustomParentAndChildrenProps = React.PropsWithChildren<
  Partial<ViewTestProps> & {
    overrides?: CustomParentAndChildrenOverridesProps | undefined | null;
  }
>;
export default function CustomParentAndChildren(
  props: CustomParentAndChildrenProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <ViewTest
      {...getOverrideProps(overrides, \\"CustomParentAndChildren\\")}
      {...rest}
    >
      <CustomButton
        {...getOverrideProps(overrides, \\"MyCustomButton\\")}
      ></CustomButton>
    </ViewTest>
  );
}
"
`;

exports[`amplify render tests custom components custom parent and children should render component with custom parent and children with ES5 1`] = `
"var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s)
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
import CustomButton from \\"./CustomButton\\";
import ViewTest from \\"./ViewTest\\";
export default function CustomParentAndChildren(props) {
  var overrides = props.overrides,
    rest = __rest(props, [\\"overrides\\"]);
  return React.createElement(
    ViewTest,
    __assign({}, getOverrideProps(overrides, \\"CustomParentAndChildren\\"), rest),
    React.createElement(
      CustomButton,
      __assign({}, getOverrideProps(overrides, \\"MyCustomButton\\"))
    )
  );
}
"
`;

exports[`amplify render tests custom components custom parent and children should render declarations 1`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { CustomButtonProps } from \\"./CustomButton\\";
import { ViewTestProps } from \\"./ViewTest\\";
export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type CustomParentAndChildrenOverridesProps = {
    CustomParentAndChildren?: ViewTestProps;
    MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export declare type CustomParentAndChildrenProps = React.PropsWithChildren<Partial<ViewTestProps> & {
    overrides?: CustomParentAndChildrenOverridesProps | undefined | null;
}>;
export default function CustomParentAndChildren(props: CustomParentAndChildrenProps): React.ReactElement;
"
`;

exports[`amplify render tests custom components custom parent should render component 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";
import MyView, { MyViewProps } from \\"./MyView\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomParentOverridesProps = {
  CustomParent?: MyViewProps;
  MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomParentProps = React.PropsWithChildren<
  Partial<MyViewProps> & {
    overrides?: CustomParentOverridesProps | undefined | null;
  }
>;
export default function CustomParent(
  props: CustomParentProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <MyView {...getOverrideProps(overrides, \\"CustomParent\\")} {...rest}>
      <Button {...getOverrideProps(overrides, \\"MyButton\\")}></Button>
    </MyView>
  );
}
"
`;

exports[`amplify render tests custom components custom parent should render component with ES5 1`] = `
"var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s)
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
import { Button } from \\"@aws-amplify/ui-react\\";
import MyView from \\"./MyView\\";
export default function CustomParent(props) {
  var overrides = props.overrides,
    rest = __rest(props, [\\"overrides\\"]);
  return React.createElement(
    MyView,
    __assign({}, getOverrideProps(overrides, \\"CustomParent\\"), rest),
    React.createElement(
      Button,
      __assign({}, getOverrideProps(overrides, \\"MyButton\\"))
    )
  );
}
"
`;

exports[`amplify render tests custom components custom parent should render declarations 1`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { ButtonProps } from \\"@aws-amplify/ui-react\\";
import { MyViewProps } from \\"./MyView\\";
export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type CustomParentOverridesProps = {
    CustomParent?: MyViewProps;
    MyButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export declare type CustomParentProps = React.PropsWithChildren<Partial<MyViewProps> & {
    overrides?: CustomParentOverridesProps | undefined | null;
}>;
export default function CustomParent(props: CustomParentProps): React.ReactElement;
"
`;

exports[`amplify render tests custom render config should render ES5 1`] = `
"var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s)
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
import { Button, View } from \\"@aws-amplify/ui-react\\";
export default function ViewWithButton(props) {
  var overrides = props.overrides,
    rest = __rest(props, [\\"overrides\\"]);
  return React.createElement(
    View,
    __assign({}, getOverrideProps(overrides, \\"ViewWithButton\\"), rest),
    React.createElement(
      Button,
      __assign(
        { color: \\"#ff0000\\", width: \\"20px\\" },
        getOverrideProps(overrides, \\"MyButton\\")
      )
    )
  );
}
"
`;

exports[`amplify render tests custom render config should render JSX 1`] = `
"var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import { getOverrideProps } from \\"@aws-amplify/ui-react/internal\\";
import { Button, View } from \\"@aws-amplify/ui-react\\";
export default function ViewWithButton(props) {
  const { overrides } = props,
    rest = __rest(props, [\\"overrides\\"]);
  return (
    <View {...getOverrideProps(overrides, \\"ViewWithButton\\")} {...rest}>
      <Button
        color=\\"#ff0000\\"
        width=\\"20px\\"
        {...getOverrideProps(overrides, \\"MyButton\\")}
      ></Button>
    </View>
  );
}
"
`;

exports[`amplify render tests custom render config should render common JS 1`] = `
"\\"use strict\\";
var __createBinding =
  (this && this.__createBinding) ||
  (Object.create
    ? function (o, m, k, k2) {
        if (k2 === undefined) k2 = k;
        Object.defineProperty(o, k2, {
          enumerable: true,
          get: function () {
            return m[k];
          },
        });
      }
    : function (o, m, k, k2) {
        if (k2 === undefined) k2 = k;
        o[k2] = m[k];
      });
var __setModuleDefault =
  (this && this.__setModuleDefault) ||
  (Object.create
    ? function (o, v) {
        Object.defineProperty(o, \\"default\\", { enumerable: true, value: v });
      }
    : function (o, v) {
        o[\\"default\\"] = v;
      });
var __importStar =
  (this && this.__importStar) ||
  function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null)
      for (var k in mod)
        if (k !== \\"default\\" && Object.prototype.hasOwnProperty.call(mod, k))
          __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
Object.defineProperty(exports, \\"__esModule\\", { value: true });
/* eslint-disable */
const React = __importStar(require(\\"react\\"));
const internal_1 = require(\\"@aws-amplify/ui-react/internal\\");
const ui_react_1 = require(\\"@aws-amplify/ui-react\\");
function ViewWithButton(props) {
  const { overrides } = props,
    rest = __rest(props, [\\"overrides\\"]);
  return React.createElement(
    ui_react_1.View,
    Object.assign(
      {},
      (0, internal_1.getOverrideProps)(overrides, \\"ViewWithButton\\"),
      rest
    ),
    React.createElement(
      ui_react_1.Button,
      Object.assign(
        { color: \\"#ff0000\\", width: \\"20px\\" },
        (0, internal_1.getOverrideProps)(overrides, \\"MyButton\\")
      )
    )
  );
}
exports.default = ViewWithButton;
"
`;

exports[`amplify render tests declarations should render declarations 1`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { ButtonProps, FlexProps, ImageProps } from \\"@aws-amplify/ui-react\\";
export declare type PrimitiveOverrideProps<T> = Partial<T> & React.DOMAttributes<HTMLDivElement>;
export declare type ProfileOverridesProps = {
    Profile?: PrimitiveOverrideProps<FlexProps>;
    child1?: PrimitiveOverrideProps<ImageProps>;
    child2?: PrimitiveOverrideProps<ButtonProps>;
    child3?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export declare type ProfileProps = React.PropsWithChildren<Partial<FlexProps> & {
    overrides?: ProfileOverridesProps | undefined | null;
}>;
export default function Profile(props: ProfileProps): React.ReactElement;
"
`;

exports[`amplify render tests default value should render bound default value 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type BoundDefaultValueOverridesProps = {
  BoundDefaultValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type BoundDefaultValueProps = React.PropsWithChildren<
  Partial<TextProps> & {
    label?: String;
  } & {
    overrides?: BoundDefaultValueOverridesProps | undefined | null;
  }
>;
export default function BoundDefaultValue(
  props: BoundDefaultValueProps
): React.ReactElement {
  const { label, overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      children={label || \\"Bound Default\\"}
      {...getOverrideProps(overrides, \\"BoundDefaultValue\\")}
      {...rest}
    ></Text>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests default value should render collection default value 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Collection,
  CollectionProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";
import { MyTextProps } from \\"./MyText\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CollectionDefaultValueOverridesProps = {
  CollectionDefaultValue?: PrimitiveOverrideProps<CollectionProps>;
  MyText?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type CollectionDefaultValueProps = React.PropsWithChildren<
  Partial<CollectionProps<any>> & {
    items?: any[];
    overrideItems?: (collectionItem: {
      item: any;
      index: number;
    }) => MyTextProps;
  } & {
    overrides?: CollectionDefaultValueOverridesProps | undefined | null;
  }
>;
export default function CollectionDefaultValue(
  props: CollectionDefaultValueProps
): React.ReactElement {
  const { items, overrideItems, overrides, ...rest } = props;
  const [user, setUser] = React.useState(undefined);
  const userDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: User,
  }).items;
  React.useEffect(() => {
    if (items !== undefined) {
      setUser(items);
      return;
    }
    setUser(userDataStore);
  }, [items, userDataStore]);
  return (
    /* @ts-ignore: TS2322 */
    <Collection
      items={user || []}
      {...getOverrideProps(overrides, \\"CollectionDefaultValue\\")}
      {...rest}
    >
      {(item, index) => (
        <Text
          children={item.username || \\"Collection Default Value\\"}
          key={item.id}
          {...(overrideItems && overrideItems({ item, index }))}
        ></Text>
      )}
    </Collection>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests default value should render simple and bound default value 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SimpleAndBoundDefaultValueOverridesProps = {
  SimpleAndBoundDefaultValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type SimpleAndBoundDefaultValueProps = React.PropsWithChildren<
  Partial<TextProps> & {
    label?: String;
  } & {
    overrides?: SimpleAndBoundDefaultValueOverridesProps | undefined | null;
  }
>;
export default function SimpleAndBoundDefaultValue(
  props: SimpleAndBoundDefaultValueProps
): React.ReactElement {
  const { label = \\"Simple Double Default\\", overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      children={label || \\"Bound Double Default\\"}
      {...getOverrideProps(overrides, \\"SimpleAndBoundDefaultValue\\")}
      {...rest}
    ></Text>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests default value should render simple default value 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SimplePropertyBindingDefaultValueOverridesProps = {
  SimplePropertyBindingDefaultValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type SimplePropertyBindingDefaultValueProps = React.PropsWithChildren<
  Partial<TextProps> & {
    label?: String;
  } & {
    overrides?:
      | SimplePropertyBindingDefaultValueOverridesProps
      | undefined
      | null;
  }
>;
export default function SimplePropertyBindingDefaultValue(
  props: SimplePropertyBindingDefaultValueProps
): React.ReactElement {
  const { label = \\"Default Binding Property\\", overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Text
      children={label}
      {...getOverrideProps(overrides, \\"SimplePropertyBindingDefaultValue\\")}
      {...rest}
    ></Text>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests icon-indices does not return negative indices for icons 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  Icon,
  IconProps,
  Image,
  ImageProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SocialAOverridesProps = {
  SocialA?: PrimitiveOverrideProps<FlexProps>;
  Body?: PrimitiveOverrideProps<FlexProps>;
  Text?: PrimitiveOverrideProps<FlexProps>;
  Headline?: PrimitiveOverrideProps<FlexProps>;
  \\"New Amplify Studio gives designers the ability to export UI to React code\\"?: PrimitiveOverrideProps<TextProps>;
  Frame?: PrimitiveOverrideProps<FlexProps>;
  \\"Nikhil S\\"?: PrimitiveOverrideProps<TextProps>;
  \\"2nd December 2021\\"?: PrimitiveOverrideProps<TextProps>;
  Article?: PrimitiveOverrideProps<FlexProps>;
  Iconynp?: PrimitiveOverrideProps<IconProps>;
  \\"AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.\\"?: PrimitiveOverrideProps<TextProps>;
  Shareakz?: PrimitiveOverrideProps<FlexProps>;
  Sharedgc?: PrimitiveOverrideProps<TextProps>;
  Iconsrv?: PrimitiveOverrideProps<IconProps>;
  Iconwdz?: PrimitiveOverrideProps<IconProps>;
  Iconxpr?: PrimitiveOverrideProps<IconProps>;
  image?: PrimitiveOverrideProps<ImageProps>;
  \\"Read moreudv\\"?: PrimitiveOverrideProps<FlexProps>;
  Iconlxm?: PrimitiveOverrideProps<IconProps>;
  \\"Read morepbe\\"?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type SocialAProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: SocialAOverridesProps | undefined | null;
  }
>;
export default function SocialA(props: SocialAProps): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      width=\\"960px\\"
      padding=\\"24px 24px 24px 24px\\"
      backgroundColor=\\"rgba(255,255,255,1)\\"
      position=\\"relative\\"
      gap=\\"16px\\"
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"SocialA\\")}
      {...rest}
    >
      <Flex
        padding=\\"0px 0px 0px 0px\\"
        alignSelf=\\"stretch\\"
        alignItems=\\"flex-start\\"
        shrink=\\"0\\"
        gap=\\"40px\\"
        position=\\"relative\\"
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"Body\\")}
      >
        <Flex
          padding=\\"0px 0px 0px 0px\\"
          grow=\\"1\\"
          gap=\\"16px\\"
          width=\\"712px\\"
          position=\\"relative\\"
          basis=\\"712px\\"
          direction=\\"column\\"
          height=\\"344px\\"
          {...getOverrideProps(overrides, \\"Text\\")}
        >
          <Flex
            padding=\\"0px 0px 0px 0px\\"
            alignSelf=\\"stretch\\"
            position=\\"relative\\"
            shrink=\\"0\\"
            gap=\\"16px\\"
            direction=\\"column\\"
            {...getOverrideProps(overrides, \\"Headline\\")}
          >
            <Text
              padding=\\"0px 0px 0px 0px\\"
              alignSelf=\\"stretch\\"
              color=\\"rgba(0,0,0,1)\\"
              textAlign=\\"left\\"
              shrink=\\"0\\"
              display=\\"flex\\"
              justifyContent=\\"flex-start\\"
              fontFamily=\\"Inter\\"
              width=\\"712px\\"
              fontSize=\\"32px\\"
              lineHeight=\\"40px\\"
              position=\\"relative\\"
              fontWeight=\\"700\\"
              direction=\\"column\\"
              children=\\"New Amplify Studio gives designers the ability to export UI to React code\\"
              {...getOverrideProps(
                overrides,
                \\"New Amplify Studio gives designers the ability to export UI to React code\\"
              )}
            ></Text>
            <Flex
              padding=\\"0px 0px 0px 0px\\"
              alignSelf=\\"stretch\\"
              alignItems=\\"flex-start\\"
              shrink=\\"0\\"
              gap=\\"16px\\"
              position=\\"relative\\"
              direction=\\"row\\"
              {...getOverrideProps(overrides, \\"Frame\\")}
            >
              <Text
                padding=\\"0px 0px 0px 0px\\"
                color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
                textAlign=\\"left\\"
                shrink=\\"0\\"
                display=\\"flex\\"
                letterSpacing=\\"0.010000000000000009px\\"
                justifyContent=\\"flex-start\\"
                fontFamily=\\"Inter\\"
                fontSize=\\"16px\\"
                lineHeight=\\"24px\\"
                position=\\"relative\\"
                fontWeight=\\"400\\"
                direction=\\"column\\"
                children=\\"Nikhil S\\"
                {...getOverrideProps(overrides, \\"Nikhil S\\")}
              ></Text>
              <Text
                padding=\\"0px 0px 0px 0px\\"
                color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
                textAlign=\\"left\\"
                shrink=\\"0\\"
                display=\\"flex\\"
                letterSpacing=\\"0.010000000000000009px\\"
                justifyContent=\\"flex-start\\"
                fontFamily=\\"Inter\\"
                width=\\"1396px\\"
                fontSize=\\"16px\\"
                lineHeight=\\"24px\\"
                position=\\"relative\\"
                fontWeight=\\"400\\"
                direction=\\"column\\"
                children=\\"2nd December 2021\\"
                {...getOverrideProps(overrides, \\"2nd December 2021\\")}
              ></Text>
            </Flex>
          </Flex>
          <Flex
            padding=\\"0px 0px 0px 0px\\"
            alignSelf=\\"stretch\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            gap=\\"16px\\"
            position=\\"relative\\"
            direction=\\"row\\"
            {...getOverrideProps(overrides, \\"Article\\")}
          >
            <Icon
              padding=\\"0px 0px 0px 0px\\"
              overflow=\\"hidden\\"
              color=\\"rgba(207.00000286102295,77.00001060962677,193.99995803833008,1)\\"
              shrink=\\"0\\"
              width=\\"24px\\"
              fontSize=\\"24px\\"
              position=\\"relative\\"
              type=\\"arrow_forward\\"
              height=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconynp\\")}
            ></Icon>
            <Text
              padding=\\"0px 0px 0px 0px\\"
              grow=\\"1\\"
              color=\\"rgba(0,0,0,1)\\"
              textAlign=\\"left\\"
              display=\\"flex\\"
              basis=\\"672px\\"
              justifyContent=\\"flex-start\\"
              fontFamily=\\"Inter\\"
              width=\\"672px\\"
              fontSize=\\"16px\\"
              lineHeight=\\"24px\\"
              position=\\"relative\\"
              fontWeight=\\"400\\"
              direction=\\"column\\"
              children=\\"AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.\\"
              {...getOverrideProps(
                overrides,
                \\"AWS Amplify Studio is a visual development environment for building full-stack web and mobile apps that grows with your business. Studio builds on existing backend building capabilities in AWS Amplify, allowing you to build your UI faster with a set of ready-to-use UI components that are editable in Figma. With Studio, you can quickly build an entire web app, front-to-back, with minimal coding, while still maintaining full control over your app design and behavior through code. Ship faster, scale effortlessly, and delight every user.\\"
              )}
            ></Text>
          </Flex>
          <Flex
            padding=\\"0px 0px 0px 0px\\"
            alignItems=\\"flex-start\\"
            shrink=\\"0\\"
            gap=\\"16px\\"
            width=\\"165px\\"
            position=\\"relative\\"
            direction=\\"row\\"
            {...getOverrideProps(overrides, \\"Shareakz\\")}
          >
            <Text
              padding=\\"0px 0px 0px 0px\\"
              color=\\"rgba(128.0000075697899,128.0000075697899,128.0000075697899,1)\\"
              textAlign=\\"left\\"
              shrink=\\"0\\"
              display=\\"flex\\"
              letterSpacing=\\"0.010000000000000009px\\"
              justifyContent=\\"flex-start\\"
              fontFamily=\\"Inter\\"
              fontSize=\\"16px\\"
              lineHeight=\\"24px\\"
              position=\\"relative\\"
              fontWeight=\\"400\\"
              direction=\\"column\\"
              children=\\"Share\\"
              {...getOverrideProps(overrides, \\"Sharedgc\\")}
            ></Text>
            <Icon
              padding=\\"0px 0px 0px 0px\\"
              overflow=\\"hidden\\"
              color=\\"rgba(0,0,0,1)\\"
              shrink=\\"0\\"
              width=\\"24px\\"
              fontSize=\\"24px\\"
              position=\\"relative\\"
              type=\\"bookmark_border\\"
              height=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconsrv\\")}
            ></Icon>
            <Icon
              padding=\\"0px 0px 0px 0px\\"
              overflow=\\"hidden\\"
              color=\\"rgba(0,0,0,1)\\"
              shrink=\\"0\\"
              width=\\"24px\\"
              fontSize=\\"24px\\"
              position=\\"relative\\"
              type=\\"share\\"
              height=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconwdz\\")}
            ></Icon>
            <Icon
              padding=\\"0px 0px 0px 0px\\"
              overflow=\\"hidden\\"
              color=\\"rgba(0,0,0,1)\\"
              shrink=\\"0\\"
              width=\\"24px\\"
              fontSize=\\"24px\\"
              position=\\"relative\\"
              type=\\"more_vert\\"
              height=\\"24px\\"
              pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
              {...getOverrideProps(overrides, \\"Iconxpr\\")}
            ></Icon>
          </Flex>
        </Flex>
        <Image
          width=\\"160px\\"
          padding=\\"0px 0px 0px 0px\\"
          position=\\"relative\\"
          borderRadius=\\"16px\\"
          shrink=\\"0\\"
          height=\\"160px\\"
          {...getOverrideProps(overrides, \\"image\\")}
        ></Image>
      </Flex>
      <Flex
        padding=\\"0px 0px 0px 0px\\"
        alignSelf=\\"stretch\\"
        alignItems=\\"flex-start\\"
        shrink=\\"0\\"
        gap=\\"16px\\"
        position=\\"relative\\"
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"Read moreudv\\")}
      >
        <Icon
          padding=\\"0px 0px 0px 0px\\"
          overflow=\\"hidden\\"
          color=\\"rgba(0,0,0,1)\\"
          shrink=\\"0\\"
          width=\\"24px\\"
          fontSize=\\"24px\\"
          position=\\"relative\\"
          type=\\"arrow_forward\\"
          height=\\"24px\\"
          pathData=\\"M5.59 10.58L1.42 6.41L0 7.82L5.59 13.41L17.59 1.41L16.18 0L5.59 10.58Z\\"
          {...getOverrideProps(overrides, \\"Iconlxm\\")}
        ></Icon>
        <Text
          padding=\\"0px 0px 0px 0px\\"
          grow=\\"1\\"
          color=\\"rgba(0,0,0,1)\\"
          textAlign=\\"left\\"
          display=\\"flex\\"
          letterSpacing=\\"0.010000000000000009px\\"
          textDecoration=\\"underline\\"
          basis=\\"872px\\"
          justifyContent=\\"flex-start\\"
          fontFamily=\\"Inter\\"
          width=\\"872px\\"
          fontSize=\\"16px\\"
          lineHeight=\\"24px\\"
          position=\\"relative\\"
          fontWeight=\\"400\\"
          direction=\\"column\\"
          children=\\"Read more\\"
          {...getOverrideProps(overrides, \\"Read morepbe\\")}
        ></Text>
      </Flex>
    </Flex>
  );
}
"
`;

exports[`amplify render tests mutations controls an input that is modified by a button 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  TextField,
  TextFieldProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type InputMutationOnClickOverridesProps = {
  InputMutationOnClick?: PrimitiveOverrideProps<FlexProps>;
  MyInput?: PrimitiveOverrideProps<TextFieldProps>;
  SetInputButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type InputMutationOnClickProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: InputMutationOnClickOverridesProps | undefined | null;
  }
>;
export default function InputMutationOnClick(
  props: InputMutationOnClickProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [myInputValue, setMyInputValue] = useStateMutationAction(\\"\\");
  const setInputButtonOnClick = () => {
    setMyInputValue(\\"Razor Crest\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"InputMutationOnClick\\")} {...rest}>
      <TextField
        value={myInputValue}
        onChange={(event: SyntheticEvent) => {
          setMyInputValue(event.target.value);
        }}
        {...getOverrideProps(overrides, \\"MyInput\\")}
      ></TextField>
      <Button
        children=\\"Change Input\\"
        onClick={() => {
          setInputButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"SetInputButton\\")}
      ></Button>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations form 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useDataStoreUpdateAction,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Customer } from \\"../models\\";
import { schema } from \\"../models/schema\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  TextField,
  TextFieldProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type MyFormOverridesProps = {
  MyForm?: PrimitiveOverrideProps<FlexProps>;
  UsernameTextField?: PrimitiveOverrideProps<TextFieldProps>;
  SubmitButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type MyFormProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: MyFormOverridesProps | undefined | null;
  }
>;
export default function MyForm(props: MyFormProps): React.ReactElement {
  const { overrides, ...rest } = props;
  const [usernameTextFieldValue, setUsernameTextFieldValue] =
    useStateMutationAction(\\"vizsla\\");
  const submitButtonOnClick = useDataStoreUpdateAction({
    model: Customer,
    id: \\"d9887268-47dd-4899-9568-db5809218751\\",
    fields: { username: usernameTextFieldValue },
    schema: schema,
  });
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"MyForm\\")} {...rest}>
      <TextField
        label=\\"Username\\"
        value={usernameTextFieldValue}
        onChange={(event: SyntheticEvent) => {
          setUsernameTextFieldValue(event.target.value);
        }}
        {...getOverrideProps(overrides, \\"UsernameTextField\\")}
      ></TextField>
      <Button
        children=\\"Submit\\"
        onClick={() => {
          submitButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"SubmitButton\\")}
      ></Button>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations internal mutation 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps, Flex, FlexProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ColorChangeOnClickOverridesProps = {
  ColorChangeOnClick?: PrimitiveOverrideProps<FlexProps>;
  ColoredBox?: PrimitiveOverrideProps<FlexProps>;
  ColorChangerButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ColorChangeOnClickProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ColorChangeOnClickOverridesProps | undefined | null;
  }
>;
export default function ColorChangeOnClick(
  props: ColorChangeOnClickProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [coloredBoxBackgroundColor, setColoredBoxBackgroundColor] =
    useStateMutationAction(\\"red\\");
  const colorChangerButtonOnClick = () => {
    setColoredBoxBackgroundColor(\\"blue\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"ColorChangeOnClick\\")} {...rest}>
      <Flex
        backgroundColor={coloredBoxBackgroundColor}
        {...getOverrideProps(overrides, \\"ColoredBox\\")}
      ></Flex>
      <Button
        children=\\"Change Color\\"
        onClick={() => {
          colorChangerButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"ColorChangerButton\\")}
      ></Button>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations modifies text in component on input change 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  Text,
  TextField,
  TextFieldProps,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TwoWayBindingsOverridesProps = {
  TwoWayBindings?: PrimitiveOverrideProps<FlexProps>;
  TextFieldInput?: PrimitiveOverrideProps<TextFieldProps>;
  TextFieldValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type TwoWayBindingsProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: TwoWayBindingsOverridesProps | undefined | null;
  }
>;
export default function TwoWayBindings(
  props: TwoWayBindingsProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [textFieldInputValue, setTextFieldInputValue] =
    useStateMutationAction(\\"\\");
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"TwoWayBindings\\")}
      {...rest}
    >
      <TextField
        label=\\"Name\\"
        placeholder=\\"Galadriel\\"
        value={textFieldInputValue}
        onChange={(event: SyntheticEvent) => {
          setTextFieldInputValue(event.target.value);
        }}
        {...getOverrideProps(overrides, \\"TextFieldInput\\")}
      ></TextField>
      <Text
        children={textFieldInputValue}
        {...getOverrideProps(overrides, \\"TextFieldValue\\")}
      ></Text>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports a controlled checkbox primitive 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  CheckboxField,
  CheckboxFieldProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CheckboxControlledElementOverridesProps = {
  CheckboxControlledElement?: PrimitiveOverrideProps<FlexProps>;
  Input?: PrimitiveOverrideProps<CheckboxFieldProps>;
  CheckboxFieldValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type CheckboxControlledElementProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: CheckboxControlledElementOverridesProps | undefined | null;
  }
>;
export default function CheckboxControlledElement(
  props: CheckboxControlledElementProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [inputChecked, setInputChecked] = useStateMutationAction(false);
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      {...getOverrideProps(overrides, \\"CheckboxControlledElement\\")}
      {...rest}
    >
      <CheckboxField
        checked={inputChecked}
        onChange={(event: SyntheticEvent) => {
          setInputChecked(event.target.checked);
        }}
        {...getOverrideProps(overrides, \\"Input\\")}
      ></CheckboxField>
      <Text
        children={inputChecked}
        {...getOverrideProps(overrides, \\"CheckboxFieldValue\\")}
      ></Text>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports a controlled stepper primitive 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  StepperField,
  StepperFieldProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type StepperControlledElementOverridesProps = {
  StepperControlledElement?: PrimitiveOverrideProps<FlexProps>;
  Input?: PrimitiveOverrideProps<StepperFieldProps>;
  StepperFieldValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type StepperControlledElementProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: StepperControlledElementOverridesProps | undefined | null;
  }
>;
export default function StepperControlledElement(
  props: StepperControlledElementProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [inputValue, setInputValue] = useStateMutationAction(0);
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      {...getOverrideProps(overrides, \\"StepperControlledElement\\")}
      {...rest}
    >
      <StepperField
        label=\\"Stepper\\"
        min={0}
        max={10}
        step={1}
        labelHidden={true}
        value={inputValue}
        onStepChange={(value: number) => setInputValue(value)}
        {...getOverrideProps(overrides, \\"Input\\")}
      ></StepperField>
      <Text
        children={inputValue}
        {...getOverrideProps(overrides, \\"StepperFieldValue\\")}
      ></Text>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports a controlled switch primitive 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  SwitchField,
  SwitchFieldProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SwitchControlledElementOverridesProps = {
  SwitchControlledElement?: PrimitiveOverrideProps<FlexProps>;
  Input?: PrimitiveOverrideProps<SwitchFieldProps>;
  SwitchFieldValue?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type SwitchControlledElementProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: SwitchControlledElementOverridesProps | undefined | null;
  }
>;
export default function SwitchControlledElement(
  props: SwitchControlledElementProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [inputIsChecked, setInputIsChecked] = useStateMutationAction(false);
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"SwitchControlledElement\\")} {...rest}>
      <SwitchField
        isChecked={inputIsChecked}
        onChange={() => setInputIsChecked(!inputIsChecked)}
        {...getOverrideProps(overrides, \\"Input\\")}
      ></SwitchField>
      <Text
        children={inputIsChecked}
        {...getOverrideProps(overrides, \\"SwitchFieldValue\\")}
      ></Text>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports all initial value binding types 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { User } from \\"../models\\";
import {
  EscapeHatchProps,
  createDataStorePredicate,
  getOverrideProps,
  useAuth,
  useDataStoreBinding,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { useEffect } from \\"react\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Heading,
  HeadingProps,
  Text,
  TextField,
  TextFieldProps,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type InitialValueBindingsOverridesProps = {
  InitialValueBindings?: PrimitiveOverrideProps<FlexProps>;
  Heading?: PrimitiveOverrideProps<HeadingProps>;
  FixedValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  FixedValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  FixedValueContents?: PrimitiveOverrideProps<TextProps>;
  FixedValueMutation?: PrimitiveOverrideProps<ButtonProps>;
  BoundValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  BoundValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  BoundValueContents?: PrimitiveOverrideProps<TextProps>;
  BoundValueMutation?: PrimitiveOverrideProps<ButtonProps>;
  ConcatValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  ConcatValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  ConcatValueContents?: PrimitiveOverrideProps<TextProps>;
  ConcatValueMutation?: PrimitiveOverrideProps<ButtonProps>;
  ConditionalValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  ConditionalValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  ConditionalValueContents?: PrimitiveOverrideProps<TextProps>;
  ConditionalValueMutation?: PrimitiveOverrideProps<ButtonProps>;
  AuthValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  AuthValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  AuthValueContents?: PrimitiveOverrideProps<TextProps>;
  AuthValueMutation?: PrimitiveOverrideProps<ButtonProps>;
  StateValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  StateValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  StateValueContents?: PrimitiveOverrideProps<TextProps>;
  StateValueMutation?: PrimitiveOverrideProps<ButtonProps>;
  StateSource?: PrimitiveOverrideProps<TextProps>;
  TextFieldValueInitialBindingSection?: PrimitiveOverrideProps<FlexProps>;
  TextFieldValueHeading?: PrimitiveOverrideProps<HeadingProps>;
  TextFieldValueContents?: PrimitiveOverrideProps<TextFieldProps>;
  TextFieldValueMutation?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type InitialValueBindingsProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    user?: User;
  } & {
    overrides?: InitialValueBindingsOverridesProps | undefined | null;
  }
>;
export default function InitialValueBindings(
  props: InitialValueBindingsProps
): React.ReactElement {
  const { user: userProp, overrides, ...rest } = props;
  const authAttributes = useAuth().user?.attributes ?? {};
  const userFilterObj = {
    field: \\"firstName\\",
    operand: \\"Johnny\\",
    operator: \\"eq\\",
  };
  const userFilter = createDataStorePredicate<User>(userFilterObj);
  const userDataStore = useDataStoreBinding({
    type: \\"collection\\",
    model: User,
    criteria: userFilter,
  }).items[0];
  const user = userProp !== undefined ? userProp : userDataStore;
  const [stateSourceChildren, setStateSourceChildren] =
    useStateMutationAction(\\"State Value\\");
  const [fixedValueContentsChildren, setFixedValueContentsChildren] =
    useStateMutationAction(\\"Fixed Value\\");
  const [boundValueContentsChildren, setBoundValueContentsChildren] =
    useStateMutationAction(undefined);
  const [concatValueContentsChildren, setConcatValueContentsChildren] =
    useStateMutationAction(\`\${\\"Concat\\"}\${\\" \\"}\${\\"Value\\"}\`);
  const [
    conditionalValueContentsChildren,
    setConditionalValueContentsChildren,
  ] = useStateMutationAction(undefined);
  const [authValueContentsChildren, setAuthValueContentsChildren] =
    useStateMutationAction(undefined);
  const [stateValueContentsChildren, setStateValueContentsChildren] =
    useStateMutationAction(stateSourceChildren);
  const [textFieldValueContentsValue, setTextFieldValueContentsValue] =
    useStateMutationAction(\\"\\");
  const fixedValueMutationOnClick = () => {
    setFixedValueContentsChildren(\\"Mutated Value\\");
  };
  const boundValueMutationOnClick = () => {
    setBoundValueContentsChildren(\\"Mutated Value\\");
  };
  const concatValueMutationOnClick = () => {
    setConcatValueContentsChildren(\\"Mutated Value\\");
  };
  const conditionalValueMutationOnClick = () => {
    setConditionalValueContentsChildren(\\"Mutated Value\\");
  };
  const authValueMutationOnClick = () => {
    setAuthValueContentsChildren(\\"Mutated Value\\");
  };
  const stateValueMutationOnClick = () => {
    setStateValueContentsChildren(\\"Mutated Value\\");
  };
  const textFieldValueMutationOnClick = () => {
    setTextFieldValueContentsValue(\\"Mutated Value\\");
  };
  useEffect(() => {
    if (
      boundValueContentsChildren === undefined &&
      user !== undefined &&
      user?.lastName !== undefined
    )
      setBoundValueContentsChildren(user?.lastName);
  }, [user]);
  useEffect(() => {
    if (
      conditionalValueContentsChildren === undefined &&
      user !== undefined &&
      (user?.lastName == \\"Bound Value\\"
        ? \\"Conditional Value\\"
        : \\"Unconditional Value\\") !== undefined
    )
      setConditionalValueContentsChildren(
        user?.lastName == \\"Bound Value\\"
          ? \\"Conditional Value\\"
          : \\"Unconditional Value\\"
      );
  }, [user]);
  useEffect(() => {
    if (
      authValueContentsChildren === undefined &&
      authAttributes !== undefined &&
      authAttributes[\\"email\\"] !== undefined
    )
      setAuthValueContentsChildren(authAttributes[\\"email\\"]);
  }, [authAttributes]);
  useEffect(() => {
    if (
      textFieldValueContentsValue === \\"\\" &&
      authAttributes !== undefined &&
      authAttributes[\\"email\\"] !== undefined
    )
      setTextFieldValueContentsValue(authAttributes[\\"email\\"]);
  }, [authAttributes]);
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"InitialValueBindings\\")}
      {...rest}
    >
      <Heading
        level={3}
        children=\\"Mutation Initial Value Bindings\\"
        {...getOverrideProps(overrides, \\"Heading\\")}
      ></Heading>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"FixedValueInitialBindingSection\\")}
      >
        <Heading
          level={5}
          children=\\"Fixed Initial Value\\"
          {...getOverrideProps(overrides, \\"FixedValueHeading\\")}
        ></Heading>
        <Text
          children={fixedValueContentsChildren}
          {...getOverrideProps(overrides, \\"FixedValueContents\\")}
        ></Text>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            fixedValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"FixedValueMutation\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"BoundValueInitialBindingSection\\")}
      >
        <Heading
          level={5}
          children=\\"Bound Initial Value\\"
          {...getOverrideProps(overrides, \\"BoundValueHeading\\")}
        ></Heading>
        <Text
          children={boundValueContentsChildren}
          {...getOverrideProps(overrides, \\"BoundValueContents\\")}
        ></Text>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            boundValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"BoundValueMutation\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"ConcatValueInitialBindingSection\\")}
      >
        <Heading
          level={5}
          children=\\"Concat Initial Value\\"
          {...getOverrideProps(overrides, \\"ConcatValueHeading\\")}
        ></Heading>
        <Text
          children={concatValueContentsChildren}
          {...getOverrideProps(overrides, \\"ConcatValueContents\\")}
        ></Text>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            concatValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"ConcatValueMutation\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(
          overrides,
          \\"ConditionalValueInitialBindingSection\\"
        )}
      >
        <Heading
          level={5}
          children=\\"Conditional Initial Value\\"
          {...getOverrideProps(overrides, \\"ConditionalValueHeading\\")}
        ></Heading>
        <Text
          children={conditionalValueContentsChildren}
          {...getOverrideProps(overrides, \\"ConditionalValueContents\\")}
        ></Text>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            conditionalValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"ConditionalValueMutation\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"AuthValueInitialBindingSection\\")}
      >
        <Heading
          level={5}
          children=\\"Auth Initial Value\\"
          {...getOverrideProps(overrides, \\"AuthValueHeading\\")}
        ></Heading>
        <Text
          children={authValueContentsChildren}
          {...getOverrideProps(overrides, \\"AuthValueContents\\")}
        ></Text>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            authValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"AuthValueMutation\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"StateValueInitialBindingSection\\")}
      >
        <Heading
          level={5}
          children=\\"State Initial Value\\"
          {...getOverrideProps(overrides, \\"StateValueHeading\\")}
        ></Heading>
        <Text
          children={stateValueContentsChildren}
          {...getOverrideProps(overrides, \\"StateValueContents\\")}
        ></Text>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            stateValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"StateValueMutation\\")}
        ></Button>
        <Text
          children={stateSourceChildren}
          {...getOverrideProps(overrides, \\"StateSource\\")}
        ></Text>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"TextFieldValueInitialBindingSection\\")}
      >
        <Heading
          level={5}
          children=\\"Text Field Initial Value\\"
          {...getOverrideProps(overrides, \\"TextFieldValueHeading\\")}
        ></Heading>
        <TextField
          value={textFieldValueContentsValue}
          onChange={(event: SyntheticEvent) => {
            setTextFieldValueContentsValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"TextFieldValueContents\\")}
        ></TextField>
        <Button
          children=\\"Mutate\\"
          onClick={() => {
            textFieldValueMutationOnClick();
          }}
          {...getOverrideProps(overrides, \\"TextFieldValueMutation\\")}
        ></Button>
      </Flex>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports invalid statement names for mutation targets 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import { Listing } from \\"../models\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  Image,
  ImageProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CardAOverridesProps = {
  CardA?: PrimitiveOverrideProps<FlexProps>;
  image?: PrimitiveOverrideProps<ImageProps>;
  \\"Text Grouping\\"?: PrimitiveOverrideProps<FlexProps>;
  \\"Classic Long Sleeve T-Shirt\\"?: PrimitiveOverrideProps<TextProps>;
  $99?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type CardAProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    listing?: Listing;
  } & {
    overrides?: CardAOverridesProps | undefined | null;
  }
>;
export default function CardA(props: CardAProps): React.ReactElement {
  const { listing, overrides, ...rest } = props;
  const [classicLongSleeveTShirtChildren, setClassicLongSleeveTShirtChildren] =
    useStateMutationAction(\\"Classic Long Sleeve T-Shirt\\");
  const dollarNineNineOnClick = () => {
    setClassicLongSleeveTShirtChildren(listing?.titl);
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      gap=\\"16px\\"
      direction=\\"column\\"
      justifyContent=\\"center\\"
      position=\\"relative\\"
      padding=\\"0px 0px 0px 0px\\"
      backgroundColor=\\"rgba(255,255,255,1)\\"
      {...getOverrideProps(overrides, \\"CardA\\")}
      {...rest}
    >
      <Image
        height=\\"400px\\"
        shrink=\\"0\\"
        alignSelf=\\"stretch\\"
        position=\\"relative\\"
        padding=\\"0px 0px 0px 0px\\"
        {...getOverrideProps(overrides, \\"image\\")}
      ></Image>
      <Flex
        gap=\\"8px\\"
        direction=\\"column\\"
        shrink=\\"0\\"
        alignSelf=\\"stretch\\"
        position=\\"relative\\"
        padding=\\"0px 0px 0px 0px\\"
        {...getOverrideProps(overrides, \\"Text Grouping\\")}
      >
        <Text
          fontFamily=\\"Inter\\"
          fontSize=\\"16px\\"
          fontWeight=\\"400\\"
          color=\\"rgba(0,0,0,1)\\"
          lineHeight=\\"24px\\"
          textAlign=\\"left\\"
          display=\\"flex\\"
          direction=\\"column\\"
          justifyContent=\\"flex-start\\"
          letterSpacing=\\"0.01px\\"
          shrink=\\"0\\"
          alignSelf=\\"stretch\\"
          position=\\"relative\\"
          padding=\\"0px 0px 0px 0px\\"
          whiteSpace=\\"pre-wrap\\"
          children={classicLongSleeveTShirtChildren}
          {...getOverrideProps(overrides, \\"Classic Long Sleeve T-Shirt\\")}
        ></Text>
        <Text
          fontFamily=\\"Inter\\"
          fontSize=\\"14px\\"
          fontWeight=\\"400\\"
          color=\\"rgba(43,51,59,1)\\"
          lineHeight=\\"24px\\"
          textAlign=\\"left\\"
          display=\\"flex\\"
          direction=\\"column\\"
          justifyContent=\\"flex-start\\"
          shrink=\\"0\\"
          alignSelf=\\"stretch\\"
          position=\\"relative\\"
          padding=\\"0px 0px 0px 0px\\"
          whiteSpace=\\"pre-wrap\\"
          children=\\"$99\\"
          onClick={() => {
            dollarNineNineOnClick();
          }}
          {...getOverrideProps(overrides, \\"$99\\")}
        ></Text>
      </Flex>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports invalid statement names for mutation targets with ES5 1`] = `
"var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s)
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import {
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, Image, Text } from \\"@aws-amplify/ui-react\\";
export default function CardA(props) {
  var listing = props.listing,
    overrides = props.overrides,
    rest = __rest(props, [\\"listing\\", \\"overrides\\"]);
  var _a = useStateMutationAction(\\"Classic Long Sleeve T-Shirt\\"),
    classicLongSleeveTShirtChildren = _a[0],
    setClassicLongSleeveTShirtChildren = _a[1];
  var dollarNineNineOnClick = function () {
    setClassicLongSleeveTShirtChildren(
      listing === null || listing === void 0 ? void 0 : listing.titl
    );
  };
  return React.createElement(
    Flex,
    __assign(
      {
        gap: \\"16px\\",
        direction: \\"column\\",
        justifyContent: \\"center\\",
        position: \\"relative\\",
        padding: \\"0px 0px 0px 0px\\",
        backgroundColor: \\"rgba(255,255,255,1)\\",
      },
      getOverrideProps(overrides, \\"CardA\\"),
      rest
    ),
    React.createElement(
      Image,
      __assign(
        {
          height: \\"400px\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
        getOverrideProps(overrides, \\"image\\")
      )
    ),
    React.createElement(
      Flex,
      __assign(
        {
          gap: \\"8px\\",
          direction: \\"column\\",
          shrink: \\"0\\",
          alignSelf: \\"stretch\\",
          position: \\"relative\\",
          padding: \\"0px 0px 0px 0px\\",
        },
        getOverrideProps(overrides, \\"Text Grouping\\")
      ),
      React.createElement(
        Text,
        __assign(
          {
            fontFamily: \\"Inter\\",
            fontSize: \\"16px\\",
            fontWeight: \\"400\\",
            color: \\"rgba(0,0,0,1)\\",
            lineHeight: \\"24px\\",
            textAlign: \\"left\\",
            display: \\"flex\\",
            direction: \\"column\\",
            justifyContent: \\"flex-start\\",
            letterSpacing: \\"0.01px\\",
            shrink: \\"0\\",
            alignSelf: \\"stretch\\",
            position: \\"relative\\",
            padding: \\"0px 0px 0px 0px\\",
            whiteSpace: \\"pre-wrap\\",
            children: classicLongSleeveTShirtChildren,
          },
          getOverrideProps(overrides, \\"Classic Long Sleeve T-Shirt\\")
        )
      ),
      React.createElement(
        Text,
        __assign(
          {
            fontFamily: \\"Inter\\",
            fontSize: \\"14px\\",
            fontWeight: \\"400\\",
            color: \\"rgba(43,51,59,1)\\",
            lineHeight: \\"24px\\",
            textAlign: \\"left\\",
            display: \\"flex\\",
            direction: \\"column\\",
            justifyContent: \\"flex-start\\",
            shrink: \\"0\\",
            alignSelf: \\"stretch\\",
            position: \\"relative\\",
            padding: \\"0px 0px 0px 0px\\",
            whiteSpace: \\"pre-wrap\\",
            children: \\"$99\\",
            onClick: function () {
              dollarNineNineOnClick();
            },
          },
          getOverrideProps(overrides, \\"$99\\")
        )
      )
    )
  );
}
"
`;

exports[`amplify render tests mutations supports multiple actions pointing to the same value 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ButtonsToggleStateOverridesProps = {
  ButtonsToggleState?: PrimitiveOverrideProps<FlexProps>;
  FooBarValue?: PrimitiveOverrideProps<TextProps>;
  FooButton?: PrimitiveOverrideProps<ButtonProps>;
  BarButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ButtonsToggleStateProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ButtonsToggleStateOverridesProps | undefined | null;
  }
>;
export default function ButtonsToggleState(
  props: ButtonsToggleStateProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [fooBarValueChildren, setFooBarValueChildren] =
    useStateMutationAction(\\"Baz\\");
  const fooButtonOnClick = () => {
    setFooBarValueChildren(\\"Foo\\");
  };
  const barButtonOnClick = () => {
    setFooBarValueChildren(\\"Bar\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"ButtonsToggleState\\")} {...rest}>
      <Text
        children={fooBarValueChildren}
        {...getOverrideProps(overrides, \\"FooBarValue\\")}
      ></Text>
      <Button
        children=\\"Set to Foo\\"
        onClick={() => {
          fooButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"FooButton\\")}
      ></Button>
      <Button
        children=\\"Set to Bar\\"
        onClick={() => {
          barButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"BarButton\\")}
      ></Button>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports mutations on synthetic props 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type MutationWithSyntheticPropOverridesProps = {
  MutationWithSyntheticProp?: PrimitiveOverrideProps<FlexProps>;
  FooBarValue?: PrimitiveOverrideProps<TextProps>;
  FooButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type MutationWithSyntheticPropProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: MutationWithSyntheticPropOverridesProps | undefined | null;
  }
>;
export default function MutationWithSyntheticProp(
  props: MutationWithSyntheticPropProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [fooBarValueChildren, setFooBarValueChildren] =
    useStateMutationAction(\\"Baz\\");
  const fooButtonOnClick = () => {
    setFooBarValueChildren(\\"Foo\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      {...getOverrideProps(overrides, \\"MutationWithSyntheticProp\\")}
      {...rest}
    >
      <Text
        children={fooBarValueChildren}
        {...getOverrideProps(overrides, \\"FooBarValue\\")}
      ></Text>
      <Button
        children=\\"Set to Foo\\"
        onClick={() => {
          fooButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"FooButton\\")}
      ></Button>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports mutations on visibility props 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Card,
  CardProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type UpdateVisibilityOverridesProps = {
  UpdateVisibility?: PrimitiveOverrideProps<CardProps>;
  TextDisplay?: PrimitiveOverrideProps<TextProps>;
  DisplayBlockButton?: PrimitiveOverrideProps<ButtonProps>;
  DisplayNoneButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type UpdateVisibilityProps = React.PropsWithChildren<
  Partial<CardProps> & {
    overrides?: UpdateVisibilityOverridesProps | undefined | null;
  }
>;
export default function UpdateVisibility(
  props: UpdateVisibilityProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [textDisplayDisplay, setTextDisplayDisplay] =
    useStateMutationAction(\\"block\\");
  const displayBlockButtonOnClick = () => {
    setTextDisplayDisplay(\\"block\\");
  };
  const displayNoneButtonOnClick = () => {
    setTextDisplayDisplay(\\"none\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Card {...getOverrideProps(overrides, \\"UpdateVisibility\\")} {...rest}>
      <Text
        display={textDisplayDisplay}
        children=\\"This is a text to display.\\"
        {...getOverrideProps(overrides, \\"TextDisplay\\")}
      ></Text>
      <Button
        children=\\"Show text\\"
        onClick={() => {
          displayBlockButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"DisplayBlockButton\\")}
      ></Button>
      <Button
        children=\\"Hide text\\"
        onClick={() => {
          displayNoneButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"DisplayNoneButton\\")}
      ></Button>
    </Card>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports mutations with no initial state 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Card,
  CardProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SetStateWithoutInitialValueOverridesProps = {
  SetStateWithoutInitialValue?: PrimitiveOverrideProps<CardProps>;
  TextDisplay?: PrimitiveOverrideProps<TextProps>;
  DisplayBlockButton?: PrimitiveOverrideProps<ButtonProps>;
  DisplayNoneButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type SetStateWithoutInitialValueProps = React.PropsWithChildren<
  Partial<CardProps> & {
    overrides?: SetStateWithoutInitialValueOverridesProps | undefined | null;
  }
>;
export default function SetStateWithoutInitialValue(
  props: SetStateWithoutInitialValueProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [textDisplayDisplay, setTextDisplayDisplay] =
    useStateMutationAction(undefined);
  const displayBlockButtonOnClick = () => {
    setTextDisplayDisplay(\\"block\\");
  };
  const displayNoneButtonOnClick = () => {
    setTextDisplayDisplay(\\"none\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Card
      {...getOverrideProps(overrides, \\"SetStateWithoutInitialValue\\")}
      {...rest}
    >
      <Text
        children=\\"This is a text to display.\\"
        display={textDisplayDisplay}
        {...getOverrideProps(overrides, \\"TextDisplay\\")}
      ></Text>
      <Button
        children=\\"Show text\\"
        onClick={() => {
          displayBlockButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"DisplayBlockButton\\")}
      ></Button>
      <Button
        children=\\"Hide text\\"
        onClick={() => {
          displayNoneButtonOnClick();
        }}
        {...getOverrideProps(overrides, \\"DisplayNoneButton\\")}
      ></Button>
    </Card>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports names that cant be directly turned into methodnames 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useNavigateAction,
} from \\"@aws-amplify/ui-react/internal\\";
import { Flex, FlexProps, Text, TextProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type InvalidNameForMethodOverridesProps = {
  InvalidNameForMethod?: PrimitiveOverrideProps<FlexProps>;
  \\"\\\\u201CLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.\\\\u201D\\"?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type InvalidNameForMethodProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: InvalidNameForMethodOverridesProps | undefined | null;
  }
>;
export default function InvalidNameForMethod(
  props: InvalidNameForMethodProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const loremipsumdolorsitametCommaconsecteturadipiscingelitCommaseddoeiusmodtemporincididuntutlaborePeriodOnClick =
    useNavigateAction({ type: \\"url\\", url: \\"emails\\" });
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"InvalidNameForMethod\\")} {...rest}>
      <Text
        onClick={() => {
          loremipsumdolorsitametCommaconsecteturadipiscingelitCommaseddoeiusmodtemporincididuntutlaborePeriodOnClick();
        }}
        {...getOverrideProps(
          overrides,
          \\"\\\\u201CLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.\\\\u201D\\"
        )}
      ></Text>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports nested mutation 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Text,
  TextProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type NestedMutationOverridesProps = {
  NestedMutation?: PrimitiveOverrideProps<FlexProps>;
  MutatedValue?: PrimitiveOverrideProps<TextProps>;
  StatePropertyMutation?: PrimitiveOverrideProps<ButtonProps>;
  StateSource?: PrimitiveOverrideProps<TextProps>;
} & EscapeHatchProps;
export type NestedMutationProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: NestedMutationOverridesProps | undefined | null;
  }
>;
export default function NestedMutation(
  props: NestedMutationProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [stateSourceChildren, setStateSourceChildren] =
    useStateMutationAction(\\"State Value\\");
  const [mutatedValueChildren, setMutatedValueChildren] =
    useStateMutationAction(\\"Default Value\\");
  const statePropertyMutationOnClick = () => {
    setMutatedValueChildren(stateSourceChildren);
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"NestedMutation\\")} {...rest}>
      <Text
        children={mutatedValueChildren}
        {...getOverrideProps(overrides, \\"MutatedValue\\")}
      ></Text>
      <Button
        children=\\"Apply State Property Mutation\\"
        onClick={() => {
          statePropertyMutationOnClick();
        }}
        {...getOverrideProps(overrides, \\"StatePropertyMutation\\")}
      ></Button>
      <Text
        children={stateSourceChildren}
        {...getOverrideProps(overrides, \\"StateSource\\")}
      ></Text>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests mutations supports two-way data binding on form elements 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useStateMutationAction,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  CheckboxField,
  CheckboxFieldProps,
  Flex,
  FlexProps,
  Heading,
  HeadingProps,
  PasswordField,
  PasswordFieldProps,
  PhoneNumberField,
  PhoneNumberFieldProps,
  Radio,
  RadioGroupField,
  RadioGroupFieldProps,
  RadioProps,
  SearchField,
  SearchFieldProps,
  SelectField,
  SelectFieldProps,
  SliderField,
  SliderFieldProps,
  StepperField,
  StepperFieldProps,
  SwitchField,
  SwitchFieldProps,
  Text,
  TextAreaField,
  TextAreaFieldProps,
  TextField,
  TextFieldProps,
  TextProps,
} from \\"@aws-amplify/ui-react\\";
import option, { optionProps } from \\"./option\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TwoWayBindingsOverridesProps = {
  TwoWayBindings?: PrimitiveOverrideProps<FlexProps>;
  FormHeading?: PrimitiveOverrideProps<HeadingProps>;
  CheckboxFieldSection?: PrimitiveOverrideProps<FlexProps>;
  CheckboxFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  CheckboxFieldInput?: PrimitiveOverrideProps<CheckboxFieldProps>;
  CheckboxFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetCheckboxFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  PasswordFieldSection?: PrimitiveOverrideProps<FlexProps>;
  PasswordFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  PasswordFieldInput?: PrimitiveOverrideProps<PasswordFieldProps>;
  PasswordFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetPasswordFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  PhoneNumberFieldSection?: PrimitiveOverrideProps<FlexProps>;
  PhoneNumberFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  PhoneNumberFieldInput?: PrimitiveOverrideProps<PhoneNumberFieldProps>;
  PhoneNumberFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetPhoneNumberFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  RadioGroupFieldSection?: PrimitiveOverrideProps<FlexProps>;
  RadioGroupFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  RadioGroupFieldInput?: PrimitiveOverrideProps<RadioGroupFieldProps>;
  RadioGroupFieldInputOption1?: PrimitiveOverrideProps<RadioProps>;
  RadioGroupFieldInputOption2?: PrimitiveOverrideProps<RadioProps>;
  RadioGroupFieldInputOption3?: PrimitiveOverrideProps<RadioProps>;
  RadioGroupFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetRadioGroupFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  SearchFieldSection?: PrimitiveOverrideProps<FlexProps>;
  SearchFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  SearchFieldInput?: PrimitiveOverrideProps<SearchFieldProps>;
  SearchFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetSearchFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  SelectFieldSection?: PrimitiveOverrideProps<FlexProps>;
  SelectFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  SelectFieldInput?: PrimitiveOverrideProps<SelectFieldProps>;
  SelectFieldInputOption1?: optionProps;
  SelectFieldInputOption2?: optionProps;
  SelectFieldInputOption3?: optionProps;
  SelectFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetSelectFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  SliderFieldSection?: PrimitiveOverrideProps<FlexProps>;
  SliderFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  SliderFieldInput?: PrimitiveOverrideProps<SliderFieldProps>;
  SliderFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetSliderFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  StepperFieldSection?: PrimitiveOverrideProps<FlexProps>;
  StepperFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  StepperFieldInput?: PrimitiveOverrideProps<StepperFieldProps>;
  StepperFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetStepperFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  SwitchFieldSection?: PrimitiveOverrideProps<FlexProps>;
  SwitchFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  SwitchFieldInput?: PrimitiveOverrideProps<SwitchFieldProps>;
  SwitchFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetSwitchFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  TextFieldSection?: PrimitiveOverrideProps<FlexProps>;
  TextFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  TextFieldInput?: PrimitiveOverrideProps<TextFieldProps>;
  TextFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetTextFieldValue?: PrimitiveOverrideProps<ButtonProps>;
  TextAreaFieldSection?: PrimitiveOverrideProps<FlexProps>;
  TextAreaFieldHeader?: PrimitiveOverrideProps<HeadingProps>;
  TextAreaFieldInput?: PrimitiveOverrideProps<TextAreaFieldProps>;
  TextAreaFieldValue?: PrimitiveOverrideProps<TextProps>;
  SetTextAreaFieldValue?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type TwoWayBindingsProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: TwoWayBindingsOverridesProps | undefined | null;
  }
>;
export default function TwoWayBindings(
  props: TwoWayBindingsProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  const [checkboxFieldInputChecked, setCheckboxFieldInputChecked] =
    useStateMutationAction(false);
  const [passwordFieldInputValue, setPasswordFieldInputValue] =
    useStateMutationAction(\\"\\");
  const [phoneNumberFieldInputValue, setPhoneNumberFieldInputValue] =
    useStateMutationAction(\\"\\");
  const [radioGroupFieldInputValue, setRadioGroupFieldInputValue] =
    useStateMutationAction(\\"html\\");
  const [searchFieldInputValue, setSearchFieldInputValue] =
    useStateMutationAction(\\"\\");
  const [selectFieldInputValue, setSelectFieldInputValue] =
    useStateMutationAction(undefined);
  const [sliderFieldInputValue, setSliderFieldInputValue] =
    useStateMutationAction(50);
  const [stepperFieldInputValue, setStepperFieldInputValue] =
    useStateMutationAction(0);
  const [switchFieldInputIsChecked, setSwitchFieldInputIsChecked] =
    useStateMutationAction(false);
  const [textFieldInputValue, setTextFieldInputValue] =
    useStateMutationAction(\\"\\");
  const [textAreaFieldInputValue, setTextAreaFieldInputValue] =
    useStateMutationAction(\\"\\");
  const setCheckboxFieldValueOnClick = () => {
    setCheckboxFieldInputChecked(false);
  };
  const setPasswordFieldValueOnClick = () => {
    setPasswordFieldInputValue(\\"admin123\\");
  };
  const setPhoneNumberFieldValueOnClick = () => {
    setPhoneNumberFieldInputValue(\\"8675309\\");
  };
  const setRadioGroupFieldValueOnClick = () => {
    setRadioGroupFieldInputValue(\\"javascript\\");
  };
  const setSearchFieldValueOnClick = () => {
    setSearchFieldInputValue(\\"UI Docs\\");
  };
  const setSelectFieldValueOnClick = () => {
    setSelectFieldInputValue(\\"orange\\");
  };
  const setSliderFieldValueOnClick = () => {
    setSliderFieldInputValue(90);
  };
  const setStepperFieldValueOnClick = () => {
    setStepperFieldInputValue(9);
  };
  const setSwitchFieldValueOnClick = () => {
    setSwitchFieldInputIsChecked(true);
  };
  const setTextFieldValueOnClick = () => {
    setTextFieldInputValue(\\"Hardcoded Value\\");
  };
  const setTextAreaFieldValueOnClick = () => {
    setTextAreaFieldInputValue(\\"Hardcoded Value\\");
  };
  return (
    /* @ts-ignore: TS2322 */
    <Flex
      direction=\\"column\\"
      {...getOverrideProps(overrides, \\"TwoWayBindings\\")}
      {...rest}
    >
      <Heading
        level={1}
        children=\\"Two-Way Binding Test\\"
        {...getOverrideProps(overrides, \\"FormHeading\\")}
      ></Heading>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"CheckboxFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"CheckboxField\\"
          {...getOverrideProps(overrides, \\"CheckboxFieldHeader\\")}
        ></Heading>
        <CheckboxField
          label=\\"Subscribe\\"
          name=\\"subscribe\\"
          value=\\"yes\\"
          checked={checkboxFieldInputChecked}
          onChange={(event: SyntheticEvent) => {
            setCheckboxFieldInputChecked(event.target.checked);
          }}
          {...getOverrideProps(overrides, \\"CheckboxFieldInput\\")}
        ></CheckboxField>
        <Text
          children={checkboxFieldInputChecked}
          {...getOverrideProps(overrides, \\"CheckboxFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set CheckboxFieldValue\\"
          onClick={() => {
            setCheckboxFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetCheckboxFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"PasswordFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"PasswordField\\"
          {...getOverrideProps(overrides, \\"PasswordFieldHeader\\")}
        ></Heading>
        <PasswordField
          label=\\"Password\\"
          name=\\"password\\"
          value={passwordFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setPasswordFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"PasswordFieldInput\\")}
        ></PasswordField>
        <Text
          children={passwordFieldInputValue}
          {...getOverrideProps(overrides, \\"PasswordFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set PasswordFieldValue\\"
          onClick={() => {
            setPasswordFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetPasswordFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"PhoneNumberFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"PhoneNumberField\\"
          {...getOverrideProps(overrides, \\"PhoneNumberFieldHeader\\")}
        ></Heading>
        <PhoneNumberField
          label=\\"Phone Number\\"
          defaultCountryCode=\\"+1\\"
          value={phoneNumberFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setPhoneNumberFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"PhoneNumberFieldInput\\")}
        ></PhoneNumberField>
        <Text
          children={phoneNumberFieldInputValue}
          {...getOverrideProps(overrides, \\"PhoneNumberFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set PhoneNumberFieldValue\\"
          onClick={() => {
            setPhoneNumberFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetPhoneNumberFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"RadioGroupFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"RadioGroupField\\"
          {...getOverrideProps(overrides, \\"RadioGroupFieldHeader\\")}
        ></Heading>
        <RadioGroupField
          label=\\"Language\\"
          name=\\"language\\"
          value={radioGroupFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setRadioGroupFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"RadioGroupFieldInput\\")}
        >
          <Radio
            value=\\"html\\"
            children=\\"html\\"
            {...getOverrideProps(overrides, \\"RadioGroupFieldInputOption1\\")}
          ></Radio>
          <Radio
            value=\\"css\\"
            children=\\"css\\"
            {...getOverrideProps(overrides, \\"RadioGroupFieldInputOption2\\")}
          ></Radio>
          <Radio
            value=\\"javascript\\"
            children=\\"javascript\\"
            {...getOverrideProps(overrides, \\"RadioGroupFieldInputOption3\\")}
          ></Radio>
        </RadioGroupField>
        <Text
          children={radioGroupFieldInputValue}
          {...getOverrideProps(overrides, \\"RadioGroupFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set RadioGroupFieldValue\\"
          onClick={() => {
            setRadioGroupFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetRadioGroupFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"SearchFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"SearchField\\"
          {...getOverrideProps(overrides, \\"SearchFieldHeader\\")}
        ></Heading>
        <SearchField
          label=\\"Search\\"
          value={searchFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setSearchFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"SearchFieldInput\\")}
        ></SearchField>
        <Text
          children={searchFieldInputValue}
          {...getOverrideProps(overrides, \\"SearchFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set SearchFieldValue\\"
          onClick={() => {
            setSearchFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetSearchFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"SelectFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"SelectField\\"
          {...getOverrideProps(overrides, \\"SelectFieldHeader\\")}
        ></Heading>
        <SelectField
          label=\\"Fruit\\"
          placeholder=\\"Please select a fruit\\"
          labelHidden={true}
          value={selectFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setSelectFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"SelectFieldInput\\")}
        >
          <option
            label=\\"Apple\\"
            value=\\"apple\\"
            {...getOverrideProps(overrides, \\"SelectFieldInputOption1\\")}
          ></option>
          <option
            label=\\"Banana\\"
            value=\\"banana\\"
            {...getOverrideProps(overrides, \\"SelectFieldInputOption2\\")}
          ></option>
          <option
            label=\\"Orange\\"
            value=\\"orange\\"
            {...getOverrideProps(overrides, \\"SelectFieldInputOption3\\")}
          ></option>
        </SelectField>
        <Text
          children={selectFieldInputValue}
          {...getOverrideProps(overrides, \\"SelectFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set SelectFieldValue\\"
          onClick={() => {
            setSelectFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetSelectFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"SliderFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"SliderField\\"
          {...getOverrideProps(overrides, \\"SliderFieldHeader\\")}
        ></Heading>
        <SliderField
          label=\\"Slider\\"
          min={0}
          max={100}
          step={1}
          labelHidden={true}
          value={sliderFieldInputValue}
          onChange={(value: number) => setSliderFieldInputValue(value)}
          {...getOverrideProps(overrides, \\"SliderFieldInput\\")}
        ></SliderField>
        <Text
          children={sliderFieldInputValue}
          {...getOverrideProps(overrides, \\"SliderFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set SliderFieldValue\\"
          onClick={() => {
            setSliderFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetSliderFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"StepperFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"StepperField\\"
          {...getOverrideProps(overrides, \\"StepperFieldHeader\\")}
        ></Heading>
        <StepperField
          label=\\"Stepper\\"
          min={0}
          max={10}
          step={1}
          labelHidden={true}
          value={stepperFieldInputValue}
          onStepChange={(value: number) => setStepperFieldInputValue(value)}
          {...getOverrideProps(overrides, \\"StepperFieldInput\\")}
        ></StepperField>
        <Text
          children={stepperFieldInputValue}
          {...getOverrideProps(overrides, \\"StepperFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set StepperFieldValue\\"
          onClick={() => {
            setStepperFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetStepperFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"SwitchFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"SwitchField\\"
          {...getOverrideProps(overrides, \\"SwitchFieldHeader\\")}
        ></Heading>
        <SwitchField
          label=\\"SwitchField\\"
          labelPosition=\\"start\\"
          isDisabled={false}
          isLabelHidden={false}
          isChecked={switchFieldInputIsChecked}
          onChange={() =>
            setSwitchFieldInputIsChecked(!switchFieldInputIsChecked)
          }
          {...getOverrideProps(overrides, \\"SwitchFieldInput\\")}
        ></SwitchField>
        <Text
          children={switchFieldInputIsChecked}
          {...getOverrideProps(overrides, \\"SwitchFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set SwitchFieldValue\\"
          onClick={() => {
            setSwitchFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetSwitchFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"TextFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"TextField\\"
          {...getOverrideProps(overrides, \\"TextFieldHeader\\")}
        ></Heading>
        <TextField
          label=\\"Name\\"
          placeholder=\\"Galadriel\\"
          value={textFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setTextFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"TextFieldInput\\")}
        ></TextField>
        <Text
          children={textFieldInputValue}
          {...getOverrideProps(overrides, \\"TextFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set TextFieldValue\\"
          onClick={() => {
            setTextFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetTextFieldValue\\")}
        ></Button>
      </Flex>
      <Flex
        direction=\\"row\\"
        {...getOverrideProps(overrides, \\"TextAreaFieldSection\\")}
      >
        <Heading
          level={5}
          children=\\"TextAreaField\\"
          {...getOverrideProps(overrides, \\"TextAreaFieldHeader\\")}
        ></Heading>
        <TextAreaField
          label=\\"Name\\"
          placeholder=\\"Galadriel\\"
          value={textAreaFieldInputValue}
          onChange={(event: SyntheticEvent) => {
            setTextAreaFieldInputValue(event.target.value);
          }}
          {...getOverrideProps(overrides, \\"TextAreaFieldInput\\")}
        ></TextAreaField>
        <Text
          children={textAreaFieldInputValue}
          {...getOverrideProps(overrides, \\"TextAreaFieldValue\\")}
        ></Text>
        <Button
          children=\\"Set TextAreaFieldValue\\"
          onClick={() => {
            setTextAreaFieldValueOnClick();
          }}
          {...getOverrideProps(overrides, \\"SetTextAreaFieldValue\\")}
        ></Button>
      </Flex>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests primitives CheckboxField 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { CheckboxField, CheckboxFieldProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CheckBoxFieldPrimitiveOverridesProps = {
  CheckBoxFieldPrimitive?: PrimitiveOverrideProps<CheckboxFieldProps>;
} & EscapeHatchProps;
export type CheckBoxFieldPrimitiveProps = React.PropsWithChildren<
  Partial<CheckboxFieldProps> & {
    overrides?: CheckBoxFieldPrimitiveOverridesProps | undefined | null;
  }
>;
export default function CheckBoxFieldPrimitive(
  props: CheckBoxFieldPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <CheckboxField
      label=\\"Subscribe\\"
      name=\\"subscribe\\"
      value=\\"yes\\"
      {...getOverrideProps(overrides, \\"CheckBoxFieldPrimitive\\")}
      {...rest}
    ></CheckboxField>
  );
}
"
`;

exports[`amplify render tests primitives Expander 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Expander,
  ExpanderItem,
  ExpanderItemProps,
  ExpanderProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ExpanderPrimitiveOverridesProps = {
  ExpanderPrimitive?: PrimitiveOverrideProps<ExpanderProps>;
  ExpanderItem1?: PrimitiveOverrideProps<ExpanderItemProps>;
  ExpanderItem2?: PrimitiveOverrideProps<ExpanderItemProps>;
} & EscapeHatchProps;
export type ExpanderPrimitiveProps = React.PropsWithChildren<
  Partial<ExpanderProps> & {
    overrides?: ExpanderPrimitiveOverridesProps | undefined | null;
  }
>;
export default function ExpanderPrimitive(
  props: ExpanderPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Expander
      type=\\"single\\"
      isCollapsible={true}
      {...getOverrideProps(overrides, \\"ExpanderPrimitive\\")}
      {...rest}
    >
      <ExpanderItem
        title=\\"title1\\"
        value=\\"ExpanderItem1\\"
        children=\\"ExpanderItem1Content\\"
        {...getOverrideProps(overrides, \\"ExpanderItem1\\")}
      ></ExpanderItem>
      <ExpanderItem
        title=\\"title2\\"
        value=\\"ExpanderItem2\\"
        children=\\"ExpanderItem2Content\\"
        {...getOverrideProps(overrides, \\"ExpanderItem2\\")}
      ></ExpanderItem>
    </Expander>
  );
}
"
`;

exports[`amplify render tests primitives ExpanderItem 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { ExpanderItem, ExpanderItemProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type MyExpanderItemOverridesProps = {
  MyExpanderItem?: PrimitiveOverrideProps<ExpanderItemProps>;
} & EscapeHatchProps;
export type MyExpanderItemProps = React.PropsWithChildren<
  Partial<ExpanderItemProps> & {
    overrides?: MyExpanderItemOverridesProps | undefined | null;
  }
>;
export default function MyExpanderItem(
  props: MyExpanderItemProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <ExpanderItem
      title=\\"title1\\"
      value=\\"ExpanderItem1\\"
      children=\\"ExpanderItem1Content\\"
      {...getOverrideProps(overrides, \\"MyExpanderItem\\")}
      {...rest}
    ></ExpanderItem>
  );
}
"
`;

exports[`amplify render tests primitives Icon 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Icon, IconProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type IconPrimitiveOverridesProps = {
  IconPrimitive?: PrimitiveOverrideProps<IconProps>;
} & EscapeHatchProps;
export type IconPrimitiveProps = React.PropsWithChildren<
  Partial<IconProps> & {
    overrides?: IconPrimitiveOverridesProps | undefined | null;
  }
>;
export default function IconPrimitive(
  props: IconPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Icon
      ariaLabel=\\"Favorite\\"
      viewBox={{ width: 24, height: 24 }}
      paths={[
        {
          d: \\"M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z\\",
          fill: \\"black\\",
        },
      ]}
      {...getOverrideProps(overrides, \\"IconPrimitive\\")}
      {...rest}
    ></Icon>
  );
}
"
`;

exports[`amplify render tests primitives Icon with lower-cased type \`object\` for values 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Icon, IconProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type IconPrimitiveWithLowerCasedTypeOverridesProps = {
  IconPrimitiveWithLowerCasedType?: PrimitiveOverrideProps<IconProps>;
} & EscapeHatchProps;
export type IconPrimitiveWithLowerCasedTypeProps = React.PropsWithChildren<
  Partial<IconProps> & {
    overrides?:
      | IconPrimitiveWithLowerCasedTypeOverridesProps
      | undefined
      | null;
  }
>;
export default function IconPrimitiveWithLowerCasedType(
  props: IconPrimitiveWithLowerCasedTypeProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Icon
      ariaLabel=\\"Favorite\\"
      viewBox={{ width: 24, height: 24 }}
      paths={[
        {
          d: \\"M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z\\",
          fill: \\"black\\",
        },
      ]}
      {...getOverrideProps(overrides, \\"IconPrimitiveWithLowerCasedType\\")}
      {...rest}
    ></Icon>
  );
}
"
`;

exports[`amplify render tests primitives Menu 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Menu,
  MenuItem,
  MenuItemProps,
  MenuProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type MenuPrimitiveOverridesProps = {
  MenuPrimitive?: PrimitiveOverrideProps<MenuProps>;
  MyMenuItem?: PrimitiveOverrideProps<MenuItemProps>;
} & EscapeHatchProps;
export type MenuPrimitiveProps = React.PropsWithChildren<
  Partial<MenuProps> & {
    overrides?: MenuPrimitiveOverridesProps | undefined | null;
  }
>;
export default function MenuPrimitive(
  props: MenuPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Menu {...getOverrideProps(overrides, \\"MenuPrimitive\\")} {...rest}>
      <MenuItem
        children=\\"Item\\"
        {...getOverrideProps(overrides, \\"MyMenuItem\\")}
      ></MenuItem>
    </Menu>
  );
}
"
`;

exports[`amplify render tests primitives MenuButton 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  ButtonProps,
  MenuButton,
  MenuButtonProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type MenuButtonPrimitiveOverridesProps = {
  MenuButtonPrimitive?: PrimitiveOverrideProps<MenuButtonProps>;
} & EscapeHatchProps;
export type MenuButtonPrimitiveProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: MenuButtonPrimitiveOverridesProps | undefined | null;
  }
>;
export default function MenuButtonPrimitive(
  props: MenuButtonPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <MenuButton
      children=\\"Menu Button\\"
      {...getOverrideProps(overrides, \\"MenuButtonPrimitive\\")}
      {...rest}
    ></MenuButton>
  );
}
"
`;

exports[`amplify render tests primitives SliderField 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { SliderField, SliderFieldProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type SliderFieldPrimitiveOverridesProps = {
  SliderFieldPrimitive?: PrimitiveOverrideProps<SliderFieldProps>;
} & EscapeHatchProps;
export type SliderFieldPrimitiveProps = React.PropsWithChildren<
  Partial<SliderFieldProps> & {
    overrides?: SliderFieldPrimitiveOverridesProps | undefined | null;
  }
>;
export default function SliderFieldPrimitive(
  props: SliderFieldPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <SliderField
      name=\\"slider\\"
      label=\\"Slider\\"
      defaultValue={50}
      min={0}
      max={100}
      step={1}
      {...getOverrideProps(overrides, \\"SliderFieldPrimitive\\")}
      {...rest}
    ></SliderField>
  );
}
"
`;

exports[`amplify render tests primitives Table 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Table,
  TableBody,
  TableBodyProps,
  TableCell,
  TableCellProps,
  TableFoot,
  TableFootProps,
  TableHead,
  TableHeadProps,
  TableProps,
  TableRow,
  TableRowProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TablePrimitiveOverridesProps = {
  TablePrimitive?: PrimitiveOverrideProps<TableProps>;
  MyTableHead?: PrimitiveOverrideProps<TableHeadProps>;
  MyTableRow?: PrimitiveOverrideProps<TableRowProps>;
  MyTableCellCitrus?: PrimitiveOverrideProps<TableCellProps>;
  MyTableCellStoneFruit?: PrimitiveOverrideProps<TableCellProps>;
  MyTableCellBerry?: PrimitiveOverrideProps<TableCellProps>;
  MyTableBody?: PrimitiveOverrideProps<TableBodyProps>;
  TableRow1?: PrimitiveOverrideProps<TableRowProps>;
  TableCell11?: PrimitiveOverrideProps<TableCellProps>;
  TableCell12?: PrimitiveOverrideProps<TableCellProps>;
  TableCell13?: PrimitiveOverrideProps<TableCellProps>;
  TableRow2?: PrimitiveOverrideProps<TableRowProps>;
  TableCell21?: PrimitiveOverrideProps<TableCellProps>;
  TableCell22?: PrimitiveOverrideProps<TableCellProps>;
  TableCell23?: PrimitiveOverrideProps<TableCellProps>;
  TableRow3?: PrimitiveOverrideProps<TableRowProps>;
  TableCell31?: PrimitiveOverrideProps<TableCellProps>;
  TableCell32?: PrimitiveOverrideProps<TableCellProps>;
  TableCell33?: PrimitiveOverrideProps<TableCellProps>;
  MyTableFoot?: PrimitiveOverrideProps<TableFootProps>;
  TableRowFoot?: PrimitiveOverrideProps<TableRowProps>;
  TableCellFoot1?: PrimitiveOverrideProps<TableCellProps>;
  TableCellFoot2?: PrimitiveOverrideProps<TableCellProps>;
  TableCellFoot3?: PrimitiveOverrideProps<TableCellProps>;
} & EscapeHatchProps;
export type TablePrimitiveProps = React.PropsWithChildren<
  Partial<TableProps> & {
    overrides?: TablePrimitiveOverridesProps | undefined | null;
  }
>;
export default function TablePrimitive(
  props: TablePrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Table
      caption=\\"Some fruits\\"
      highlightOnHover={true}
      size=\\"small\\"
      variation=\\"striped\\"
      {...getOverrideProps(overrides, \\"TablePrimitive\\")}
      {...rest}
    >
      <TableHead {...getOverrideProps(overrides, \\"MyTableHead\\")}>
        <TableRow {...getOverrideProps(overrides, \\"MyTableRow\\")}>
          <TableCell
            as=\\"th\\"
            children=\\"Citrus\\"
            {...getOverrideProps(overrides, \\"MyTableCellCitrus\\")}
          ></TableCell>
          <TableCell
            as=\\"th\\"
            children=\\"Stone Fruit\\"
            {...getOverrideProps(overrides, \\"MyTableCellStoneFruit\\")}
          ></TableCell>
          <TableCell
            as=\\"th\\"
            children=\\"Berry\\"
            {...getOverrideProps(overrides, \\"MyTableCellBerry\\")}
          ></TableCell>
        </TableRow>
      </TableHead>
      <TableBody {...getOverrideProps(overrides, \\"MyTableBody\\")}>
        <TableRow {...getOverrideProps(overrides, \\"TableRow1\\")}>
          <TableCell
            children=\\"Orange\\"
            {...getOverrideProps(overrides, \\"TableCell11\\")}
          ></TableCell>
          <TableCell
            children=\\"Nectarine\\"
            {...getOverrideProps(overrides, \\"TableCell12\\")}
          ></TableCell>
          <TableCell
            children=\\"Raspberry\\"
            {...getOverrideProps(overrides, \\"TableCell13\\")}
          ></TableCell>
        </TableRow>
        <TableRow {...getOverrideProps(overrides, \\"TableRow2\\")}>
          <TableCell
            children=\\"Grapefruit\\"
            {...getOverrideProps(overrides, \\"TableCell21\\")}
          ></TableCell>
          <TableCell
            children=\\"Apricot\\"
            {...getOverrideProps(overrides, \\"TableCell22\\")}
          ></TableCell>
          <TableCell
            children=\\"Blueberry\\"
            {...getOverrideProps(overrides, \\"TableCell23\\")}
          ></TableCell>
        </TableRow>
        <TableRow {...getOverrideProps(overrides, \\"TableRow3\\")}>
          <TableCell
            children=\\"Lime\\"
            {...getOverrideProps(overrides, \\"TableCell31\\")}
          ></TableCell>
          <TableCell
            children=\\"Peach\\"
            {...getOverrideProps(overrides, \\"TableCell32\\")}
          ></TableCell>
          <TableCell
            children=\\"Strawberry\\"
            {...getOverrideProps(overrides, \\"TableCell33\\")}
          ></TableCell>
        </TableRow>
      </TableBody>
      <TableFoot {...getOverrideProps(overrides, \\"MyTableFoot\\")}>
        <TableRow {...getOverrideProps(overrides, \\"TableRowFoot\\")}>
          <TableCell
            as=\\"th\\"
            children=\\"Citrus\\"
            {...getOverrideProps(overrides, \\"TableCellFoot1\\")}
          ></TableCell>
          <TableCell
            as=\\"th\\"
            children=\\"Stone Fruit\\"
            {...getOverrideProps(overrides, \\"TableCellFoot2\\")}
          ></TableCell>
          <TableCell
            as=\\"th\\"
            children=\\"Berry\\"
            {...getOverrideProps(overrides, \\"TableCellFoot3\\")}
          ></TableCell>
        </TableRow>
      </TableFoot>
    </Table>
  );
}
"
`;

exports[`amplify render tests primitives TextAreaField 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { TextAreaField, TextAreaFieldProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TextAreaFieldPrimitiveOverridesProps = {
  TextAreaFieldPrimitive?: PrimitiveOverrideProps<TextAreaFieldProps>;
} & EscapeHatchProps;
export type TextAreaFieldPrimitiveProps = React.PropsWithChildren<
  Partial<TextAreaFieldProps> & {
    overrides?: TextAreaFieldPrimitiveOverridesProps | undefined | null;
  }
>;
export default function TextAreaFieldPrimitive(
  props: TextAreaFieldPrimitiveProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <TextAreaField
      label=\\"Name\\"
      placeholder=\\"Holden\\"
      descriptiveText=\\"Please enter valid name\\"
      {...getOverrideProps(overrides, \\"TextAreaFieldPrimitive\\")}
      {...rest}
    ></TextAreaField>
  );
}
"
`;

exports[`amplify render tests primitives TextField 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { TextField, TextFieldProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type TextFieldPrimitiveOverridesProps = {
  TextFieldPrimitive?: PrimitiveOverrideProps<TextFieldProps>;
} & EscapeHatchProps;
export type TextFieldPrimitiveProps<Multiline extends boolean> =
  React.PropsWithChildren<
    Partial<TextFieldProps<Multiline>> & {
      overrides?: TextFieldPrimitiveOverridesProps | undefined | null;
    }
  >;
export default function TextFieldPrimitive<Multiline extends boolean>(
  props: TextFieldPrimitiveProps<Multiline>
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <TextField
      label=\\"Name\\"
      placeholder=\\"Holden\\"
      descriptiveText=\\"Please enter valid name\\"
      {...getOverrideProps(overrides, \\"TextFieldPrimitive\\")}
      {...rest}
    ></TextField>
  );
}
"
`;

exports[`amplify render tests renderer configurations with NoApi should render component without data binding successfully 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import { Button, ButtonProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type CustomButtonOverridesProps = {
  CustomButton?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type CustomButtonProps = React.PropsWithChildren<
  Partial<ButtonProps> & {
    overrides?: CustomButtonOverridesProps | undefined | null;
  }
>;
export default function CustomButton(
  props: CustomButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Button
      color=\\"#ff0000\\"
      width={20}
      isDisabled={true}
      {...getOverrideProps(overrides, \\"CustomButton\\")}
      {...rest}
    ></Button>
  );
}
"
`;

exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import CustomButton, { CustomButtonProps } from \\"./CustomButton\\";
import { View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ViewWithButtonOverridesProps = {
  ViewWithButton?: PrimitiveOverrideProps<ViewProps>;
  MyCustomButton?: CustomButtonProps;
} & EscapeHatchProps;
export type ViewWithButtonProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ViewWithButtonOverridesProps | undefined | null;
  }
>;
export default function ViewWithButton(
  props: ViewWithButtonProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View
      padding-left
      {...getOverrideProps(overrides, \\"ViewWithButton\\")}
      {...rest}
    >
      <CustomButton
        color=\\"#ff0000\\"
        width=\\"20px\\"
        buttonText=\\"Click Me\\"
        {...getOverrideProps(overrides, \\"MyCustomButton\\")}
      ></CustomButton>
    </View>
  );
}
"
`;

exports[`amplify render tests should render events 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Flex,
  FlexProps,
  Text,
  TextField,
  TextFieldProps,
  TextProps,
} from \\"@aws-amplify/ui-react\\";
import { SyntheticEvent } from \\"react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type EventsOverridesProps = {
  Events?: PrimitiveOverrideProps<FlexProps>;
  GenericEvents?: PrimitiveOverrideProps<FlexProps>;
  onClick?: PrimitiveOverrideProps<TextProps>;
  onDoubleClick?: PrimitiveOverrideProps<TextProps>;
  onMouseDown?: PrimitiveOverrideProps<TextProps>;
  onMouseEnter?: PrimitiveOverrideProps<TextProps>;
  onMouseLeave?: PrimitiveOverrideProps<TextProps>;
  onMouseMove?: PrimitiveOverrideProps<TextProps>;
  onMouseOut?: PrimitiveOverrideProps<TextProps>;
  onMouseOver?: PrimitiveOverrideProps<TextProps>;
  onMouseUp?: PrimitiveOverrideProps<TextProps>;
  FieldEvents?: PrimitiveOverrideProps<FlexProps>;
  onChange?: PrimitiveOverrideProps<TextFieldProps>;
  onInput?: PrimitiveOverrideProps<TextFieldProps>;
  onFocus?: PrimitiveOverrideProps<TextFieldProps>;
  onBlur?: PrimitiveOverrideProps<TextFieldProps>;
  onKeyDown?: PrimitiveOverrideProps<TextFieldProps>;
  onKeyPress?: PrimitiveOverrideProps<TextFieldProps>;
  onKeyUp?: PrimitiveOverrideProps<TextFieldProps>;
} & EscapeHatchProps;
export type EventsProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    onClick?: (event: SyntheticEvent) => void;
    onDoubleClick?: (event: SyntheticEvent) => void;
    onMouseDown?: (event: SyntheticEvent) => void;
    onMouseEnter?: (event: SyntheticEvent) => void;
    onMouseLeave?: (event: SyntheticEvent) => void;
    onMouseMove?: (event: SyntheticEvent) => void;
    onMouseOut?: (event: SyntheticEvent) => void;
    onMouseOver?: (event: SyntheticEvent) => void;
    onMouseUp?: (event: SyntheticEvent) => void;
    onChange?: (event: SyntheticEvent) => void;
    onInput?: (event: SyntheticEvent) => void;
    onFocus?: (event: SyntheticEvent) => void;
    onBlur?: (event: SyntheticEvent) => void;
    onKeyDown?: (event: SyntheticEvent) => void;
    onKeyPress?: (event: SyntheticEvent) => void;
    onKeyUp?: (event: SyntheticEvent) => void;
  } & {
    overrides?: EventsOverridesProps | undefined | null;
  }
>;
export default function Events(props: EventsProps): React.ReactElement {
  const {
    onClick,
    onDoubleClick,
    onMouseDown,
    onMouseEnter,
    onMouseLeave,
    onMouseMove,
    onMouseOut,
    onMouseOver,
    onMouseUp,
    onChange,
    onInput,
    onFocus,
    onBlur,
    onKeyDown,
    onKeyPress,
    onKeyUp,
    overrides,
    ...rest
  } = props;
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"Events\\")} {...rest}>
      <Flex {...getOverrideProps(overrides, \\"GenericEvents\\")}>
        <Text
          children=\\"onClick\\"
          onClick={onClick}
          {...getOverrideProps(overrides, \\"onClick\\")}
        ></Text>
        <Text
          children=\\"onDoubleClick\\"
          onDoubleClick={onDoubleClick}
          {...getOverrideProps(overrides, \\"onDoubleClick\\")}
        ></Text>
        <Text
          children=\\"onMouseDown\\"
          onMouseDown={onMouseDown}
          {...getOverrideProps(overrides, \\"onMouseDown\\")}
        ></Text>
        <Text
          children=\\"onMouseEnter\\"
          onMouseEnter={onMouseEnter}
          {...getOverrideProps(overrides, \\"onMouseEnter\\")}
        ></Text>
        <Text
          children=\\"onMouseLeave\\"
          onMouseLeave={onMouseLeave}
          {...getOverrideProps(overrides, \\"onMouseLeave\\")}
        ></Text>
        <Text
          children=\\"mousemove\\"
          onMouseMove={mousemove}
          {...getOverrideProps(overrides, \\"onMouseMove\\")}
        ></Text>
        <Text
          children=\\"onMouseOut\\"
          onMouseOut={onMouseOut}
          {...getOverrideProps(overrides, \\"onMouseOut\\")}
        ></Text>
        <Text
          children=\\"onMouseOver\\"
          onMouseOver={onMouseOver}
          {...getOverrideProps(overrides, \\"onMouseOver\\")}
        ></Text>
        <Text
          children=\\"onMouseUp\\"
          onMouseUp={onMouseUp}
          {...getOverrideProps(overrides, \\"onMouseUp\\")}
        ></Text>
      </Flex>
      <Flex {...getOverrideProps(overrides, \\"FieldEvents\\")}>
        <TextField
          defaultValue=\\"onChange\\"
          onChange={onChange}
          {...getOverrideProps(overrides, \\"onChange\\")}
        ></TextField>
        <TextField
          defaultValue=\\"onInput\\"
          onInput={onInput}
          {...getOverrideProps(overrides, \\"onInput\\")}
        ></TextField>
        <TextField
          defaultValue=\\"onFocus\\"
          onFocus={onFocus}
          {...getOverrideProps(overrides, \\"onFocus\\")}
        ></TextField>
        <TextField
          defaultValue=\\"onBlur\\"
          onBlur={onBlur}
          {...getOverrideProps(overrides, \\"onBlur\\")}
        ></TextField>
        <TextField
          defaultValue=\\"onKeyDown\\"
          onKeyDown={onKeyDown}
          {...getOverrideProps(overrides, \\"onKeyDown\\")}
        ></TextField>
        <TextField
          defaultValue=\\"onKeyPress\\"
          onKeyPress={onKeyPress}
          {...getOverrideProps(overrides, \\"onKeyPress\\")}
        ></TextField>
        <TextField
          defaultValue=\\"onKeyUp\\"
          onKeyUp={onKeyUp}
          {...getOverrideProps(overrides, \\"onKeyUp\\")}
        ></TextField>
      </Flex>
    </Flex>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests should render parsed fixed values 1`] = `
Object {
  "componentText": "/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
} from \\"@aws-amplify/ui-react/internal\\";
import Input, { InputProps } from \\"./Input\\";
import { View, ViewProps } from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ParsedFixedValuesOverridesProps = {
  ParsedFixedValues?: PrimitiveOverrideProps<ViewProps>;
  MyInputString?: InputProps;
  MyInputNumber?: InputProps;
  MyInputParsedNumber?: InputProps;
  MyInputBoolean?: InputProps;
  MyInputPrasedBoolean?: InputProps;
  MyInputJson?: InputProps;
  MyInputParsedJson?: InputProps;
  MyInputArray?: InputProps;
  MyInputParsedArray?: InputProps;
  MyInputNull?: InputProps;
  MyInputParsedNull?: InputProps;
} & EscapeHatchProps;
export type ParsedFixedValuesProps = React.PropsWithChildren<
  Partial<ViewProps> & {
    overrides?: ParsedFixedValuesOverridesProps | undefined | null;
  }
>;
export default function ParsedFixedValues(
  props: ParsedFixedValuesProps
): React.ReactElement {
  const { overrides, ...rest } = props;
  return (
    /* @ts-ignore: TS2322 */
    <View
      id=\\"parsed-fixed-values\\"
      {...getOverrideProps(overrides, \\"ParsedFixedValues\\")}
      {...rest}
    >
      <Input
        id=\\"string-value\\"
        value=\\"raw string value\\"
        {...getOverrideProps(overrides, \\"MyInputString\\")}
      ></Input>
      <Input
        id=\\"number-value\\"
        value=\\"67548\\"
        {...getOverrideProps(overrides, \\"MyInputNumber\\")}
      ></Input>
      <Input
        id=\\"parsed-number-value\\"
        value={67548}
        {...getOverrideProps(overrides, \\"MyInputParsedNumber\\")}
      ></Input>
      <Input
        id=\\"boolean-value\\"
        value=\\"true\\"
        {...getOverrideProps(overrides, \\"MyInputBoolean\\")}
      ></Input>
      <Input
        id=\\"parsed-boolean-value\\"
        value={true}
        {...getOverrideProps(overrides, \\"MyInputPrasedBoolean\\")}
      ></Input>
      <Input
        id=\\"json-value\\"
        value='{\\"foo\\": \\"bar\\"}'
        {...getOverrideProps(overrides, \\"MyInputJson\\")}
      ></Input>
      <Input
        id=\\"parsed-json-value\\"
        value={{ foo: \\"bar\\" }}
        {...getOverrideProps(overrides, \\"MyInputParsedJson\\")}
      ></Input>
      <Input
        id=\\"array-value\\"
        value=\\"[1,2,3]\\"
        {...getOverrideProps(overrides, \\"MyInputArray\\")}
      ></Input>
      <Input
        id=\\"parsed-array-value\\"
        value={[1, 2, 3]}
        {...getOverrideProps(overrides, \\"MyInputParsedArray\\")}
      ></Input>
      <Input
        id=\\"null-value\\"
        value=\\"null\\"
        {...getOverrideProps(overrides, \\"MyInputNull\\")}
      ></Input>
      <Input
        id=\\"parsed-null-value\\"
        value={null}
        {...getOverrideProps(overrides, \\"MyInputParsedNull\\")}
      ></Input>
    </View>
  );
}
",
  "declaration": undefined,
  "renderComponentToFilesystem": [Function],
}
`;

exports[`amplify render tests source maps should render inline source maps 1`] = `
"var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s)
      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (
          e.indexOf(p[i]) < 0 &&
          Object.prototype.propertyIsEnumerable.call(s, p[i])
        )
          t[p[i]] = s[p[i]];
      }
    return t;
  };
/* eslint-disable */
import * as React from \\"react\\";
import { getOverrideProps, useAuth } from \\"@aws-amplify/ui-react/internal\\";
import { Button, Flex, Image } from \\"@aws-amplify/ui-react\\";
export default function Profile(props) {
  var _a, _b;
  const { overrides } = props,
    rest = __rest(props, [\\"overrides\\"]);
  const authAttributes =
    (_b =
      (_a = useAuth().user) === null || _a === void 0
        ? void 0
        : _a.attributes) !== null && _b !== void 0
      ? _b
      : {};
  return React.createElement(
    Flex,
    Object.assign({}, getOverrideProps(overrides, \\"Profile\\"), rest),
    React.createElement(
      Image,
      Object.assign(
        { src: authAttributes[\\"username\\"] },
        getOverrideProps(overrides, \\"child1\\")
      )
    ),
    React.createElement(
      Button,
      Object.assign(
        { children: authAttributes[\\"picture\\"] },
        getOverrideProps(overrides, \\"child2\\")
      )
    ),
    React.createElement(
      Button,
      Object.assign(
        { children: authAttributes[\\"custom:favorite_icecream\\"] },
        getOverrideProps(overrides, \\"child3\\")
      )
    )
  );
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsibW9kdWxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLG9CQUFvQjtBQUNwQixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMvQixPQUFPLEVBQW9CLGdCQUFnQixFQUFFLE9BQU8sRUFBRSxNQUFNLGdDQUFnQyxDQUFDO0FBQzdGLE9BQU8sRUFBRSxNQUFNLEVBQWUsSUFBSSxFQUFhLEtBQUssRUFBYyxNQUFNLHVCQUF1QixDQUFDO0FBVWhHLE1BQU0sQ0FBQyxPQUFPLFVBQVUsT0FBTyxDQUFDLEtBQW1COztJQUMvQyxNQUFNLEVBQUUsU0FBUyxLQUFjLEtBQUssRUFBZCxJQUFJLFVBQUssS0FBSyxFQUE5QixhQUFzQixDQUFRLENBQUM7SUFDckMsTUFBTSxjQUFjLEdBQUcsTUFBQSxNQUFBLE9BQU8sRUFBRSxDQUFDLElBQUksMENBQUUsVUFBVSxtQ0FBSSxFQUFFLENBQUM7SUFDeEQsT0FBTyxDQUFDLG9CQUFDLElBQUksb0JBQUssZ0JBQWdCLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxFQUFNLElBQUk7UUFBRSxvQkFBQyxLQUFLLGtCQUFDLEdBQUcsRUFBRSxjQUFjLENBQUMsVUFBVSxDQUFDLElBQU0sZ0JBQWdCLENBQUMsU0FBUyxFQUFFLFFBQVEsQ0FBQyxFQUFVO1FBQUEsb0JBQUMsTUFBTSxrQkFBQyxRQUFRLEVBQUUsY0FBYyxDQUFDLFNBQVMsQ0FBQyxJQUFNLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxRQUFRLENBQUMsRUFBVztRQUFBLG9CQUFDLE1BQU0sa0JBQUMsUUFBUSxFQUFFLGNBQWMsQ0FBQywwQkFBMEIsQ0FBQyxJQUFNLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxRQUFRLENBQUMsRUFBVyxDQUFPLENBQUMsQ0FBQztBQUMvWCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgKi9cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgRXNjYXBlSGF0Y2hQcm9wcywgZ2V0T3ZlcnJpZGVQcm9wcywgdXNlQXV0aCB9IGZyb20gXCJAYXdzLWFtcGxpZnkvdWktcmVhY3QvaW50ZXJuYWxcIjtcbmltcG9ydCB7IEJ1dHRvbiwgQnV0dG9uUHJvcHMsIEZsZXgsIEZsZXhQcm9wcywgSW1hZ2UsIEltYWdlUHJvcHMgfSBmcm9tIFwiQGF3cy1hbXBsaWZ5L3VpLXJlYWN0XCI7XG5cbmV4cG9ydCBkZWNsYXJlIHR5cGUgUHJpbWl0aXZlT3ZlcnJpZGVQcm9wczxUPiA9IFBhcnRpYWw8VD4gJiBSZWFjdC5ET01BdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PjtleHBvcnQgZGVjbGFyZSB0eXBlIFByb2ZpbGVPdmVycmlkZXNQcm9wcyA9IHtcbiAgICBQcm9maWxlPzogUHJpbWl0aXZlT3ZlcnJpZGVQcm9wczxGbGV4UHJvcHM+O1xuICAgIGNoaWxkMT86IFByaW1pdGl2ZU92ZXJyaWRlUHJvcHM8SW1hZ2VQcm9wcz47XG4gICAgY2hpbGQyPzogUHJpbWl0aXZlT3ZlcnJpZGVQcm9wczxCdXR0b25Qcm9wcz47XG4gICAgY2hpbGQzPzogUHJpbWl0aXZlT3ZlcnJpZGVQcm9wczxCdXR0b25Qcm9wcz47XG59ICYgRXNjYXBlSGF0Y2hQcm9wcztleHBvcnQgdHlwZSBQcm9maWxlUHJvcHMgPSBSZWFjdC5Qcm9wc1dpdGhDaGlsZHJlbjxQYXJ0aWFsPEZsZXhQcm9wcz4gJiB7XG4gICAgb3ZlcnJpZGVzPzogUHJvZmlsZU92ZXJyaWRlc1Byb3BzIHwgdW5kZWZpbmVkIHwgbnVsbDtcbn0+O1xuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUHJvZmlsZShwcm9wczogUHJvZmlsZVByb3BzKTogUmVhY3QuUmVhY3RFbGVtZW50IHtcbiAgICBjb25zdCB7IG92ZXJyaWRlcywgLi4ucmVzdCB9ID0gcHJvcHM7XG4gICAgY29uc3QgYXV0aEF0dHJpYnV0ZXMgPSB1c2VBdXRoKCkudXNlcj8uYXR0cmlidXRlcyA/PyB7fTtcbiAgICByZXR1cm4gKDxGbGV4IHsuLi5nZXRPdmVycmlkZVByb3BzKG92ZXJyaWRlcywgXCJQcm9maWxlXCIpfSB7Li4ucmVzdH0+PEltYWdlIHNyYz17YXV0aEF0dHJpYnV0ZXNbXCJ1c2VybmFtZVwiXX0gey4uLmdldE92ZXJyaWRlUHJvcHMob3ZlcnJpZGVzLCBcImNoaWxkMVwiKX0+PC9JbWFnZT48QnV0dG9uIGNoaWxkcmVuPXthdXRoQXR0cmlidXRlc1tcInBpY3R1cmVcIl19IHsuLi5nZXRPdmVycmlkZVByb3BzKG92ZXJyaWRlcywgXCJjaGlsZDJcIil9PjwvQnV0dG9uPjxCdXR0b24gY2hpbGRyZW49e2F1dGhBdHRyaWJ1dGVzW1wiY3VzdG9tOmZhdm9yaXRlX2ljZWNyZWFtXCJdfSB7Li4uZ2V0T3ZlcnJpZGVQcm9wcyhvdmVycmlkZXMsIFwiY2hpbGQzXCIpfT48L0J1dHRvbj48L0ZsZXg+KTtcbn0iXX0=
"
`;

exports[`amplify render tests user specific attributes should render user specific attributes 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
  EscapeHatchProps,
  getOverrideProps,
  useAuth,
} from \\"@aws-amplify/ui-react/internal\\";
import {
  Button,
  ButtonProps,
  Flex,
  FlexProps,
  Image,
  ImageProps,
} from \\"@aws-amplify/ui-react\\";

export declare type PrimitiveOverrideProps<T> = Partial<T> &
  React.DOMAttributes<HTMLDivElement>;
export declare type ProfileOverridesProps = {
  Profile?: PrimitiveOverrideProps<FlexProps>;
  child1?: PrimitiveOverrideProps<ImageProps>;
  child2?: PrimitiveOverrideProps<ButtonProps>;
  child3?: PrimitiveOverrideProps<ButtonProps>;
} & EscapeHatchProps;
export type ProfileProps = React.PropsWithChildren<
  Partial<FlexProps> & {
    overrides?: ProfileOverridesProps | undefined | null;
  }
>;
export default function Profile(props: ProfileProps): React.ReactElement {
  const { overrides, ...rest } = props;
  const authAttributes = useAuth().user?.attributes ?? {};
  return (
    /* @ts-ignore: TS2322 */
    <Flex {...getOverrideProps(overrides, \\"Profile\\")} {...rest}>
      <Image
        src={authAttributes[\\"username\\"]}
        {...getOverrideProps(overrides, \\"child1\\")}
      ></Image>
      <Button
        children={authAttributes[\\"picture\\"]}
        {...getOverrideProps(overrides, \\"child2\\")}
      ></Button>
      <Button
        children={authAttributes[\\"custom:favorite_icecream\\"]}
        {...getOverrideProps(overrides, \\"child3\\")}
      ></Button>
    </Flex>
  );
}
"
`;