Fix styled components esm cjs interop issue (#5)

Summary:
Hi felixtrz

We run into the following issue when iwer/devui is used as a dependency of pmndrs/xr .
<img width="1258" alt="Screenshot 2024-10-06 at 1 08 44 PM" src="https://github.com/user-attachments/assets/dab8bd56-c18a-4bf9-8fa2-dbe46ee8664d">

Other people suggested we apply the fix mentioned styled-components/styled-components#3862 (comment)
For now I have to manually pin the version for pmndrs/xr but I hope we can quickly resolve the styled-components issue.

Pull Request resolved: #5

Reviewed By: cabanier

Differential Revision: D64422360

Pulled By: felixtrz

fbshipit-source-id: deec7c2f557c995652f9f4f2bd9c716633f5b834

devui/src/components/controls.tsx

@@ -13,7 +13,7 @@ import { Joystick } from './joystick.js';
 import { KeyMapType } from './mapper.js';
 import React from 'react';
 import { XRDevice } from 'iwer';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const ControlsContainer = styled.div<{ $reverse: boolean }>`
 	padding: ${({ $reverse }) =>

devui/src/components/fov.tsx

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 
 import { InputLayer } from '../scene.js';
 import { XRDevice } from 'iwer';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 interface FOVMenuProps {
 	xrDevice: XRDevice;

devui/src/components/header.tsx

@@ -22,7 +22,7 @@ import { IWERIcon } from './icons.js';
 import { InputLayer } from '../scene.js';
 import React from 'react';
 import { XRDevice } from 'iwer';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const HeaderButtonsContainer = styled.div`
 	padding: 6px 5px;

devui/src/components/joystick.tsx

@@ -19,7 +19,7 @@ import { GamepadIcon } from './icons.js';
 import { MappedKeyDisplay } from './keys.js';
 import { XRController } from '../../../lib/device/XRController';
 import { faFingerprint } from '@fortawesome/free-solid-svg-icons';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 interface JoystickProps {
 	xrController: XRController;

devui/src/components/mapper.tsx

@@ -12,7 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { GamepadIcon } from './icons.js';
 import { MappedKeyDisplay } from './keys.js';
 import { faBan } from '@fortawesome/free-solid-svg-icons';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export type KeyMapType = Partial<
 	Record<XRHandedness, { [key: string]: string }>

devui/src/components/styled.tsx

@@ -6,7 +6,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const Button = styled.button<{ $reverse: boolean }>`
 	background-color: rgba(255, 255, 255, 0.3);