Update UI components to be able to use them in Console (#5514)

* First steps in updating console ui components.

* Replaced remaining v1 components.

* Removed todo.

* Removed createelement from form component since we were not using it at all (we wrapped all our inputs in divs), and any input that was not wrapped, was actually broken...

* Undo update submodule.

* Reverted website submodule update.

apps/web/pages/auth/setup.tsx

@@ -90,7 +90,7 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
 
   return (
     <FormProvider {...formMethods}>
-      <form id="setup-step-1" name="setup-step-1" className="space-y-4" onSubmit={onSubmit}>
+      <form id="wizard-step-1" name="wizard-step-1" className="space-y-4" onSubmit={onSubmit}>
         <div>
           <Controller
             name="username"

packages/ui/components/form/inputs/Input.tsx

@@ -296,25 +296,7 @@ const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLForm
             });
         }}
         {...passThrough}>
-        {
-          /* @see https://react-hook-form.com/advanced-usage/#SmartFormComponent */
-          React.Children.map(props.children, (child) => {
-            return typeof child !== "string" &&
-              typeof child !== "number" &&
-              typeof child !== "boolean" &&
-              child &&
-              "props" in child &&
-              child.props.name
-              ? React.createElement(child.type, {
-                  ...{
-                    ...child.props,
-                    register: form.register,
-                    key: child.props.name,
-                  },
-                })
-              : child;
-          })
-        }
+        {props.children}
       </form>
     </FormProvider>
   );

packages/ui/v2/core/WizardForm.tsx

@@ -52,8 +52,8 @@ function WizardForm<T extends DefaultStep>(props: { href: string; steps: T[]; co
               loading={currentStep.isLoading}
               type="submit"
               color="primary"
-              form={`setup-step-${step}`}
-              className="relative">
+              form={`wizard-step-${step}`}
+              className="relative ml-3">
               {step < steps.length ? "Next" : "Finish"}
             </Button>
           </div>