From 31e3e03490b4e1dbb9de14848f65567897a04627 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Wed, 14 Jul 2021 00:24:05 +0200
Subject: [PATCH] cleanup in component mdx for docusaurus

---
 .../components/ButtonGroup.mdx                |  18 +-
 .../components/CinePlayer.mdx                 |  28 ++-
 .../components/ContextMenu.mdx                |  48 +++--
 .../component-library/components/Dropdown.mdx |  80 ++++----
 .../components/ExpandableToolbarButton.mdx    | 110 +++++------
 .../component-library/components/Input.mdx    |  28 ++-
 .../components/InputDateRange.mdx             |  32 ++-
 .../components/InputGroup.mdx                 | 126 ++++++------
 .../components/InputMultiSelect.mdx           |  42 ++--
 .../components/InputText.mdx                  |  30 ++-
 .../component-library/components/Label.mdx    |  14 +-
 .../component-library/components/ListMenu.mdx | 100 +++++-----
 .../components/Notification.mdx               |  60 +++---
 .../components/SegmentationTable.mdx          |  22 +--
 .../components/SplitButton.mdx                | 112 ++++++-----
 .../components/StudyBrowser.mdx               | 158 ++++++++-------
 .../components/StudyItem.mdx                  |  34 ++--
 .../components/StudyListFilter.mdx            | 186 +++++++++---------
 .../components/StudyListPagination.mdx        |  36 ++--
 .../components/StudyListTable.mdx             |  66 +++----
 .../components/WindowLevelMenuItem.mdx        |  14 +-
 .../ViewportDialogProvider.mdx                |  16 +-
 22 files changed, 661 insertions(+), 699 deletions(-)

diff --git a/platform/docs/docs/component-library/components/ButtonGroup.mdx b/platform/docs/docs/component-library/components/ButtonGroup.mdx
index 0c239e5f3..dad0bc3c8 100644
--- a/platform/docs/docs/component-library/components/ButtonGroup.mdx
+++ b/platform/docs/docs/component-library/components/ButtonGroup.mdx
@@ -23,17 +23,17 @@ import { ButtonGroup } from '@ohif/ui';
   <ButtonGroup color="primary" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
   <ButtonGroup color="primary" variant="contained" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
   <ButtonGroup color="primary" variant="text" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
 </div>
 ```
@@ -45,17 +45,17 @@ import { ButtonGroup } from '@ohif/ui';
   <ButtonGroup color="default" size="small" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
   <ButtonGroup color="primary" size="medium" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
   <ButtonGroup color="secondary" size="large" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
 </div>
 ```
@@ -67,7 +67,7 @@ import { ButtonGroup } from '@ohif/ui';
   <ButtonGroup orientation="vertical" color="primary" className="m-2">
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
   <ButtonGroup
     orientation="vertical"
@@ -77,7 +77,7 @@ import { ButtonGroup } from '@ohif/ui';
   >
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
   <ButtonGroup
     orientation="vertical"
@@ -87,7 +87,7 @@ import { ButtonGroup } from '@ohif/ui';
   >
     <Button>One</Button>
     <Button>Two</Button>
-    <Button>Tree</Button>
+    <Button>Three</Button>
   </ButtonGroup>
 </div>
 ```
diff --git a/platform/docs/docs/component-library/components/CinePlayer.mdx b/platform/docs/docs/component-library/components/CinePlayer.mdx
index b1e9fd12b..47d6edc9a 100644
--- a/platform/docs/docs/component-library/components/CinePlayer.mdx
+++ b/platform/docs/docs/component-library/components/CinePlayer.mdx
@@ -19,22 +19,20 @@ import { CinePlayer } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    return (
-      <div className="flex flex-col flex-1 p-4 items-center">
-        <div className="w-56">
-          <CinePlayer
-            cineMinFrameRate={1}
-            cineMaxFrameRate={90}
-            cineStepFrameRate={1}
-            cineFrameRate={24}
-            isPlaying={false}
-          />
-        </div>
+function() {
+  return (
+    <div className="flex flex-col flex-1 p-4 items-center">
+      <div className="w-56">
+        <CinePlayer
+          cineMinFrameRate={1}
+          cineMaxFrameRate={90}
+          cineStepFrameRate={1}
+          cineFrameRate={24}
+          isPlaying={false}
+        />
       </div>
-    );
-  };
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/ContextMenu.mdx b/platform/docs/docs/component-library/components/ContextMenu.mdx
index 87fc44053..2b65fe6b9 100644
--- a/platform/docs/docs/component-library/components/ContextMenu.mdx
+++ b/platform/docs/docs/component-library/components/ContextMenu.mdx
@@ -17,31 +17,29 @@ import { ContextMenu } from '@ohif/ui';
 ```
 
 ```jsx live
-{
-  () => {
-    const items = [
-      {
-        label: 'Delete measurement',
-        actionType: 'Delete',
-        action: () => alert('Delete'),
-      },
-      {
-        label: 'Relabel',
-        actionType: 'setLabel',
-        action: () => alert('Relabel'),
-      },
-      {
-        label: 'Add Description',
-        actionType: 'setDescription',
-        action: () => alert('Add Description'),
-      },
-    ];
-    return (
-      <div className="p-4">
-        <ContextMenu items={items} />
-      </div>
-    );
-  };
+function() {
+  const items = [
+    {
+      label: 'Delete measurement',
+      actionType: 'Delete',
+      action: () => alert('Delete'),
+    },
+    {
+      label: 'Relabel',
+      actionType: 'setLabel',
+      action: () => alert('Relabel'),
+    },
+    {
+      label: 'Add Description',
+      actionType: 'setDescription',
+      action: () => alert('Add Description'),
+    },
+  ];
+  return (
+    <div className="p-4">
+      <ContextMenu items={items} />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/Dropdown.mdx b/platform/docs/docs/component-library/components/Dropdown.mdx
index c75f01fff..ff9801ef3 100644
--- a/platform/docs/docs/component-library/components/Dropdown.mdx
+++ b/platform/docs/docs/component-library/components/Dropdown.mdx
@@ -19,48 +19,46 @@ import { Dropdown } from '@ohif/ui';
 ```
 
 ```jsx live
-{
-  () => {
-    const handleClick = () => {
-      alert('Clicked');
-    };
-    return (
-      <div className="py-4">
-        <Dropdown
-          showDropdownIcon={false}
-          list={[
-            {
-              title: 'Option 1',
-              icon: 'info',
-              onClick: handleClick,
-            },
-            {
-              title: 'Option 2',
-              icon: 'settings',
-              onClick: handleClick,
-            },
-          ]}
-        >
-          <IconButton
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-primary-active"
-          >
-            <Icon name="settings" />
-          </IconButton>
-          <IconButton
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-primary-active"
-          >
-            <Icon name="chevron-down" />
-          </IconButton>
-        </Dropdown>
-      </div>
-    );
+function() {
+  const handleClick = () => {
+    alert('Clicked');
   };
+  return (
+    <div className="py-4">
+      <Dropdown
+        showDropdownIcon={false}
+        list={[
+          {
+            title: 'Option 1',
+            icon: 'info',
+            onClick: handleClick,
+          },
+          {
+            title: 'Option 2',
+            icon: 'settings',
+            onClick: handleClick,
+          },
+        ]}
+      >
+        <IconButton
+          variant="text"
+          color="inherit"
+          size="initial"
+          className="text-primary-active"
+        >
+          <Icon name="settings" />
+        </IconButton>
+        <IconButton
+          variant="text"
+          color="inherit"
+          size="initial"
+          className="text-primary-active"
+        >
+          <Icon name="chevron-down" />
+        </IconButton>
+      </Dropdown>
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx b/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx
index 92bc71e69..59c55423c 100644
--- a/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx
+++ b/platform/docs/docs/component-library/components/ExpandableToolbarButton.mdx
@@ -19,68 +19,66 @@ import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
 ```
 
 ```jsx live
-{
-  () => {
-    const props = {
-      content: ListMenu,
-      contentProps: {
-        options: [
-          {
-            value: 'windowLevelPreset1',
-            title: 'Soft tissue',
-            subtitle: '400 / 40',
-          },
-          {
-            value: 'windowLevelPreset2',
-            title: 'Lung',
-            subtitle: '1500 / -600',
-          },
-          { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
-          { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
-          {
-            value: 'windowLevelPreset5',
-            title: 'Brain',
-            subtitle: '2500 / 480',
-          },
-        ],
-        renderer: ({ title, subtitle, isActive, index }) => (
-          <>
-            <div>
-              <span
-                className={classnames(
-                  isActive ? 'text-black' : 'text-white',
-                  'mr-2 text-base'
-                )}
-              >
-                {title}
-              </span>
-              <span
-                className={classnames(
-                  isActive ? 'text-black' : 'text-aqua-pale',
-                  'font-thin text-sm'
-                )}
-              >
-                {subtitle}
-              </span>
-            </div>
+function() {
+  const props = {
+    content: ListMenu,
+    contentProps: {
+      options: [
+        {
+          value: 'windowLevelPreset1',
+          title: 'Soft tissue',
+          subtitle: '400 / 40',
+        },
+        {
+          value: 'windowLevelPreset2',
+          title: 'Lung',
+          subtitle: '1500 / -600',
+        },
+        { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
+        { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
+        {
+          value: 'windowLevelPreset5',
+          title: 'Brain',
+          subtitle: '2500 / 480',
+        },
+      ],
+      renderer: ({ title, subtitle, isActive, index }) => (
+        <>
+          <div>
             <span
               className={classnames(
-                isActive ? 'text-black' : 'text-primary-active',
-                'text-sm'
+                isActive ? 'text-black' : 'text-white',
+                'mr-2 text-base'
               )}
             >
-              {index + 1}
+              {title}
             </span>
-          </>
-        ),
-      },
-    };
-    return (
-      <div className="py-10 flex justify-center">
-        <ExpandableToolbarButton {...props} />
-      </div>
-    );
+            <span
+              className={classnames(
+                isActive ? 'text-black' : 'text-aqua-pale',
+                'font-thin text-sm'
+              )}
+            >
+              {subtitle}
+            </span>
+          </div>
+          <span
+            className={classnames(
+              isActive ? 'text-black' : 'text-primary-active',
+              'text-sm'
+            )}
+          >
+            {index + 1}
+          </span>
+        </>
+      ),
+    },
   };
+  return (
+    <div className="py-10 flex justify-center">
+      <ExpandableToolbarButton {...props} />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/Input.mdx b/platform/docs/docs/component-library/components/Input.mdx
index 51dda1bfb..0f4cc543d 100644
--- a/platform/docs/docs/component-library/components/Input.mdx
+++ b/platform/docs/docs/component-library/components/Input.mdx
@@ -17,21 +17,19 @@ import { Input } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [inputValue, setInputValue] = React.useState('');
-    return (
-      <div className="p-4">
-        <Input
-          transparent
-          containerClassName="mb-3"
-          label="Label"
-          placeholder="With Label"
-        />
-        <Input placeholder="Without label" />
-      </div>
-    );
-  };
+function() {
+  const [inputValue, setInputValue] = React.useState('');
+  return (
+    <div className="p-4">
+      <Input
+        transparent
+        containerClassName="mb-3"
+        label="Label"
+        placeholder="With Label"
+      />
+      <Input placeholder="Without label" />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/InputDateRange.mdx b/platform/docs/docs/component-library/components/InputDateRange.mdx
index 5dd4510ed..f092591e4 100644
--- a/platform/docs/docs/component-library/components/InputDateRange.mdx
+++ b/platform/docs/docs/component-library/components/InputDateRange.mdx
@@ -19,24 +19,22 @@ import { InputDateRange } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [dates, setDates] = useState({
-      startDate: null,
-      endDate: null,
-    });
-    return (
-      <div className="p-4 flex flex-col items-center">
-        <div className="w-56">
-          <InputDateRange
-            label="Dates"
-            value={dates}
-            onChange={dates => setDates(dates)}
-          />
-        </div>
+function() {
+  const [dates, setDates] = useState({
+    startDate: null,
+    endDate: null,
+  });
+  return (
+    <div className="p-4 flex flex-col items-center">
+      <div className="w-56">
+        <InputDateRange
+          label="Dates"
+          value={dates}
+          onChange={dates => setDates(dates)}
+        />
       </div>
-    );
-  };
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/InputGroup.mdx b/platform/docs/docs/component-library/components/InputGroup.mdx
index 82c846286..e8a0b2f68 100644
--- a/platform/docs/docs/component-library/components/InputGroup.mdx
+++ b/platform/docs/docs/component-library/components/InputGroup.mdx
@@ -19,71 +19,69 @@ import { InputGroup } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [filterValues, setFilterValues] = useState({
-      patient: '',
-      studyDate: {
-        startDate: null,
-        endDate: null,
+function() {
+  const [filterValues, setFilterValues] = useState({
+    patient: '',
+    studyDate: {
+      startDate: null,
+      endDate: null,
+    },
+    modality: [],
+  });
+  const [filterSorting, setFilterSorting] = useState({
+    sortBy: '',
+    sortDirection: 'none',
+  });
+  const filtersMeta = [
+    {
+      name: 'patient',
+      displayName: 'Patient Name',
+      inputType: 'Text',
+      isSortable: true,
+      gridCol: 6,
+    },
+    {
+      name: 'studyDate',
+      displayName: 'Study date',
+      inputType: 'DateRange',
+      isSortable: true,
+      gridCol: 6,
+    },
+    {
+      name: 'modality',
+      displayName: 'Modality',
+      inputType: 'MultiSelect',
+      inputProps: {
+        options: [
+          { value: 'SEG', label: 'SEG' },
+          { value: 'CT', label: 'CT' },
+          { value: 'MR', label: 'MR' },
+          { value: 'SR', label: 'SR' },
+        ],
       },
-      modality: [],
-    });
-    const [filterSorting, setFilterSorting] = useState({
-      sortBy: '',
-      sortDirection: 'none',
-    });
-    const filtersMeta = [
-      {
-        name: 'patient',
-        displayName: 'Patient Name',
-        inputType: 'Text',
-        isSortable: true,
-        gridCol: 6,
-      },
-      {
-        name: 'studyDate',
-        displayName: 'Study date',
-        inputType: 'DateRange',
-        isSortable: true,
-        gridCol: 6,
-      },
-      {
-        name: 'modality',
-        displayName: 'Modality',
-        inputType: 'MultiSelect',
-        inputProps: {
-          options: [
-            { value: 'SEG', label: 'SEG' },
-            { value: 'CT', label: 'CT' },
-            { value: 'MR', label: 'MR' },
-            { value: 'SR', label: 'SR' },
-          ],
-        },
-        isSortable: true,
-        gridCol: 6,
-      },
-      {
-        name: 'numberOfInstance',
-        displayName: 'Number of Instances',
-        inputType: 'None',
-        isSortable: true,
-        gridCol: 6,
-      },
-    ];
-    return (
-      <div className="py-4">
-        <InputGroup
-          inputMeta={filtersMeta}
-          values={filterValues}
-          onValuesChange={setFilterValues}
-          sorting={filterSorting}
-          onSortingChange={setFilterSorting}
-          isSortingEnable={true}
-        />
-      </div>
-    );
-  };
+      isSortable: true,
+      gridCol: 6,
+    },
+    {
+      name: 'numberOfInstance',
+      displayName: 'Number of Instances',
+      inputType: 'None',
+      isSortable: true,
+      gridCol: 6,
+    },
+  ];
+  return (
+    <div className="py-4">
+      <InputGroup
+        inputMeta={filtersMeta}
+        values={filterValues}
+        onValuesChange={setFilterValues}
+        sorting={filterSorting}
+        onSortingChange={setFilterSorting}
+        isSortingEnable={true}
+      />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/InputMultiSelect.mdx b/platform/docs/docs/component-library/components/InputMultiSelect.mdx
index 151bb7b63..5f07acff9 100644
--- a/platform/docs/docs/component-library/components/InputMultiSelect.mdx
+++ b/platform/docs/docs/component-library/components/InputMultiSelect.mdx
@@ -19,29 +19,27 @@ import { InputMultiSelect } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [values, setValues] = useState([]);
-    return (
-      <div className="flex flex-col flex-1 p-4 items-center">
-        <div className="w-56">
-          <InputMultiSelect
-            label="Modality"
-            options={[
-              { value: 'SEG', label: 'SEG' },
-              { value: 'CT', label: 'CT' },
-              { value: 'MR', label: 'MR' },
-              { value: 'SR', label: 'SR' },
-            ]}
-            value={values}
-            onChange={values => {
-              setValues(values);
-            }}
-          />
-        </div>
+function() {
+  const [values, setValues] = useState([]);
+  return (
+    <div className="flex flex-col flex-1 p-4 items-center">
+      <div className="w-56">
+        <InputMultiSelect
+          label="Modality"
+          options={[
+            { value: 'SEG', label: 'SEG' },
+            { value: 'CT', label: 'CT' },
+            { value: 'MR', label: 'MR' },
+            { value: 'SR', label: 'SR' },
+          ]}
+          value={values}
+          onChange={values => {
+            setValues(values);
+          }}
+        />
       </div>
-    );
-  };
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/InputText.mdx b/platform/docs/docs/component-library/components/InputText.mdx
index 0f8ad99f4..c40df39fe 100644
--- a/platform/docs/docs/component-library/components/InputText.mdx
+++ b/platform/docs/docs/component-library/components/InputText.mdx
@@ -19,23 +19,21 @@ import { InputText } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [text, setText] = useState('');
-    return (
-      <div className="flex flex-col flex-1 p-4 items-center">
-        <div className="w-56">
-          <InputText
-            label="Name"
-            value={text}
-            onChange={value => {
-              setText(value);
-            }}
-          />
-        </div>
+function() {
+  const [text, setText] = useState('');
+  return (
+    <div className="flex flex-col flex-1 p-4 items-center">
+      <div className="w-56">
+        <InputText
+          label="Name"
+          value={text}
+          onChange={value => {
+            setText(value);
+          }}
+        />
       </div>
-    );
-  };
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/Label.mdx b/platform/docs/docs/component-library/components/Label.mdx
index 6481100b7..0cf065102 100644
--- a/platform/docs/docs/component-library/components/Label.mdx
+++ b/platform/docs/docs/component-library/components/Label.mdx
@@ -17,14 +17,12 @@ import { Label } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    return (
-      <div className="p-4">
-        <Label text="Label" />
-      </div>
-    );
-  };
+function() {
+  return (
+    <div className="p-4">
+      <Label text="Label" />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/ListMenu.mdx b/platform/docs/docs/component-library/components/ListMenu.mdx
index 2a3d647b8..b2332d0a5 100644
--- a/platform/docs/docs/component-library/components/ListMenu.mdx
+++ b/platform/docs/docs/component-library/components/ListMenu.mdx
@@ -19,62 +19,60 @@ import { ListMenu, ToolbarButton } from '@ohif/ui';
 ```
 
 ```jsx live
-{
-  () => {
-    return (
-      <ToolbarButton
-        items={[
-          {
-            value: 'windowLevelPreset1',
-            title: 'Soft tissue',
-            subtitle: '400 / 40',
-          },
-          {
-            value: 'windowLevelPreset2',
-            title: 'Lung',
-            subtitle: '1500 / -600',
-          },
-          { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
-          { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
-          {
-            value: 'windowLevelPreset5',
-            title: 'Brain',
-            subtitle: '2500 / 480',
-          },
-        ]}
-        renderer={({ title, subtitle, isActive, index }) => (
-          <>
-            <div>
-              <span
-                className={classnames(
-                  isActive ? 'text-black' : 'text-white',
-                  'mr-2 text-base'
-                )}
-              >
-                {title}
-              </span>
-              <span
-                className={classnames(
-                  isActive ? 'text-black' : 'text-aqua-pale',
-                  'font-thin text-sm'
-                )}
-              >
-                {subtitle}
-              </span>
-            </div>
+function() {
+  return (
+    <ToolbarButton
+      items={[
+        {
+          value: 'windowLevelPreset1',
+          title: 'Soft tissue',
+          subtitle: '400 / 40',
+        },
+        {
+          value: 'windowLevelPreset2',
+          title: 'Lung',
+          subtitle: '1500 / -600',
+        },
+        { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
+        { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
+        {
+          value: 'windowLevelPreset5',
+          title: 'Brain',
+          subtitle: '2500 / 480',
+        },
+      ]}
+      renderer={({ title, subtitle, isActive, index }) => (
+        <>
+          <div>
             <span
               className={classnames(
-                isActive ? 'text-black' : 'text-primary-active',
-                'text-sm'
+                isActive ? 'text-black' : 'text-white',
+                'mr-2 text-base'
               )}
             >
-              {index + 1}
+              {title}
             </span>
-          </>
-        )}
-      />
-    );
-  };
+            <span
+              className={classnames(
+                isActive ? 'text-black' : 'text-aqua-pale',
+                'font-thin text-sm'
+              )}
+            >
+              {subtitle}
+            </span>
+          </div>
+          <span
+            className={classnames(
+              isActive ? 'text-black' : 'text-primary-active',
+              'text-sm'
+            )}
+          >
+            {index + 1}
+          </span>
+        </>
+      )}
+    />
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/Notification.mdx b/platform/docs/docs/component-library/components/Notification.mdx
index 2bfa3275c..fae2b7284 100644
--- a/platform/docs/docs/component-library/components/Notification.mdx
+++ b/platform/docs/docs/component-library/components/Notification.mdx
@@ -20,37 +20,35 @@ import { Notification } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    return (
-      <div className="p-4 w-full lg:w-2/3">
-        <Notification
-          message="Track all measurement for this series?"
-          type="info"
-          actions={[
-            {
-              type: 'cancel',
-              text: 'No',
-              value: 0,
-            },
-            {
-              type: 'secondary',
-              text: 'No, do not ask again',
-              value: -1,
-            },
-            {
-              type: 'primary',
-              text: 'Yes',
-              value: 1,
-            },
-          ]}
-          onSubmit={value => {
-            window.alert(value);
-          }}
-        />
-      </div>
-    );
-  };
+function() {
+  return (
+    <div className="p-4 w-full lg:w-2/3">
+      <Notification
+        message="Track all measurement for this series?"
+        type="info"
+        actions={[
+          {
+            type: 'cancel',
+            text: 'No',
+            value: 0,
+          },
+          {
+            type: 'secondary',
+            text: 'No, do not ask again',
+            value: -1,
+          },
+          {
+            type: 'primary',
+            text: 'Yes',
+            value: 1,
+          },
+        ]}
+        onSubmit={value => {
+          window.alert(value);
+        }}
+      />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/SegmentationTable.mdx b/platform/docs/docs/component-library/components/SegmentationTable.mdx
index 7aa9b66f3..95aa35e75 100644
--- a/platform/docs/docs/component-library/components/SegmentationTable.mdx
+++ b/platform/docs/docs/component-library/components/SegmentationTable.mdx
@@ -17,19 +17,17 @@ import { SegmentationTable } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const tableData = {
-      title: 'Segments',
-      amount: 12,
-      data: new Array(12).fill(''),
-    };
-    return (
-      <div className="p-4 w-80">
-        <SegmentationTable {...tableData} />
-      </div>
-    );
+function() {
+  const tableData = {
+    title: 'Segments',
+    amount: 12,
+    data: new Array(12).fill(''),
   };
+  return (
+    <div className="p-4 w-80">
+      <SegmentationTable {...tableData} />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/SplitButton.mdx b/platform/docs/docs/component-library/components/SplitButton.mdx
index 683d325bb..3aa62fa15 100644
--- a/platform/docs/docs/component-library/components/SplitButton.mdx
+++ b/platform/docs/docs/component-library/components/SplitButton.mdx
@@ -19,68 +19,66 @@ import { SplitButton, WindowLevelMenuItem } from '@ohif/ui';
 ```
 
 ```jsx live
-{
-  () => {
-    const mockedProps = {
-      bState: {
-        primaryToolId: 'WWWC',
-        toggles: {},
+function() {
+  const mockedProps = {
+    bState: {
+      primaryToolId: 'WWWC',
+      toggles: {},
+    },
+    primary: {
+      tooltip: 'W/L',
+      type: 'tool',
+      icon: 'tool-window-level',
+      onClick: args => console.debug('Primary click!', args),
+    },
+    secondary: {
+      icon: 'chevron-down',
+      label: '',
+      isActive: true,
+      tooltip: 'More Measure Tools',
+    },
+    items: [
+      {
+        id: '1',
+        icon: 'tool-layout',
+        label: 'Layout',
+        onClick: args => console.debug('Item click!', args),
       },
-      primary: {
-        tooltip: 'W/L',
-        type: 'tool',
+      {
+        id: '2',
         icon: 'tool-window-level',
-        onClick: args => console.debug('Primary click!', args),
+        label: 'W/L',
+        onClick: args => console.debug('Item click!', args),
       },
-      secondary: {
-        icon: 'chevron-down',
-        label: '',
-        isActive: true,
-        tooltip: 'More Measure Tools',
+      {
+        id: '3',
+        icon: 'tool-length',
+        label: 'Length',
+        onClick: args => console.debug('Item click!', args),
       },
-      items: [
-        {
-          id: '1',
-          icon: 'tool-layout',
-          label: 'Layout',
-          onClick: args => console.debug('Item click!', args),
-        },
-        {
-          id: '2',
-          icon: 'tool-window-level',
-          label: 'W/L',
-          onClick: args => console.debug('Item click!', args),
-        },
-        {
-          id: '3',
-          icon: 'tool-length',
-          label: 'Length',
-          onClick: args => console.debug('Item click!', args),
-        },
-      ],
-      onClick: args => console.debug('Any click!', args),
-    };
-    return (
-      <div className="mb-2">
-        <div className="flex flex-row w-full justify-center items-center bg-secondary-dark">
-          <SplitButton {...mockedProps} isRadio />
-          <SplitButton
-            {...mockedProps}
-            isAction
-            renderer={WindowLevelMenuItem}
-            items={[
-              { id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
-              { id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
-              { id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
-              { id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
-              { id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
-            ]}
-          />
-          <SplitButton {...mockedProps} />
-        </div>
-      </div>
-    );
+    ],
+    onClick: args => console.debug('Any click!', args),
   };
+  return (
+    <div className="mb-2">
+      <div className="flex flex-row w-full justify-center items-center bg-secondary-dark">
+        <SplitButton {...mockedProps} isRadio />
+        <SplitButton
+          {...mockedProps}
+          isAction
+          renderer={WindowLevelMenuItem}
+          items={[
+            { id: '1', value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
+            { id: '2', value: 2, title: 'Lung', subtitle: '1500 / -600' },
+            { id: '3', value: 3, title: 'Liver', subtitle: '150 / 90' },
+            { id: '4', value: 4, title: 'Bone', subtitle: '80 / 40' },
+            { id: '5', value: 5, title: 'Brain', subtitle: '2500 / 480' },
+          ]}
+        />
+        <SplitButton {...mockedProps} />
+      </div>
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/StudyBrowser.mdx b/platform/docs/docs/component-library/components/StudyBrowser.mdx
index e452e9698..64315a9a1 100644
--- a/platform/docs/docs/component-library/components/StudyBrowser.mdx
+++ b/platform/docs/docs/component-library/components/StudyBrowser.mdx
@@ -17,93 +17,91 @@ import { StudyBrowser } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const studyWithSR = {
-      studyInstanceUid: '1',
-      date: '07-Sept-2010',
-      description: 'CHEST/ABD/PELVIS W/CONTRAST',
-      numInstances: 902,
-      modalities: 'CT,SR',
-      displaySets: [
-        {
-          displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
-          description: 'Multiple line image series description lorem sit',
-          seriesNumber: 1,
-          numInstances: 68,
-          componentType: 'thumbnailTracked',
-          viewportIdentificator: 'A',
-          isTracked: true,
-        },
-        {
-          displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
-          description: 'Multiple line image series description lorem sit',
-          seriesNumber: 1,
-          numInstances: 68,
-          componentType: 'thumbnailTracked',
-          viewportIdentificator: 'B',
-        },
-        {
-          displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
-          description: 'Multiple line image series description lorem sit',
-          seriesNumber: 1,
-          numInstances: 68,
-          componentType: 'thumbnailTracked',
-        },
-        {
-          displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
-          description: 'Multiple line description lorem ipsum dolor sit amet',
-          modality: 'SR',
-          componentType: 'thumbnailNoImage',
-          seriesDate: '07-Sept-2010',
-        },
-      ],
-    };
-    const studySimple = {
-      studyInstanceUid: '2',
-      date: '07-Sept-2010',
-      description: 'CHEST/ABD/PELVIS W/CONTRAST',
-      numInstances: 902,
-      modalities: 'CT',
-      displaySets: [
-        {
-          displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
-          description: 'Multiple line image series description lorem sit',
-          seriesNumber: 1,
-          numInstances: 68,
-          componentType: 'thumbnailTracked',
-        },
-      ],
-    };
-    const tabs = [
+function() {
+  const studyWithSR = {
+    studyInstanceUid: '1',
+    date: '07-Sept-2010',
+    description: 'CHEST/ABD/PELVIS W/CONTRAST',
+    numInstances: 902,
+    modalities: 'CT,SR',
+    displaySets: [
       {
-        name: 'primary',
-        label: 'Primary',
-        studies: [studySimple],
+        displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+        description: 'Multiple line image series description lorem sit',
+        seriesNumber: 1,
+        numInstances: 68,
+        componentType: 'thumbnailTracked',
+        viewportIdentificator: 'A',
+        isTracked: true,
       },
       {
-        name: 'recent',
-        label: 'Recent',
-        studies: [studyWithSR, studySimple],
+        displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+        description: 'Multiple line image series description lorem sit',
+        seriesNumber: 1,
+        numInstances: 68,
+        componentType: 'thumbnailTracked',
+        viewportIdentificator: 'B',
       },
       {
-        name: 'all',
-        label: 'All',
-        studies: [studySimple, studyWithSR],
+        displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+        description: 'Multiple line image series description lorem sit',
+        seriesNumber: 1,
+        numInstances: 68,
+        componentType: 'thumbnailTracked',
       },
-    ];
-    return (
-      <div className="flex flex-1" style={{ height: '400px' }}>
-        <div className="overflow-hidden w-64">
-          <StudyBrowser
-            tabs={tabs}
-            activeTabName="primary"
-            expandedStudyInstanceUIDs={[]}
-          />
-        </div>
-      </div>
-    );
+      {
+        displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
+        description: 'Multiple line description lorem ipsum dolor sit amet',
+        modality: 'SR',
+        componentType: 'thumbnailNoImage',
+        seriesDate: '07-Sept-2010',
+      },
+    ],
   };
+  const studySimple = {
+    studyInstanceUid: '2',
+    date: '07-Sept-2010',
+    description: 'CHEST/ABD/PELVIS W/CONTRAST',
+    numInstances: 902,
+    modalities: 'CT',
+    displaySets: [
+      {
+        displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+        description: 'Multiple line image series description lorem sit',
+        seriesNumber: 1,
+        numInstances: 68,
+        componentType: 'thumbnailTracked',
+      },
+    ],
+  };
+  const tabs = [
+    {
+      name: 'primary',
+      label: 'Primary',
+      studies: [studySimple],
+    },
+    {
+      name: 'recent',
+      label: 'Recent',
+      studies: [studyWithSR, studySimple],
+    },
+    {
+      name: 'all',
+      label: 'All',
+      studies: [studySimple, studyWithSR],
+    },
+  ];
+  return (
+    <div className="flex flex-1" style={{ height: '400px' }}>
+      <div className="overflow-hidden w-64">
+        <StudyBrowser
+          tabs={tabs}
+          activeTabName="primary"
+          expandedStudyInstanceUIDs={[]}
+        />
+      </div>
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/StudyItem.mdx b/platform/docs/docs/component-library/components/StudyItem.mdx
index 4affc01fd..2a67a5468 100644
--- a/platform/docs/docs/component-library/components/StudyItem.mdx
+++ b/platform/docs/docs/component-library/components/StudyItem.mdx
@@ -21,25 +21,23 @@ import { StudyItem } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [studyActive, setStudyActive] = useState(null);
-    return (
-      <div className="flex flex-1 items-center justify-center p-4">
-        <div className="w-56">
-          <StudyItem
-            studyInstanceUid="1"
-            date="07-Sept-2010"
-            description="CHEST/ABD/PELVIS W/CONTRAST"
-            numInstances={902}
-            modalities="CT,SR"
-            isActive={studyActive}
-            onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
-          />
-        </div>
+function() {
+  const [studyActive, setStudyActive] = useState(null);
+  return (
+    <div className="flex flex-1 items-center justify-center p-4">
+      <div className="w-56">
+        <StudyItem
+          studyInstanceUid="1"
+          date="07-Sept-2010"
+          description="CHEST/ABD/PELVIS W/CONTRAST"
+          numInstances={902}
+          modalities="CT,SR"
+          isActive={studyActive}
+          onClick={() => setStudyActive(studyActive === '1' ? null : '1')}
+        />
       </div>
-    );
-  };
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/StudyListFilter.mdx b/platform/docs/docs/component-library/components/StudyListFilter.mdx
index 0561f7e47..f9d3d257e 100644
--- a/platform/docs/docs/component-library/components/StudyListFilter.mdx
+++ b/platform/docs/docs/component-library/components/StudyListFilter.mdx
@@ -20,101 +20,99 @@ import { StudyListFilter, ModalProvider, Modal } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const defaultFilterValues = {
-      patientName: '',
-      mrn: '',
-      studyDate: {
-        startDate: null,
-        endDate: null,
-      },
-      description: '',
-      modality: undefined,
-      accession: '',
-      sortBy: '',
-      sortDirection: 'none',
-      page: 0,
-      resultsPerPage: 25,
-    };
-    const [filterValues, setFilterValues] = useState(defaultFilterValues);
-    const filtersMeta = [
-      {
-        name: 'patientName',
-        displayName: 'Patient Name',
-        inputType: 'Text',
-        isSortable: true,
-        gridCol: 4,
-      },
-      {
-        name: 'mrn',
-        displayName: 'MRN',
-        inputType: 'Text',
-        isSortable: true,
-        gridCol: 2,
-      },
-      {
-        name: 'studyDate',
-        displayName: 'Study date',
-        inputType: 'DateRange',
-        isSortable: true,
-        gridCol: 5,
-      },
-      {
-        name: 'description',
-        displayName: 'Description',
-        inputType: 'Text',
-        isSortable: true,
-        gridCol: 4,
-      },
-      {
-        name: 'modality',
-        displayName: 'Modality',
-        inputType: 'MultiSelect',
-        inputProps: {
-          options: [
-            { value: 'SEG', label: 'SEG' },
-            { value: 'CT', label: 'CT' },
-            { value: 'MR', label: 'MR' },
-            { value: 'SR', label: 'SR' },
-          ],
-        },
-        isSortable: true,
-        gridCol: 3,
-      },
-      {
-        name: 'accession',
-        displayName: 'Accession',
-        inputType: 'Text',
-        isSortable: true,
-        gridCol: 4,
-      },
-      {
-        name: 'instances',
-        displayName: 'Instances',
-        inputType: 'None',
-        isSortable: true,
-        gridCol: 2,
-      },
-    ];
-    const isFiltering = (filterValues, defaultFilterValues) => {
-      return Object.keys(defaultFilterValues).some(name => {
-        return filterValues[name] !== defaultFilterValues[name];
-      });
-    };
-    return (
-      <ModalProvider modal={Modal}>
-        <StudyListFilter
-          numOfStudies={100}
-          filtersMeta={filtersMeta}
-          filterValues={filterValues}
-          onChange={setFilterValues}
-          clearFilters={() => setFilterValues(defaultFilterValues)}
-          isFiltering={isFiltering(filterValues, defaultFilterValues)}
-        />
-      </ModalProvider>
-    );
+function() {
+  const defaultFilterValues = {
+    patientName: '',
+    mrn: '',
+    studyDate: {
+      startDate: null,
+      endDate: null,
+    },
+    description: '',
+    modality: undefined,
+    accession: '',
+    sortBy: '',
+    sortDirection: 'none',
+    page: 0,
+    resultsPerPage: 25,
   };
+  const [filterValues, setFilterValues] = useState(defaultFilterValues);
+  const filtersMeta = [
+    {
+      name: 'patientName',
+      displayName: 'Patient Name',
+      inputType: 'Text',
+      isSortable: true,
+      gridCol: 4,
+    },
+    {
+      name: 'mrn',
+      displayName: 'MRN',
+      inputType: 'Text',
+      isSortable: true,
+      gridCol: 2,
+    },
+    {
+      name: 'studyDate',
+      displayName: 'Study date',
+      inputType: 'DateRange',
+      isSortable: true,
+      gridCol: 5,
+    },
+    {
+      name: 'description',
+      displayName: 'Description',
+      inputType: 'Text',
+      isSortable: true,
+      gridCol: 4,
+    },
+    {
+      name: 'modality',
+      displayName: 'Modality',
+      inputType: 'MultiSelect',
+      inputProps: {
+        options: [
+          { value: 'SEG', label: 'SEG' },
+          { value: 'CT', label: 'CT' },
+          { value: 'MR', label: 'MR' },
+          { value: 'SR', label: 'SR' },
+        ],
+      },
+      isSortable: true,
+      gridCol: 3,
+    },
+    {
+      name: 'accession',
+      displayName: 'Accession',
+      inputType: 'Text',
+      isSortable: true,
+      gridCol: 4,
+    },
+    {
+      name: 'instances',
+      displayName: 'Instances',
+      inputType: 'None',
+      isSortable: true,
+      gridCol: 2,
+    },
+  ];
+  const isFiltering = (filterValues, defaultFilterValues) => {
+    return Object.keys(defaultFilterValues).some(name => {
+      return filterValues[name] !== defaultFilterValues[name];
+    });
+  };
+  return (
+    <ModalProvider modal={Modal}>
+      <StudyListFilter
+        numOfStudies={100}
+        filtersMeta={filtersMeta}
+        filterValues={filterValues}
+        onChange={setFilterValues}
+        clearFilters={() => setFilterValues(defaultFilterValues)}
+        isFiltering={isFiltering(filterValues, defaultFilterValues)}
+      />
+    </ModalProvider>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/StudyListPagination.mdx b/platform/docs/docs/component-library/components/StudyListPagination.mdx
index 6949abc2e..568065628 100644
--- a/platform/docs/docs/component-library/components/StudyListPagination.mdx
+++ b/platform/docs/docs/component-library/components/StudyListPagination.mdx
@@ -19,26 +19,24 @@ import { StudyListPagination } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const [currentPage, setCurrentPage] = useState(1);
-    const [perPage, setPerPage] = useState(25);
-    const onChangePage = page => {
-      setCurrentPage(page);
-    };
-    const onChangePerPage = perPage => {
-      setPerPage(perPage);
-      setCurrentPage(1);
-    };
-    return (
-      <StudyListPagination
-        onChangePage={onChangePage}
-        onChangePerPage={onChangePerPage}
-        currentPage={currentPage}
-        perPage={perPage}
-      />
-    );
+function() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [perPage, setPerPage] = useState(25);
+  const onChangePage = page => {
+    setCurrentPage(page);
   };
+  const onChangePerPage = perPage => {
+    setPerPage(perPage);
+    setCurrentPage(1);
+  };
+  return (
+    <StudyListPagination
+      onChangePage={onChangePage}
+      onChangePerPage={onChangePerPage}
+      currentPage={currentPage}
+      perPage={perPage}
+    />
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/StudyListTable.mdx b/platform/docs/docs/component-library/components/StudyListTable.mdx
index 53bbb49c1..d7777b73f 100644
--- a/platform/docs/docs/component-library/components/StudyListTable.mdx
+++ b/platform/docs/docs/component-library/components/StudyListTable.mdx
@@ -21,41 +21,39 @@ import { StudyListTable } from '@ohif/ui';
 ## Basic usage
 
 ```jsx live
-{
-  () => {
-    const studies = new Array(10).fill('');
-    const [expandedRows, setExpandedRows] = useState([]);
-    const tableDataSource = studies.map((study, key) => {
-      const rowKey = key + 1;
-      const isExpanded = expandedRows.some(k => k === rowKey);
-      return {
-        row: [
-          { key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
-          { key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
-          { key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
-          { key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
-        ],
-        expandedContent: (
-          <td className="w-full p-8">
-            Custom expanded content for row {rowKey}
-          </td>
+function() {
+  const studies = new Array(10).fill('');
+  const [expandedRows, setExpandedRows] = useState([]);
+  const tableDataSource = studies.map((study, key) => {
+    const rowKey = key + 1;
+    const isExpanded = expandedRows.some(k => k === rowKey);
+    return {
+      row: [
+        { key: 'Cell 01', content: 'Cell 01', gridCol: 2 },
+        { key: 'Cell 02', content: 'Cell 02', gridCol: 4 },
+        { key: 'Cell 03', content: 'Cell 03', gridCol: 4 },
+        { key: 'Cell 04', content: 'Cell 04', gridCol: 4 },
+      ],
+      expandedContent: (
+        <td className="w-full p-8">
+          Custom expanded content for row {rowKey}
+        </td>
+      ),
+      onClickRow: () =>
+        setExpandedRows(rows =>
+          isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
         ),
-        onClickRow: () =>
-          setExpandedRows(rows =>
-            isExpanded ? rows.filter(n => rowKey !== n) : [...rows, rowKey]
-          ),
-        isExpanded,
-      };
-    });
-    return (
-      <div className="py-4">
-        <StudyListTable
-          tableDataSource={tableDataSource}
-          numOfStudies={studies.length}
-        />
-      </div>
-    );
-  };
+      isExpanded,
+    };
+  });
+  return (
+    <div className="py-4">
+      <StudyListTable
+        tableDataSource={tableDataSource}
+        numOfStudies={studies.length}
+      />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx b/platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx
index 51c93c77c..d4c74e21c 100644
--- a/platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx
+++ b/platform/docs/docs/component-library/components/WindowLevelMenuItem.mdx
@@ -19,14 +19,12 @@ import { WindowLevelMenuItem, ListMenu } from '@ohif/ui';
 ```
 
 ```jsx live
-{
-  () => {
-    return (
-      <div className="py-10 flex justify-center">
-        <ListMenu renderer={WindowLevelMenuItem} items={[]} />
-      </div>
-    );
-  };
+function() {
+  return (
+    <div className="py-10 flex justify-center">
+      <ListMenu renderer={WindowLevelMenuItem} items={[]} />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx b/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
index 828c33cc0..2ed44fbe6 100644
--- a/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
+++ b/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
@@ -55,13 +55,15 @@ component across all application.
       );
     };
     const ViewportActionButtons = () => {
-    const [dialogState, dialogApi] = useViewportDialog();
-      return (
-        <Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
-          Open Dialog
-        </Button>
-      );
-    };
+      const [dialogState, dialogApi] = useViewportDialog();
+        return (
+          <Button onClick={() => dialogApi.show({ content: ViewportNotification })}>
+            Open Dialog
+          </Button>
+        );
+      };
+    }
+
     return (
       <div className="w-full flex flex-row p-4" style={{height: '400px'}}>
         <div className="flex flex-1 items-center justify-center h-full w-full bg-black text-white border border-primary-main">