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} />;
 };