From 7a79e42929ccf01d29449f1167e95806ba0bf376 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Wed, 14 Jul 2021 00:15:02 +0200
Subject: [PATCH] fixes for jsx live blocks

---
 .../component-library/components/Button.mdx   | 687 ++++++++----------
 .../components/ButtonGroup.mdx                | 140 ++--
 .../components/DateRange.mdx                  |  34 +-
 .../components/ErrorBoundary.mdx              |   8 +-
 .../components/MeasurementTable.mdx           |  56 +-
 .../component-library/components/Select.mdx   |  50 +-
 .../components/SidePanel.mdx                  |  94 +--
 .../components/ToolbarButton.mdx              |  15 +-
 .../components/Typography.mdx                 |  64 +-
 .../components/ViewportActionBar.mdx          | 204 +++---
 .../ViewportDialogProvider.mdx                |   6 +-
 .../docs/component-library/pages/Colors.mdx   |  18 +-
 12 files changed, 657 insertions(+), 719 deletions(-)

diff --git a/platform/docs/docs/component-library/components/Button.mdx b/platform/docs/docs/component-library/components/Button.mdx
index f531ec03f..a0832304f 100644
--- a/platform/docs/docs/component-library/components/Button.mdx
+++ b/platform/docs/docs/component-library/components/Button.mdx
@@ -18,318 +18,247 @@ import { Button } from '@ohif/ui';
 
 ## Outlined Buttons
 
-````jsx live
-  <div className="p-4">
-    <Button variant="outlined" className="m-1">
-      Default
-    </Button>
-    <Button variant="outlined" color="primary" className="m-1">
-      Primary
-    </Button>
-    <Button variant="outlined" color="secondary" className="m-1">
-      Secondary
-    </Button>
-    <Button variant="outlined" color="white" className="m-1">
-      White
-    </Button>
-  </div>
+```jsx live
+<div className="p-4">
+  <Button variant="outlined" className="m-1">
+    Default
+  </Button>
+  <Button variant="outlined" color="primary" className="m-1">
+    Primary
+  </Button>
+  <Button variant="outlined" color="secondary" className="m-1">
+    Secondary
+  </Button>
+  <Button variant="outlined" color="white" className="m-1">
+    White
+  </Button>
+</div>
 ```
 
 ## Contained Buttons
 
 ```jsx live
-  <div className="p-4">
-    <Button variant="contained" className="m-1">
-      Default
-    </Button>
-    <Button variant="contained" color="primary" className="m-1">
-      Primary
-    </Button>
-    <Button variant="contained" color="secondary" className="m-1">
-      Secondary
-    </Button>
-    <Button variant="contained" color="white" className="m-1">
-      White
-    </Button>
-  </div>
+<div className="p-4">
+  <Button variant="contained" className="m-1">
+    Default
+  </Button>
+  <Button variant="contained" color="primary" className="m-1">
+    Primary
+  </Button>
+  <Button variant="contained" color="secondary" className="m-1">
+    Secondary
+  </Button>
+  <Button variant="contained" color="white" className="m-1">
+    White
+  </Button>
+</div>
 ```
 
 ## Text Buttons
 
 ```jsx live
-  <div className="p-4">
-    <Button variant="text" className="m-1">
-      Default
-    </Button>
-    <Button variant="text" color="primary" className="m-1">
-      Primary
-    </Button>
-    <Button variant="text" color="secondary" className="m-1">
-      Secondary
-    </Button>
-    <Button variant="text" color="white" className="m-1">
-      White
-    </Button>
-  </div>
+<div className="p-4">
+  <Button variant="text" className="m-1">
+    Default
+  </Button>
+  <Button variant="text" color="primary" className="m-1">
+    Primary
+  </Button>
+  <Button variant="text" color="secondary" className="m-1">
+    Secondary
+  </Button>
+  <Button variant="text" color="white" className="m-1">
+    White
+  </Button>
+</div>
 ```
 
 ## Rounded Buttons
 
 ```jsx live
-  <div className="p-4">
-    <div className="mb-2">
-      <Button variant="contained" rounded="none" className="m-1">
-        Non Rounded
-      </Button>
-      <Button variant="contained" rounded="small" className="m-1">
-        Small Rounded
-      </Button>
-      <Button variant="contained" rounded="medium" className="m-1">
-        Medium Rounded
-      </Button>
-      <Button variant="contained" rounded="large" className="m-1">
-        Large Rounded
-      </Button>
-      <Button variant="contained" rounded="full" className="m-1">
-        Full Rounded
-      </Button>
-    </div>
-    <div className="mb-2">
-      <Button
-        variant="contained"
-        rounded="none"
-        color="primary"
-        className="m-1"
-      >
-        Non Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="small"
-        color="primary"
-        className="m-1"
-      >
-        Small Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="primary"
-        className="m-1"
-      >
-        Medium Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="large"
-        color="primary"
-        className="m-1"
-      >
-        Large Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="full"
-        color="primary"
-        className="m-1"
-      >
-        Full Rounded
-      </Button>
-    </div>
-    <div className="mb-2">
-      <Button
-        variant="contained"
-        rounded="none"
-        color="secondary"
-        className="m-1"
-      >
-        Non Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="small"
-        color="secondary"
-        className="m-1"
-      >
-        Small Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="secondary"
-        className="m-1"
-      >
-        Medium Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="large"
-        color="secondary"
-        className="m-1"
-      >
-        Large Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="full"
-        color="secondary"
-        className="m-1"
-      >
-        Full Rounded
-      </Button>
-    </div>
-    <div className="mb-2">
-      <Button variant="contained" rounded="none" color="white" className="m-1">
-        Non Rounded
-      </Button>
-      <Button variant="contained" rounded="small" color="white" className="m-1">
-        Small Rounded
-      </Button>
-      <Button
-        variant="contained"
-        rounded="medium"
-        color="white"
-        className="m-1"
-      >
-        Medium Rounded
-      </Button>
-      <Button variant="contained" rounded="large" color="white" className="m-1">
-        Large Rounded
-      </Button>
-      <Button variant="contained" rounded="full" color="white" className="m-1">
-        Full Rounded
-      </Button>
-    </div>
+<div className="p-4">
+  <div className="mb-2">
+    <Button variant="contained" rounded="none" className="m-1">
+      Non Rounded
+    </Button>
+    <Button variant="contained" rounded="small" className="m-1">
+      Small Rounded
+    </Button>
+    <Button variant="contained" rounded="medium" className="m-1">
+      Medium Rounded
+    </Button>
+    <Button variant="contained" rounded="large" className="m-1">
+      Large Rounded
+    </Button>
+    <Button variant="contained" rounded="full" className="m-1">
+      Full Rounded
+    </Button>
   </div>
+  <div className="mb-2">
+    <Button variant="contained" rounded="none" color="primary" className="m-1">
+      Non Rounded
+    </Button>
+    <Button variant="contained" rounded="small" color="primary" className="m-1">
+      Small Rounded
+    </Button>
+    <Button
+      variant="contained"
+      rounded="medium"
+      color="primary"
+      className="m-1"
+    >
+      Medium Rounded
+    </Button>
+    <Button variant="contained" rounded="large" color="primary" className="m-1">
+      Large Rounded
+    </Button>
+    <Button variant="contained" rounded="full" color="primary" className="m-1">
+      Full Rounded
+    </Button>
+  </div>
+  <div className="mb-2">
+    <Button
+      variant="contained"
+      rounded="none"
+      color="secondary"
+      className="m-1"
+    >
+      Non Rounded
+    </Button>
+    <Button
+      variant="contained"
+      rounded="small"
+      color="secondary"
+      className="m-1"
+    >
+      Small Rounded
+    </Button>
+    <Button
+      variant="contained"
+      rounded="medium"
+      color="secondary"
+      className="m-1"
+    >
+      Medium Rounded
+    </Button>
+    <Button
+      variant="contained"
+      rounded="large"
+      color="secondary"
+      className="m-1"
+    >
+      Large Rounded
+    </Button>
+    <Button
+      variant="contained"
+      rounded="full"
+      color="secondary"
+      className="m-1"
+    >
+      Full Rounded
+    </Button>
+  </div>
+  <div className="mb-2">
+    <Button variant="contained" rounded="none" color="white" className="m-1">
+      Non Rounded
+    </Button>
+    <Button variant="contained" rounded="small" color="white" className="m-1">
+      Small Rounded
+    </Button>
+    <Button variant="contained" rounded="medium" color="white" className="m-1">
+      Medium Rounded
+    </Button>
+    <Button variant="contained" rounded="large" color="white" className="m-1">
+      Large Rounded
+    </Button>
+    <Button variant="contained" rounded="full" color="white" className="m-1">
+      Full Rounded
+    </Button>
+  </div>
+</div>
 ```
 
 ## Sizes
 
 ```jsx live
-  <div className="p-4">
-    <div>
-      <Button variant="contained" size="small" className="m-1">
-        Small
-      </Button>
-      <Button variant="contained" size="medium" className="m-1">
-        Medium
-      </Button>
-      <Button variant="contained" size="large" className="m-1">
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        className="m-1"
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="primary"
-        className="m-1"
-      >
-        Medium
-      </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="primary"
-        className="m-1"
-      >
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="secondary"
-        className="m-1"
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="secondary"
-        className="m-1"
-      >
-        Medium
-      </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="secondary"
-        className="m-1"
-      >
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button
-        variant="contained"
-        size="small"
-        color="white"
-        className="m-1"
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="white"
-        className="m-1"
-      >
-        Medium
-      </Button>
-      <Button
-        variant="contained"
-        size="large"
-        color="white"
-        className="m-1"
-      >
-        Large
-      </Button>
-    </div>
-
+<div className="p-4">
+  <div>
+    <Button variant="contained" size="small" className="m-1">
+      Small
+    </Button>
+    <Button variant="contained" size="medium" className="m-1">
+      Medium
+    </Button>
+    <Button variant="contained" size="large" className="m-1">
+      Large
+    </Button>
+  </div>
+  <div>
+    <Button variant="contained" size="small" color="primary" className="m-1">
+      Small
+    </Button>
+    <Button variant="contained" size="medium" color="primary" className="m-1">
+      Medium
+    </Button>
+    <Button variant="contained" size="large" color="primary" className="m-1">
+      Large
+    </Button>
+  </div>
+  <div>
+    <Button variant="contained" size="small" color="secondary" className="m-1">
+      Small
+    </Button>
+    <Button variant="contained" size="medium" color="secondary" className="m-1">
+      Medium
+    </Button>
+    <Button variant="contained" size="large" color="secondary" className="m-1">
+      Large
+    </Button>
+  </div>
+  <div>
+    <Button variant="contained" size="small" color="white" className="m-1">
+      Small
+    </Button>
+    <Button variant="contained" size="medium" color="white" className="m-1">
+      Medium
+    </Button>
+    <Button variant="contained" size="large" color="white" className="m-1">
+      Large
+    </Button>
+  </div>
 </div>
 ```
 
 ## Buttons with icons
 
 ```jsx live
-  <div className="p-4 flex">
-    <Button
-      variant="contained"
-      color="primary"
-      className="m-1"
-      startIcon={<Icon name="settings" />}
-    >
-      Settings
-    </Button>
-    <Button
-      variant="contained"
-      color="primary"
-      className="m-1"
-      endIcon={<Icon name="settings" />}
-    >
-      Download
-    </Button>
-    <Button
-      variant="outlined"
-      rounded="full"
-      color="default"
-      className="m-1"
-      endIcon={<Icon name="settings" />}
-    >
-      Download
-    </Button>
-  </div>
+<div className="p-4 flex">
+  <Button
+    variant="contained"
+    color="primary"
+    className="m-1"
+    startIcon={<Icon name="settings" />}
+  >
+    Settings
+  </Button>
+  <Button
+    variant="contained"
+    color="primary"
+    className="m-1"
+    endIcon={<Icon name="settings" />}
+  >
+    Download
+  </Button>
+  <Button
+    variant="outlined"
+    rounded="full"
+    color="default"
+    className="m-1"
+    endIcon={<Icon name="settings" />}
+  >
+    Download
+  </Button>
+</div>
 ```
 
 ## Icon Buttons
@@ -338,104 +267,104 @@ Icon buttons are generally used in toolbars.
 
 ```javascript
 import { IconButton } from '@ohif/ui';
-````
-
-````jsx live
-  <div className="p-4 flex flex-col items-center">
-    <div className="">
-      <IconButton className="m-2">
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton className="m-2" variant="text">
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton className="m-2" variant="outlined">
-        <Icon name="settings" />
-      </IconButton>
-    </div>
-    <div>
-      <IconButton className="m-2" color="primary">
-        <Icon name="launch-arrow" />
-      </IconButton>
-      <IconButton className="m-2" color="primary" variant="text">
-        <Icon name="launch-arrow" />
-      </IconButton>
-      <IconButton className="m-2" color="primary" variant="outlined">
-        <Icon name="launch-arrow" />
-      </IconButton>
-    </div>
-    <div>
-      <IconButton className="m-2" color="secondary">
-        <Icon name="cancel" />
-      </IconButton>
-      <IconButton className="m-2" color="secondary" variant="text">
-        <Icon name="cancel" />
-      </IconButton>
-      <IconButton className="m-2" color="secondary" variant="outlined">
-        <Icon name="cancel" />
-      </IconButton>
-    </div>
-    <div>
-      <IconButton className="m-2" color="white">
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton className="m-2" variant="text" color="white">
-        <Icon name="launch-arrow" />
-      </IconButton>
-      <IconButton className="m-2" variant="outlined" color="white">
-        <Icon name="cancel" />
-      </IconButton>
-    </div>
-  </div>
 ```
 
 ```jsx live
-  <div className="p-4">
-    <div className="">
-      <IconButton className="m-2">
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton className="m-2" variant="outlined">
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton className="m-2" variant="text">
-        <Icon name="settings" />
-      </IconButton>
-    </div>
-    <div>
-      <IconButton className="m-2" color="primary">
-        <Icon name="launch-arrow" />
-      </IconButton>
-      <IconButton className="m-2" color="primary" variant="text">
-        <Icon name="launch-arrow" />
-      </IconButton>
-      <IconButton className="m-2" color="primary" variant="outlined">
-        <Icon name="launch-arrow" />
-      </IconButton>
-    </div>
-    <div>
-      <IconButton className="m-2" color="secondary">
-        <Icon name="cancel" />
-      </IconButton>
-      <IconButton className="m-2" color="secondary" variant="text">
-        <Icon name="cancel" />
-      </IconButton>
-      <IconButton className="m-2" color="secondary" variant="outlined">
-        <Icon name="cancel" />
-      </IconButton>
-    </div>
-    <div>
-      <IconButton className="m-2" color="white">
-        <Icon name="settings" />
-      </IconButton>
-      <IconButton className="m-2" variant="text" color="white">
-        <Icon name="launch-arrow" />
-      </IconButton>
-      <IconButton className="m-2" variant="outlined" color="white">
-        <Icon name="cancel" />
-      </IconButton>
-    </div>
+<div className="p-4 flex flex-col items-center">
+  <div className="">
+    <IconButton className="m-2">
+      <Icon name="settings" />
+    </IconButton>
+    <IconButton className="m-2" variant="text">
+      <Icon name="settings" />
+    </IconButton>
+    <IconButton className="m-2" variant="outlined">
+      <Icon name="settings" />
+    </IconButton>
   </div>
+  <div>
+    <IconButton className="m-2" color="primary">
+      <Icon name="launch-arrow" />
+    </IconButton>
+    <IconButton className="m-2" color="primary" variant="text">
+      <Icon name="launch-arrow" />
+    </IconButton>
+    <IconButton className="m-2" color="primary" variant="outlined">
+      <Icon name="launch-arrow" />
+    </IconButton>
+  </div>
+  <div>
+    <IconButton className="m-2" color="secondary">
+      <Icon name="cancel" />
+    </IconButton>
+    <IconButton className="m-2" color="secondary" variant="text">
+      <Icon name="cancel" />
+    </IconButton>
+    <IconButton className="m-2" color="secondary" variant="outlined">
+      <Icon name="cancel" />
+    </IconButton>
+  </div>
+  <div>
+    <IconButton className="m-2" color="white">
+      <Icon name="settings" />
+    </IconButton>
+    <IconButton className="m-2" variant="text" color="white">
+      <Icon name="launch-arrow" />
+    </IconButton>
+    <IconButton className="m-2" variant="outlined" color="white">
+      <Icon name="cancel" />
+    </IconButton>
+  </div>
+</div>
+```
+
+```jsx live
+<div className="p-4">
+  <div className="">
+    <IconButton className="m-2">
+      <Icon name="settings" />
+    </IconButton>
+    <IconButton className="m-2" variant="outlined">
+      <Icon name="settings" />
+    </IconButton>
+    <IconButton className="m-2" variant="text">
+      <Icon name="settings" />
+    </IconButton>
+  </div>
+  <div>
+    <IconButton className="m-2" color="primary">
+      <Icon name="launch-arrow" />
+    </IconButton>
+    <IconButton className="m-2" color="primary" variant="text">
+      <Icon name="launch-arrow" />
+    </IconButton>
+    <IconButton className="m-2" color="primary" variant="outlined">
+      <Icon name="launch-arrow" />
+    </IconButton>
+  </div>
+  <div>
+    <IconButton className="m-2" color="secondary">
+      <Icon name="cancel" />
+    </IconButton>
+    <IconButton className="m-2" color="secondary" variant="text">
+      <Icon name="cancel" />
+    </IconButton>
+    <IconButton className="m-2" color="secondary" variant="outlined">
+      <Icon name="cancel" />
+    </IconButton>
+  </div>
+  <div>
+    <IconButton className="m-2" color="white">
+      <Icon name="settings" />
+    </IconButton>
+    <IconButton className="m-2" variant="text" color="white">
+      <Icon name="launch-arrow" />
+    </IconButton>
+    <IconButton className="m-2" variant="outlined" color="white">
+      <Icon name="cancel" />
+    </IconButton>
+  </div>
+</div>
 ```
 
 ## Properties
diff --git a/platform/docs/docs/component-library/components/ButtonGroup.mdx b/platform/docs/docs/component-library/components/ButtonGroup.mdx
index 9fac11314..0c239e5f3 100644
--- a/platform/docs/docs/component-library/components/ButtonGroup.mdx
+++ b/platform/docs/docs/component-library/components/ButtonGroup.mdx
@@ -18,91 +18,91 @@ import { ButtonGroup } from '@ohif/ui';
 
 ## Basic button group
 
-````jsx live
-  <div className="p-4 flex flex-col items-center">
-    <ButtonGroup color="primary" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-    <ButtonGroup color="primary" variant="contained" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-    <ButtonGroup color="primary" variant="text" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-  </div>
+```jsx live
+<div className="p-4 flex flex-col items-center">
+  <ButtonGroup color="primary" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+  <ButtonGroup color="primary" variant="contained" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+  <ButtonGroup color="primary" variant="text" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+</div>
 ```
 
 ## Group sizes and colorss
 
 ```jsx live
-  <div className="p-4 flex flex-col items-center">
-    <ButtonGroup color="default" size="small" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-    <ButtonGroup color="primary" size="medium" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-    <ButtonGroup color="secondary" size="large" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-  </div>
+<div className="p-4 flex flex-col items-center">
+  <ButtonGroup color="default" size="small" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+  <ButtonGroup color="primary" size="medium" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+  <ButtonGroup color="secondary" size="large" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+</div>
 ```
 
 ## Group orientation
 
 ```jsx live
-  <div className="p-4 flex flex-row justify-center">
-    <ButtonGroup orientation="vertical" color="primary" className="m-2">
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-    <ButtonGroup
-      orientation="vertical"
-      color="primary"
-      variant="contained"
-      className="m-2"
-    >
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-    <ButtonGroup
-      orientation="vertical"
-      color="primary"
-      variant="text"
-      className="m-2"
-    >
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Tree</Button>
-    </ButtonGroup>
-  </div>
+<div className="p-4 flex flex-row justify-center">
+  <ButtonGroup orientation="vertical" color="primary" className="m-2">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+  <ButtonGroup
+    orientation="vertical"
+    color="primary"
+    variant="contained"
+    className="m-2"
+  >
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+  <ButtonGroup
+    orientation="vertical"
+    color="primary"
+    variant="text"
+    className="m-2"
+  >
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Tree</Button>
+  </ButtonGroup>
+</div>
 ```
 
 ## Split Button
 
 ```jsx live
-  <div className="p-4 flex flex-col items-center">
-    <ButtonGroup color="primary" className="m-2">
-      <Button>Options</Button>
-      <IconButton className="mr-2">
-        <Icon name="settings" />
-      </IconButton>
-    </ButtonGroup>
-  </div>
+<div className="p-4 flex flex-col items-center">
+  <ButtonGroup color="primary" className="m-2">
+    <Button>Options</Button>
+    <IconButton className="mr-2">
+      <Icon name="settings" />
+    </IconButton>
+  </ButtonGroup>
+</div>
 ```
 
 ## Properties
diff --git a/platform/docs/docs/component-library/components/DateRange.mdx b/platform/docs/docs/component-library/components/DateRange.mdx
index 832cd9bd8..32fade8e1 100644
--- a/platform/docs/docs/component-library/components/DateRange.mdx
+++ b/platform/docs/docs/component-library/components/DateRange.mdx
@@ -21,24 +21,22 @@ import { DateRange } from '@ohif/ui';
 ## Date Range
 
 ```jsx live
-{
-  () => {
-    const [dates, setDates] = useState({
-      startDate: null,
-      endDate: null,
-    });
-    return (
-      <div className="p-4 flex flex-col items-center">
-        <DateRange
-          startDate={dates.startDate}
-          endDate={dates.endDate}
-          onChange={({ startDate, endDate }) =>
-            setDates({ startDate, endDate })
-          }
-        />
-      </div>
-    );
-  };
+function() {
+  const [dates, setDates] = useState({
+    startDate: null,
+    endDate: null,
+  });
+  return (
+    <div className="p-4 flex flex-col items-center">
+      <DateRange
+        startDate={dates.startDate}
+        endDate={dates.endDate}
+        onChange={({ startDate, endDate }) =>
+          setDates({ startDate, endDate })
+        }
+      />
+    </div>
+  );
 }
 ```
 
diff --git a/platform/docs/docs/component-library/components/ErrorBoundary.mdx b/platform/docs/docs/component-library/components/ErrorBoundary.mdx
index 792fe1004..b715a2ea2 100644
--- a/platform/docs/docs/component-library/components/ErrorBoundary.mdx
+++ b/platform/docs/docs/component-library/components/ErrorBoundary.mdx
@@ -18,10 +18,10 @@ import { ErrorBoundary } from '@ohif/ui';
 
 ## Basic usage
 
-````jsx live
+```jsx live
   <div className="p-4">
     <ErrorBoundary context="Somewhere">
-      {() => {
+      function() {
         throw new Error('Error!');
         return <p></p>;
       }}
@@ -32,7 +32,7 @@ import { ErrorBoundary } from '@ohif/ui';
 ## Custom error fallback
 
 ```jsx live
-  {() => {
+  function() {
     const CustomFallback = ({ error, componentStack, resetErrorBoundary }) => {
       return (
         <div>
@@ -43,7 +43,7 @@ import { ErrorBoundary } from '@ohif/ui';
     return (
       <div className="p-4">
         <ErrorBoundary context="Somewhere" fallbackComponent={CustomFallback}>
-          {() => {
+          function() {
             throw new Error('Error!');
             return <p></p>;
           }}
diff --git a/platform/docs/docs/component-library/components/MeasurementTable.mdx b/platform/docs/docs/component-library/components/MeasurementTable.mdx
index 85cc77a79..4b9f66cf0 100644
--- a/platform/docs/docs/component-library/components/MeasurementTable.mdx
+++ b/platform/docs/docs/component-library/components/MeasurementTable.mdx
@@ -18,39 +18,39 @@ import { MeasurementTable } from '@ohif/ui';
 
 ## Basic usage
 
-````jsx live
-  {() => {
-    const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
-    const measurementTableData = {
-      title: 'Measurements',
-      amount: 10,
-      data: new Array(10).fill({}).map((el, i) => ({
-        id: i + 1,
-        label: 'Label short description',
-        displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
-        isActive: activeMeasurementItem === i + 1,
-      })),
-      onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
-      onEdit: id => alert(`Edit: ${id}`),
-    };
-    return (
-      <div className="p-4 w-80">
-        <MeasurementTable {...measurementTableData} />
-      </div>
-    );
-  }}
+```jsx live
+function() {
+  const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
+  const measurementTableData = {
+    title: 'Measurements',
+    amount: 10,
+    data: new Array(10).fill({}).map((el, i) => ({
+      id: i + 1,
+      label: 'Label short description',
+      displayText: ['24.0 x 24.0 mm (S:4, I:22)'],
+      isActive: activeMeasurementItem === i + 1,
+    })),
+    onClick: id => setActiveMeasurementItem(s => (s === id ? null : id)),
+    onEdit: id => alert(`Edit: ${id}`),
+  };
+  return (
+    <div className="p-4 w-80">
+      <MeasurementTable {...measurementTableData} />
+    </div>
+  );
+}
 ```
 
 ## Empty Data
 
 ```jsx live
-  {() => {
-    return (
-      <div className="p-4 w-80">
-        <MeasurementTable title="Measurements" />
-      </div>
-    );
-  }}
+function() {
+  return (
+    <div className="p-4 w-80">
+      <MeasurementTable title="Measurements" />
+    </div>
+  );
+}
 ```
 
 ## Properties
diff --git a/platform/docs/docs/component-library/components/Select.mdx b/platform/docs/docs/component-library/components/Select.mdx
index 52843cee5..43fbd618e 100644
--- a/platform/docs/docs/component-library/components/Select.mdx
+++ b/platform/docs/docs/component-library/components/Select.mdx
@@ -16,37 +16,37 @@ import { Select } from '@ohif/ui';
 
 ## Basic usage
 
-````jsx live
-  <div className="flex flex-col flex-1 p-4 items-center">
-    <div className="w-56">
-      <Select
-        options={[
-          { value: 'ONE', label: 'ONE' },
-          { value: 'TWO', label: 'TWO' },
-          { value: 'THREE', label: 'THREE' },
-          { value: 'FOUR', label: 'FOUR' },
-        ]}
-      />
-    </div>
+```jsx live
+<div className="flex flex-col flex-1 p-4 items-center">
+  <div className="w-56">
+    <Select
+      options={[
+        { value: 'ONE', label: 'ONE' },
+        { value: 'TWO', label: 'TWO' },
+        { value: 'THREE', label: 'THREE' },
+        { value: 'FOUR', label: 'FOUR' },
+      ]}
+    />
   </div>
+</div>
 ```
 
 ## Disabled
 
 ```jsx live
-  <div className="flex flex-col flex-1 p-4 items-center">
-    <div className="w-56">
-      <Select
-        isDisabled
-        options={[
-          { value: 'ONE', label: 'ONE' },
-          { value: 'TWO', label: 'TWO' },
-          { value: 'THREE', label: 'THREE' },
-          { value: 'FOUR', label: 'FOUR' },
-        ]}
-      />
-    </div>
+<div className="flex flex-col flex-1 p-4 items-center">
+  <div className="w-56">
+    <Select
+      isDisabled
+      options={[
+        { value: 'ONE', label: 'ONE' },
+        { value: 'TWO', label: 'TWO' },
+        { value: 'THREE', label: 'THREE' },
+        { value: 'FOUR', label: 'FOUR' },
+      ]}
+    />
   </div>
+</div>
 ```
 
 ## No Options
@@ -55,7 +55,7 @@ import { Select } from '@ohif/ui';
   <div className="flex flex-col flex-1 p-4 items-center">
     <div className="w-56">
       <Select
-        noOptionsMessage={() => {
+        noOptionsMessage=function() {
           'No Options';
         }}
         options={[]}
diff --git a/platform/docs/docs/component-library/components/SidePanel.mdx b/platform/docs/docs/component-library/components/SidePanel.mdx
index b8ef54bb1..6918509ba 100644
--- a/platform/docs/docs/component-library/components/SidePanel.mdx
+++ b/platform/docs/docs/component-library/components/SidePanel.mdx
@@ -16,59 +16,69 @@ import { SidePanel } from '@ohif/ui';
 
 ## Basic usage
 
-````jsx live
-  <div
-    className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
-    style={{ height: '500px' }}
-  >
-    <SidePanel
-      side="left"
-      childComponents={{
-        iconName: "group-layers",
-        iconLabel: "Studies",
-        name: "studies",
-        label: "Studies",
-        content: <div className="flex justify-center text-white p-2">panel content</div>,
-      }}
-    />
-    <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-      CONTENT
-    </div>
+```jsx live
+<div
+  className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+  style={{ height: '500px' }}
+>
+  <SidePanel
+    side="left"
+    childComponents={{
+      iconName: 'group-layers',
+      iconLabel: 'Studies',
+      name: 'studies',
+      label: 'Studies',
+      content: (
+        <div className="flex justify-center text-white p-2">panel content</div>
+      ),
+    }}
+  />
+  <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
+    CONTENT
   </div>
+</div>
 ```
 
-
 ## Multiple panels
 
 ```jsx live
-  <div
-    className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
-    style={{ height: '500px' }}
-  >
-    <SidePanel
-      side="left"
-      childComponents={[{
-        iconName: "group-layers",
-        iconLabel: "Studies",
-        name: "studies",
-        label: "Studies",
-        content: <div className="flex justify-center text-white p-2">studies panel content</div>,
+<div
+  className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+  style={{ height: '500px' }}
+>
+  <SidePanel
+    side="left"
+    childComponents={[
+      {
+        iconName: 'group-layers',
+        iconLabel: 'Studies',
+        name: 'studies',
+        label: 'Studies',
+        content: (
+          <div className="flex justify-center text-white p-2">
+            studies panel content
+          </div>
+        ),
       },
       {
-        iconName: "list-bullets",
-        iconLabel: "Measure",
-        name: "measurements",
-        label: "Measurements",
-        content: <div className="flex justify-center text-white p-2">measure panel content</div>,
-      }]}
-    />
-    <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-      CONTENT
-    </div>
+        iconName: 'list-bullets',
+        iconLabel: 'Measure',
+        name: 'measurements',
+        label: 'Measurements',
+        content: (
+          <div className="flex justify-center text-white p-2">
+            measure panel content
+          </div>
+        ),
+      },
+    ]}
+  />
+  <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
+    CONTENT
   </div>
+</div>
 ```
 
-
 ## Properties
 
 <Props of={SidePanel} />
diff --git a/platform/docs/docs/component-library/components/ToolbarButton.mdx b/platform/docs/docs/component-library/components/ToolbarButton.mdx
index 0c42838e1..0c2c41005 100644
--- a/platform/docs/docs/component-library/components/ToolbarButton.mdx
+++ b/platform/docs/docs/component-library/components/ToolbarButton.mdx
@@ -4,7 +4,7 @@ menu: General
 route: components/toolbarButton
 ---
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 
 import { ToolbarButton } from '@ohif/ui';
 
@@ -19,17 +19,18 @@ import { ToolbarButton } from '@ohif/ui';
 ```
 
 ```jsx live
-function ToolbarButtonExample(props) {
-  // const [isActive, setIsActive] = useState(false);
+function() {
+  const [isActive, setIsActive] = useState(false);
+
   const tool = {
     id: 'Zoom',
     label: 'Zoom',
     icon: 'tool-zoom',
     type: null,
-    commandName: 'setToolActive',
-    commandOptions: { toolName: 'Zoom' },
-    //onClick: () => setIsActive(true),
-    isActive: true,
+    /*commandName: 'setToolActive',
+    commandOptions: { toolName: 'Zoom' },*/
+    onInteraction: () => setIsActive(!isActive),
+    isActive,
   };
 
   return (
diff --git a/platform/docs/docs/component-library/components/Typography.mdx b/platform/docs/docs/component-library/components/Typography.mdx
index 67a5c70c6..33875aea8 100644
--- a/platform/docs/docs/component-library/components/Typography.mdx
+++ b/platform/docs/docs/component-library/components/Typography.mdx
@@ -19,33 +19,33 @@ import { Typography } from '@ohif/ui';
 
 ## Basic usage
 
-````jsx live
-  <div className="p-4">
-    <Typography variant="h1">
-      h1. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="h2">
-      h2. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="h3">
-      h3. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="h4">
-      h4. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="h5">
-      h5. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="h6">
-      h6. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="subtitle">
-      subtitle. The five boxing wizards jump quickly.
-    </Typography>
-    <Typography variant="body">
-      body. The five boxing wizards jump quickly.
-    </Typography>
-  </div>
+```jsx live
+<div className="p-4">
+  <Typography variant="h1">
+    h1. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h2">
+    h2. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h3">
+    h3. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h4">
+    h4. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h5">
+    h5. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="h6">
+    h6. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="subtitle">
+    subtitle. The five boxing wizards jump quickly.
+  </Typography>
+  <Typography variant="body">
+    body. The five boxing wizards jump quickly.
+  </Typography>
+</div>
 ```
 
 ## Changing the HTML element
@@ -56,11 +56,11 @@ a semantic element. The style of a Typography is independent of the semantic
 element.
 
 ```jsx live
-  <div className="p-4">
-    <Typography variant="h1" component="h2">
-      This is a h2 using the h1 styles.
-    </Typography>
-  </div>
+<div className="p-4">
+  <Typography variant="h1" component="h2">
+    This is a h2 using the h1 styles.
+  </Typography>
+</div>
 ```
 
 ## Properties
diff --git a/platform/docs/docs/component-library/components/ViewportActionBar.mdx b/platform/docs/docs/component-library/components/ViewportActionBar.mdx
index de3dd7db6..f6256cc9e 100644
--- a/platform/docs/docs/component-library/components/ViewportActionBar.mdx
+++ b/platform/docs/docs/component-library/components/ViewportActionBar.mdx
@@ -18,117 +18,117 @@ import { ViewportActionBar } from '@ohif/ui';
 
 ## Basic usage
 
-````jsx live
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={direction => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: true,
-        isLocked: false,
-        isRehydratable: false,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'CT',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
+```jsx live
+<div className="p-4 h-64">
+  <ViewportActionBar
+    onSeriesChange={direction => alert(`Series ${direction}`)}
+    studyData={{
+      label: 'A',
+      isTracked: true,
+      isLocked: false,
+      isRehydratable: false,
+      studyDate: '07-Sep-2010',
+      currentSeries: 1,
+      seriesDescription:
+        'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+      modality: 'CT',
+      patientInformation: {
+        patientName: 'Smith, Jane',
+        patientSex: 'F',
+        patientAge: '59',
+        MRN: '10000001',
+        thickness: '2.0mm',
+        spacing: '1.25mm',
+        scanner: 'Aquilion',
+      },
+    }}
+  />
+</div>
 ```
 
 ```jsx live
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={direction => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: false,
-        isLocked: false,
-        isRehydratable: true,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'CT',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
+<div className="p-4 h-64">
+  <ViewportActionBar
+    onSeriesChange={direction => alert(`Series ${direction}`)}
+    studyData={{
+      label: 'A',
+      isTracked: false,
+      isLocked: false,
+      isRehydratable: true,
+      studyDate: '07-Sep-2010',
+      currentSeries: 1,
+      seriesDescription:
+        'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+      modality: 'CT',
+      patientInformation: {
+        patientName: 'Smith, Jane',
+        patientSex: 'F',
+        patientAge: '59',
+        MRN: '10000001',
+        thickness: '2.0mm',
+        spacing: '1.25mm',
+        scanner: 'Aquilion',
+      },
+    }}
+  />
+</div>
 ```
 
 ```jsx live
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={direction => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: false,
-        isLocked: false,
-        isRehydratable: false,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'SR',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
+<div className="p-4 h-64">
+  <ViewportActionBar
+    onSeriesChange={direction => alert(`Series ${direction}`)}
+    studyData={{
+      label: 'A',
+      isTracked: false,
+      isLocked: false,
+      isRehydratable: false,
+      studyDate: '07-Sep-2010',
+      currentSeries: 1,
+      seriesDescription:
+        'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+      modality: 'SR',
+      patientInformation: {
+        patientName: 'Smith, Jane',
+        patientSex: 'F',
+        patientAge: '59',
+        MRN: '10000001',
+        thickness: '2.0mm',
+        spacing: '1.25mm',
+        scanner: 'Aquilion',
+      },
+    }}
+  />
+</div>
 ```
+
 ```jsx live
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={direction => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: false,
-        isLocked: false,
-        isRehydratable: true,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'SR',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
+<div className="p-4 h-64">
+  <ViewportActionBar
+    onSeriesChange={direction => alert(`Series ${direction}`)}
+    studyData={{
+      label: 'A',
+      isTracked: false,
+      isLocked: false,
+      isRehydratable: true,
+      studyDate: '07-Sep-2010',
+      currentSeries: 1,
+      seriesDescription:
+        'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+      modality: 'SR',
+      patientInformation: {
+        patientName: 'Smith, Jane',
+        patientSex: 'F',
+        patientAge: '59',
+        MRN: '10000001',
+        thickness: '2.0mm',
+        spacing: '1.25mm',
+        scanner: 'Aquilion',
+      },
+    }}
+  />
+</div>
 ```
-</>
 
 ## Properties
 
diff --git a/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx b/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
index a70c442d6..828c33cc0 100644
--- a/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
+++ b/platform/docs/docs/component-library/context-providers/ViewportDialogProvider.mdx
@@ -22,8 +22,8 @@ component across all application.
 
 ## Sample
 
-````jsx live
-  {() => {
+```jsx live
+  function() {
     const ViewportNotification = ({ hide }) => {
       return (
         <Notification
@@ -88,7 +88,7 @@ component across all application.
 ## Example using UIViewportDialogService
 
 ```jsx live
-  {() => {
+  function() {
     const ViewportNotification = ({ hide }) => {
       return (
         <Notification
diff --git a/platform/docs/docs/component-library/pages/Colors.mdx b/platform/docs/docs/component-library/pages/Colors.mdx
index e6c49936f..9b8d71510 100644
--- a/platform/docs/docs/component-library/pages/Colors.mdx
+++ b/platform/docs/docs/component-library/pages/Colors.mdx
@@ -28,14 +28,14 @@ details about color classes.
 
 ## Text
 
-````jsx live
-  <div className="p-8">
-    <p className="text-common-bright">text-common-bright</p>
-    <p className="text-common-light">text-common-light</p>
-    <p className="text-common-main">text-common-main</p>
-    <p className="text-common-dark">text-common-dark</p>
-    <p className="text-common-active">text-common-active</p>
-  </div>
+```jsx live
+<div className="p-8">
+  <p className="text-common-bright">text-common-bright</p>
+  <p className="text-common-light">text-common-light</p>
+  <p className="text-common-main">text-common-main</p>
+  <p className="text-common-dark">text-common-dark</p>
+  <p className="text-common-active">text-common-active</p>
+</div>
 ```
 
 ## Background
@@ -79,4 +79,4 @@ common: {
   dark: '#726f7e',
   active: '#2c3074',
 },
-````
+```