Migrate to twenty-ui - input components (#7914)

### Description

Migrate Input components: 

- CardPicker
- Radio
- RadioGroup
- Checkbox
- Toggle
- IconListViewGrip

### Demo

Radio Component on Storybook


![](https://assets-service.gitstart.com/4814/2d0c7436-9fab-4f3d-a5c4-be874e885789.png)

Checkbox component on Storybook


![](https://assets-service.gitstart.com/4814/07bcc040-cc92-4c7e-9be8-ca1a5f454993.png)

###### Fixes twentyhq/private-issues#92

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/input/components/CardPicker.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import { Radio } from './Radio';
+
+const StyledSubscriptionCardContainer = styled.button`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(3)};
+  position: relative;
+  width: 100%;
+  :hover {
+    cursor: pointer;
+    background: ${({ theme }) => theme.background.tertiary};
+  }
+`;
+
+const StyledRadioContainer = styled.div`
+  position: absolute;
+  right: ${({ theme }) => theme.spacing(2)};
+  top: ${({ theme }) => theme.spacing(2)};
+`;
+
+type CardPickerProps = {
+  children: React.ReactNode;
+  handleChange?: () => void;
+  checked?: boolean;
+};
+
+export const CardPicker = ({
+  children,
+  checked,
+  handleChange,
+}: CardPickerProps) => {
+  return (
+    <StyledSubscriptionCardContainer onClick={handleChange}>
+      <StyledRadioContainer>
+        <Radio checked={checked} />
+      </StyledRadioContainer>
+      {children}
+    </StyledSubscriptionCardContainer>
+  );
+};