Remote dom twenty UI POC (#17652)

Create a proof of concept which allows us to use twenty-ui in the
remote-dom.
For now only the button is allowed.


https://github.com/user-attachments/assets/e5441d2c-eb63-4b99-931b-86ee14621393

Known limitation: The icons are not yet available

packages/twenty-sdk/src/front-component/host/components/FrontComponentRenderer.tsx

@@ -2,19 +2,24 @@ import {
   type RemoteReceiver,
   RemoteRootRenderer,
 } from '@remote-dom/react/host';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+
+import { ThemeProvider } from '@emotion/react';
+import { type ThemeType } from 'twenty-ui/theme';
 import { FrontComponentWorkerEffect } from '../../remote/components/FrontComponentWorkerEffect';
 import { componentRegistry } from '../generated/host-component-registry';
 
 type FrontComponentContentProps = {
   componentUrl: string;
   onError: (error?: Error) => void;
+  theme: ThemeType;
 };
 
 export const FrontComponentRenderer = ({
   componentUrl,
   onError,
+  theme,
 }: FrontComponentContentProps) => {
   const [receiver, setReceiver] = useState<RemoteReceiver | null>(null);
 
@@ -27,10 +32,12 @@ export const FrontComponentRenderer = ({
       />
 
       {isDefined(receiver) && (
-        <RemoteRootRenderer
-          receiver={receiver}
-          components={componentRegistry}
-        />
+        <ThemeProvider theme={theme}>
+          <RemoteRootRenderer
+            receiver={receiver}
+            components={componentRegistry}
+          />
+        </ThemeProvider>
       )}
     </>
   );