✨(react) add compact mode to Field

The Field component was only able to display for large fields like
text input, but for small component like Checkbox or Radio we need
to set specific generic padding that are suitable to those.

.changeset/pretty-buckets-refuse.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+add compact mode to Field

packages/react/src/components/Forms/Field/index.scss

@@ -27,4 +27,10 @@
   &--full-width {
     width: 100%;
   }
+
+  &--compact {
+    align-items: flex-start;
+    width: auto;
+  }
+
 }

packages/react/src/components/Forms/Field/index.stories.mdx

@@ -24,4 +24,4 @@ available design token to do so.
 
 ## Props
 
-<ArgsTable of={Field} />
+<ArgsTable of={Field} exclude={["compact"]} />

packages/react/src/components/Forms/Field/index.tsx

@@ -8,6 +8,8 @@ export type FieldProps = {
   text?: string | undefined;
   rightText?: string | undefined;
   fullWidth?: boolean | undefined;
+  compact?: boolean | undefined;
+  className?: string | undefined;
 };
 
 type Props = FieldProps & PropsWithChildren;
@@ -18,11 +20,14 @@ export const Field = ({
   text,
   rightText,
   fullWidth,
+  compact,
+  className,
 }: Props) => {
   return (
     <div
-      className={classNames("c__field", "c__field--" + state, {
+      className={classNames("c__field", "c__field--" + state, className, {
         "c__field--full-width": fullWidth,
+        "c__field--compact": compact,
       })}
     >
       {children}