♻️(react) update stories for themes

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.

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>
+        },
+      ]}
+    />
   );
 };

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

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

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

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

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>
     );
   },
 };

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

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

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

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)}

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