Migrate to a monorepo structure (#2909)

2023-12-10 18:10:54 +01:00
parent a70a9281eb
commit 5bdca9de6c
2304 changed files with 37152 additions and 25869 deletions
--- a/packages/twenty-docs/src/css/custom.css
+++ b/packages/twenty-docs/src/css/custom.css
@ -0,0 +1,292 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-global-radius: 8px;
+  --ifm-code-font-size: 14px;
+  --ifm-font-family-base: "Inter",BlinkMacSystemFont,-apple-system,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue","Helvetica","Arial",sans-serif;
+  --ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
+  --ifm-font-size-base: 14px;
+  --ifm-base-spacing: 14px;
+  --ifm-line-height-base: 145%;
+  --ifm-font-weight-base: var(--twenty-body-regular-font-weight);
+  --ifm-color-primary: #11181c;
+  --ifm-code-font-size: 95%;
+  --docsearch-key-gradient: none !important;
+  --docsearch-key-shadow: 0 0 0 0.5px var(--docsearch-muted-color) !important;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-toc-padding-vertical: 0.5rem;
+  --ifm-breadcrumb-border-radius: 8px;
+  --ifm-navbar-link-color: #687076;
+  --ifm-link-decoration: underline;
+
+  --ifm-heading-font-weight: 600;
+
+  --ifm-h1-font-size: 1.7rem !important;
+  --ifm-h2-font-size: 1.25rem !important;
+  --ifm-h3-font-size: 1rem !important;
+  --ifm-h4-font-size: 0.875rem !important;
+  --ifm-h5-font-size: 0.85rem !important;
+
+  --ifm-spacing-horizontal: 2rem;
+
+  --ifm-menu-link-padding-vertical: 0.2rem;
+
+  --list-items-border-color: #ebebeb;
+  --category-icon-background-color: #ebebeb;
+  --category-icon-border-color: #d6d6d6;
+  --level-1-color: #B3B3B3;
+  
+}
+
+.markdown > h1 {
+  --ifm-h1-font-size: 1.7rem !important;
+}
+.markdown > h2 {
+  --ifm-h2-font-size: 1.25rem;
+}
+.markdown > h3 {
+  --ifm-h3-font-size: 1rem;
+}
+.markdown > h4 {
+  --ifm-h4-font-size: 0.875rem;
+}
+.markdown > h5 {
+  --ifm-h5-font-size: 0.85rem;
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #fff;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --list-items-border-color: #292929;
+  --category-icon-background-color: #292929;
+  --category-icon-border-color: #333333;
+  --level-1-color: #666666;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html {
+  font-size: 14px;
+}
+
+.container {
+  padding-top: 48px !important;
+}
+
+.DocSearch-Button {
+  height: 32px !important;
+  border-radius: 8px !important;
+}
+
+.DocSearch-Button-Placeholder {
+  padding: 0 100px 0 6px !important;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  color: inherit !important;
+  width: 13px;
+}
+
+.DocSearch-Button-Key {
+  height: 14px !important;
+  width: 14px !important;
+  font-size: 9px !important;
+}
+
+.DocSearch-Button-Keys {
+  min-width: inherit !important;
+}
+
+.theme-edit-this-page {
+  font-size: 70%;
+}
+.theme-edit-this-page svg {
+  height: 14px;
+  width: 14px;
+}
+
+li.coming-soon {
+  display: flex;
+}
+
+li.coming-soon a {
+  display: flex;
+  justify-content: space-between;
+  pointer-events: none;
+  cursor: default;
+}
+
+a.menu__link, a.navbar__item {
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.menu__link--external {
+  align-items: center;
+}
+
+li.coming-soon a::after {
+  float: right;
+  content: "soon";
+  border-color: #373737;
+  border: 1px solid;
+  border-radius: 4px;
+  text-align: center;
+  float:right;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-bottom: 2px;
+  font-size: 80%;
+}
+
+.theme-doc-sidebar-item-category-level-1 > .menu__link {
+  text-transform: uppercase;
+  font-size: 12px;
+  color: var(--level-1-color);
+}
+
+.theme-doc-sidebar-item-category-level-1 > .menu__link:hover{
+  color:inherit
+} 
+
+.menu__list-item--level1 > .menu__link--active {
+  color: inherit;
+}
+
+
+.menu__list-item--level1 > .menu__link--active > .icon-and-text {
+  color: black;
+}
+
+
+[data-theme='dark'] .menu__list-item--level1 > .menu__link--active > .icon-and-text {
+  color: white;
+}
+
+
+[data-theme='light'] .menu__list-item--level1 > .menu__link--active > .icon-and-text {
+  color: initial;
+}
+
+
+ 
+
+.menu__list-item--level1 > .menu__link--active,
+.menu__list-item--level1 > .menu__link:hover {
+  background: inherit;
+}
+
+.theme-doc-sidebar-item-category-level-1 {
+  padding-top: 1.5rem;
+}
+
+.theme-doc-sidebar-item-category-level-2 {
+  cursor: pointer;
+}
+.theme-doc-sidebar-item-category-level-2 .menu__list {
+  border-left: 1px solid var(--list-items-border-color);
+  margin-left: var(--ifm-menu-link-padding-horizontal);
+}
+
+.menu__list-item--home {
+  font-size: 13px;
+  margin: 1.5rem 0;
+}
+
+.theme-doc-sidebar-item-link-level-1.menu__list-item--root .sidebar-item-icon {
+  background-clip: content-box;
+  background-color: var(--category-icon-background-color);
+  border: 1px solid var(--category-icon-border-color);
+  border-radius: 8px;
+  padding: 3px;
+  margin-right: 16px;
+}
+.theme-doc-sidebar-item-link-level-1.menu__list-item--root .sidebar-item-icon svg {
+  height: 22px;
+  width: 22px;
+  padding: 1px;
+}
+
+.sidebar-item-icon {
+  display: flex;
+  vertical-align: center;
+  margin-right: 0.5rem;
+}
+
+.icon-and-text {
+  display: flex;
+  align-items: center;
+}
+
+.fullHeightPlayground {
+  height: calc(100vh - var(--ifm-navbar-height));
+}
+
+.display-none {
+  display: none;
+}
+
+.table-of-contents__link {
+  text-decoration: none;
+}
+
+a.table-of-contents__link:hover{
+  text-decoration: underline;
+}
+
+.docs-image {
+  max-width: 100%;
+  display: flex;
+  align-self: center;
+  width: 80%;
+}
+
+.pagination-nav__link{
+  text-decoration: none;
+}
+
+.tabs-container {
+  padding: 20px;
+}
+
+.card{
+  text-decoration: none;
+}
+
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+  content: "";
+  display: flex;
+  height: 24px;
+  width: 24px;
+}
+
+[data-theme='dark'] .header-github-link::before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+
+.hidden {
+display: none !important;
+}
--- a/packages/twenty-docs/src/pages/graphql.tsx
+++ b/packages/twenty-docs/src/pages/graphql.tsx
@ -0,0 +1,38 @@
+import { createGraphiQLFetcher } from "@graphiql/toolkit";
+import { GraphiQL } from "graphiql";
+import React from "react";
+import ReactDOM from "react-dom";
+import Layout from "@theme/Layout";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+import "graphiql/graphiql.css";
+
+// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
+const GraphiQLComponent = () => {
+  if (
+    !window.localStorage.getItem("graphiql:theme") &&
+    window.localStorage.getItem("theme") != "dark"
+  ) {
+    window.localStorage.setItem("graphiql:theme", "light");
+  }
+
+  const fetcher = createGraphiQLFetcher({
+    url: "https://api.twenty.com/graphql",
+  });
+  return (
+    <div className="fullHeightPlayground">
+      <GraphiQL fetcher={fetcher} />;
+    </div>
+  );
+};
+
+const graphQL = () => (
+  <Layout
+    title="GraphQL Playground"
+    description="GraphQL Playground for Twenty"
+  >
+    <BrowserOnly>{() => <GraphiQLComponent />}</BrowserOnly>
+  </Layout>
+);
+
+export default graphQL;
--- a/packages/twenty-docs/src/theme/DocCard/index.js
+++ b/packages/twenty-docs/src/theme/DocCard/index.js
@ -0,0 +1,97 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {
+  findFirstCategoryLink,
+  useDocById,
+} from '@docusaurus/theme-common/internal';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
+import styles from './styles.module.css';
+import * as icons from "../icons"; 
+
+
+function CardContainer({href, children}) {
+  return (
+    <Link
+      href={href}
+      className={clsx('card padding--lg', styles.cardContainer)}>
+      {children}
+    </Link>
+  );
+}
+function CardLayout({href, icon, title, description}) {
+  return (
+    <CardContainer href={href}>
+      <h2 className={clsx("text--truncate", styles.cardTitle)} title={title}>
+        <span className={styles.icon}>
+          {typeof icon === "function" ? icon() : icon}
+        </span>{" "}
+        {title}
+      </h2>
+      {description && (
+        <p
+          className={clsx("text--truncate", styles.cardDescription)}
+          title={description}
+        >
+          {description}
+        </p>
+      )}
+    </CardContainer>
+  );
+}
+
+function CardCategory({item}) {
+  const href = findFirstCategoryLink(item);
+  // Unexpected: categories that don't have a link have been filtered upfront
+  if (!href) {
+    return null;
+  }
+  return (
+    <CardLayout
+      href={href}
+      icon="🗃️"
+      title={item.label}
+      description={
+        item.description ??
+        translate(
+          {
+            message: '{count} items',
+            id: 'theme.docs.DocCard.categoryDescription',
+            description:
+              'The default description for a category card in the generated index about how many items this category includes',
+          },
+          {count: item.items.length},
+        )
+      }
+    />
+  );
+}
+
+
+function CardLink({ item }) {
+  const customIcon = item.customProps.icon;
+  const icon = icons[customIcon] || (isInternalUrl(item.href) ? "📄️" : "🔗");
+  const doc = useDocById(item.docId ?? undefined);
+
+  return (
+    <CardLayout
+      href={item.href}
+      icon={icon}
+      title={item.label}
+      description={item.description ?? doc?.description}
+    />
+  );
+}
+
+
+export default function DocCard({item}) {
+  switch (item.type) {
+    case 'link':
+      return <CardLink item={item} />;
+    case 'category':
+      return <CardCategory item={item} />;
+    default:
+      throw new Error(`unknown item type ${JSON.stringify(item)}`);
+  }
+}
--- a/packages/twenty-docs/src/theme/DocCard/styles.module.css
+++ b/packages/twenty-docs/src/theme/DocCard/styles.module.css
@ -0,0 +1,33 @@
+.cardContainer {
+  --ifm-link-color: var(--ifm-color-emphasis-800);
+  --ifm-link-hover-color: var(--ifm-color-emphasis-700);
+  --ifm-link-hover-decoration: none;
+
+  box-shadow: 0 1.5px 3px 0 rgb(0 0 0 / 15%);
+  border: 1px solid var(--ifm-color-emphasis-200);
+  transition: all var(--ifm-transition-fast) ease;
+  transition-property: border, box-shadow;
+}
+
+.cardContainer:hover {
+  border-color: var(--ifm-color-primary);
+  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 20%);
+}
+
+.cardContainer *:last-child {
+  margin-bottom: 0;
+}
+
+.cardTitle {
+  font-size: 1.2rem;
+    display: flex
+}
+
+.cardDescription {
+  font-size: 0.8rem;
+}
+
+.icon {
+  font-size: 1.5rem;
+  padding-right: 0.5rem;
+}
--- a/packages/twenty-docs/src/theme/DocSidebarItem/Category/index.js
+++ b/packages/twenty-docs/src/theme/DocSidebarItem/Category/index.js
@ -0,0 +1,103 @@
+import Link from "@docusaurus/Link";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import {
+  Collapsible,
+  ThemeClassNames,
+  useCollapsible,
+} from "@docusaurus/theme-common";
+import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
+import DocSidebarItems from "@theme/DocSidebarItems";
+import IconExternalLink from "@theme/Icon/ExternalLink";
+import clsx from "clsx";
+import React from "react";
+import * as icons from "../../icons";
+
+const DocSidebarItemCategory = ({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) => {
+  const {
+    href,
+    label,
+    className,
+    collapsible,
+    autoAddBaseUrl,
+    customProps = {},
+    items,
+  } = item;
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
+  const IconComponent = customProps?.icon ? icons[customProps.icon] : undefined;
+
+  const { collapsed, setCollapsed } = useCollapsible({
+    initialState: () => collapsible && !isActive && item.collapsed,
+  });
+
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemCategory,
+        ThemeClassNames.docs.docSidebarItemCategoryLevel(level),
+        "menu__list-item",
+        `menu__list-item--level${level}`,
+        className
+      )}
+      key={label}
+    >
+      <Link
+        className={clsx("menu__link", {
+          "menu__link--active": isActive,
+          "menu__link--external": !!href && !isInternalLink,
+        })}
+        autoAddBaseUrl={autoAddBaseUrl}
+        aria-current={isActive ? "page" : undefined}
+        aria-expanded={collapsible ? !collapsed : undefined}
+        to={href}
+        onClick={(e) => {
+          onItemClick?.(item);
+
+          if (!collapsible) return;
+
+          if (href) {
+            setCollapsed(false);
+            return;
+          }
+
+          e.preventDefault();
+          setCollapsed((previousCollapsed) => !previousCollapsed);
+        }}
+        {...props}
+      >
+        {IconComponent ? (
+          <span className="icon-and-text">
+            <i className="sidebar-item-icon">
+              <IconComponent />
+            </i>
+            {label}
+          </span>
+        ) : (
+          label
+        )}
+
+        {!!href && !isInternalLink && <IconExternalLink />}
+      </Link>
+      {!customProps.isSidebarRoot && (
+        <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+          <DocSidebarItems
+            items={items}
+            tabIndex={collapsed ? -1 : 0}
+            onItemClick={onItemClick}
+            activePath={activePath}
+            level={level + 1}
+          />
+        </Collapsible>
+      )}
+    </li>
+  );
+};
+
+export default DocSidebarItemCategory;
--- a/packages/twenty-docs/src/theme/DocSidebarItem/Link/index.js
+++ b/packages/twenty-docs/src/theme/DocSidebarItem/Link/index.js
@ -0,0 +1,62 @@
+import Link from "@docusaurus/Link";
+import isInternalUrl from "@docusaurus/isInternalUrl";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import { isActiveSidebarItem } from "@docusaurus/theme-common/internal";
+import IconExternalLink from "@theme/Icon/ExternalLink";
+import clsx from "clsx";
+import React from "react";
+import * as icons from "../../icons";
+
+const DocSidebarItemLink = ({
+  item,
+  onItemClick,
+  activePath,
+  level,
+  index,
+  ...props
+}) => {
+  const { href, label, className, autoAddBaseUrl, customProps = {} } = item;
+  const isActive = isActiveSidebarItem(item, activePath);
+  const isInternalLink = isInternalUrl(href);
+  const IconComponent = customProps?.icon ? icons[customProps.icon] : null;
+
+  return (
+    <li
+      className={clsx(
+        ThemeClassNames.docs.docSidebarItemLink,
+        ThemeClassNames.docs.docSidebarItemLinkLevel(level),
+        "menu__list-item",
+        `menu__list-item--level${level}`,
+        { "menu__list-item--root": customProps.isSidebarRoot },
+        className
+      )}
+      key={label}
+    >
+      <Link
+        className={clsx("menu__link", {
+          "menu__link--active": isActive,
+          "menu__link--external": !isInternalLink,
+        })}
+        autoAddBaseUrl={autoAddBaseUrl}
+        aria-current={isActive ? "page" : undefined}
+        to={href}
+        {...(isInternalLink && {
+          onClick: onItemClick ? () => onItemClick(item) : undefined,
+        })}
+        {...props}
+      >
+        <span className="icon-and-text">
+        {IconComponent && (
+          <i className="sidebar-item-icon">
+            <IconComponent size={customProps.iconSize} />
+          </i>
+        )}
+          {label}
+        </span>
+        {!isInternalLink && <IconExternalLink />}
+      </Link>
+    </li>
+  );
+};
+
+export default DocSidebarItemLink;
--- a/packages/twenty-docs/src/theme/Icon/DarkMode/index.js
+++ b/packages/twenty-docs/src/theme/Icon/DarkMode/index.js
@ -0,0 +1,11 @@
+import React from 'react';
+import { TbMoon } from 'react-icons/tb';
+import {useColorMode} from '@docusaurus/theme-common';
+
+
+const IconDarkMode = (props) => {
+  const { colorMode } = useColorMode();
+  return colorMode === 'dark' ? <TbMoon /> : <></>;
+}
+
+export default IconDarkMode
--- a/packages/twenty-docs/src/theme/Icon/Home/index.js
+++ b/packages/twenty-docs/src/theme/Icon/Home/index.js
@ -0,0 +1,5 @@
+import React from "react";
+import { TbHome } from "react-icons/tb";
+const IconHome = (props) => <TbHome size={14} />;
+
+export default IconHome;
--- a/packages/twenty-docs/src/theme/Icon/LightMode/index.js
+++ b/packages/twenty-docs/src/theme/Icon/LightMode/index.js
@ -0,0 +1,11 @@
+import React from 'react';
+import { TbSun } from 'react-icons/tb';
+import {useColorMode} from '@docusaurus/theme-common';
+
+
+const IconLightMode = (props) =>  {
+  const { colorMode } = useColorMode();
+  return colorMode === 'light' ? <TbSun /> : <></>;
+}
+
+export default IconLightMode;
--- a/packages/twenty-docs/src/theme/OptionTable/index.js
+++ b/packages/twenty-docs/src/theme/OptionTable/index.js
@ -0,0 +1,29 @@
+import styles from "./style.module.css";
+import React from "react";
+
+export default function OptionTable({ options }) {
+  return (
+    <div className={styles.container}>
+      <table className={styles.optionsTable}>
+        <thead className={styles.tableHeader}>
+          <tr className={styles.tableHeaderRow}>
+            <th className={styles.tableHeaderCell}>Variable</th>
+            <th className={styles.tableHeaderCell}>Example</th>
+            <th className={styles.tableHeaderCell}>Description</th>
+          </tr>
+        </thead>
+        <tbody className={styles.tableBody}>
+          {options.map(([option, example, description]) => (
+            <tr key={option} className={styles.tableRow}>
+              <td className={styles.tableOptionCell}>
+                {option}
+              </td>
+              <td className={styles.tableDescriptionCell}>{example}</td>
+              <td className={styles.tableDescriptionCell}>{description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
--- a/packages/twenty-docs/src/theme/OptionTable/style.module.css
+++ b/packages/twenty-docs/src/theme/OptionTable/style.module.css
@ -0,0 +1,87 @@
+.container {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0.8em,
+    white 1.5em,
+    white calc(100% - 1.5em),
+    transparent calc(100% - 0.8em)
+  );
+
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.container::-webkit-scrollbar {
+  appearance: none;
+}
+
+.optionsTable {
+  width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-collapse: collapse;
+  display: inline-table;
+}
+
+.tableHeader {
+  background: transparent;
+}
+
+.tableHeaderRow {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-bottom-width: 1px;
+  text-align: left;
+  border-top: none;
+}
+
+.tableHeaderCell {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 600;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+
+.tableBody {
+  color: var(--ifm-color-content);
+  vertical-align: baseline;
+}
+
+.tableRow {
+  border-bottom-width: 1px;
+  border-left: none;
+  border-right: none;
+  border-color: var(--ifm-color-content);
+}
+
+.tableOptionCell {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  white-space: pre;
+  color: var(--ifm-color-primary-light);
+  border-right: none;
+  border-left: none;
+}
+
+.tableDescriptionCell {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1.5rem;
+  border-right: none;
+  border-left: none;
+}
--- a/packages/twenty-docs/src/theme/icons.js
+++ b/packages/twenty-docs/src/theme/icons.js
@ -0,0 +1,65 @@
+export {
+  TbApps,
+  TbArrowBackUp,
+  TbArrowBigRight,
+  TbArticle,
+  TbBolt,
+  TbBrandFigma,
+  TbBrandVscode,
+  TbBrandWindows,
+  TbBrandZapier,
+  TbBug,
+  TbBugOff,
+  TbChartDots,
+  TbChecklist,
+  TbCloud,
+  TbScript,
+  TbForms,
+  TbTable,
+  TbSlideshow,
+  TbBrandDocker,
+  TbDeviceDesktop,
+  TbExclamationCircle,
+  TbEyeglass,
+  TbFaceIdError,
+  TbFolder,
+  TbKeyboard,
+  TbPaint,
+  TbPencil,
+  TbPlus,
+  TbServer,
+  TbTerminal2,
+  TbTopologyStar,
+  TbVocabulary,
+  TbZoomQuestion,
+  TbRocket,
+  TbAugmentedReality,
+  TbTerminal,
+  TbBrandGraphql,
+  TbApi,
+  TbUsers,
+  TbCheck,
+  TbPill,
+  TbAppWindow,
+  TbTooltip,
+  TbTag,
+  TbLayoutList,
+  TbAddressBook,
+  TbLoader2,
+  TbInputSearch,
+  TbIcons,
+  TbSquareRoundedPlusFilled,
+  TbLayoutGrid,
+  TbColorFilter,
+  TbTextSize,
+  TbComponents,
+  TbCheckbox,
+  TbColorPicker,
+  TbCircleDot,
+  TbUpload,
+  TbVariable,
+  TbSchema,
+  TbSelect,
+  TbToggleRight,
+  TbTextPlus,
+} from "react-icons/tb";
--- a/packages/twenty-docs/src/ui/SandpackEditor.js
+++ b/packages/twenty-docs/src/ui/SandpackEditor.js
@ -0,0 +1,107 @@
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
+import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
+import uiComponentsCSS from '!!raw-loader!@site/src/ui/uiComponents.css'
+
+export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
+  const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
+    acc[`/node_modules/${componentPath}/package.json`] = {
+      hidden: true,
+      code: JSON.stringify({
+        name: componentPath,
+        main: "./index.js",
+      }),
+    };
+    return acc;
+  }, {});
+
+  const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
+    acc[`/node_modules/${componentPath}/index.js`] = {
+      hidden: true,
+      code: uiModule,
+    };
+    return acc;
+  }
+  , {});
+
+  return (
+    <SandpackProvider
+      files={{
+        "/index.js": {
+          hidden: true,
+          code: `
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+ <StrictMode>
+   <App />
+ </StrictMode>
+);`,
+        },
+        "/App.tsx": {
+          hidden: true,
+          code: `import { ThemeProvider } from "@emotion/react";
+import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
+import { MyComponent } from "./MyComponent.tsx";
+
+import './uiComponents.css'
+
+console.log("lightTheme", lightTheme);
+
+export default function App() {
+return (<ThemeProvider theme={lightTheme}>
+ <MyComponent />
+</ThemeProvider>);
+};`,
+        },
+        "/MyComponent.tsx": {
+          code: componentCode,
+        },
+        "/uiComponents.css": {
+          code: uiComponentsCSS,
+          hidden: true,
+        },
+        ...fakePackagesJson,
+        ...fakeIndexesJs,
+      }}
+      customSetup={{
+        entry: "/index.js",
+        dependencies: {
+          react: "latest",
+          "react-dom": "latest",
+          "react-scripts": "^5.0.0",
+          "@emotion/react": "^11.10.6",
+          "@emotion/styled": "latest",
+          "@tabler/icons-react": "latest",
+          "hex-rgb": "latest",
+          "framer-motion": "latest",
+          uuid: "latest",
+          "react-tooltip": "latest",
+          "react-router-dom": "latest",
+          "@sniptt/guards": "latest",
+          "react-router": "latest",
+          "@apollo/client": "latest",
+          graphql: "latest",
+          "react-textarea-autosize": "latest",
+          "react-hotkeys-hook": "latest",
+          recoil: "latest",
+          "@floating-ui/react": "latest",
+          "ts-key-enum": "latest",
+          "deep-equal": "latest",
+          "lodash.debounce": "latest",
+          "react-loading-skeleton": "latest",
+          "zod": "latest",
+          
+        },
+      }}
+    >
+      <SandpackLayout>
+        <SandpackCodeEditor style={{ minWidth: "100%", height: "auto" }} />
+        <SandpackPreview style={{ minWidth: "100%", height: "auto" }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
--- a/packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js
+++ b/packages/twenty-docs/src/ui/display/animatedCheckmarkCode.js
@ -0,0 +1,14 @@
+import { AnimatedCheckmark } from "@/ui/display/checkmark/components/AnimatedCheckmark";
+
+export const MyComponent = () => {
+  return (
+    <AnimatedCheckmark
+      isAnimating={true}
+      color="green"
+      duration={0.5}
+      size={30}
+    />
+  );
+  
+  
+};
--- a/packages/twenty-docs/src/ui/display/appTooltipCode.js
+++ b/packages/twenty-docs/src/ui/display/appTooltipCode.js
@ -0,0 +1,22 @@
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};
--- a/packages/twenty-docs/src/ui/display/checkmarkCode.js
+++ b/packages/twenty-docs/src/ui/display/checkmarkCode.js
@ -0,0 +1,5 @@
+import { Checkmark } from "@/ui/display/checkmark/components/Checkmark";
+
+export const MyComponent = () => {
+  return <Checkmark />;
+};
--- a/packages/twenty-docs/src/ui/display/chipCode.js
+++ b/packages/twenty-docs/src/ui/display/chipCode.js
@ -0,0 +1,17 @@
+import { Chip } from "@/ui/display/chip/components/Chip";
+
+export const MyComponent = () => {
+  return (
+    <Chip
+      size="large"
+      label="Clickable Chip"
+      clickable={true}
+      variant="highlighted"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/display/entityChipCode.js
+++ b/packages/twenty-docs/src/ui/display/entityChipCode.js
@ -0,0 +1,19 @@
+import { BrowserRouter as Router } from "react-router-dom";
+import { EntityChip } from "@/ui/display/chip/components/EntityChip";
+import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <EntityChip
+        linkToEntity="/entity-link"
+        entityId="entityTest"
+        name="Entity name"
+        pictureUrl=""
+        avatarType="rounded"
+        variant="regular"
+        LeftIcon={IconComponent}
+      />
+    </Router>
+  );
+};
--- a/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
+++ b/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
@ -0,0 +1,5 @@
+import { IconAddressBook } from "@/ui/display/icon/components/IconAddressBook";
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};
--- a/packages/twenty-docs/src/ui/display/overflowingTextWithTooltipCode.js
+++ b/packages/twenty-docs/src/ui/display/overflowingTextWithTooltipCode.js
@ -0,0 +1,8 @@
+import { OverflowingTextWithTooltip } from "@/ui/display/tooltip/OverflowingTextWithTooltip";
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    "Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.";
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};
--- a/packages/twenty-docs/src/ui/display/soonPillCode.js
+++ b/packages/twenty-docs/src/ui/display/soonPillCode.js
@ -0,0 +1,5 @@
+import { SoonPill } from "@/ui/display/pill/components/SoonPill";
+
+export const MyComponent = () => {
+  return <SoonPill />;
+};
--- a/packages/twenty-docs/src/ui/display/tablerIconExampleCode.js
+++ b/packages/twenty-docs/src/ui/display/tablerIconExampleCode.js
@ -0,0 +1,5 @@
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};
--- a/packages/twenty-docs/src/ui/display/tagCode.js
+++ b/packages/twenty-docs/src/ui/display/tagCode.js
@ -0,0 +1,12 @@
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/feedback/circularProgressBarCode.js
+++ b/packages/twenty-docs/src/ui/feedback/circularProgressBarCode.js
@ -0,0 +1,5 @@
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};
--- a/packages/twenty-docs/src/ui/feedback/progressBarCode.js
+++ b/packages/twenty-docs/src/ui/feedback/progressBarCode.js
@ -0,0 +1,14 @@
+import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/generated/dark-noise-JHVNKF2E.jpg
+++ b/packages/twenty-docs/src/ui/generated/dark-noise-JHVNKF2E.jpg
--- a/packages/twenty-docs/src/ui/generated/index.d.ts
+++ b/packages/twenty-docs/src/ui/generated/index.d.ts
@ -0,0 +1,732 @@
+export { ThemeProvider } from '@emotion/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode, MouseEvent, FunctionComponent, ComponentProps, InputHTMLAttributes } from 'react';
+import { motion, AnimationControls } from 'framer-motion';
+import { TablerIconsProps } from '@tabler/icons-react';
+import { PlacesType, PositionStrategy } from 'react-tooltip';
+
+declare const lightTheme: {
+    accent: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        accent3570: string;
+        accent4060: string;
+    };
+    background: {
+        noisy: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        danger: string;
+        transparent: {
+            primary: string;
+            secondary: string;
+            strong: string;
+            medium: string;
+            light: string;
+            lighter: string;
+            danger: string;
+        };
+        overlay: string;
+        radialGradient: string;
+        radialGradientHover: string;
+    };
+    border: {
+        radius: {
+            xs: string;
+            sm: string;
+            md: string;
+            xl: string;
+            pill: string;
+            rounded: string;
+        };
+        color: {
+            strong: string;
+            medium: string;
+            light: string;
+            secondaryInverted: string;
+            inverted: string;
+            danger: string;
+        };
+    };
+    tag: {
+        [key: string]: {
+            [key: string]: string;
+        };
+    };
+    boxShadow: {
+        extraLight: string;
+        light: string;
+        strong: string;
+        underline: string;
+    };
+    font: {
+        size: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+        weight: {
+            regular: number;
+            medium: number;
+            semiBold: number;
+        };
+        family: string;
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            light: string;
+            extraLight: string;
+            inverted: string;
+            danger: string;
+        };
+    };
+    name: string;
+    color: {
+        yellow80: string;
+        yellow70: string;
+        yellow60: string;
+        yellow50: string;
+        yellow40: string;
+        yellow30: string;
+        yellow20: string;
+        yellow10: string;
+        green80: string;
+        green70: string;
+        green60: string;
+        green50: string;
+        green40: string;
+        green30: string;
+        green20: string;
+        green10: string;
+        turquoise80: string;
+        turquoise70: string;
+        turquoise60: string;
+        turquoise50: string;
+        turquoise40: string;
+        turquoise30: string;
+        turquoise20: string;
+        turquoise10: string;
+        sky80: string;
+        sky70: string;
+        sky60: string;
+        sky50: string;
+        sky40: string;
+        sky30: string;
+        sky20: string;
+        sky10: string;
+        blue80: string;
+        blue70: string;
+        blue60: string;
+        blue50: string;
+        blue40: string;
+        blue30: string;
+        blue20: string;
+        blue10: string;
+        purple80: string;
+        purple70: string;
+        purple60: string;
+        purple50: string;
+        purple40: string;
+        purple30: string;
+        purple20: string;
+        purple10: string;
+        pink80: string;
+        pink70: string;
+        pink60: string;
+        pink50: string;
+        pink40: string;
+        pink30: string;
+        pink20: string;
+        pink10: string;
+        red80: string;
+        red70: string;
+        red60: string;
+        red50: string;
+        red40: string;
+        red30: string;
+        red20: string;
+        red10: string;
+        orange80: string;
+        orange70: string;
+        orange60: string;
+        orange50: string;
+        orange40: string;
+        orange30: string;
+        orange20: string;
+        orange10: string;
+        gray80: string;
+        gray70: string;
+        gray60: string;
+        gray50: string;
+        gray40: string;
+        gray30: string;
+        gray20: string;
+        gray10: string;
+        blueAccent90: string;
+        blueAccent85: string;
+        blueAccent80: string;
+        blueAccent75: string;
+        blueAccent70: string;
+        blueAccent60: string;
+        blueAccent40: string;
+        blueAccent35: string;
+        blueAccent25: string;
+        blueAccent20: string;
+        blueAccent15: string;
+        blueAccent10: string;
+        green: string;
+        turquoise: string;
+        sky: string;
+        blue: string;
+        purple: string;
+        pink: string;
+        red: string;
+        orange: string;
+        yellow: string;
+        gray: string;
+    };
+    grayScale: {
+        gray100: string;
+        gray90: string;
+        gray85: string;
+        gray80: string;
+        gray75: string;
+        gray70: string;
+        gray65: string;
+        gray60: string;
+        gray55: string;
+        gray50: string;
+        gray45: string;
+        gray40: string;
+        gray35: string;
+        gray30: string;
+        gray25: string;
+        gray20: string;
+        gray15: string;
+        gray10: string;
+        gray0: string;
+    };
+    icon: {
+        size: {
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+        stroke: {
+            sm: number;
+            md: number;
+            lg: number;
+        };
+    };
+    modal: {
+        size: {
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
+    text: {
+        lineHeight: {
+            lg: number;
+            md: number;
+        };
+        iconSizeMedium: number;
+        iconSizeSmall: number;
+        iconStrikeLight: number;
+        iconStrikeMedium: number;
+        iconStrikeBold: number;
+    };
+    blur: {
+        light: string;
+        strong: string;
+    };
+    animation: {
+        duration: {
+            instant: number;
+            fast: number;
+            normal: number;
+        };
+    };
+    snackBar: {
+        success: {
+            background: string;
+            color: string;
+        };
+        error: {
+            background: string;
+            color: string;
+        };
+        info: {
+            background: string;
+            color: string;
+        };
+    };
+    spacingMultiplicator: number;
+    spacing: (multiplicator: number) => string;
+    betweenSiblingsGap: string;
+    table: {
+        horizontalCellMargin: string;
+        checkboxColumnWidth: string;
+    };
+    rightDrawerWidth: string;
+    clickableElementBackgroundTransition: string;
+    lastLayerZIndex: number;
+};
+type ThemeType = typeof lightTheme;
+declare const darkTheme: ThemeType;
+
+type CheckmarkProps = React__default.ComponentPropsWithoutRef<'div'>;
+declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
+
+type AnimatedCheckmarkProps = React.ComponentProps<typeof motion.path> & {
+    isAnimating?: boolean;
+    color?: string;
+    duration?: number;
+    size?: number;
+};
+declare const AnimatedCheckmark: ({ isAnimating, color, duration, size, }: AnimatedCheckmarkProps) => react_jsx_runtime.JSX.Element;
+
+declare enum ChipSize {
+    Large = "large",
+    Small = "small"
+}
+declare enum ChipAccent {
+    TextPrimary = "text-primary",
+    TextSecondary = "text-secondary"
+}
+declare enum ChipVariant {
+    Highlighted = "highlighted",
+    Regular = "regular",
+    Transparent = "transparent",
+    Rounded = "rounded"
+}
+type ChipProps = {
+    size?: ChipSize;
+    disabled?: boolean;
+    clickable?: boolean;
+    label: string;
+    maxWidth?: string;
+    variant?: ChipVariant;
+    accent?: ChipAccent;
+    leftComponent?: ReactNode;
+    rightComponent?: ReactNode;
+    className?: string;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+};
+declare const Chip: ({ size, label, disabled, clickable, variant, leftComponent, rightComponent, accent, maxWidth, className, onClick, }: ChipProps) => react_jsx_runtime.JSX.Element;
+
+type IconComponent = FunctionComponent<{
+    className?: string;
+    color?: string;
+    size?: number;
+    stroke?: number;
+}>;
+
+type AvatarType = 'squared' | 'rounded';
+
+type EntityChipProps = {
+    linkToEntity?: string;
+    entityId: string;
+    name: string;
+    avatarUrl?: string;
+    avatarType?: AvatarType;
+    variant?: EntityChipVariant;
+    LeftIcon?: IconComponent;
+};
+declare enum EntityChipVariant {
+    Regular = "regular",
+    Transparent = "transparent"
+}
+declare const EntityChip: ({ linkToEntity, entityId, name, avatarUrl, avatarType, variant, LeftIcon, }: EntityChipProps) => react_jsx_runtime.JSX.Element;
+
+type IconAddressBookProps = TablerIconsProps;
+declare const IconAddressBook: (props: IconAddressBookProps) => JSX.Element;
+
+declare const SoonPill: () => react_jsx_runtime.JSX.Element;
+
+declare const mainColors: {
+    green: string;
+    turquoise: string;
+    sky: string;
+    blue: string;
+    purple: string;
+    pink: string;
+    red: string;
+    orange: string;
+    yellow: string;
+    gray: string;
+};
+type ThemeColor = keyof typeof mainColors;
+
+type TagProps = {
+    className?: string;
+    color: ThemeColor;
+    text: string;
+    onClick?: () => void;
+};
+declare const Tag: ({ className, color, text, onClick }: TagProps) => react_jsx_runtime.JSX.Element;
+
+declare enum TooltipPosition {
+    Top = "top",
+    Left = "left",
+    Right = "right",
+    Bottom = "bottom"
+}
+type AppTooltipProps = {
+    className?: string;
+    anchorSelect?: string;
+    content?: string;
+    delayHide?: number;
+    offset?: number;
+    noArrow?: boolean;
+    isOpen?: boolean;
+    place?: PlacesType;
+    positionStrategy?: PositionStrategy;
+};
+declare const AppTooltip: ({ anchorSelect, className, content, delayHide, isOpen, noArrow, offset, place, positionStrategy, }: AppTooltipProps) => react_jsx_runtime.JSX.Element;
+
+declare const OverflowingTextWithTooltip: ({ text, }: {
+    text: string | null | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+type ProgressBarProps = {
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    barHeight?: number;
+    barColor?: string;
+    autoStart?: boolean;
+};
+type ProgressBarControls = AnimationControls & {
+    start: () => Promise<any>;
+    pause: () => Promise<any>;
+};
+declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<ProgressBarControls>>;
+
+interface CircularProgressBarProps {
+    size?: number;
+    barWidth?: number;
+    barColor?: string;
+}
+declare const CircularProgressBar: ({ size, barWidth, barColor, }: CircularProgressBarProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonSize = 'medium' | 'small';
+type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonAccent = 'default' | 'blue' | 'danger';
+type ButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    title?: string;
+    fullWidth?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    position?: ButtonPosition;
+    accent?: ButtonAccent;
+    soon?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type ButtonGroupProps = Pick<ButtonProps, 'variant' | 'size' | 'accent'> & {
+    className?: string;
+    children: ReactNode[];
+};
+declare const ButtonGroup: ({ className, children, variant, size, accent, }: ButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingButtonSize = 'small' | 'medium';
+type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type FloatingButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    title?: string;
+    size?: FloatingButtonSize;
+    position?: FloatingButtonPosition;
+    applyShadow?: boolean;
+    applyBlur?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+};
+declare const FloatingButton: ({ className, Icon, title, size, applyBlur, applyShadow, disabled, focus, }: FloatingButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
+    children: React__default.ReactElement[];
+};
+declare const FloatingButtonGroup: ({ children, size, }: FloatingButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingIconButtonSize = 'small' | 'medium';
+type FloatingIconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type FloatingIconButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    size?: FloatingIconButtonSize;
+    position?: FloatingIconButtonPosition;
+    applyShadow?: boolean;
+    applyBlur?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    isActive?: boolean;
+};
+declare const FloatingIconButton: ({ className, Icon, size, position, applyShadow, applyBlur, disabled, focus, onClick, isActive, }: FloatingIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingIconButtonGroupProps = Pick<FloatingIconButtonProps, 'className' | 'size'> & {
+    iconButtons: {
+        Icon: IconComponent;
+        onClick?: (event: MouseEvent<any>) => void;
+        isActive?: boolean;
+    }[];
+};
+declare const FloatingIconButtonGroup: ({ iconButtons, size, className, }: FloatingIconButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type LightButtonAccent = 'secondary' | 'tertiary';
+type LightButtonProps = {
+    className?: string;
+    icon?: React__default.ReactNode;
+    title?: string;
+    accent?: LightButtonAccent;
+    active?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+declare const LightButton: ({ className, icon: initialIcon, title, active, accent, disabled, focus, onClick, }: LightButtonProps) => react_jsx_runtime.JSX.Element;
+
+type LightIconButtonAccent = 'secondary' | 'tertiary';
+type LightIconButtonSize = 'small' | 'medium';
+type LightIconButtonProps = {
+    className?: string;
+    testId?: string;
+    Icon?: IconComponent;
+    title?: string;
+    size?: LightIconButtonSize;
+    accent?: LightIconButtonAccent;
+    active?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
+declare const LightIconButton: ({ "aria-label": ariaLabel, className, testId, Icon, active, size, accent, disabled, focus, onClick, title, }: LightIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type Variant = 'primary' | 'secondary';
+type Props = {
+    title: string;
+    fullWidth?: boolean;
+    variant?: Variant;
+    soon?: boolean;
+} & React__default.ComponentProps<'button'>;
+type MainButtonProps = Props & {
+    Icon?: IconComponent;
+};
+declare const MainButton: ({ Icon, title, fullWidth, variant, type, onClick, disabled, }: MainButtonProps) => react_jsx_runtime.JSX.Element;
+
+type RoundedIconButtonProps = {
+    Icon: IconComponent;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const RoundedIconButton: ({ Icon, onClick, disabled, }: RoundedIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type ColorScheme = 'Dark' | 'Light' | 'System';
+
+type ColorSchemeSegmentProps = {
+    variant: ColorScheme;
+    controls: AnimationControls;
+} & React__default.ComponentPropsWithoutRef<'div'>;
+type ColorSchemeCardProps = {
+    variant: ColorScheme;
+    selected?: boolean;
+} & React__default.ComponentPropsWithoutRef<'div'>;
+declare const ColorSchemeCard: ({ variant, selected, onClick, }: ColorSchemeCardProps) => react_jsx_runtime.JSX.Element;
+
+type ColorSchemePickerProps = {
+    value: ColorScheme;
+    onChange: (value: ColorScheme) => void;
+};
+declare const ColorSchemePicker: ({ value, onChange, }: ColorSchemePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare enum AutosizeTextInputVariant {
+    Default = "default",
+    Icon = "icon",
+    Button = "button"
+}
+type AutosizeTextInputProps = {
+    onValidate?: (text: string) => void;
+    minRows?: number;
+    placeholder?: string;
+    onFocus?: () => void;
+    variant?: AutosizeTextInputVariant;
+    buttonTitle?: string;
+    value?: string;
+};
+declare const AutosizeTextInput: ({ placeholder, onValidate, minRows, onFocus, variant, buttonTitle, value, }: AutosizeTextInputProps) => react_jsx_runtime.JSX.Element;
+
+declare enum CheckboxVariant {
+    Primary = "primary",
+    Secondary = "secondary",
+    Tertiary = "tertiary"
+}
+declare enum CheckboxShape {
+    Squared = "squared",
+    Rounded = "rounded"
+}
+declare enum CheckboxSize {
+    Large = "large",
+    Small = "small"
+}
+type CheckboxProps = {
+    checked: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (value: boolean) => void;
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+    shape?: CheckboxShape;
+};
+declare const Checkbox: ({ checked, onChange, onCheckedChange, indeterminate, variant, size, shape, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type EntityTitleDoubleTextInputProps = {
+    firstValue: string;
+    secondValue: string;
+    firstValuePlaceholder: string;
+    secondValuePlaceholder: string;
+    onChange: (firstValue: string, secondValue: string) => void;
+};
+declare const EntityTitleDoubleTextInput: ({ firstValue, secondValue, firstValuePlaceholder, secondValuePlaceholder, onChange, }: EntityTitleDoubleTextInputProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+type IconPickerProps = {
+    disabled?: boolean;
+    dropdownScopeId?: string;
+    onChange: (params: {
+        iconKey: string;
+        Icon: IconComponent;
+    }) => void;
+    selectedIconKey?: string;
+    onClickOutside?: () => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    variant?: IconButtonVariant;
+};
+declare const IconPicker: ({ disabled, dropdownScopeId, onChange, selectedIconKey, onClickOutside, onClose, onOpen, variant, }: IconPickerProps) => react_jsx_runtime.JSX.Element;
+
+type ImageInputProps = Omit<React__default.ComponentProps<'div'>, 'children'> & {
+    picture: string | null | undefined;
+    onUpload?: (file: File) => void;
+    onRemove?: () => void;
+    onAbort?: () => void;
+    isUploading?: boolean;
+    errorMessage?: string | null;
+    disabled?: boolean;
+};
+declare const ImageInput: ({ picture, onUpload, onRemove, onAbort, isUploading, errorMessage, disabled, }: ImageInputProps) => react_jsx_runtime.JSX.Element;
+
+declare enum RadioSize {
+    Large = "large",
+    Small = "small"
+}
+declare enum LabelPosition {
+    Left = "left",
+    Right = "right"
+}
+type RadioProps = {
+    style?: React$1.CSSProperties;
+    className?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: RadioSize;
+    disabled?: boolean;
+    labelPosition?: LabelPosition;
+};
+declare const Radio: {
+    ({ checked, value, onChange, onCheckedChange, size, labelPosition, disabled, }: RadioProps): react_jsx_runtime.JSX.Element;
+    Group: ({ value, onChange, onValueChange, children, }: {
+        children?: React$1.ReactNode;
+    } & {
+        value?: string | undefined;
+        onChange?: ((event: React$1.ChangeEvent<HTMLInputElement>) => void) | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type RadioGroupProps = React__default.PropsWithChildren & {
+    value?: string;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+};
+declare const RadioGroup: ({ value, onChange, onValueChange, children, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+type SelectProps<Value extends string | number | null> = {
+    className?: string;
+    disabled?: boolean;
+    dropdownScopeId: string;
+    label?: string;
+    onChange?: (value: Value) => void;
+    options: {
+        value: Value;
+        label: string;
+        Icon?: IconComponent;
+    }[];
+    value?: Value;
+};
+declare const Select: <Value extends string | number | null>({ className, disabled, dropdownScopeId, label, onChange, options, value, }: SelectProps<Value>) => react_jsx_runtime.JSX.Element;
+
+type TextAreaProps = {
+    disabled?: boolean;
+    minRows?: number;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    value?: string;
+};
+declare const TextArea: ({ disabled, placeholder, minRows, value, onChange, }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+
+type TextInputComponentProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown'> & {
+    className?: string;
+    label?: string;
+    onChange?: (text: string) => void;
+    fullWidth?: boolean;
+    disableHotkeys?: boolean;
+    error?: string;
+    RightIcon?: IconComponent;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+};
+declare const TextInput: React$1.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onKeyDown"> & {
+    className?: string | undefined;
+    label?: string | undefined;
+    onChange?: ((text: string) => void) | undefined;
+    fullWidth?: boolean | undefined;
+    disableHotkeys?: boolean | undefined;
+    error?: string | undefined;
+    RightIcon?: IconComponent | undefined;
+    onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
+type ToggleSize = 'small' | 'medium';
+type ToggleProps = {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    color?: string;
+    toggleSize?: ToggleSize;
+};
+declare const Toggle: ({ value, onChange, color, toggleSize, }: ToggleProps) => react_jsx_runtime.JSX.Element;
+
+declare module '@emotion/react' {
+    interface Theme extends ThemeType {
+    }
+}
+
+export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, Select, SelectProps, SoonPill, Tag, TextArea, TextAreaProps, TextInput, TextInputComponentProps, Toggle, ToggleProps, ToggleSize, TooltipPosition, darkTheme, lightTheme };
--- a/packages/twenty-docs/src/ui/generated/index.js
+++ b/packages/twenty-docs/src/ui/generated/index.js
--- a/packages/twenty-docs/src/ui/generated/light-noise-JRI6I6YG.png
+++ b/packages/twenty-docs/src/ui/generated/light-noise-JRI6I6YG.png
--- a/packages/twenty-docs/src/ui/input/button/buttonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/buttonCode.js
@ -0,0 +1,20 @@
+import { Button } from "@/ui/input/button/components/Button";
+
+export const MyComponent = () => {
+  return (
+    <Button
+      className
+      Icon={null}
+      title="Click Me"
+      fullWidth={false}
+      variant="primary"
+      size="medium"
+      position="standalone"
+      accent="default"
+      soon={false}
+      disabled={false}
+      focus={true}
+      onClick={() => console.log("click")}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/buttonGroupCode.js
+++ b/packages/twenty-docs/src/ui/input/button/buttonGroupCode.js
@ -0,0 +1,51 @@
+import { Button } from "@/ui/input/button/components/Button";
+import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
+
+export const MyComponent = () => {
+  return (
+    <ButtonGroup variant="primary" size="large" accent="blue" className>
+      <Button
+        className
+        Icon={null}
+        title="Button 1"
+        fullWidth={false}
+        variant="primary"
+        size="medium"
+        position="standalone"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={false}
+        onClick={() => console.log("click")}
+      />
+      <Button
+        className
+        Icon={null}
+        title="Button 2"
+        fullWidth={false}
+        variant="secondary"
+        size="medium"
+        position="left"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={false}
+        onClick={() => console.log("click")}
+      />
+      <Button
+        className
+        Icon={null}
+        title="Button 3"
+        fullWidth={false}
+        variant="tertiary"
+        size="medium"
+        position="right"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={false}
+        onClick={() => console.log("click")}
+      />
+    </ButtonGroup>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/floatingButtonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/floatingButtonCode.js
@ -0,0 +1,18 @@
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingButton
+      className
+      Icon={IconSearch}
+      title="Click Me"
+      size="medium"
+      position="standalone"
+      applyShadow={true}
+      applyBlur={true}
+      disabled={false}
+      focus={true}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/floatingButtonGroupCode.js
+++ b/packages/twenty-docs/src/ui/input/button/floatingButtonGroupCode.js
@ -0,0 +1,32 @@
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingButtonGroup size="small">
+      <FloatingButton
+        className
+        Icon={IconClipboardText}
+        title
+        size="small"
+        position="standalone"
+        applyShadow={true}
+        applyBlur={true}
+        disabled={false}
+        focus={true}
+      />
+      <FloatingButton
+        className
+        Icon={IconCheckbox}
+        title
+        size="small"
+        position="standalone"
+        applyShadow={true}
+        applyBlur={true}
+        disabled={false}
+        focus={true}
+      />
+    </FloatingButtonGroup>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/floatingIconButtonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/floatingIconButtonCode.js
@ -0,0 +1,19 @@
+import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingIconButton
+      className
+      Icon={IconSearch}
+      size="small"
+      position="standalone"
+      applyShadow={true}
+      applyBlur={true}
+      disabled={false}
+      focus={false}
+      onClick={() => console.log("click")}
+      isActive={true}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/floatingIconButtonGroupCode.js
+++ b/packages/twenty-docs/src/ui/input/button/floatingIconButtonGroupCode.js
@ -0,0 +1,24 @@
+import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  const iconButtons = [
+    {
+      Icon: IconClipboardText,
+      onClick: () => console.log("Button 1 clicked"),
+      isActive: true,
+    },
+    {
+      Icon: IconCheckbox,
+      onClick: () => console.log("Button 2 clicked"),
+      isActive: true,
+    },
+  ];
+
+  return (
+    <FloatingIconButtonGroup 
+    className 
+    size="small" 
+    iconButtons={iconButtons} />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/lightButtonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/lightButtonCode.js
@ -0,0 +1,14 @@
+import { LightButton } from "@/ui/input/button/components/LightButton";
+
+export const MyComponent = () => {
+  return <LightButton
+  className
+  icon={null}
+  title="Click Me"
+  accent="secondary"
+  active={false}
+  disabled={false}
+  focus={true}
+  onClick={()=>console.log('click')} 
+  />;
+};
--- a/packages/twenty-docs/src/ui/input/button/lightIconButtonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/lightIconButtonCode.js
@ -0,0 +1,19 @@
+import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <LightIconButton
+      className
+      testId="test1"
+      Icon={IconSearch}
+      title="Click Me"
+      size="small"
+      accent="secondary"
+      active={true}
+      disabled={false}
+      focus={true}
+      onClick={() => console.log("click")}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/mainButtonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/mainButtonCode.js
@ -0,0 +1,14 @@
+import { MainButton } from "@/ui/input/button/components/MainButton";
+import { IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <MainButton
+      title="Checkbox"
+      fullWidth={false}
+      variant="primary"
+      soon={false}
+      Icon={IconCheckbox}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/button/roundedIconButtonCode.js
+++ b/packages/twenty-docs/src/ui/input/button/roundedIconButtonCode.js
@ -0,0 +1,10 @@
+import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <RoundedIconButton
+      Icon={IconSearch}
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/color-scheme/colorSchemeCardCode.js
+++ b/packages/twenty-docs/src/ui/input/color-scheme/colorSchemeCardCode.js
@ -0,0 +1,10 @@
+import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
+
+export const MyComponent = () => {
+  return (
+      <ColorSchemeCard
+      variant="Dark"
+      selected={true}
+      />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/color-scheme/colorSchemePickerCode.js
+++ b/packages/twenty-docs/src/ui/input/color-scheme/colorSchemePickerCode.js
@ -0,0 +1,8 @@
+import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
+
+export const MyComponent = () => {
+  return <ColorSchemePicker
+  value="Dark"
+  onChange
+  />;
+};
--- a/packages/twenty-docs/src/ui/input/components/autosizeTextInputCode.js
+++ b/packages/twenty-docs/src/ui/input/components/autosizeTextInputCode.js
@ -0,0 +1,18 @@
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/checkboxCode.js
+++ b/packages/twenty-docs/src/ui/input/components/checkboxCode.js
@ -0,0 +1,15 @@
+import { Checkbox } from "@/ui/input/components/Checkbox";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/entityTitleDoubleTextInputCode.js
+++ b/packages/twenty-docs/src/ui/input/components/entityTitleDoubleTextInputCode.js
@ -0,0 +1,31 @@
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDoubleTextInput";
+
+export const MyComponent = () => {
+
+    const [firstValue, setFirstValue] = useState(
+      "First Value"
+    );
+    const [secondValue, setSecondValue] = useState(
+      "Second Value"
+    );
+
+    const handleInputChange = (newFirstValue, newSecondValue) => {
+      setFirstValue(newFirstValue);
+      setSecondValue(newSecondValue);
+    };
+
+
+  return (
+    <RecoilRoot>
+      <EntityTitleDoubleTextInput
+        firstValue={firstValue}
+        secondValue={secondValue}
+        firstValuePlaceholder="Enter First Value"
+        secondValuePlaceholder="Enter Second Value"
+        onChange={handleInputChange}
+      />
+    </RecoilRoot>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/iconPickerCode.js
+++ b/packages/twenty-docs/src/ui/input/components/iconPickerCode.js
@ -0,0 +1,23 @@
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/imageInputCode.js
+++ b/packages/twenty-docs/src/ui/input/components/imageInputCode.js
@ -0,0 +1,5 @@
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+  return <ImageInput/>;
+};
--- a/packages/twenty-docs/src/ui/input/components/radioCode.js
+++ b/packages/twenty-docs/src/ui/input/components/radioCode.js
@ -0,0 +1,25 @@
+import { Radio } from "@/ui/input/components/Radio";
+
+export const MyComponent = () => {
+
+  const handleRadioChange = (event) => {
+    console.log("Radio button changed:", event.target.checked);
+  };
+
+  const handleCheckedChange = (checked) => {
+    console.log("Checked state changed:", checked);
+  };
+
+
+  return (
+    <Radio
+      checked={true}
+      value="Option 1"
+      onChange={handleRadioChange}
+      onCheckedChange={handleCheckedChange}
+      size="large"
+      disabled={false}
+      labelPosition="right"
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/radioGroupCode.js
+++ b/packages/twenty-docs/src/ui/input/components/radioGroupCode.js
@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Radio } from "@/ui/input/components/Radio";
+import { RadioGroup } from "@/ui/input/components/RadioGroup";
+
+export const MyComponent = () => {
+
+  const [selectedValue, setSelectedValue] = useState("Option 1");
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+  
+  return (
+    <RadioGroup value={selectedValue} onChange={handleChange}>
+      <Radio value="Option 1" />
+      <Radio value="Option 2" />
+      <Radio value="Option 3" />
+    </RadioGroup>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/selectCode.js
+++ b/packages/twenty-docs/src/ui/input/components/selectCode.js
@ -0,0 +1,26 @@
+import { RecoilRoot } from "recoil";
+import { Select } from "@/ui/input/components/Select";
+import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+export const MyComponent = () => {
+  const handleSelectChange = (selectedValue) => {
+    console.log(`Selected: ${selectedValue}`);
+  };
+
+  return (
+    <RecoilRoot>
+      <Select
+        className
+        disabled={false}
+        dropdownScopeId="exampleDropdown"
+        label="Select an option"
+        onChange={handleSelectChange}
+        options={[
+          { value: "option1", label: "Option A", Icon: IconComponent },
+          { value: "option2", label: "Option B", Icon: IconComponent },
+        ]}
+        value="option1"
+      />
+    </RecoilRoot>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/textAreaCode.js
+++ b/packages/twenty-docs/src/ui/input/components/textAreaCode.js
@ -0,0 +1,13 @@
+import { TextArea } from "@/ui/input/components/TextArea";
+
+export const MyComponent = () => {
+  return (
+    <TextArea
+    disabled={false}
+    minRows={4}
+    onChange={()=>console.log('On change function fired')}
+    placeholder="Enter text here"
+    value=""
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/textInputCode.js
+++ b/packages/twenty-docs/src/ui/input/components/textInputCode.js
@ -0,0 +1,27 @@
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
+
+export const MyComponent = () => {
+  const handleChange = (text) => {
+    console.log("Input changed:", text);
+  };
+
+  const handleKeyDown = (event) => {
+    console.log("Key pressed:", event.key);
+  };
+
+  return (
+    <RecoilRoot>
+      <TextInput
+        className
+        label="Username"
+        onChange={handleChange}
+        fullWidth={false}
+        disableHotkeys={false}
+        error="Invalid username"
+        onKeyDown={handleKeyDown}
+        RightIcon={null}
+      />
+    </RecoilRoot>
+  );
+};
--- a/packages/twenty-docs/src/ui/input/components/toggleCode.js
+++ b/packages/twenty-docs/src/ui/input/components/toggleCode.js
@ -0,0 +1,12 @@
+import { Toggle } from "@/ui/input/components/Toggle";
+
+export const MyComponent = () => {
+  return (
+    <Toggle
+    value = {true}
+    onChange = {()=>console.log('On Change event')}
+    color="green"
+    toggleSize = "medium"
+    />
+  );
+};
--- a/packages/twenty-docs/src/ui/uiComponents.css
+++ b/packages/twenty-docs/src/ui/uiComponents.css
@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+ html {
+  font-size: 13px;
+}