run prettier on embedded-components

embedded-components/src/components/ui/alert-dialog.tsx

@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'eb-fixed eb-inset-0 eb-z-overlay eb-bg-black/80 eb- data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
+      'eb- eb-fixed eb-inset-0 eb-z-overlay eb-bg-black/80 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
       className
     )}
     {...props}
@@ -77,7 +77,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('eb-text-foreground eb-text-lg eb-font-semibold', className)}
+    className={cn('eb-text-lg eb-font-semibold eb-text-foreground', className)}
     {...props}
   />
 ));

embedded-components/src/components/ui/alert.tsx

@@ -55,7 +55,7 @@ const AlertDescription = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'eb-text-foreground eb-text-sm [&_p]:eb-leading-relaxed',
+      'eb-text-sm eb-text-foreground [&_p]:eb-leading-relaxed',
       className
     )}
     {...props}

embedded-components/src/components/ui/card.tsx

@@ -37,7 +37,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      'eb-text-foreground eb-text-2xl eb-font-semibold eb-leading-none eb-tracking-tight',
+      'eb-text-2xl eb-font-semibold eb-leading-none eb-tracking-tight eb-text-foreground',
       className
     )}
     {...props}

embedded-components/src/components/ui/checkbox.tsx

@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'eb-cursor-pointer eb-peer eb-h-4 eb-w-4 eb-shrink-0 eb-rounded-sm eb-border eb-border-primary eb-ring-offset-background focus-visible:eb-outline-none focus-visible:eb-ring-2 focus-visible:eb-ring-ring focus-visible:eb-ring-offset-2 disabled:eb-cursor-not-allowed disabled:eb-opacity-50 data-[state=checked]:eb-bg-primary data-[state=checked]:eb-text-primary-foreground',
+      'eb-peer eb-h-4 eb-w-4 eb-shrink-0 eb-cursor-pointer eb-rounded-sm eb-border eb-border-primary eb-ring-offset-background focus-visible:eb-outline-none focus-visible:eb-ring-2 focus-visible:eb-ring-ring focus-visible:eb-ring-offset-2 disabled:eb-cursor-not-allowed disabled:eb-opacity-50 data-[state=checked]:eb-bg-primary data-[state=checked]:eb-text-primary-foreground',
       className
     )}
     {...props}

embedded-components/src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'eb-fixed eb-inset-0 eb-z-overlay  eb-bg-black/40 eb-data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
+      'eb-data-[state=open]:eb-animate-in eb-fixed eb-inset-0  eb-z-overlay eb-bg-black/40 data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'eb-fixed eb-left-[50%] eb-top-4 eb-overflow-y-scroll eb-max-h-[800px]  eb-z-overlay eb-grid eb-w-full eb-max-w-[700px] eb-w-fit eb-translate-x-[-50%] eb-translate-y-0 eb-gap-4 eb-border eb-border-border eb-bg-background eb-p-6 eb-shadow-lg eb-duration-200 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[state=closed]:eb-slide-out-to-left-1/2 data-[state=closed]:eb-slide-out-to-top-[48%] data-[state=open]:eb-slide-in-from-left-1/2 data-[state=open]:eb-slide-in-from-top-[48%] sm:eb-rounded-lg',
+        'eb-fixed eb-left-[50%] eb-top-4 eb-z-overlay eb-grid  eb-max-h-[800px] eb-w-fit eb-w-full eb-max-w-[700px] eb-translate-x-[-50%] eb-translate-y-0 eb-gap-4 eb-overflow-y-scroll eb-border eb-border-border eb-bg-background eb-p-6 eb-shadow-lg eb-duration-200 data-[state=open]:eb-animate-in data-[state=closed]:eb-animate-out data-[state=closed]:eb-fade-out-0 data-[state=open]:eb-fade-in-0 data-[state=closed]:eb-zoom-out-95 data-[state=open]:eb-zoom-in-95 data-[state=closed]:eb-slide-out-to-left-1/2 data-[state=closed]:eb-slide-out-to-top-[48%] data-[state=open]:eb-slide-in-from-left-1/2 data-[state=open]:eb-slide-in-from-top-[48%] sm:eb-rounded-lg',
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'eb-flex eb-flex-col eb-space-y-1.5 eb-text-foreground eb-text-center sm:eb-text-left',
+      'eb-flex eb-flex-col eb-space-y-1.5 eb-text-center eb-text-foreground sm:eb-text-left',
       className
     )}
     {...props}
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      'eb-text-foreground eb-text-lg eb-font-semibold eb-leading-none eb-tracking-tight',
+      'eb-text-lg eb-font-semibold eb-leading-none eb-tracking-tight eb-text-foreground',
       className
     )}
     {...props}

embedded-components/src/components/ui/form.tsx

@@ -99,7 +99,7 @@ const FormLabel = React.forwardRef<
       ref={ref}
       className={cn(
         error && '!eb-text-destructive',
-        props?.asterisk && `after:eb-content-["_*"] after:eb-text-red-500`,
+        props?.asterisk && `after:eb-text-red-500 after:eb-content-["_*"]`,
         className
       )}
       htmlFor={formItemId}

embedded-components/src/components/ui/grid.tsx

@@ -18,11 +18,7 @@ const Grid = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof gridVariant>
 >(({ className, variant, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(gridVariant({ variant }), className)}
-    {...props}
-  >
+  <div ref={ref} className={cn(gridVariant({ variant }), className)} {...props}>
     {children}
   </div>
 ));

embedded-components/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'eb-flex eb-h-10 eb-w-full eb-rounded-md  eb-border eb-border-border eb-border-input eb-bg-background eb-px-3 eb-py-2 eb-text-foreground eb-text-sm eb-ring-offset-background file:eb-border-0 file:eb-bg-transparent file:eb-text-sm file:eb-font-medium placeholder:eb-text-muted-foreground focus-visible:eb-outline-none focus-visible:eb-outline-primary focus-visible:eb-ring-offset-1 focus-visible:eb-ring-1  focus-visible:eb-ring-offset-1 focus-visible:eb-default disabled:eb-cursor-not-allowed disabled:eb-opacity-50 disabled:eb-bg-gray-100',
+          'focus-visible:eb-default eb-flex eb-h-10 eb-w-full  eb-rounded-md eb-border eb-border-border eb-border-input eb-bg-background eb-px-3 eb-py-2 eb-text-sm eb-text-foreground eb-ring-offset-background file:eb-border-0 file:eb-bg-transparent file:eb-text-sm file:eb-font-medium placeholder:eb-text-muted-foreground focus-visible:eb-outline-none focus-visible:eb-outline-primary focus-visible:eb-ring-1  focus-visible:eb-ring-offset-1 focus-visible:eb-ring-offset-1 disabled:eb-cursor-not-allowed disabled:eb-bg-gray-100 disabled:eb-opacity-50',
           className
         )}
         ref={ref}

embedded-components/src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'eb-flex eb-h-10 eb-w-full eb-items-center eb-justify-between eb-rounded-md eb-border eb-border-input eb-bg-background eb-px-3 eb-py-2 eb-text-foreground eb-text-sm eb-ring-offset-background placeholder:eb-text-muted-foreground focus:eb-outline-none focus:eb-ring-2 focus:eb-ring-ring focus:eb-ring-offset-2 disabled:eb-cursor-not-allowed disabled:eb-opacity-50 [&>span]:eb-line-clamp-1',
+      'eb-flex eb-h-10 eb-w-full eb-items-center eb-justify-between eb-rounded-md eb-border eb-border-input eb-bg-background eb-px-3 eb-py-2 eb-text-sm eb-text-foreground eb-ring-offset-background placeholder:eb-text-muted-foreground focus:eb-outline-none focus:eb-ring-2 focus:eb-ring-ring focus:eb-ring-offset-2 disabled:eb-cursor-not-allowed disabled:eb-opacity-50 [&>span]:eb-line-clamp-1',
       className
     )}
     {...props}
@@ -104,7 +104,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      'eb-py-1.5 eb-pl-8 eb-pr-2 eb-text-foreground eb-text-sm eb-font-semibold',
+      'eb-py-1.5 eb-pl-8 eb-pr-2 eb-text-sm eb-font-semibold eb-text-foreground',
       className
     )}
     {...props}
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'eb-relative eb-flex eb-w-full eb-cursor-pointer eb-select-none eb-items-center eb-rounded-sm eb-py-1.5 eb-pl-8 eb-pr-2 eb-text-foreground eb-text-sm eb-outline-none focus:eb-bg-accent focus:eb-text-accent-foreground data-[disabled]:eb-pointer-events-none data-[disabled]:eb-opacity-50',
+      'eb-relative eb-flex eb-w-full eb-cursor-pointer eb-select-none eb-items-center eb-rounded-sm eb-py-1.5 eb-pl-8 eb-pr-2 eb-text-sm eb-text-foreground eb-outline-none focus:eb-bg-accent focus:eb-text-accent-foreground data-[disabled]:eb-pointer-events-none data-[disabled]:eb-opacity-50',
       className
     )}
     {...props}

embedded-components/src/components/ui/table.tsx

@@ -10,7 +10,7 @@ const Table = React.forwardRef<
     <table
       ref={ref}
       className={cn(
-        'eb-w-full eb-text-foreground eb-caption-bottom eb-text-sm',
+        'eb-w-full eb-caption-bottom eb-text-sm eb-text-foreground',
         className
       )}
       {...props}
@@ -46,7 +46,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      'eb-border-t eb-bg-muted/50 eb-foreground eb-font-medium [&>tr]:last:eb-border-b-0',
+      'eb-foreground eb-border-t eb-bg-muted/50 eb-font-medium [&>tr]:last:eb-border-b-0',
       className
     )}
     {...props}

embedded-components/src/core/LinkedAccountWidget/LinkAccountForm/LinkAccountForm.tsx

@@ -190,4 +190,4 @@ export const LinkAccountFormDialogTrigger: FC<
       </form>
     </Form>
   );
-};
+};

embedded-components/src/core/OnboardingWizard/Forms/BusinessCommonForm/BusinessCommonForm.tsx

@@ -21,6 +21,7 @@ import { Stack } from '@/components/ui/stack';
 import { Text } from '@/components/ui/text';
 import { TextArea } from '@/components/ui/textarea';
 import { Title } from '@/components/ui/title';
+
 import { industryCategoriesMock as industryCategories } from '../../utils/industryCategories.mock';
 import { useContentData } from '../../utils/useContentData';
 import { AddressForm } from '../AddressForm/AddressForm';
@@ -39,14 +40,14 @@ export const BusinessCommonForm: any = ({ form }: any) => {
   const { getContentToken } = useContentData('steps.BusinessDetailsStep');
   return (
     <>
-      <Grid className={`eb-gap-4 eb-pt-4 eb-grid-flow-row `}>
+      <Grid className={`eb-grid-flow-row eb-gap-4 eb-pt-4 `}>
         <Stack>
           <FormField
             control={form.control}
             name="businessDescription"
             render={({ field }) => (
               <FormItem>
-                <Stack className={`eb-gap-4 eb-pt-4 eb-grid-flow-row `}>
+                <Stack className={`eb-grid-flow-row eb-gap-4 eb-pt-4 `}>
                   <FormLabel asterisk>
                     {getContentToken(`businessDescription.label`)}
                   </FormLabel>
@@ -59,7 +60,7 @@ export const BusinessCommonForm: any = ({ form }: any) => {
                         getContentToken?.(`businessDescription.placeholder`) ??
                         ''
                       }
-                      className="eb-h-40 eb-border-solid eb-border"
+                      className="eb-h-40 eb-border eb-border-solid"
                     />
                   </FormControl>
                   <FormMessage />
@@ -68,7 +69,7 @@ export const BusinessCommonForm: any = ({ form }: any) => {
             )}
           />
 
-          <Grid className="eb-gap-4 eb-pt-4 eb-grid-flow-row eb-mb-5  eb-grid-cols-2">
+          <Grid className="eb-mb-5 eb-grid-flow-row eb-grid-cols-2 eb-gap-4  eb-pt-4">
             <FormField
               control={form.control}
               name="businessEmail"
@@ -113,7 +114,7 @@ export const BusinessCommonForm: any = ({ form }: any) => {
               )}
             />
           </Grid>
-          <Grid className="eb-gap-4 eb-pt-4 eb-grid-flow-row eb-mb-5  eb-grid-cols-2">
+          <Grid className="eb-mb-5 eb-grid-flow-row eb-grid-cols-2 eb-gap-4  eb-pt-4">
             <FormField
               control={form.control}
               name="website"
@@ -141,13 +142,15 @@ export const BusinessCommonForm: any = ({ form }: any) => {
               )}
             />
 
-            <Group className="eb-flex eb-flex-row eb-content-center eb-flex-wrap  eb-gap-2">
-              <Text className="eb-font-bold eb-mx-3">{getContentToken(`text.or`)}</Text>
+            <Group className="eb-flex eb-flex-row eb-flex-wrap eb-content-center  eb-gap-2">
+              <Text className="eb-mx-3 eb-font-bold">
+                {getContentToken(`text.or`)}
+              </Text>
               <FormField
                 control={form.control}
                 name="websiteNotAvailable"
                 render={({ field }) => (
-                  <FormItem >
+                  <FormItem>
                     <FormControl>
                       <Checkbox
                         checked={field.value}
@@ -161,14 +164,16 @@ export const BusinessCommonForm: any = ({ form }: any) => {
                         }}
                       />
                     </FormControl>
-                    <FormLabel className="eb-p-3">My business does not have a website</FormLabel>
+                    <FormLabel className="eb-p-3">
+                      My business does not have a website
+                    </FormLabel>
                     <FormMessage />
                   </FormItem>
                 )}
               />
             </Group>
           </Grid>
-          <Grid className="eb-gap-4 eb-pt-4 eb-grid-flow-row eb-mb-5  eb-grid-cols-2">
+          <Grid className="eb-mb-5 eb-grid-flow-row eb-grid-cols-2 eb-gap-4  eb-pt-4">
             <FormField
               control={form.control}
               name="website"
@@ -218,25 +223,25 @@ export const BusinessCommonForm: any = ({ form }: any) => {
             <Title as="h2" className="eb-my-5">
               {getContentToken(`addressSectionTitle`)}
             </Title>
-            <Group className="eb-flex eb-flex-row eb-content-center eb-flex-wrap  eb-gap-2">
-            <FormField
-              control={form.control}
-              name="businessAddressSameAsController"
-              render={({ field }) => (
-                <FormItem >
-                  <FormControl>
-                    <Checkbox
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                    />
-                  </FormControl>
-                  <FormLabel className="eb-px-3">
-                    {getContentToken(`businessAddressSameAsController.label`)}
-                  </FormLabel>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            <Group className="eb-flex eb-flex-row eb-flex-wrap eb-content-center  eb-gap-2">
+              <FormField
+                control={form.control}
+                name="businessAddressSameAsController"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                    <FormLabel className="eb-px-3">
+                      {getContentToken(`businessAddressSameAsController.label`)}
+                    </FormLabel>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
             </Group>
           </Stack>
         </Stack>
@@ -257,7 +262,6 @@ export const BusinessCommonForm: any = ({ form }: any) => {
         }}
       />
       <FormField
-
         control={form.control}
         name="industryCategory"
         render={({ field }) => (

embedded-components/src/core/OnboardingWizard/Forms/BusinessDetailsForm/BusinessDetailsForm.tsx

@@ -6,8 +6,9 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Grid } from '@/components/ui/grid';
-import { Title } from '@/components/ui/title';
 import { Input } from '@/components/ui/input';
+import { Title } from '@/components/ui/title';
+
 import { useContentData } from '../../utils/useContentData';
 
 const BusinessDetailsForm = ({ form }: any) => {
@@ -16,7 +17,7 @@ const BusinessDetailsForm = ({ form }: any) => {
     <>
       <Title as="h2">{getContentToken(`detailsSectionTitle`)}</Title>
       <Grid
-        className={`eb-gap-4 eb-pt-4 eb-grid-flow-row eb-mb-5  eb-grid-cols-2`}
+        className={`eb-mb-5 eb-grid-flow-row eb-grid-cols-2 eb-gap-4  eb-pt-4`}
       >
         <FormField
           control={form.control}
@@ -75,4 +76,4 @@ const BusinessDetailsForm = ({ form }: any) => {
   );
 };
 
-export { BusinessDetailsForm as BusinessForm };
+export { BusinessDetailsForm as BusinessForm };

embedded-components/src/core/OnboardingWizard/Forms/EntityTypeForm/EntityTypeForm.tsx

@@ -15,15 +15,18 @@ import { Title } from '@/components/ui/title';
 import { Checkbox } from '@/components/ui';
 
 import { useOnboardingForm } from '../../context/form.context';
+import {
+  businessDetailsMock,
+  controllerMock,
+} from '../../mocks/reviewStep.mock';
 import { useContentData } from '../../utils/useContentData';
-import { businessDetailsMock, controllerMock } from '../../mocks/reviewStep.mock';
 
 const EntityTypeForm = ({ form }: any) => {
   const { getContentToken } = useContentData('features.EntityTypeForm');
   const { setOnboardingForm, onboardingForm } = useOnboardingForm();
   return (
     <>
-      <Grid className="eb-gap-4 eb-pt-4 eb-grid-flow-row eb-grid-cols-2">
+      <Grid className="eb-grid-flow-row eb-grid-cols-2 eb-gap-4 eb-pt-4">
         <FormField
           control={form.control}
           name="legalStructure"
@@ -75,8 +78,8 @@ const EntityTypeForm = ({ form }: any) => {
           )}
         />
         <Card>
-          <CardContent className="eb-bg-slate-200 eb-rounded">
-            <Grid className="eb-gap-2 eb-bg-slate-200 eb-p-5 eb-flex">
+          <CardContent className="eb-rounded eb-bg-slate-200">
+            <Grid className="eb-flex eb-gap-2 eb-bg-slate-200 eb-p-5">
               <Text>{getContentToken('corpText1')}</Text>
               <Text>{getContentToken('corpText2')}</Text>
               <Text className="eb-font-bold">

embedded-components/src/core/OnboardingWizard/Forms/PersonalDetailsForm/PersonalDetailsForm.tsx

@@ -32,7 +32,7 @@ type PersonalDetailsFormProps = {
 
 const PersonalDetailsForm = ({ form }: PersonalDetailsFormProps) => {
   const [jobTitleIsOther, setJobTitleIsOther] = useState(false);
-  const [ selectedJobTitle, setSelectedJobTitle] = useState('CEO');
+  const [selectedJobTitle, setSelectedJobTitle] = useState('CEO');
 
   const handleJobTitleChange = (jobTitle: string) => {
     setSelectedJobTitle(jobTitle);
@@ -45,8 +45,7 @@ const PersonalDetailsForm = ({ form }: PersonalDetailsFormProps) => {
 
   return (
     <>
-
-      <div className="eb-grid eb-grid-cols-3  eb-grid-flow-row eb-gap-6 eb-pt-4">
+      <div className="eb-grid eb-grid-flow-row  eb-grid-cols-3 eb-gap-6 eb-pt-4">
         <FormField
           control={form.control}
           name="firstName"
@@ -141,9 +140,7 @@ const PersonalDetailsForm = ({ form }: PersonalDetailsFormProps) => {
           name="jobTitleDescription"
           render={({ field }) => (
             <FormItem>
-              <FormLabel asterisk={jobTitleIsOther}>
-                Job Description
-              </FormLabel>
+              <FormLabel asterisk={jobTitleIsOther}>Job Description</FormLabel>
               <FormControl>
                 <Input
                   {...field}