Create a reusable Label component (#9833)

As seen with @Bonapara, I'm creating a Label component and use it in the
workflows.

packages/twenty-ui/src/display/index.ts

@@ -57,4 +57,5 @@ export * from './tooltip/OverflowingTextWithTooltip';
 export * from './typography/components/H1Title';
 export * from './typography/components/H2Title';
 export * from './typography/components/H3Title';
+export * from './typography/components/Label';
 export * from './typography/components/StyledText';

packages/twenty-ui/src/display/typography/components/Label.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export type LabelVariant = 'default' | 'small';
+
+const StyledLabel = styled.div<{ variant?: LabelVariant }>`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ variant = 'default' }) => {
+    switch (variant) {
+      case 'default':
+        return '11px';
+      case 'small':
+        return '9px';
+    }
+  }};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+export { StyledLabel as Label };

packages/twenty-ui/src/display/typography/components/__stories__/Label.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '@ui/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '@ui/testing/types/CatalogStory';
+
+import { Label, LabelVariant } from '../Label';
+
+const meta: Meta<typeof Label> = {
+  title: 'UI/Display/Typography/Label',
+  component: Label,
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    children: 'Label',
+  },
+};
+
+export const Catalog: CatalogStory<Story, typeof Label> = {
+  decorators: [CatalogDecorator],
+  args: {
+    children: 'Label',
+  },
+  parameters: {
+    catalog: {
+      dimensions: [
+        {
+          name: 'Variant',
+          values: ['default', 'small'] satisfies LabelVariant[],
+          props: (variant: LabelVariant) => ({ variant }),
+        },
+      ],
+    },
+  },
+};