From b0d68becfec433a0ab46942aa9e578f4499b92f6 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 26 Sep 2023 11:41:55 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20update=20stories=20?=
 =?UTF-8?q?for=20themes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stories do not need CunninghamProvider anymore since it is
handled by the configuration for the themes support. Some stories
were also using wrong colors that didn't handle multiple themes.
---
 .../src/components/DataGrid/index.stories.tsx | 241 ++++----
 .../Forms/Checkbox/index.stories.tsx          |   6 +-
 .../Forms/DatePicker/index.stories.tsx        | 120 ++--
 .../Examples/ReactHookForm/Sports.stories.tsx | 213 ++++---
 .../Forms/Examples/index.stories.tsx          | 520 +++++++++---------
 .../Forms/FileUploader/index.stories.tsx      |  94 ++--
 .../components/Forms/Input/index.stories.tsx  |   2 +-
 .../components/Forms/Select/mono.stories.tsx  | 349 ++++++------
 .../components/Forms/Select/multi.stories.tsx | 309 +++++------
 .../components/Forms/Switch/index.stories.tsx |   4 +-
 .../components/Pagination/index.stories.tsx   |  31 +-
 11 files changed, 902 insertions(+), 987 deletions(-)

diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index c51f86e..0c16d92 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useState } from "react";
 import { faker } from "@faker-js/faker";
 import { DataGrid, SortModel } from ":/components/DataGrid/index";
 import { usePagination } from ":/components/Pagination";
-import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 import { SimpleDataGrid } from ":/components/DataGrid/SimpleDataGrid";
 import { DataList } from ":/components/DataGrid/DataList";
@@ -15,36 +14,32 @@ export default {
 
 export const Empty = () => {
   return (
-    <CunninghamProvider>
-      <DataGrid
-        columns={[
-          {
-            field: "firstName",
-            headerName: "First name",
-            highlight: true,
-          },
-        ]}
-        rows={[]}
-      />
-    </CunninghamProvider>
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+      ]}
+      rows={[]}
+    />
   );
 };
 
 export const Loading = () => {
   return (
-    <CunninghamProvider>
-      <DataGrid
-        columns={[
-          {
-            field: "firstName",
-            headerName: "First name",
-            highlight: true,
-          },
-        ]}
-        rows={[]}
-        isLoading={true}
-      />
-    </CunninghamProvider>
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+      ]}
+      rows={[]}
+      isLoading={true}
+    />
   );
 };
 
@@ -61,43 +56,41 @@ export const ClientSideWithoutPagination = () => {
     [],
   );
   return (
-    <CunninghamProvider>
-      <SimpleDataGrid
-        columns={[
-          {
-            field: "firstName",
-            headerName: "First name",
-            highlight: true,
-          },
-          {
-            field: "lastName",
-            headerName: "Last name",
-          },
-          {
-            field: "email",
-            headerName: "Email",
-            highlight: true,
-          },
-          {
-            field: "address",
-            headerName: "Address",
-            enableSorting: false,
-          },
-          {
-            headerName: "Actions",
-            id: "actions",
-            renderCell: () => (
-              <Button
-                color="tertiary"
-                size="small"
-                icon={<span className="material-icons">delete</span>}
-              />
-            ),
-          },
-        ]}
-        rows={database}
-      />
-    </CunninghamProvider>
+    <SimpleDataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+        {
+          field: "lastName",
+          headerName: "Last name",
+        },
+        {
+          field: "email",
+          headerName: "Email",
+          highlight: true,
+        },
+        {
+          field: "address",
+          headerName: "Address",
+          enableSorting: false,
+        },
+        {
+          headerName: "Actions",
+          id: "actions",
+          renderCell: () => (
+            <Button
+              color="tertiary"
+              size="small"
+              icon={<span className="material-icons">delete</span>}
+            />
+          ),
+        },
+      ]}
+      rows={database}
+    />
   );
 };
 
@@ -116,7 +109,7 @@ export const ClientSideWithPagination = () => {
   const [rowSelection, setRowSelection] = useState({});
 
   return (
-    <CunninghamProvider>
+    <>
       <SimpleDataGrid
         columns={[
           {
@@ -149,7 +142,7 @@ export const ClientSideWithPagination = () => {
         onRowSelectionChange={setRowSelection}
       />
       <div>Selected rows: {Object.keys(rowSelection).join(", ")}</div>
-    </CunninghamProvider>
+    </>
   );
 };
 
@@ -208,48 +201,46 @@ export const FullServerSide = () => {
   }, [pagination.page, sortModel]);
 
   return (
-    <CunninghamProvider>
-      <DataGrid
-        columns={[
-          {
-            field: "firstName",
-            headerName: "First name",
-            highlight: true,
-          },
-          {
-            field: "lastName",
-            headerName: "Last name",
-          },
-          {
-            field: "email",
-            headerName: "Email",
-            highlight: true,
-          },
-          {
-            field: "address",
-            headerName: "Address",
-          },
-          {
-            id: "actions",
-            renderCell: () => (
-              <Button
-                color="tertiary"
-                size="small"
-                icon={<span className="material-icons">delete</span>}
-              />
-            ),
-          },
-        ]}
-        rows={rows}
-        pagination={pagination}
-        sortModel={sortModel}
-        onSortModelChange={setSortModel}
-        isLoading={isLoading}
-        enableRowSelection={true}
-        rowSelection={rowSelection}
-        onRowSelectionChange={setRowSelection}
-      />
-    </CunninghamProvider>
+    <DataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+        },
+        {
+          field: "lastName",
+          headerName: "Last name",
+        },
+        {
+          field: "email",
+          headerName: "Email",
+          highlight: true,
+        },
+        {
+          field: "address",
+          headerName: "Address",
+        },
+        {
+          id: "actions",
+          renderCell: () => (
+            <Button
+              color="tertiary"
+              size="small"
+              icon={<span className="material-icons">delete</span>}
+            />
+          ),
+        },
+      ]}
+      rows={rows}
+      pagination={pagination}
+      sortModel={sortModel}
+      onSortModelChange={setSortModel}
+      isLoading={isLoading}
+      enableRowSelection={true}
+      rowSelection={rowSelection}
+      onRowSelectionChange={setRowSelection}
+    />
   );
 };
 
@@ -265,25 +256,23 @@ export const DataListOnly = () => {
   );
 
   return (
-    <CunninghamProvider>
-      <DataList
-        rows={database}
-        columns={[
-          { field: "title" },
-          { field: "date" },
-          {
-            headerName: "actions",
-            id: "actions",
-            renderCell: () => {
-              return (
-                <Button size="small" color="secondary">
-                  Do it
-                </Button>
-              );
-            },
+    <DataList
+      rows={database}
+      columns={[
+        { field: "title" },
+        { field: "date" },
+        {
+          headerName: "actions",
+          id: "actions",
+          renderCell: () => {
+            return (
+              <Button size="small" color="secondary">
+                Do it
+              </Button>
+            );
           },
-        ]}
-      />
-    </CunninghamProvider>
+        },
+      ]}
+    />
   );
 };
diff --git a/packages/react/src/components/Forms/Checkbox/index.stories.tsx b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
index ff8a2f2..d5002b1 100644
--- a/packages/react/src/components/Forms/Checkbox/index.stories.tsx
+++ b/packages/react/src/components/Forms/Checkbox/index.stories.tsx
@@ -122,7 +122,7 @@ export const Success = {
 
 export const Group = () => (
   <div>
-    <div className="fs-l fw-bold mb-t">Your offices</div>
+    <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
     <CheckboxGroup>
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
@@ -135,7 +135,7 @@ export const Group = () => (
 
 export const GroupError = () => (
   <div>
-    <div className="fs-l fw-bold mb-t">Your offices</div>
+    <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
     <CheckboxGroup state="error" text="An important error message">
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
@@ -148,7 +148,7 @@ export const GroupError = () => (
 
 export const GroupSuccess = () => (
   <div>
-    <div className="fs-l fw-bold mb-t">Your offices</div>
+    <div className="fs-l fw-bold mb-t clr-greyscale-900">Your offices</div>
     <CheckboxGroup state="success" text="Success message !">
       <Checkbox label="Paris" />
       <Checkbox label="New York" text="United States" checked={true} />
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 5520852..10fd693 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -16,16 +16,12 @@ export default {
 } as Meta<typeof DatePicker>;
 
 const Template: StoryFn<typeof DatePicker> = (args) => (
-  <CunninghamProvider>
-    <DatePicker {...args} label="Pick a date" />
-  </CunninghamProvider>
+  <DatePicker {...args} label="Pick a date" />
 );
 
 export const Default = () => (
   <div style={{ minHeight: "400px" }}>
-    <CunninghamProvider>
-      <DatePicker label="Pick a date" />
-    </CunninghamProvider>
+    <DatePicker label="Pick a date" />
   </div>
 );
 
@@ -98,13 +94,11 @@ export const Fullwidth = {
 
 export const CustomLocale = () => (
   <div style={{ minHeight: "400px" }}>
-    <CunninghamProvider>
-      <DatePicker
-        label="Pick a date"
-        locale="hi-IN-u-ca-indian"
-        defaultValue="2023-06-25T00:00:00.000+00:00"
-      />
-    </CunninghamProvider>
+    <DatePicker
+      label="Pick a date"
+      locale="hi-IN-u-ca-indian"
+      defaultValue="2023-06-25T00:00:00.000+00:00"
+    />
   </div>
 );
 
@@ -122,21 +116,19 @@ export const CunninghamLocale = () => (
 export const Controlled = () => {
   const [value, setValue] = useState<string | null>("2023-04-25T12:00:00.000Z");
   return (
-    <CunninghamProvider>
-      <div>
-        <div>
-          Value: <span>{value?.toString()}</span>
-        </div>
-        <DatePicker
-          label="Pick a date"
-          value={value}
-          onChange={(e) => {
-            setValue(e);
-          }}
-        />
-        <Button onClick={() => setValue("")}>Reset</Button>
+    <div>
+      <div className="clr-greyscale-900">
+        Value: <span>{value?.toString()}</span>
       </div>
-    </CunninghamProvider>
+      <DatePicker
+        label="Pick a date"
+        value={value}
+        onChange={(e) => {
+          setValue(e);
+        }}
+      />
+      <Button onClick={() => setValue("")}>Reset</Button>
+    </div>
   );
 };
 
@@ -153,47 +145,41 @@ export const ReactHookForm = () => {
   });
 
   return (
-    <CunninghamProvider>
-      <FormProvider {...methods}>
-        <form
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-            width: "400px",
-          }}
-          onSubmit={methods.handleSubmit(onSubmit)}
-        >
-          <RhfDatePicker name="date" label="Pick a date" fullWidth={true} />
-          <Button fullWidth={true}>Submit</Button>
-        </form>
-      </FormProvider>
-    </CunninghamProvider>
+    <FormProvider {...methods}>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "400px",
+        }}
+        onSubmit={methods.handleSubmit(onSubmit)}
+      >
+        <RhfDatePicker name="date" label="Pick a date" fullWidth={true} />
+        <Button fullWidth={true}>Submit</Button>
+      </form>
+    </FormProvider>
   );
 };
 
 export const RangeDefault = () => {
   return (
     <div style={{ minHeight: "400px" }}>
-      <CunninghamProvider>
-        <DateRangePicker startLabel="Start date" endLabel="Due date" />
-      </CunninghamProvider>
+      <DateRangePicker startLabel="Start date" endLabel="Due date" />
     </div>
   );
 };
 
 export const RangeDefaultValue = () => {
   return (
-    <CunninghamProvider>
-      <DateRangePicker
-        startLabel="Start date"
-        endLabel="Due date"
-        defaultValue={[
-          "2023-05-23T00:00:00.000+00:00",
-          "2023-06-23T00:00:00.000+00:00",
-        ]}
-      />
-    </CunninghamProvider>
+    <DateRangePicker
+      startLabel="Start date"
+      endLabel="Due date"
+      defaultValue={[
+        "2023-05-23T00:00:00.000+00:00",
+        "2023-06-23T00:00:00.000+00:00",
+      ]}
+    />
   );
 };
 
@@ -204,18 +190,16 @@ export const RangeControlled = () => {
   ]);
   return (
     <div>
-      <CunninghamProvider>
-        <div>Value: {value?.join("  ")}</div>
-        <DateRangePicker
-          startLabel="Start date"
-          endLabel="Due date"
-          minValue="2023-01-23T00:00:00.000+00:00"
-          maxValue="2023-08-23T00:00:00.000+00:00"
-          value={value}
-          onChange={(e) => setValue(e)}
-        />
-        <Button onClick={() => setValue(null)}>Reset</Button>
-      </CunninghamProvider>
+      <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
+      <DateRangePicker
+        startLabel="Start date"
+        endLabel="Due date"
+        minValue="2023-01-23T00:00:00.000+00:00"
+        maxValue="2023-08-23T00:00:00.000+00:00"
+        value={value}
+        onChange={(e) => setValue(e)}
+      />
+      <Button onClick={() => setValue(null)}>Reset</Button>
     </div>
   );
 };
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
index 7b1b4a7..9208e7b 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
@@ -5,7 +5,6 @@ import { useForm, FormProvider } from "react-hook-form";
 import * as Yup from "yup";
 import { RhfInput } from ":/components/Forms/Input/stories-utils";
 import { Button } from ":/components/Button";
-import { CunninghamProvider } from ":/components/Provider";
 import { Radio, RadioGroup } from ":/components/Forms/Radio";
 import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 import {
@@ -55,119 +54,117 @@ const SportsBase = ({ values }: SportProps) => {
   }, [values]);
 
   return (
-    <CunninghamProvider>
-      <FormProvider {...methods}>
-        <form
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-            width: "400px",
-          }}
-          onSubmit={methods.handleSubmit(onSubmit)}
+    <FormProvider {...methods}>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "400px",
+        }}
+        onSubmit={methods.handleSubmit(onSubmit)}
+      >
+        <h1
+          className="fs-h3 fw-bold clr-greyscale-900"
+          style={{ textAlign: "center" }}
         >
-          <h1
-            className="fs-h3 fw-bold clr-greyscale-900"
-            style={{ textAlign: "center" }}
-          >
-            Register
-          </h1>
+          Register
+        </h1>
 
-          <div>
-            <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
-            <RadioGroup
+        <div>
+          <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
+          <RadioGroup
+            state={getFieldState("gender", methods.formState)}
+            text={getFieldErrorMessage("gender", methods.formState)}
+            style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
+          >
+            <Radio
+              label="Male"
               state={getFieldState("gender", methods.formState)}
-              text={getFieldErrorMessage("gender", methods.formState)}
-              style={{ display: "flex", flexDirection: "row", gap: "0.5rem" }}
-            >
-              <Radio
-                label="Male"
-                state={getFieldState("gender", methods.formState)}
-                value="male"
-                {...methods.register("gender")}
-              />
-              <Radio
-                label="Female"
-                value="female"
-                state={getFieldState("gender", methods.formState)}
-                {...methods.register("gender")}
-              />
-              <Radio
-                label="Other"
-                value="other"
-                state={getFieldState("gender", methods.formState)}
-                {...methods.register("gender")}
-              />
-            </RadioGroup>
-          </div>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <RhfInput
-              label="First name"
-              state={getFieldState("firstName", methods.formState)}
-              text={getFieldErrorMessage("firstName", methods.formState)}
-              {...methods.register("firstName")}
+              value="male"
+              {...methods.register("gender")}
             />
-            <RhfInput
-              label="Last name"
-              state={getFieldState("lastName", methods.formState)}
-              text={getFieldErrorMessage("lastName", methods.formState)}
-              {...methods.register("lastName")}
+            <Radio
+              label="Female"
+              value="female"
+              state={getFieldState("gender", methods.formState)}
+              {...methods.register("gender")}
             />
-          </div>
+            <Radio
+              label="Other"
+              value="other"
+              state={getFieldState("gender", methods.formState)}
+              {...methods.register("gender")}
+            />
+          </RadioGroup>
+        </div>
+        <div style={{ display: "flex", gap: "1rem" }}>
+          <RhfInput
+            label="First name"
+            state={getFieldState("firstName", methods.formState)}
+            text={getFieldErrorMessage("firstName", methods.formState)}
+            {...methods.register("firstName")}
+          />
+          <RhfInput
+            label="Last name"
+            state={getFieldState("lastName", methods.formState)}
+            text={getFieldErrorMessage("lastName", methods.formState)}
+            {...methods.register("lastName")}
+          />
+        </div>
 
-          <RhfSelect
-            name="competition"
-            label="Competition"
-            options={[
-              {
-                label: "Athletics",
-              },
-              {
-                label: "Swimming",
-              },
-              {
-                label: "Marathon",
-              },
-            ]}
-            fullWidth={true}
-          />
-          <RhfSelect
-            name="rewards"
-            label="Previous rewards"
-            multi={true}
-            options={[
-              {
-                label: "Bronze",
-              },
-              {
-                label: "Silver",
-              },
-              {
-                label: "Gold",
-              },
-              {
-                label: "Flocon",
-              },
-              {
-                label: "Ourson",
-              },
-              {
-                label: "Chamois",
-              },
-            ]}
-            fullWidth={true}
-          />
-          <Button fullWidth={true}>Apply</Button>
-          <a
-            href="/#"
-            className="clr-greyscale-800 fs-m"
-            style={{ textAlign: "center" }}
-          >
-            Need help ?
-          </a>
-        </form>
-      </FormProvider>
-    </CunninghamProvider>
+        <RhfSelect
+          name="competition"
+          label="Competition"
+          options={[
+            {
+              label: "Athletics",
+            },
+            {
+              label: "Swimming",
+            },
+            {
+              label: "Marathon",
+            },
+          ]}
+          fullWidth={true}
+        />
+        <RhfSelect
+          name="rewards"
+          label="Previous rewards"
+          multi={true}
+          options={[
+            {
+              label: "Bronze",
+            },
+            {
+              label: "Silver",
+            },
+            {
+              label: "Gold",
+            },
+            {
+              label: "Flocon",
+            },
+            {
+              label: "Ourson",
+            },
+            {
+              label: "Chamois",
+            },
+          ]}
+          fullWidth={true}
+        />
+        <Button fullWidth={true}>Apply</Button>
+        <a
+          href="/#"
+          className="clr-greyscale-800 fs-m"
+          style={{ textAlign: "center" }}
+        >
+          Need help ?
+        </a>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/packages/react/src/components/Forms/Examples/index.stories.tsx b/packages/react/src/components/Forms/Examples/index.stories.tsx
index 3d85297..c739b3b 100644
--- a/packages/react/src/components/Forms/Examples/index.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/index.stories.tsx
@@ -5,7 +5,6 @@ import { Input } from ":/components/Forms/Input";
 import { Checkbox } from ":/components/Forms/Checkbox";
 import { Button } from ":/components/Button";
 import { Select } from ":/components/Forms/Select";
-import { CunninghamProvider } from ":/components/Provider";
 import { FileUploader } from ":/components/Forms/FileUploader";
 import { Switch } from ":/components/Forms/Switch";
 import { Radio } from ":/components/Forms/Radio";
@@ -55,291 +54,276 @@ export const Login = () => {
 
 export const Application = () => {
   return (
-    <CunninghamProvider>
-      <form
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-          width: "400px",
-        }}
+    <form
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        width: "400px",
+      }}
+    >
+      <h1
+        className="fs-h3 fw-bold clr-greyscale-900"
+        style={{ textAlign: "center" }}
       >
-        <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
-          style={{ textAlign: "center" }}
-        >
-          Application
-        </h1>
-        <Select
-          label="Context"
-          options={[
-            {
-              label: "Ask a document",
-            },
-            {
-              label: "Download files",
-            },
-            {
-              label: "Ask for help",
-            },
-          ]}
+        Application
+      </h1>
+      <Select
+        label="Context"
+        options={[
+          {
+            label: "Ask a document",
+          },
+          {
+            label: "Download files",
+          },
+          {
+            label: "Ask for help",
+          },
+        ]}
+        fullWidth={true}
+      />
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <Input label="First name" />
+        <Input label="Last name" />
+      </div>
+      <Input
+        label="Email address"
+        fullWidth={true}
+        text="Only @acme.com domain is authorized"
+      />
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <div style={{ width: "25%" }}>
+          <Input label="ZIP" fullWidth={true} />
+        </div>
+        <Input label="City" fullWidth={true} />
+      </div>
+      <div>
+        <div className="fs-l clr-greyscale-800 mb-t">Your curriculum vitae</div>
+        <FileUploader
           fullWidth={true}
+          text="pdf only ( 4mb maximum )"
+          accept="application/pdf"
         />
-        <div style={{ display: "flex", gap: "1rem" }}>
-          <Input label="First name" />
-          <Input label="Last name" />
-        </div>
-        <Input
-          label="Email address"
-          fullWidth={true}
-          text="Only @acme.com domain is authorized"
-        />
-        <div style={{ display: "flex", gap: "1rem" }}>
-          <div style={{ width: "25%" }}>
-            <Input label="ZIP" fullWidth={true} />
-          </div>
-          <Input label="City" fullWidth={true} />
-        </div>
-        <div>
-          <div className="fs-l clr-greyscale-800 mb-t">
-            Your curriculum vitae
-          </div>
-          <FileUploader
-            fullWidth={true}
-            text="pdf only ( 4mb maximum )"
-            accept="application/pdf"
-          />
-        </div>
-        <div>
-          <Switch label="SMS Notification" fullWidth={true} />
-          <Switch label="Subscribe to newsletter" fullWidth={true} />
-        </div>
-        <Checkbox label="Agree to the terms and services" fullWidth={true} />
-        <Button fullWidth={true}>Apply</Button>
-        <a
-          href="/#"
-          className="clr-greyscale-800 fs-m"
-          style={{ textAlign: "center" }}
-        >
-          Need help ?
-        </a>
-      </form>
-    </CunninghamProvider>
+      </div>
+      <div>
+        <Switch label="SMS Notification" fullWidth={true} />
+        <Switch label="Subscribe to newsletter" fullWidth={true} />
+      </div>
+      <Checkbox label="Agree to the terms and services" fullWidth={true} />
+      <Button fullWidth={true}>Apply</Button>
+      <a
+        href="/#"
+        className="clr-greyscale-800 fs-m"
+        style={{ textAlign: "center" }}
+      >
+        Need help ?
+      </a>
+    </form>
   );
 };
 
 export const Sports = () => {
   return (
-    <CunninghamProvider>
-      <form
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-          width: "400px",
-        }}
+    <form
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        width: "400px",
+      }}
+      onSubmit={(e) => e.preventDefault()}
+    >
+      <h1
+        className="fs-h3 fw-bold clr-greyscale-900"
+        style={{ textAlign: "center" }}
       >
-        <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
-          style={{ textAlign: "center" }}
-        >
-          Register
-        </h1>
-        <div>
-          <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
-          <div style={{ display: "flex", gap: "0.5rem" }}>
-            <Radio name="gender" label="Male" fullWidth={true} />
-            <Radio name="gender" label="Female" />
-            <Radio name="gender" label="Other" />
-          </div>
-        </div>
-        <div style={{ display: "flex", gap: "1rem" }}>
-          <Input label="First name" />
-          <Input label="Last name" />
+        Register
+      </h1>
+      <div>
+        <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <Radio name="gender" label="Male" fullWidth={true} />
+          <Radio name="gender" label="Female" />
+          <Radio name="gender" label="Other" />
         </div>
+      </div>
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <Input label="First name" />
+        <Input label="Last name" />
+      </div>
 
-        <DatePicker label="Date of birth" fullWidth={true} />
-        <Select
-          label="Competition"
-          options={[
-            {
-              label: "Athletics",
-            },
-            {
-              label: "Swimming",
-            },
-            {
-              label: "Marathon",
-            },
-          ]}
-          fullWidth={true}
-        />
-        <Select
-          label="Previous rewards"
-          multi={true}
-          options={[
-            {
-              label: "Bronze",
-            },
-            {
-              label: "Silver",
-            },
-            {
-              label: "Gold",
-            },
-            {
-              label: "Flocon",
-            },
-            {
-              label: "Ourson",
-            },
-            {
-              label: "Chamois",
-            },
-          ]}
-          fullWidth={true}
-        />
-        <DateRangePicker
-          startLabel="Start date"
-          endLabel="End date"
-          defaultValue={[
-            "2023-05-23T00:00:00.000+00:00",
-            "2023-06-23T00:00:00.000+00:00",
-          ]}
-          fullWidth={true}
-        />
-        <Button fullWidth={true}>Apply</Button>
-        <a
-          href="/#"
-          className="clr-greyscale-800 fs-m"
-          style={{ textAlign: "center" }}
-        >
-          Need help ?
-        </a>
-      </form>
-    </CunninghamProvider>
+      <DatePicker label="Date of birth" fullWidth={true} />
+      <Select
+        label="Competition"
+        options={[
+          {
+            label: "Athletics",
+          },
+          {
+            label: "Swimming",
+          },
+          {
+            label: "Marathon",
+          },
+        ]}
+        fullWidth={true}
+      />
+      <Select
+        label="Previous rewards"
+        multi={true}
+        options={[
+          {
+            label: "Bronze",
+          },
+          {
+            label: "Silver",
+          },
+          {
+            label: "Gold",
+          },
+          {
+            label: "Flocon",
+          },
+          {
+            label: "Ourson",
+          },
+          {
+            label: "Chamois",
+          },
+        ]}
+        fullWidth={true}
+      />
+      <DateRangePicker
+        startLabel="Start date"
+        endLabel="End date"
+        defaultValue={[
+          "2023-05-23T00:00:00.000+00:00",
+          "2023-06-23T00:00:00.000+00:00",
+        ]}
+        fullWidth={true}
+      />
+      <Button fullWidth={true}>Apply</Button>
+      <a
+        href="/#"
+        className="clr-greyscale-800 fs-m"
+        style={{ textAlign: "center" }}
+      >
+        Need help ?
+      </a>
+    </form>
   );
 };
 export const SportsDisabled = () => {
   const [withValues, setWithValues] = useState(false);
   return (
-    <CunninghamProvider>
-      <form
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-          width: "400px",
-        }}
+    <form
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        width: "400px",
+      }}
+    >
+      <h1
+        className="fs-h3 fw-bold clr-greyscale-900"
+        style={{ textAlign: "center" }}
       >
-        <h1
-          className="fs-h3 fw-bold clr-greyscale-900"
-          style={{ textAlign: "center" }}
-        >
-          Register
-        </h1>
-        <div>
-          <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
-          <div style={{ display: "flex", gap: "0.5rem" }}>
-            <Radio
-              name="gender"
-              label="Male"
-              fullWidth={true}
-              disabled={true}
-            />
-            <Radio name="gender" label="Female" disabled={true} />
-            <Radio name="gender" label="Other" disabled={true} />
-          </div>
-        </div>
-        <div style={{ display: "flex", gap: "1rem" }}>
-          <Input
-            label="First name"
-            disabled={true}
-            value={withValues ? "John" : undefined}
-          />
-          <Input label="Last name" disabled={true} />
+        Register
+      </h1>
+      <div>
+        <div className="fs-l clr-greyscale-800 mb-t">Gender</div>
+        <div style={{ display: "flex", gap: "0.5rem" }}>
+          <Radio name="gender" label="Male" fullWidth={true} disabled={true} />
+          <Radio name="gender" label="Female" disabled={true} />
+          <Radio name="gender" label="Other" disabled={true} />
         </div>
+      </div>
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <Input
+          label="First name"
+          disabled={true}
+          value={withValues ? "John" : undefined}
+        />
+        <Input label="Last name" disabled={true} />
+      </div>
 
-        <DatePicker
-          label="Date of birth"
-          fullWidth={true}
-          disabled={true}
-          value={withValues ? "2023-05-23T00:00:00.000+00:00" : undefined}
-        />
-        <Select
-          disabled={true}
-          label="Competition"
-          options={[
-            {
-              label: "Athletics",
-            },
-            {
-              label: "Swimming",
-            },
-            {
-              label: "Marathon",
-            },
-          ]}
-          fullWidth={true}
-          value={withValues ? "Swimming" : undefined}
-        />
-        <Select
-          disabled={true}
-          label="Previous rewards"
-          multi={true}
-          options={[
-            {
-              label: "Bronze",
-            },
-            {
-              label: "Silver",
-            },
-            {
-              label: "Gold",
-            },
-            {
-              label: "Flocon",
-            },
-            {
-              label: "Ourson",
-            },
-            {
-              label: "Chamois",
-            },
-          ]}
-          fullWidth={true}
-          value={withValues ? ["Silver"] : undefined}
-        />
-        <DateRangePicker
-          startLabel="Start date"
-          endLabel="End date"
-          value={
-            withValues
-              ? [
-                  "2023-05-23T00:00:00.000+00:00",
-                  "2023-06-23T00:00:00.000+00:00",
-                ]
-              : undefined
-          }
-          fullWidth={true}
-          disabled={true}
-        />
-        <Switch
-          label="Enable values"
-          checked={withValues}
-          onChange={(e) => setWithValues(e.target.checked)}
-        />
-        <Button fullWidth={true} disabled={true}>
-          Apply
-        </Button>
-        <a
-          href="/#"
-          className="clr-greyscale-800 fs-m"
-          style={{ textAlign: "center" }}
-        >
-          Need help ?
-        </a>
-      </form>
-    </CunninghamProvider>
+      <DatePicker
+        label="Date of birth"
+        fullWidth={true}
+        disabled={true}
+        value={withValues ? "2023-05-23T00:00:00.000+00:00" : undefined}
+      />
+      <Select
+        disabled={true}
+        label="Competition"
+        options={[
+          {
+            label: "Athletics",
+          },
+          {
+            label: "Swimming",
+          },
+          {
+            label: "Marathon",
+          },
+        ]}
+        fullWidth={true}
+        value={withValues ? "Swimming" : undefined}
+      />
+      <Select
+        disabled={true}
+        label="Previous rewards"
+        multi={true}
+        options={[
+          {
+            label: "Bronze",
+          },
+          {
+            label: "Silver",
+          },
+          {
+            label: "Gold",
+          },
+          {
+            label: "Flocon",
+          },
+          {
+            label: "Ourson",
+          },
+          {
+            label: "Chamois",
+          },
+        ]}
+        fullWidth={true}
+        value={withValues ? ["Silver"] : undefined}
+      />
+      <DateRangePicker
+        startLabel="Start date"
+        endLabel="End date"
+        value={
+          withValues
+            ? ["2023-05-23T00:00:00.000+00:00", "2023-06-23T00:00:00.000+00:00"]
+            : undefined
+        }
+        fullWidth={true}
+        disabled={true}
+      />
+      <Switch
+        label="Enable values"
+        checked={withValues}
+        onChange={(e) => setWithValues(e.target.checked)}
+      />
+      <Button fullWidth={true} disabled={true}>
+        Apply
+      </Button>
+      <a
+        href="/#"
+        className="clr-greyscale-800 fs-m"
+        style={{ textAlign: "center" }}
+      >
+        Need help ?
+      </a>
+    </form>
   );
 };
diff --git a/packages/react/src/components/Forms/FileUploader/index.stories.tsx b/packages/react/src/components/Forms/FileUploader/index.stories.tsx
index 24b72c7..5f4ba63 100644
--- a/packages/react/src/components/Forms/FileUploader/index.stories.tsx
+++ b/packages/react/src/components/Forms/FileUploader/index.stories.tsx
@@ -1,19 +1,12 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import React, { useEffect, useRef, useState } from "react";
 import { faker } from "@faker-js/faker";
 import {
   FileUploader,
   FileUploaderRefType,
 } from ":/components/Forms/FileUploader/index";
-import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 
-const Template: StoryFn<typeof FileUploader> = (args) => (
-  <CunninghamProvider>
-    <FileUploader {...args} />
-  </CunninghamProvider>
-);
-
 const FAKE_FILES = [
   new File(["42"], faker.lorem.sentence(5) + "pdf"),
   new File(["42"], faker.lorem.sentence(1) + "pdf"),
@@ -24,7 +17,6 @@ const FAKE_FILES = [
 const meta: Meta<typeof FileUploader> = {
   title: "Components/Forms/FileUploader",
   component: FileUploader,
-  render: Template,
 };
 
 export default meta;
@@ -146,7 +138,7 @@ export const MonoStatesShowcase = {
     // the fake default files. In all other step we want it to be persistant in order to see transitions ( like the
     // border color ).
     return (
-      <Template
+      <FileUploader
         key={step === "fileSelected" ? step : "const"}
         {...stepToProps[step]}
       />
@@ -159,16 +151,14 @@ export const MonoValue = {
     const ref = useRef<FileUploaderRefType>(null);
     const [value, setValue] = useState<File[]>([]);
     return (
-      <CunninghamProvider>
-        <div>
-          <div>Value: {value.map((file) => file.name).join(", ")}</div>
-          <FileUploader
-            onFilesChange={(e) => setValue(e.target.value)}
-            ref={ref}
-          />
-          <Button onClick={() => ref.current?.reset()}>Reset</Button>
-        </div>
-      </CunninghamProvider>
+      <div>
+        <div>Value: {value.map((file) => file.name).join(", ")}</div>
+        <FileUploader
+          onFilesChange={(e) => setValue(e.target.value)}
+          ref={ref}
+        />
+        <Button onClick={() => ref.current?.reset()}>Reset</Button>
+      </div>
     );
   },
 };
@@ -273,7 +263,7 @@ export const MultiStatesShowcase = {
     // the fake default files. In all other step we want it to be persistant in order to see transitions ( like the
     // border color ).
     return (
-      <Template
+      <FileUploader
         key={step === "fileSelected" ? step : "const"}
         multiple={true}
         {...stepToProps[step]}
@@ -287,17 +277,15 @@ export const MultiValue = {
     const ref = useRef<FileUploaderRefType>(null);
     const [value, setValue] = useState<File[]>([]);
     return (
-      <CunninghamProvider>
-        <div>
-          <div>Value: {value.map((file) => file.name).join(", ")}</div>
-          <FileUploader
-            onFilesChange={(e) => setValue(e.target.value)}
-            ref={ref}
-            multiple={true}
-          />
-          <Button onClick={() => ref.current?.reset()}>Reset</Button>
-        </div>
-      </CunninghamProvider>
+      <div>
+        <div>Value: {value.map((file) => file.name).join(", ")}</div>
+        <FileUploader
+          onFilesChange={(e) => setValue(e.target.value)}
+          ref={ref}
+          multiple={true}
+        />
+        <Button onClick={() => ref.current?.reset()}>Reset</Button>
+      </div>
     );
   },
 };
@@ -314,29 +302,27 @@ export const Form = {
     };
 
     return (
-      <CunninghamProvider>
-        <form onSubmit={handleSubmit}>
-          <div>
-            <FileUploader
-              name="files"
-              text="JPG, PNG or GIF - Max file size 2MB"
-              accept="image/png, image/jpeg, image/gif"
-              multiple={true}
-            />
-          </div>
-          <div className="mt-s">
-            <FileUploader
-              name="file"
-              text="JPG, PNG or GIF - Max file size 2MB"
-              accept="image/png, image/jpeg, image/gif"
-            />
-          </div>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <FileUploader
+            name="files"
+            text="JPG, PNG or GIF - Max file size 2MB"
+            accept="image/png, image/jpeg, image/gif"
+            multiple={true}
+          />
+        </div>
+        <div className="mt-s">
+          <FileUploader
+            name="file"
+            text="JPG, PNG or GIF - Max file size 2MB"
+            accept="image/png, image/jpeg, image/gif"
+          />
+        </div>
 
-          <div className="mt-s">
-            <Button>Submit</Button>
-          </div>
-        </form>
-      </CunninghamProvider>
+        <div className="mt-s">
+          <Button>Submit</Button>
+        </div>
+      </form>
     );
   },
 };
diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx
index d321db1..6dd47bf 100644
--- a/packages/react/src/components/Forms/Input/index.stories.tsx
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -163,7 +163,7 @@ export const Controlled = () => {
   const [value, setValue] = React.useState("I am controlled");
   return (
     <div>
-      <div>
+      <div className="clr-greyscale-900">
         Value: <span>{value}</span>
       </div>
       <Input
diff --git a/packages/react/src/components/Forms/Select/mono.stories.tsx b/packages/react/src/components/Forms/Select/mono.stories.tsx
index 5120132..3021f81 100644
--- a/packages/react/src/components/Forms/Select/mono.stories.tsx
+++ b/packages/react/src/components/Forms/Select/mono.stories.tsx
@@ -7,7 +7,6 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
 import { Select } from ":/components/Forms/Select";
 import { Button } from ":/components/Button";
-import { CunninghamProvider } from ":/components/Provider";
 import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 
 export default {
@@ -17,9 +16,7 @@ export default {
 
 const Template: StoryFn<typeof Select> = (args) => (
   <div style={{ paddingBottom: "200px" }}>
-    <CunninghamProvider>
-      <Select {...args} />
-    </CunninghamProvider>
+    <Select {...args} />
   </div>
 );
 
@@ -75,28 +72,26 @@ export const HiddenLabel = {
 export const Controlled = () => {
   const [value, setValue] = useState(OPTIONS[8].value);
   return (
-    <CunninghamProvider>
+    <div>
       <div>
-        <div>
-          Value: <span>{value}</span>
-        </div>
-        <Select
-          label="Select a city"
-          options={OPTIONS}
-          value={value}
-          onChange={(e) => {
-            setValue(e.target.value as string);
-          }}
-        />
-        <Button onClick={() => setValue("")}>Reset</Button>
-        <Button onClick={() => setValue(OPTIONS[0].value)}>
-          Set {OPTIONS[0].label}
-        </Button>
-        <Button onClick={() => setValue(OPTIONS[1].value)}>
-          Set {OPTIONS[1].label}
-        </Button>
+        Value: <span>{value}</span>
       </div>
-    </CunninghamProvider>
+      <Select
+        label="Select a city"
+        options={OPTIONS}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value as string);
+        }}
+      />
+      <Button onClick={() => setValue("")}>Reset</Button>
+      <Button onClick={() => setValue(OPTIONS[0].value)}>
+        Set {OPTIONS[0].label}
+      </Button>
+      <Button onClick={() => setValue(OPTIONS[1].value)}>
+        Set {OPTIONS[1].label}
+      </Button>
+    </div>
   );
 };
 
@@ -151,29 +146,27 @@ export const SearchableDisabled = {
 export const SearchableControlled = () => {
   const [value, setValue] = useState(OPTIONS[8].value);
   return (
-    <CunninghamProvider>
+    <div>
       <div>
-        <div>
-          Value: <span>{value}</span>
-        </div>
-        <Select
-          label="Select a city"
-          options={OPTIONS}
-          searchable={true}
-          value={value}
-          onChange={(e) => {
-            setValue(e.target.value as string);
-          }}
-        />
-        <Button onClick={() => setValue("")}>Reset</Button>
-        <Button onClick={() => setValue(OPTIONS[0].value)}>
-          Set {OPTIONS[0].label}
-        </Button>
-        <Button onClick={() => setValue(OPTIONS[1].value)}>
-          Set {OPTIONS[1].label}
-        </Button>
+        Value: <span>{value}</span>
       </div>
-    </CunninghamProvider>
+      <Select
+        label="Select a city"
+        options={OPTIONS}
+        searchable={true}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value as string);
+        }}
+      />
+      <Button onClick={() => setValue("")}>Reset</Button>
+      <Button onClick={() => setValue(OPTIONS[0].value)}>
+        Set {OPTIONS[0].label}
+      </Button>
+      <Button onClick={() => setValue(OPTIONS[1].value)}>
+        Set {OPTIONS[1].label}
+      </Button>
+    </div>
   );
 };
 
@@ -244,105 +237,103 @@ export const FormExample = () => {
   };
 
   return (
-    <CunninghamProvider>
-      <form onSubmit={handleSubmit}>
-        <div className="mb-s">
-          <Select
-            label="Your city"
-            name="city"
-            options={OPTIONS}
-            defaultValue={OPTIONS[2].value}
-            text="The city you were born in"
-            state="success"
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your gender"
-            name="gender"
-            options={[
-              {
-                label: "Male",
-              },
-              {
-                label: "Female",
-              },
-              {
-                label: "Other",
-              },
-            ]}
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your department"
-            name="department"
-            searchable={true}
-            options={[
-              {
-                label: "Legal",
-              },
-              {
-                label: "Tech",
-              },
-              {
-                label: "AI",
-              },
-              {
-                label: "Accounting",
-              },
-            ]}
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your grade"
-            text="Any error you want"
-            name="grade"
-            searchable={true}
-            options={[
-              {
-                label: "Level 1",
-              },
-              {
-                label: "Level 2",
-              },
-              {
-                label: "Level 3",
-              },
-              {
-                label: "Emperor",
-              },
-            ]}
-            state="error"
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your plan"
-            text="This field is disabled"
-            name="grade"
-            disabled={true}
-            options={[
-              {
-                label: "Bronze",
-              },
-              {
-                label: "Silver",
-              },
-              {
-                label: "Gold",
-              },
-              {
-                label: "Platinum",
-              },
-            ]}
-            defaultValue="Platinum"
-          />
-        </div>
-        <Button>Submit</Button>
-      </form>
-    </CunninghamProvider>
+    <form onSubmit={handleSubmit}>
+      <div className="mb-s">
+        <Select
+          label="Your city"
+          name="city"
+          options={OPTIONS}
+          defaultValue={OPTIONS[2].value}
+          text="The city you were born in"
+          state="success"
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your gender"
+          name="gender"
+          options={[
+            {
+              label: "Male",
+            },
+            {
+              label: "Female",
+            },
+            {
+              label: "Other",
+            },
+          ]}
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your department"
+          name="department"
+          searchable={true}
+          options={[
+            {
+              label: "Legal",
+            },
+            {
+              label: "Tech",
+            },
+            {
+              label: "AI",
+            },
+            {
+              label: "Accounting",
+            },
+          ]}
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your grade"
+          text="Any error you want"
+          name="grade"
+          searchable={true}
+          options={[
+            {
+              label: "Level 1",
+            },
+            {
+              label: "Level 2",
+            },
+            {
+              label: "Level 3",
+            },
+            {
+              label: "Emperor",
+            },
+          ]}
+          state="error"
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your plan"
+          text="This field is disabled"
+          name="grade"
+          disabled={true}
+          options={[
+            {
+              label: "Bronze",
+            },
+            {
+              label: "Silver",
+            },
+            {
+              label: "Gold",
+            },
+            {
+              label: "Platinum",
+            },
+          ]}
+          defaultValue="Platinum"
+        />
+      </div>
+      <Button>Submit</Button>
+    </form>
   );
 };
 
@@ -374,40 +365,40 @@ export const ReactHookForm = () => {
   });
 
   return (
-    <CunninghamProvider>
-      <FormProvider {...methods}>
-        <form
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-            width: "400px",
-          }}
-          onSubmit={methods.handleSubmit(onSubmit)}
-        >
-          <div>Where will the 2024 Olympics take place?</div>
-          <RhfSelect
-            name="joTown"
-            label="Select a city"
-            fullWidth={true}
-            options={[
-              {
-                label: "Dijon",
-                value: CitiesOptionEnum.DIJON,
-              },
-              {
-                label: "Paris",
-                value: CitiesOptionEnum.PARIS,
-              },
-              {
-                label: "Tokyo",
-                value: CitiesOptionEnum.TOKYO,
-              },
-            ]}
-          />
-          <Button fullWidth={true}>Submit</Button>
-        </form>
-      </FormProvider>
-    </CunninghamProvider>
+    <FormProvider {...methods}>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "400px",
+        }}
+        onSubmit={methods.handleSubmit(onSubmit)}
+      >
+        <div className="clr-greyscale-900">
+          Where will the 2024 Olympics take place?
+        </div>
+        <RhfSelect
+          name="joTown"
+          label="Select a city"
+          fullWidth={true}
+          options={[
+            {
+              label: "Dijon",
+              value: CitiesOptionEnum.DIJON,
+            },
+            {
+              label: "Paris",
+              value: CitiesOptionEnum.PARIS,
+            },
+            {
+              label: "Tokyo",
+              value: CitiesOptionEnum.TOKYO,
+            },
+          ]}
+        />
+        <Button fullWidth={true}>Submit</Button>
+      </form>
+    </FormProvider>
   );
 };
diff --git a/packages/react/src/components/Forms/Select/multi.stories.tsx b/packages/react/src/components/Forms/Select/multi.stories.tsx
index 6c33b28..4619154 100644
--- a/packages/react/src/components/Forms/Select/multi.stories.tsx
+++ b/packages/react/src/components/Forms/Select/multi.stories.tsx
@@ -6,7 +6,6 @@ import { Meta, StoryFn } from "@storybook/react";
 import { faker } from "@faker-js/faker";
 import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
 import { Select } from ":/components/Forms/Select";
-import { CunninghamProvider } from ":/components/Provider";
 import { Button } from ":/components/Button";
 import { RhfSelect } from ":/components/Forms/Select/stories-utils";
 
@@ -15,13 +14,13 @@ export default {
   component: Select,
 } as Meta<typeof Select>;
 
-const Template: StoryFn<typeof Select> = (args) => (
-  <div style={{ paddingBottom: "200px" }}>
-    <CunninghamProvider>
+const Template: StoryFn<typeof Select> = (args) => {
+  return (
+    <div style={{ paddingBottom: "200px" }}>
       <Select {...args} multi={true} />
-    </CunninghamProvider>
-  </div>
-);
+    </div>
+  );
+};
 
 const CITIES = Array.from({ length: 10 }).map(() => faker.location.city());
 const OPTIONS = CITIES.map((city) => ({
@@ -71,21 +70,19 @@ export const HiddenLabel = {
 export const Controlled = () => {
   const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]);
   return (
-    <CunninghamProvider>
-      <div>
-        <div>
-          Value: <span>{JSON.stringify(value)}</span>
-        </div>
-        <Select
-          label="Select cities"
-          multi={true}
-          options={OPTIONS}
-          value={value}
-          onChange={(e) => setValue(e.target.value as string[])}
-        />
-        <Button onClick={() => setValue([])}>Reset</Button>
+    <div>
+      <div className="clr-greyscale-900">
+        Value: <span>{JSON.stringify(value)}</span>
       </div>
-    </CunninghamProvider>
+      <Select
+        label="Select cities"
+        multi={true}
+        options={OPTIONS}
+        value={value}
+        onChange={(e) => setValue(e.target.value as string[])}
+      />
+      <Button onClick={() => setValue([])}>Reset</Button>
+    </div>
   );
 };
 
@@ -136,22 +133,20 @@ export const SearchableDisabled = {
 export const SearchableControlled = () => {
   const [value, setValue] = useState([OPTIONS[6].value, OPTIONS[8].value]);
   return (
-    <CunninghamProvider>
-      <div>
-        <div>
-          Value: <span>{JSON.stringify(value)}</span>
-        </div>
-        <Select
-          label="Select cities"
-          options={OPTIONS}
-          searchable={true}
-          multi={true}
-          value={value}
-          onChange={(e) => setValue(e.target.value as string[])}
-        />
-        <Button onClick={() => setValue([])}>Reset</Button>
+    <div>
+      <div className="clr-greyscale-900">
+        Value: <span>{JSON.stringify(value)}</span>
       </div>
-    </CunninghamProvider>
+      <Select
+        label="Select cities"
+        options={OPTIONS}
+        searchable={true}
+        multi={true}
+        value={value}
+        onChange={(e) => setValue(e.target.value as string[])}
+      />
+      <Button onClick={() => setValue([])}>Reset</Button>
+    </div>
   );
 };
 
@@ -232,89 +227,87 @@ export const FormExample = () => {
   };
 
   return (
-    <CunninghamProvider>
-      <form onSubmit={handleSubmit}>
-        <div className="mb-s">
-          <Select
-            label="Your favorite cities"
-            name="cities"
-            options={OPTIONS}
-            text="The cities you love the most"
-            state="success"
-            defaultValue={[OPTIONS[4].value]}
-            multi={true}
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your departments"
-            name="departments"
-            searchable={true}
-            multi={true}
-            options={[
-              {
-                label: "Legal",
-              },
-              {
-                label: "Tech",
-              },
-              {
-                label: "AI",
-              },
-              {
-                label: "Accounting",
-              },
-            ]}
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your skills"
-            text="Any error you want"
-            name="skills"
-            multi={true}
-            options={[
-              {
-                label: "Front-end",
-              },
-              {
-                label: "Back-end",
-              },
-              {
-                label: "Full-stack",
-              },
-            ]}
-            state="error"
-          />
-        </div>
-        <div className="mb-s">
-          <Select
-            label="Your options"
-            text="This field is disabled"
-            name="grade"
-            disabled={true}
-            multi={true}
-            options={[
-              {
-                label: "Bronze",
-              },
-              {
-                label: "Silver",
-              },
-              {
-                label: "Gold",
-              },
-              {
-                label: "Platinum",
-              },
-            ]}
-            defaultValue={["Platinum", "Gold"]}
-          />
-        </div>
+    <form onSubmit={handleSubmit}>
+      <div className="mb-s">
+        <Select
+          label="Your favorite cities"
+          name="cities"
+          options={OPTIONS}
+          text="The cities you love the most"
+          state="success"
+          defaultValue={[OPTIONS[4].value]}
+          multi={true}
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your departments"
+          name="departments"
+          searchable={true}
+          multi={true}
+          options={[
+            {
+              label: "Legal",
+            },
+            {
+              label: "Tech",
+            },
+            {
+              label: "AI",
+            },
+            {
+              label: "Accounting",
+            },
+          ]}
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your skills"
+          text="Any error you want"
+          name="skills"
+          multi={true}
+          options={[
+            {
+              label: "Front-end",
+            },
+            {
+              label: "Back-end",
+            },
+            {
+              label: "Full-stack",
+            },
+          ]}
+          state="error"
+        />
+      </div>
+      <div className="mb-s">
+        <Select
+          label="Your options"
+          text="This field is disabled"
+          name="grade"
+          disabled={true}
+          multi={true}
+          options={[
+            {
+              label: "Bronze",
+            },
+            {
+              label: "Silver",
+            },
+            {
+              label: "Gold",
+            },
+            {
+              label: "Platinum",
+            },
+          ]}
+          defaultValue={["Platinum", "Gold"]}
+        />
+      </div>
 
-        <Button>Submit</Button>
-      </form>
-    </CunninghamProvider>
+      <Button>Submit</Button>
+    </form>
   );
 };
 
@@ -353,45 +346,45 @@ export const ReactHookForm = () => {
   });
 
   return (
-    <CunninghamProvider>
-      <FormProvider {...methods}>
-        <form
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: "1rem",
-            width: "400px",
-          }}
-          onSubmit={methods.handleSubmit(onSubmit)}
-        >
-          <div>Which cities are capital of countries ?</div>
-          <RhfSelect
-            name="capitalCity"
-            label="Select a city"
-            multi={true}
-            fullWidth={true}
-            options={[
-              {
-                label: "Dijon",
-                value: CitiesOptionEnum.DIJON,
-              },
-              {
-                label: "Paris",
-                value: CitiesOptionEnum.PARIS,
-              },
-              {
-                label: "Tokyo",
-                value: CitiesOptionEnum.TOKYO,
-              },
-              {
-                label: "Vannes",
-                value: CitiesOptionEnum.VANNES,
-              },
-            ]}
-          />
-          <Button fullWidth={true}>Submit</Button>
-        </form>
-      </FormProvider>
-    </CunninghamProvider>
+    <FormProvider {...methods}>
+      <form
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+          width: "400px",
+        }}
+        onSubmit={methods.handleSubmit(onSubmit)}
+      >
+        <div className="clr-greyscale-900">
+          Which cities are capital of countries ?
+        </div>
+        <RhfSelect
+          name="capitalCity"
+          label="Select a city"
+          multi={true}
+          fullWidth={true}
+          options={[
+            {
+              label: "Dijon",
+              value: CitiesOptionEnum.DIJON,
+            },
+            {
+              label: "Paris",
+              value: CitiesOptionEnum.PARIS,
+            },
+            {
+              label: "Tokyo",
+              value: CitiesOptionEnum.TOKYO,
+            },
+            {
+              label: "Vannes",
+              value: CitiesOptionEnum.VANNES,
+            },
+          ]}
+        />
+        <Button fullWidth={true}>Submit</Button>
+      </form>
+    </FormProvider>
   );
 };
diff --git a/packages/react/src/components/Forms/Switch/index.stories.tsx b/packages/react/src/components/Forms/Switch/index.stories.tsx
index db31e98..579efc0 100644
--- a/packages/react/src/components/Forms/Switch/index.stories.tsx
+++ b/packages/react/src/components/Forms/Switch/index.stories.tsx
@@ -119,7 +119,9 @@ export const Controlled = {
     const [checked, setChecked] = React.useState(false);
     return (
       <div>
-        <div>Value: {JSON.stringify(checked)}</div>
+        <div className="clr-greyscale-900">
+          Value: {JSON.stringify(checked)}
+        </div>
         <Switch
           checked={checked}
           onChange={(e) => setChecked(e.target.checked)}
diff --git a/packages/react/src/components/Pagination/index.stories.tsx b/packages/react/src/components/Pagination/index.stories.tsx
index e27c856..36dedd3 100644
--- a/packages/react/src/components/Pagination/index.stories.tsx
+++ b/packages/react/src/components/Pagination/index.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/react";
 import React, { useEffect, useMemo, useState } from "react";
 import { Pagination, usePagination } from ":/components/Pagination/index";
-import { CunninghamProvider } from ":/components/Provider";
 
 export default {
   title: "Components/Pagination",
@@ -13,11 +12,7 @@ export const Basic = () => {
     defaultPagesCount: 100,
     defaultPage: 50,
   });
-  return (
-    <CunninghamProvider>
-      <Pagination {...pagination} />
-    </CunninghamProvider>
-  );
+  return <Pagination {...pagination} />;
 };
 
 export const List = () => {
@@ -49,18 +44,16 @@ export const List = () => {
   }, [pagination.page]);
 
   return (
-    <CunninghamProvider>
+    <div>
       <div>
-        <div>
-          {items.map((item) => (
-            <div className="p-t bg-secondary-300 mb-t" key={item}>
-              {item}
-            </div>
-          ))}
-        </div>
-        <Pagination {...pagination} />
+        {items.map((item) => (
+          <div className="p-t bg-secondary-300 mb-t" key={item}>
+            {item}
+          </div>
+        ))}
       </div>
-    </CunninghamProvider>
+      <Pagination {...pagination} />
+    </div>
   );
 };
 
@@ -76,9 +69,5 @@ export const ForcePage = () => {
       clearTimeout(timeout);
     };
   }, []);
-  return (
-    <CunninghamProvider>
-      <Pagination {...pagination} />
-    </CunninghamProvider>
-  );
+  return <Pagination {...pagination} />;
 };