Merge branch 'master' into customizable-TS

commit.txt

@@ -1 +1 @@
-eb1550536c467a97394af88a80f823a03d5c8d63
+c80dbb225e4e4673b1205a8419c82edef65fdfcb

extensions/cornerstone-dicom-rt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-rt",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "DICOM RT read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -31,44 +31,19 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/i18n": "3.6.0-beta.0",
+    "@ohif/i18n": "3.7.0-beta.0",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^10.11.0",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.3.0"
-    "webpack": "^5.50.0",
-    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "react-color": "^2.19.3"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-arrow-functions": "^7.2.0",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.5.0",
-    "@babel/preset-react": "^7.16.7",
-    "babel-eslint": "^8.0.3",
-    "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
-    "eslint-loader": "^2.0.0",
-    "webpack": "^5.50.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-merge": "^5.7.3"
   }
 }

extensions/cornerstone-dicom-seg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-seg",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "DICOM SEG read workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -31,44 +31,19 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/i18n": "3.6.0-beta.0",
+    "@ohif/i18n": "3.7.0-beta.0",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^12.2.2",
     "react-router": "^6.8.1",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.8.1"
-    "webpack": "^5.50.0",
-    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "react-color": "^2.19.3"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-arrow-functions": "^7.2.0",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.5.0",
-    "@babel/preset-react": "^7.16.7",
-    "babel-eslint": "^8.0.3",
-    "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
-    "eslint-loader": "^2.0.0",
-    "webpack": "^5.50.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-merge": "^5.7.3"
   }
 }

extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx

@@ -24,7 +24,7 @@ function callInputDialog(uiDialogService, label, callback) {
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter Segment Label',
+        title: 'Segment',
         value: { label },
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
@@ -35,24 +35,23 @@ function callInputDialog(uiDialogService, label, callback) {
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter the segment label"
-                autoFocus
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                className="mt-2 bg-black border-primary-main"
+              autoFocus
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.label}
+              value={value.label}
-                onChange={event => {
+              onChange={event => {
-                  event.persist();
+                event.persist();
-                  setValue(value => ({ ...value, label: event.target.value }));
+                setValue(value => ({ ...value, label: event.target.value }));
-                }}
+              }}
-                onKeyPress={event => {
+              onKeyPress={event => {
-                  if (event.key === 'Enter') {
+                if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
+                  onSubmitHandler({ value, action: { id: 'save' } });
-                  }
+                }
-                }}
+              }}
-              />
+            />
-            </div>
           );
         },
       },

extensions/cornerstone-dicom-sr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone-dicom-sr",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension for an SR Cornerstone Viewport",
   "author": "OHIF",
   "license": "MIT",
@@ -32,10 +32,10 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-measurement-tracking": "3.6.0-beta.0",
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "dcmjs": "^0.29.5",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",

extensions/cornerstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
     "@cornerstonejs/dicom-image-loader": "^0.6.8",
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "dcmjs": "^0.29.6",
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx

@@ -97,7 +97,7 @@ const DicomUploadProgressItem = memo(
               )}
               <div className="flex cursor-pointer ml-auto">
                 <Icon
-                  className="w-6 h-6 self-center text-primary-active"
+                  className="self-center text-primary-active"
                   name="close"
                   onClick={cancelUpload}
                 />

extensions/cornerstone/src/services/SegmentationService/SegmentationService.ts

@@ -117,7 +117,7 @@ class SegmentationService extends PubSubService {
    * -- opacity: the opacity of the segment
    * -- visibility: the visibility of the segment (boolean)
    * -- isLocked: whether the segment is locked for editing
-   * -- active: whether the segment is currently the active segment to be edited or not
+   * -- active: whether the segment is currently the active segment to be edited
    */
   public addSegment(
     segmentationId: string,

extensions/cornerstone/src/utils/callInputDialog.tsx

@@ -27,8 +27,8 @@ function callInputDialog(
       : data.label
     : '';
   const {
-    dialogTitle = 'Enter your annotation',
+    dialogTitle = 'Annotation',
-    inputLabel = '',
+    inputLabel = 'Enter your annotation',
     validateFunc = value => true,
   } = dialogConfig;
 
@@ -66,27 +66,24 @@ function callInputDialog(
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              autoFocus
-                autoFocus
+              className="bg-black border-primary-main"
-                className="mt-2 bg-black border-primary-main"
+              type="text"
-                type="text"
+              id="annotation"
-                id="annotation"
+              label={inputLabel}
-                containerClassName="mr-2"
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                label={inputLabel}
+              value={value.label}
-                labelClassName="text-primary-light"
+              onChange={event => {
-                value={value.label}
+                event.persist();
-                onChange={event => {
+                setValue(value => ({ ...value, label: event.target.value }));
-                  event.persist();
+              }}
-                  setValue(value => ({ ...value, label: event.target.value }));
+              onKeyPress={event => {
-                }}
+                if (event.key === 'Enter') {
-                onKeyPress={event => {
+                  onSubmitHandler({ value, action: { id: 'save' } });
-                  if (event.key === 'Enter') {
+                }
-                    onSubmitHandler({ value, action: { id: 'save' } });
+              }}
-                  }
+            />
-                }}
-              />
-            </div>
           );
         },
       },

extensions/default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-default",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Common/default features and functionality for basic image viewing",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/i18n": "3.6.0-beta.0",
+    "@ohif/i18n": "3.7.0-beta.0",
     "dcmjs": "^0.29.5",
     "dicomweb-client": "^0.10.2",
     "prop-types": "^15.6.2",

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -160,7 +160,7 @@ export default function PanelMeasurementTable({
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -175,18 +175,17 @@ export default function PanelMeasurementTable({
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter your annotation"
-                autoFocus
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                id="annotation"
+              autoFocus
-                className="mt-2 bg-black border-primary-main"
+              id="annotation"
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.label}
+              value={value.label}
-                onChange={onChangeHandler}
+              onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
+              onKeyPress={onKeyPressHandler}
-              />
+            />
-            </div>
           );
         },
         actions: [

extensions/default/src/Panels/createReportDialogPrompt.tsx

@@ -11,7 +11,7 @@ export default function createReportDialogPrompt(
   uiDialogService,
   { extensionManager }
 ) {
-  return new Promise(function (resolve, reject) {
+  return new Promise(function(resolve, reject) {
     let dialogId = undefined;
 
     const _handleClose = () => {
@@ -73,7 +73,7 @@ export default function createReportDialogPrompt(
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: {
           label: '',
           dataSourceName: extensionManager.activeDataSource,
@@ -102,38 +102,34 @@ export default function createReportDialogPrompt(
           };
           return (
             <>
-              <div className="p-4 bg-primary-dark">
+              {dataSourcesOpts.length > 1 && (
-                {dataSourcesOpts.length > 1 && (
+                <Select
-                  <Select
+                  closeMenuOnSelect={true}
-                    closeMenuOnSelect={true}
+                  className="mr-2 bg-black border-primary-main"
-                    className="mr-2 bg-black border-primary-main"
+                  options={dataSourcesOpts}
-                    options={dataSourcesOpts}
+                  placeholder={
-                    placeholder={
+                    dataSourcesOpts.find(
-                      dataSourcesOpts.find(
+                      option => option.value === value.dataSourceName
-                        option => option.value === value.dataSourceName
+                    ).placeHolder
-                      ).placeHolder
+                  }
-                    }
+                  value={value.dataSourceName}
-                    value={value.dataSourceName}
+                  onChange={evt => {
-                    onChange={evt => {
+                    setValue(v => ({ ...v, dataSourceName: evt.value }));
-                      setValue(v => ({ ...v, dataSourceName: evt.value }));
+                  }}
-                    }}
+                  isClearable={false}
-                    isClearable={false}
-                  />
-                )}
-              </div>
-              <div className="p-4 bg-primary-dark">
-                <Input
-                  autoFocus
-                  className="mt-2 bg-black border-primary-main"
-                  type="text"
-                  placeholder="Enter Report Name"
-                  containerClassName="mr-2"
-                  value={value.label}
-                  onChange={onChangeHandler}
-                  onKeyPress={onKeyPressHandler}
-                  required
                 />
-              </div>
+              )}
+              <Input
+                autoFocus
+                label="Enter the report name"
+                labelClassName="text-white text-[14px] leading-[1.2]"
+                className="bg-black border-primary-main"
+                type="text"
+                value={value.label}
+                onChange={onChangeHandler}
+                onKeyPress={onKeyPressHandler}
+                required
+              />
             </>
           );
         },

extensions/dicom-microscopy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-microscopy",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension for DICOM microscopy",
   "author": "Bill Wallace, md-prog",
   "license": "MIT",
@@ -28,18 +28,16 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/i18n": "3.6.0-beta.0",
+    "@ohif/i18n": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^10.11.0",
     "react-router": "^6.8.1",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.8.1"
-    "webpack": "^5.50.0",
-    "webpack-merge": "^5.7.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
@@ -49,31 +47,5 @@
     "colormap": "^2.3",
     "dicom-microscopy-viewer": "^0.44.0",
     "dicomicc": "^0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.16.7",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.13.0",
-    "babel-eslint": "^8.0.3",
-    "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
-    "eslint-loader": "^2.0.0",
-    "webpack": "^5.50.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-merge": "^5.7.3"
   }
 }

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -31,7 +31,6 @@ export default function getCommandsModule({
 
       callInputDialog({
         uiDialogService,
-        title: 'Enter your annotation',
         defaultValue: '',
         callback: (value: string, action: string) => {
           switch (action) {

extensions/dicom-microscopy/src/utils/callInputDialog.tsx

@@ -12,7 +12,7 @@ import { Input, Dialog } from '@ohif/ui';
  */
 export default function callInputDialog({
   uiDialogService,
-  title = 'Enter your annotation',
+  title = 'Annotation',
   defaultValue = '',
   callback = (value: string, action: string) => {}
 }) {
@@ -49,27 +49,26 @@ export default function callInputDialog({
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter your annotation"
-                autoFocus
+              labelClassName="text-white text-[14px] leading-[1.2]"
-                className="mt-2 bg-black border-primary-main"
+              autoFocus
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.defaultValue}
+              value={value.defaultValue}
-                onChange={event => {
+              onChange={event => {
-                  event.persist();
+                event.persist();
-                  setValue(value => ({ ...value, value: event.target.value }));
+                setValue(value => ({ ...value, value: event.target.value }));
-                }}
+              }}
-                onKeyPress={event => {
+              onKeyPress={event => {
-                  if (event.key === 'Enter') {
+                if (event.key === 'Enter') {
-                    onSubmitHandler({ value, action: { id: 'save' } });
+                  onSubmitHandler({ value, action: { id: 'save' } });
-                  }
+                }
-                }}
+              }}
-              />
+            />
-            </div>
           );
         },
       },
     });
   }
-}
+}

extensions/dicom-pdf/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-pdf",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension for PDF display",
   "author": "OHIF",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "dcmjs": "^0.29.5",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",

extensions/dicom-video/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-video",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension for video display",
   "author": "OHIF",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "dcmjs": "^0.29.5",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",

extensions/measurement-tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-measurement-tracking",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Tracking features and functionality for basic image viewing",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -32,9 +32,9 @@
   "peerDependencies": {
     "@cornerstonejs/core": "^1.1.0",
     "@cornerstonejs/tools": "^1.1.0",
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "classnames": "^2.3.2",
     "dcmjs": "^0.29.5",
     "lodash.debounce": "^4.17.21",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "@xstate/react": "^0.8.1",
     "xstate": "^4.10.0"
   }

extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx

@@ -38,7 +38,7 @@ export default function createReportDialogPrompt(uiDialogService) {
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
-        title: 'Provide a name for your report',
+        title: 'Create Report',
         value: { label: '' },
         noCloseButton: true,
         onClose: _handleClose,
@@ -60,12 +60,13 @@ export default function createReportDialogPrompt(uiDialogService) {
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <div className="">
               <Input
+                label="Enter the report name"
+                labelClassName="text-white grow leading-[1.2] text-[14px]"
                 autoFocus
-                className="mt-2 bg-black border-primary-main"
+                className="bg-black border-primary-main grow"
                 type="text"
-                containerClassName="mr-2"
                 value={value.label}
                 onChange={onChangeHandler}
                 onKeyPress={onKeyPressHandler}

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -188,7 +188,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
       showOverlay: true,
       content: Dialog,
       contentProps: {
-        title: 'Enter your annotation',
+        title: 'Annotation',
         noCloseButton: true,
         value: { label: measurement.label || '' },
         body: ({ value, setValue }) => {
@@ -203,18 +203,17 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
             }
           };
           return (
-            <div className="p-4 bg-primary-dark">
+            <Input
-              <Input
+              label="Enter your annotation"
-                autoFocus
+              labelClassName="text-white grow text-[14px] leading-[1.2]"
-                id="annotation"
+              autoFocus
-                className="mt-2 bg-black border-primary-main"
+              id="annotation"
-                type="text"
+              className="bg-black border-primary-main"
-                containerClassName="mr-2"
+              type="text"
-                value={value.label}
+              value={value.label}
-                onChange={onChangeHandler}
+              onChange={onChangeHandler}
-                onKeyPress={onKeyPressHandler}
+              onKeyPress={onKeyPressHandler}
-              />
+            />
-            </div>
           );
         },
         actions: [

extensions/test-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-test",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension used inside e2e testing",
   "author": "OHIF",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "dcmjs": "0.29.4",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",

extensions/tmtv/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-tmtv",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF extension for Total Metabolic Tumor Volume",
   "author": "OHIF",
   "license": "MIT",
@@ -28,8 +28,8 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "dcmjs": "^0.29.5",
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "packages": ["extensions/*", "platform/*", "modes/*"],
   "npmClient": "yarn",
   "useWorkspaces": true

modes/basic-dev-mode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/mode-basic-dev-mode",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Basic OHIF Viewer Using Cornerstone",
   "author": "OHIF",
   "license": "MIT",
@@ -29,12 +29,12 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/extension-dicom-pdf": "3.6.0-beta.0",
+    "@ohif/extension-dicom-pdf": "3.7.0-beta.0",
-    "@ohif/extension-dicom-video": "3.6.0-beta.0"
+    "@ohif/extension-dicom-video": "3.7.0-beta.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13"

modes/basic-test-mode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/mode-test",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Basic mode for testing",
   "author": "OHIF",
   "license": "MIT",
@@ -32,14 +32,14 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/extension-dicom-pdf": "3.6.0-beta.0",
+    "@ohif/extension-dicom-pdf": "3.7.0-beta.0",
-    "@ohif/extension-dicom-video": "3.6.0-beta.0",
+    "@ohif/extension-dicom-video": "3.7.0-beta.0",
-    "@ohif/extension-measurement-tracking": "3.6.0-beta.0",
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.0",
-    "@ohif/extension-test": "3.6.0-beta.0"
+    "@ohif/extension-test": "3.7.0-beta.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13"

modes/longitudinal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/mode-longitudinal",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Longitudinal Workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -32,15 +32,15 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-rt": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-rt": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-seg": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-seg": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/extension-dicom-pdf": "3.6.0-beta.0",
+    "@ohif/extension-dicom-pdf": "3.7.0-beta.0",
-    "@ohif/extension-dicom-video": "3.6.0-beta.0",
+    "@ohif/extension-dicom-video": "3.7.0-beta.0",
-    "@ohif/extension-measurement-tracking": "3.6.0-beta.0"
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13"

modes/microscopy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/mode-microscopy",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "OHIF mode for DICOM microscopy",
   "author": "OHIF",
   "license": "MIT",
@@ -33,36 +33,10 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-dicom-microscopy": "3.6.0-beta.0"
+    "@ohif/extension-dicom-microscopy": "3.7.0-beta.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
-    "@babel/plugin-proposal-private-methods": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-arrow-functions": "^7.16.7",
-    "@babel/plugin-transform-regenerator": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/plugin-transform-typescript": "^7.13.0",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
-    "@babel/preset-typescript": "^7.13.0",
-    "babel-eslint": "^8.0.3",
-    "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^14.1.0",
-    "eslint": "^5.0.1",
-    "eslint-loader": "^2.0.0",
-    "webpack": "^5.50.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-merge": "^5.7.3"
   }
 }

modes/tmtv/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/mode-tmtv",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Total Metabolic Tumor Volume Workflow",
   "author": "OHIF",
   "license": "MIT",
@@ -32,13 +32,13 @@
     "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
   },
   "peerDependencies": {
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/extension-dicom-pdf": "3.6.0-beta.0",
+    "@ohif/extension-dicom-pdf": "3.7.0-beta.0",
-    "@ohif/extension-dicom-video": "3.6.0-beta.0",
+    "@ohif/extension-dicom-video": "3.7.0-beta.0",
-    "@ohif/extension-measurement-tracking": "3.6.0-beta.0"
+    "@ohif/extension-measurement-tracking": "3.7.0-beta.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13"

package.json

@@ -151,6 +151,7 @@
   "resolutions": {
     "@cornerstonejs/core": "^1.1.0",
     "**/@babel/runtime": "^7.20.13",
+    "commander": "8.3.0",
     "nth-check": "^2.1.1",
     "trim-newlines": "^5.0.0",
     "glob-parent": "^6.0.2",

platform/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/app",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "productVersion": "3.4.0",
   "description": "OHIF Viewer",
   "author": "OHIF Contributors",
@@ -52,22 +52,22 @@
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
     "@cornerstonejs/dicom-image-loader": "^0.6.8",
-    "@ohif/core": "3.6.0-beta.0",
+    "@ohif/core": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-rt": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-rt": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-seg": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-seg": "3.7.0-beta.0",
-    "@ohif/extension-cornerstone-dicom-sr": "3.6.0-beta.0",
+    "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.0",
-    "@ohif/extension-default": "3.6.0-beta.0",
+    "@ohif/extension-default": "3.7.0-beta.0",
-    "@ohif/extension-dicom-microscopy": "3.6.0-beta.0",
+    "@ohif/extension-dicom-microscopy": "3.7.0-beta.0",
-    "@ohif/extension-dicom-pdf": "3.6.0-beta.0",
+    "@ohif/extension-dicom-pdf": "3.7.0-beta.0",
-    "@ohif/extension-dicom-video": "3.6.0-beta.0",
+    "@ohif/extension-dicom-video": "3.7.0-beta.0",
-    "@ohif/extension-test": "3.6.0-beta.0",
+    "@ohif/extension-test": "3.7.0-beta.0",
-    "@ohif/i18n": "3.6.0-beta.0",
+    "@ohif/i18n": "3.7.0-beta.0",
-    "@ohif/mode-basic-dev-mode": "3.6.0-beta.0",
+    "@ohif/mode-basic-dev-mode": "3.7.0-beta.0",
-    "@ohif/mode-longitudinal": "3.6.0-beta.0",
+    "@ohif/mode-longitudinal": "3.7.0-beta.0",
-    "@ohif/mode-microscopy": "3.6.0-beta.0",
+    "@ohif/mode-microscopy": "3.7.0-beta.0",
-    "@ohif/mode-test": "3.6.0-beta.0",
+    "@ohif/mode-test": "3.7.0-beta.0",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "@types/react": "^17.0.38",
     "classnames": "^2.3.2",
     "core-js": "^3.16.1",

platform/app/public/config/local_orthanc.js

@@ -33,7 +33,7 @@ window.config = {
         supportsWildcard: true,
         dicomUploadEnabled: true,
         bulkDataURI: {
-          enabled: false,
+          enabled: true,
         },
       },
     },

platform/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/cli",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "A CLI to bootstrap new OHIF extension or mode",
   "type": "module",
   "main": "src/index.js",
@@ -21,7 +21,6 @@
     "@babel/core": "^7.21.4",
     "axios": "^0.26.1",
     "chalk": "^5.0.0",
-    "commander": "^8.3.0",
     "execa": "^6.0.0",
     "gitignore": "^0.7.0",
     "inquirer": "^8.2.0",

platform/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/core",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Generic business logic for web-based medical imaging applications",
   "author": "OHIF Core Team",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
     "@cornerstonejs/dicom-image-loader": "^0.6.8",
-    "@ohif/ui": "3.6.0-beta.0",
+    "@ohif/ui": "3.7.0-beta.0",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"
   },

platform/docs/docs/deployment/docker.md

@@ -43,3 +43,11 @@ The Dockerfile and entry point use the `${PORT}` environment variable as the por
 ```sh
 docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
 ```
+
+### Configuring the OHIF config file
+
+The OHIF [config file](../configuration/configurationFiles.md) to use can be specified by mounting it as a volume for the Docker container using the `-v` flag. If the OHIF config file is on the local file system then it can be specified as below. Note that depending on the version of Docker, an absolute path to the config file might be required.
+
+```sh
+docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/app-config.js --name ohif-viewer-container ohif-viewer-image
+```

platform/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ohif-docs",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "private": true,
   "workspaces": {
     "nohoist": [

platform/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/i18n",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "Internationalization library for The OHIF Viewer",
   "author": "OHIF",
   "license": "MIT",

platform/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/ui",
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
   "description": "A set of React components for Medical Imaging Viewers",
   "author": "OHIF Contributors",
   "license": "MIT",

platform/ui/src/assets/icons/close.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 19">
-    <g fill="currentColor" fill-rule="evenodd">
-        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
-            <path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
-        </g>
-    </g>
-</svg>

platform/ui/src/assets/icons/closeIcon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 1.05 10.95 0 6 4.95 1.05 0 0 1.05 4.95 6 0 10.95 1.05 12 6 7.05 10.95 12 12 10.95 7.05 6z" fill="currentColor" fill-rule="evenodd"/>
+</svg>

platform/ui/src/components/AboutModal/AboutModal.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { Typography, Icon } from '../';
 import PropTypes from 'prop-types';
 import detect from 'browser-detect';
 
+import Typography from '../Typography';
+import Icon from '../Icon';
+
 const Link = ({ href, children, showIcon = false }) => {
   return (
     <a href={href} target="_blank" rel="noopener noreferrer">
@@ -49,7 +51,11 @@ const AboutModal = ({ buildNumber, versionNumber, commitHash }) => {
 
   const renderRowTitle = title => (
     <div className="pb-3 mb-3 border-b-2 border-black">
-      <Typography variant="h6" className="text-primary-light">
+      <Typography
+        variant="inherit"
+        color="primaryLight"
+        className="text-[16px] font-semibold !leading-[1.2]"
+      >
         {title}
       </Typography>
     </div>

platform/ui/src/components/CinePlayer/CinePlayer.tsx

@@ -1,7 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { Icon, Tooltip, InputRange } from '../';
+
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import InputRange from '../InputRange';
 
 import './CinePlayer.css';
 import classNames from 'classnames';

platform/ui/src/components/Dialog/Body.tsx

@@ -2,17 +2,19 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Typography } from '..';
+import Typography from '../Typography';
 
 const Body = ({ text, className }) => {
   const theme = 'bg-primary-dark';
   return (
     <div className={classNames('relative flex-auto', theme, className)}>
-      <div className="p-6">
+      <Typography
-        <Typography variant="body" className="my-4 leading-relaxed">
+        variant="inherit"
-          {text}
+        color="initial"
-        </Typography>
+        className="text-[14px] !leading-[1.2]"
-      </div>
+      >
+        {text}
+      </Typography>
     </div>
   );
 };

platform/ui/src/components/Dialog/Dialog.tsx

@@ -22,12 +22,13 @@ const Dialog = ({
 }) => {
   const [value, setValue] = useState(defaultValue);
 
-  const theme = 'bg-secondary-light';
+  const theme = 'bg-primary-dark';
   const flex = 'flex flex-col';
-  const border = 'border-0 rounded-lg drop-shadow-lg';
+  const border = 'border-0 rounded';
   const outline = 'outline-none focus:outline-none';
   const position = 'relative';
   const width = 'w-full';
+  const padding = 'px-[20px] pb-[20px] pt-[13px]';
 
   useEffect(() => {
     if (onShow) {
@@ -36,7 +37,17 @@ const Dialog = ({
   }, [onShow]);
 
   return (
-    <div className={classNames(theme, flex, border, outline, position, width)}>
+    <div
+      className={classNames(
+        theme,
+        flex,
+        border,
+        outline,
+        position,
+        width,
+        padding
+      )}
+    >
       <HeaderComponent
         title={title}
         noCloseButton={noCloseButton}

platform/ui/src/components/Dialog/Footer.tsx

@@ -2,16 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Button } from '..';
+import Button from '../Button';
 
 const Footer = ({ actions, className, onSubmit, value }) => {
   const flex = 'flex items-center justify-end';
-  const border = 'border-t-2 border-solid border-black rounded-b';
+  const padding = 'pt-[20px]';
-  const spacing = 'p-6';
-  const theme = 'bg-primary-dark';
 
   return (
-    <div className={classNames(flex, border, spacing, theme, className)}>
+    <div className={classNames(flex, padding, className)}>
       {actions.map((action, index) => {
         const isFirst = index === 0;
         const isPrimary = action.type === 'primary';

platform/ui/src/components/Dialog/Header.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { Typography, Icon } from '..';
+import Typography from '../Typography';
+import Icon from '../Icon';
 
 const CloseButton = ({ onClick }) => {
   return (
@@ -10,7 +11,7 @@ const CloseButton = ({ onClick }) => {
       data-cy="close-button"
       onClick={onClick}
       name="close"
-      className="cursor-pointer text-primary-active w-6 h-6"
+      className="cursor-pointer text-primary-active"
     />
   );
 };
@@ -20,14 +21,13 @@ CloseButton.propTypes = {
 };
 
 const Header = ({ title, noCloseButton, onClose }) => {
-  const theme = 'bg-secondary-main';
+  const theme = 'bg-primary-dark';
   const flex = 'flex items-center justify-between';
-  const border = 'border-b-2 border-solid border-black rounded-t';
+  const padding = 'pb-[20px]';
-  const spacing = 'p-4';
 
   return (
-    <div className={classNames(theme, flex, border, spacing)}>
+    <div className={classNames(theme, flex, padding)}>
-      <Typography variant="h6" color="primaryActive">
+      <Typography variant="h6" color="primaryLight" className="!leading-[1.2]">
         {title}
       </Typography>
       {!noCloseButton && <CloseButton onClick={onClose} />}

platform/ui/src/components/Dropdown/Dropdown.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useCallback, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Typography } from '../';
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
   const [open, setOpen] = useState(false);

platform/ui/src/components/EmptyStudies/EmptyStudies.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon, Typography } from '../';
+
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 // TODO: Add loading spinner to OHIF + use it here.
 const EmptyStudies = ({ className }) => {

platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
 import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
-import { Icon, IconButton } from '@ohif/ui';
 import PropTypes from 'prop-types';
+
 import Modal from '../Modal';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 
 const isProduction = process.env.NODE_ENV === 'production';
 

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { IconButton, Icon } from '../';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
 
 import './ExpandableToolbarButton.css';
 

platform/ui/src/components/Header/Header.tsx

@@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
-import { NavBar, Svg, Icon, IconButton, Dropdown } from '../';
+
+import NavBar from '../NavBar';
+import Svg from '../Svg';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Dropdown from '../Dropdown';
 
 function Header({
   children,

platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { HotkeyField, Typography } from '../';
 import { useTranslation } from 'react-i18next';
 
+import HotkeyField from '../HotkeyField';
+import Typography from '../Typography';
+
 /* TODO: Move these configs and utils to core? */
 import { MODIFIER_KEYS } from './hotkeysConfig';
 import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';

platform/ui/src/components/Icon/getIcon.js

@@ -8,7 +8,7 @@ import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import clipboard from './../../assets/icons/clipboard.svg';
-import close from './../../assets/icons/close.svg';
+import close from './../../assets/icons/closeIcon.svg';
 import dottedCircle from './../../assets/icons/dotted-circle.svg';
 import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
 import chevronDown from './../../assets/icons/chevron-down.svg';

platform/ui/src/components/InputDateRange/InputDateRange.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { DateRange, InputLabelWrapper } from '../';
+import DateRange from '../DateRange';
+import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputDateRange = ({
   id,
@@ -14,7 +15,7 @@ const InputDateRange = ({
 }) => {
   const { startDate, endDate } = value;
 
-  const onClickHandler = (event) => {
+  const onClickHandler = event => {
     event.preventDefault();
     onLabelClick(event);
   };
@@ -38,11 +39,11 @@ const InputDateRange = ({
   );
 };
 
-const noop = () => { };
+const noop = () => {};
 
 InputDateRange.defaultProps = {
   value: {},
-  onLabelClick: noop
+  onLabelClick: noop,
 };
 
 InputDateRange.propTypes = {

platform/ui/src/components/InputGroup/InputGroup.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import getGridWidthClass from '../../utils/getGridWidthClass'
+import getGridWidthClass from '../../utils/getGridWidthClass';
 
-import {
+import InputText from '../InputText';
-  InputText,
+import InputDateRange from '../InputDateRange';
-  InputDateRange,
+import InputMultiSelect from '../InputMultiSelect';
-  InputMultiSelect,
+import InputLabelWrapper from '../InputLabelWrapper';
-  InputLabelWrapper,
-} from '../';
 
 const InputGroup = ({
   inputMeta,

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
-import { Icon } from '../';
+import Icon from '../Icon';
 
 const baseLabelClassName =
   'flex flex-col flex-1 text-white text-lg pl-1 select-none';
-const spanClassName = 'flex flex-row items-center cursor-pointer focus:outline-none';
+const spanClassName =
+  'flex flex-row items-center cursor-pointer focus:outline-none';
 const sortIconMap = {
   descending: 'sorting-active-up',
   ascending: 'sorting-active-down',
@@ -22,7 +23,7 @@ const InputLabelWrapper = ({
   className,
   children,
 }) => {
-  const { t } = useTranslation("StudyList")
+  const { t } = useTranslation('StudyList');
 
   const onClickHandler = e => {
     if (!isSortable) {

platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Select, InputLabelWrapper } from '../';
+import Select from '../Select';
+import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputMultiSelect = ({
   id,

platform/ui/src/components/InputText/InputText.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Input, InputLabelWrapper } from '../';
+import Input from '../Input';
+import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputText = ({
   id,
@@ -36,7 +37,7 @@ const InputText = ({
 InputText.defaultProps = {
   value: '',
   isSortable: false,
-  onLabelClick: () => { },
+  onLabelClick: () => {},
   sortDirection: 'none',
 };
 

platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import { IconButton, Icon } from '../';
+
+import IconButton from '../IconButton';
+import Icon from '../Icon';
 
 import './LegacyCinePlayerCustomInputRange.css';
 
@@ -62,7 +64,7 @@ const LegacyCinePlayer = ({
         className="mr-3 border rounded-full text-primary-active border-primary-active"
         onClick={onClose}
       >
-        <Icon name="close" width="15px" height="15px" />
+        <Icon name="close" />
       </IconButton>
     </div>
   );

platform/ui/src/components/LegacyPatientInfo/LegacyPatientInfo.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Icon, Tooltip } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
 const classes = {
   infoHeader: 'text-base text-primary-light',
   infoText: 'text-base text-white max-w-24 truncate',

platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx

@@ -1,10 +1,14 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, ButtonGroup, Button, LegacyCinePlayer } from '../';
 import useOnClickOutside from '../../utils/useOnClickOutside';
-import LegacyPatientInfo from '../LegacyPatientInfo';
 import { StringNumber } from '../../types';
 
+import LegacyPatientInfo from '../LegacyPatientInfo';
+import Icon from '../Icon';
+import ButtonGroup from '../ButtonGroup';
+import Button from '../Button';
+import LegacyCinePlayer from '../LegacyCinePlayer';
+
 const LegacyViewportActionBar = ({
   studyData,
   showNavArrows,
@@ -75,7 +79,7 @@ const LegacyViewportActionBar = ({
       <div className="flex flex-1 grow mt-2 min-w-48">
         <div className="flex items-center">
           <span className="mr-2 text-white text-large">{label}</span>
-          {showStatus && getStatusComponent()}
+          {showStatus && getStatusComponent && getStatusComponent()}
         </div>
         <div className="flex flex-col justify-start ml-4">
           <div className="flex">

platform/ui/src/components/LoadingIndicatorProgress/LoadingIndicatorProgress.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Icon } from '@ohif/ui';
+
+import Icon from '../Icon';
 import ProgressLoadingBar from '../ProgressLoadingBar';
 
 /**

platform/ui/src/components/MeasurementTable/MeasurementItem.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
+
+import Icon from '../Icon';
 
 const MeasurementItem = ({
   uid,

platform/ui/src/components/MeasurementTable/__stories__/measurementTable.stories.mdx

@@ -34,6 +34,13 @@ MeasurementTable is a component that renders the MeasurementTables.
     name="Overview"
     args={{
       title: 'Measurements',
+      servicesManager: {
+        services: {
+          customizationService: {
+            getCustomization: (title, data) => data.content,
+          }
+        },
+      },
     }}
   >
     {MeasurementTableTemplate.bind({})}
@@ -62,6 +69,13 @@ With data
           isActive: false,
         },
       ],
+      servicesManager: {
+        services: {
+          customizationService: {
+            getCustomization: (title, data) => data,
+          }
+        },
+      },
     }}
   >
     {MeasurementTableTemplate.bind({})}

platform/ui/src/components/Modal/Modal.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
+import { useModal } from '../../contextProviders';
+
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 import './Modal.css';
 
-import { Typography, Icon } from '../';
-import { useModal } from '../../contextProviders';
-
 if (typeof document !== 'undefined') {
   ReactModal.setAppElement(document.getElementById('root'));
 }
@@ -29,10 +30,11 @@ const Modal = ({
   const renderHeader = () => {
     return (
       title && (
-        <header className="flex items-center p-4 border-b-2 border-black bg-secondary-dark rounded-tl rounded-tr">
+        <header className="flex items-center px-[20px] py-[13px] bg-primary-dark rounded-tl rounded-tr">
           <Typography
-            variant="h4"
+            variant="h6"
-            className="flex grow text-primary-light font-light"
+            color="primaryLight"
+            className="flex grow !leading-[1.2]"
             data-cy="modal-header"
           >
             {title}
@@ -41,7 +43,7 @@ const Modal = ({
             <Icon
               onClick={onClose}
               name="close"
-              className="cursor-pointer text-primary-active w-6 h-6"
+              className="cursor-pointer text-primary-active"
             />
           )}
         </header>
@@ -60,7 +62,7 @@ const Modal = ({
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
     >
       {renderHeader()}
-      <section className="ohif-scrollbar modal-content overflow-y-auto px-4 py-6 rounded-bl rounded-br bg-primary-dark">
+      <section className="ohif-scrollbar modal-content overflow-y-auto px-[20px] pt-2 pb-[20px] rounded-bl rounded-br bg-primary-dark">
         {children}
       </section>
     </ReactModal>

platform/ui/src/components/Notification/Notification.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Button, Icon } from '../';
+
+import Button from '../Button';
+import Icon from '../Icon';
 
 const Notification = ({
   id,

platform/ui/src/components/PatientInfo/PatientInfo.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { Icon, Tooltip } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
 const classes = {
   infoHeader: 'text-base text-primary-light',
   infoText: 'text-base text-white max-w-24 truncate',

platform/ui/src/components/SegmentationGroupTable/SegmentationConfig.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
-import { Icon, InputRange, CheckBox, InputNumber } from '../';
 import classNames from 'classnames';
 
+import Icon from '../Icon';
+import InputRange from '../InputRange';
+import CheckBox from '../CheckBox';
+import InputNumber from '../InputNumber';
+
 const ActiveSegmentationConfig = ({
   config,
   setRenderOutline,

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+
+import Icon from '../Icon';
 
 const SegmentItem = ({
   segmentIndex,
@@ -66,7 +67,7 @@ const SegmentItem = ({
         {isSegmentIndexHovering && showSegmentDelete ? (
           <Icon
             name="close"
-            className={classnames('w-5 h-5 pr-2')}
+            className={classnames('pr-0.5')}
             onClick={e => {
               e.stopPropagation();
               onDelete(segmentationId, segmentIndex);

platform/ui/src/components/SegmentationTable/SegmentationItem.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
+
+import Icon from '../Icon';
 
 const SegmentationItem = ({
   id,
@@ -55,7 +56,7 @@ const SegmentationItem = ({
           <Icon
             name="close"
             className={classnames(
-              'w-5 transition duration-500 text-center hover:opacity-80',
+              'w-[10px] transition duration-500 text-center hover:opacity-80',
               {
                 'bg-primary-light text-black': isActive,
                 'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,

platform/ui/src/components/SegmentationTable/SegmentationTable.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from '../';
 import SegmentationItem from './SegmentationItem';
 
+import Icon from '../Icon';
+
 const SegmentationTable = ({
   title,
   segmentations,

platform/ui/src/components/Select/Select.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ReactSelect, { components } from 'react-select';
-import { Icon } from '@ohif/ui';
+
+import Icon from '../Icon';
 
 import './Select.css';
 

platform/ui/src/components/SidePanel/SidePanel.tsx

@@ -13,7 +13,10 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 
 import { PanelService, ServicesManager, Types } from '@ohif/core';
 
-import { Button, Icon, IconButton, Tooltip } from '../';
+import Button from '../Button';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Tooltip from '../Tooltip';
 
 import 'swiper/css';
 import 'swiper/css/navigation';
@@ -75,7 +78,7 @@ const SidePanel = ({
   activeTabIndex: activeTabIndexProp,
   tabs,
 }) => {
-  const panelService: PanelService = servicesManager.services.panelService;
+  const panelService: PanelService = servicesManager?.services?.panelService;
 
   const { t } = useTranslation('SidePanel');
 
@@ -128,23 +131,25 @@ const SidePanel = ({
   );
 
   useEffect(() => {
-    const activatePanelSubscription = panelService.subscribe(
+    if (panelService) {
-      panelService.EVENTS.ACTIVATE_PANEL,
+      const activatePanelSubscription = panelService.subscribe(
-      (activatePanelEvent: Types.ActivatePanelEvent) => {
+        panelService.EVENTS.ACTIVATE_PANEL,
-        if (!hasBeenOpened || activatePanelEvent.forceActive) {
+        (activatePanelEvent: Types.ActivatePanelEvent) => {
-          const tabIndex = tabs.findIndex(
+          if (!hasBeenOpened || activatePanelEvent.forceActive) {
-            tab => tab.id === activatePanelEvent.panelId
+            const tabIndex = tabs.findIndex(
-          );
+              tab => tab.id === activatePanelEvent.panelId
-          if (tabIndex !== -1) {
+            );
-            updateActiveTabIndex(tabIndex);
+            if (tabIndex !== -1) {
+              updateActiveTabIndex(tabIndex);
+            }
           }
         }
-      }
+      );
-    );
 
-    return () => {
+      return () => {
-      activatePanelSubscription.unsubscribe();
+        activatePanelSubscription.unsubscribe();
-    };
+      };
+    }
   }, [tabs, hasBeenOpened, panelService, updateActiveTabIndex]);
 
   const getCloseStateComponent = () => {

platform/ui/src/components/SidePanel/__stories__/sidePanel.stories.mdx

@@ -32,6 +32,16 @@ SidePanel is a component that renders the SidePanels.
     args={{
       side: 'left',
       defaultComponentOpen: 'Example',
+      tabs: [
+        {
+          id: 'tab1',
+          name: 'tab1',
+          label: 'Tab 1',
+          iconName: 'group-layers',
+          iconLabel: 'group-layers',
+          content: () => <div class="text-primary-light p-3">Hello</div>,
+        }
+      ],
       childComponents: [
         {
           iconName: 'home',

platform/ui/src/components/Snackbar/SnackbarItem.tsx

@@ -56,7 +56,7 @@ const SnackbarItem = ({ options, onClose }) => {
           onClick={handleClose}
           className="w-5 h-5 rounded-full flex items-center justify-center self-start ml-auto relative left-[3px] top-[-3px] text-[#0944b3]"
         >
-          <Icon name="close" className="w-5 h-5 text-black" />
+          <Icon name="close" className="text-black" />
         </div>
       </div>
     </div>

platform/ui/src/components/SplitButton/SplitButton.tsx

@@ -4,7 +4,10 @@ import classNames from 'classnames';
 import OutsideClickHandler from 'react-outside-click-handler';
 import { useTranslation } from 'react-i18next';
 
-import { Icon, Tooltip, ListMenu, ToolbarButton } from '../';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import ListMenu from '../ListMenu';
+import ToolbarButton from '../ToolbarButton';
 
 const baseClasses = {
   Button:
@@ -92,7 +95,7 @@ const SplitButton = ({
 }) => {
   const { t } = useTranslation('Buttons');
 
-  const { toolbarService } = servicesManager.services;
+  const { toolbarService } = servicesManager?.services || {};
 
   const { primaryToolId, toggles } = bState;
   /* Bubbles up individual item clicks */
@@ -146,7 +149,7 @@ const SplitButton = ({
     (isPrimaryToggle && toggles[state.primary.id] === true);
 
   const PrimaryButtonComponent =
-    toolbarService.getButtonComponentForUIType(state.primary.uiType) ??
+    toolbarService?.getButtonComponentForUIType(state.primary.uiType) ??
     ToolbarButton;
 
   const primaryButtonClassName = classes.Primary({

platform/ui/src/components/StudyBrowser/StudyBrowser.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { ButtonGroup, Button, StudyItem, ThumbnailList } from '../';
+import StudyItem from '../StudyItem';
+import ButtonGroup from '../ButtonGroup';
+import Button from '../Button';
+import ThumbnailList from '../ThumbnailList';
 import { StringNumber } from '../../types';
 
 const getTrackedSeries = displaySets => {
@@ -171,7 +174,7 @@ StudyBrowser.propTypes = {
   ),
 };
 
-const noop = () => { };
+const noop = () => {};
 
 StudyBrowser.defaultProps = {
   onClickTab: noop,

platform/ui/src/components/StudyItem/StudyItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon } from '../';
+import Icon from '../Icon';
 
 const baseClasses =
   'first:border-0 border-t border-secondary-light cursor-pointer select-none outline-none';

platform/ui/src/components/StudyListExpandedRow/StudyListExpandedRow.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Table, TableHead, TableBody, TableRow, TableCell } from '../';
+import Table from '../Table';
+import TableHead from '../TableHead';
+import TableBody from '../TableBody';
+import TableRow from '../TableRow';
+import TableCell from '../TableCell';
 
 const StudyListExpandedRow = ({
   seriesTableColumns,
@@ -11,7 +15,6 @@ const StudyListExpandedRow = ({
 }) => {
   const { t } = useTranslation('StudyList');
 
-
   return (
     <div className="w-full bg-black py-4 pl-12 pr-2">
       <div className="block">{children}</div>

platform/ui/src/components/StudyListFilter/StudyListFilter.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Icon, Typography, InputGroup } from '../';
+import Button from '../Button';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import InputGroup from '../InputGroup';
 
 const StudyListFilter = ({
   filtersMeta,

platform/ui/src/components/StudyListPagination/StudyListPagination.tsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ButtonGroup, Typography, Select } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Button from '../Button';
+import ButtonGroup from '../ButtonGroup';
+import Typography from '../Typography';
+import Select from '../Select';
+
 const StudyListPagination = ({
   onChangePage,
   currentPage,

platform/ui/src/components/StudyListTable/StudyListTableRow.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
 import getGridWidthClass from '../../utils/getGridWidthClass';
 
+import Icon from '../Icon';
+
 const StudyListTableRow = props => {
   const { tableData } = props;
   const { row, expandedContent, onClickRow, isExpanded } = tableData;

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
-import { Icon } from '../';
+import Icon from '../Icon';
 import { StringNumber } from '../../types';
 
 /**

platform/ui/src/components/ThumbnailList/ThumbnailList.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '../';
+import Thumbnail from '../Thumbnail';
+import ThumbnailNoImage from '../ThumbnailNoImage';
+import ThumbnailTracked from '../ThumbnailTracked';
 import * as Types from '../../types';
 
 const ThumbnailList = ({

platform/ui/src/components/ThumbnailNoImage/ThumbnailNoImage.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { useDrag } from 'react-dnd';
-import { Icon, Tooltip, Typography } from '../';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
 
 const ThumbnailNoImage = ({
   displaySetInstanceUID,

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, Thumbnail, Tooltip } from '../';
+import Icon from '../Icon';
+import Thumbnail from '../Thumbnail';
+import Tooltip from '../Tooltip';
 import { StringNumber } from '../../types';
 
 const ThumbnailTracked = ({

platform/ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { IconButton, Icon, Tooltip } from '../';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
 
 const ToolbarButton = ({
   type = 'tool',

platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '../';
+
+import Icon from '../Icon';
 
 const DELAY_TO_SHOW = 1000;
 const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide

platform/ui/src/components/Typography/Typography.tsx

@@ -46,6 +46,7 @@ const classes = {
     inherit: 'text-inherit',
     primary: 'text-primary-main',
     primaryActive: 'text-primary-active',
+    primaryLight: 'text-primary-light',
     secondary: 'text-common-light',
     error: 'text-red-600',
   },
@@ -133,7 +134,7 @@ Typography.propTypes = {
     'primaryActive',
     'secondary',
     'error',
-    'primaryActive',
+    'primaryLight',
   ]),
   className: PropTypes.string,
   children: PropTypes.node,

platform/ui/src/components/UserPreferences/UserPreferences.tsx

@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Select, Typography, Button, HotkeysPreferences } from '../';
 import { useTranslation } from 'react-i18next';
 
+import Select from '../Select';
+import Typography from '../Typography';
+import Button from '../Button';
+import HotkeysPreferences from '../HotkeysPreferences';
+
 const UserPreferences = ({
   availableLanguages,
   defaultLanguage,
@@ -63,8 +67,9 @@ const UserPreferences = ({
     <>
       <div className="border-b-2 border-black mb-2">
         <Typography
-          variant="h5"
+          variant="inherit"
-          className="flex grow text-primary-light font-light pb-2"
+          color="primaryLight"
+          className="flex text-[16px] font-semibold pb-2 !leading-[1.2]"
         >
           {title}
         </Typography>
@@ -74,7 +79,7 @@ const UserPreferences = ({
   );
 
   return (
-    <div className="p-2">
+    <>
       <Section title={t('General')}>
         <div className="flex flex-row justify-center items-center w-72">
           <Typography variant="subtitle" className="mr-5 text-right h-full">
@@ -122,7 +127,7 @@ const UserPreferences = ({
           </Button>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

platform/ui/src/components/Viewport/Viewport.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { LegacyViewportActionBar, Notification } from '../';
+import LegacyViewportActionBar from '../LegacyViewportActionBar';
+import Notification from '../Notification';
 
 const Viewport = ({
   viewportId,

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -7,10 +7,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Icon } from '..';
 import { useResizeObserver } from '../../hooks';
 import useOnClickOutside from '../../utils/useOnClickOutside';
+
 import PatientInfo from '../PatientInfo';
+import Icon from '../Icon';
 
 export type ViewportActionBarProps = {
   studyData: any;

platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx

@@ -7,16 +7,14 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
+import Typography from '../Typography';
-  Typography,
+import Input from '../Input';
-  Input,
+import Tooltip from '../Tooltip';
-  Tooltip,
+import IconButton from '../IconButton';
-  IconButton,
+import Icon from '../Icon';
-  Icon,
+import Select from '../Select';
-  Select,
+import InputLabelWrapper from '../InputLabelWrapper';
-  InputLabelWrapper,
+import Button from '../Button';
-  Button,
-} from '../';
 
 const FILE_TYPE_OPTIONS = [
   {

platform/ui/src/contextProviders/DialogProvider.tsx

@@ -219,7 +219,7 @@ const DialogProvider = ({ children, service }) => {
               isDragging && 'dragging',
               isDraggable && 'draggable'
             )}
-            style={{ zIndex: '999', position: 'absolute' }}
+            style={{ zIndex: '999', position: 'absolute', width: '350px' }}
             onClick={() => _bringToFront(id)}
           >
             <DialogContent {...dialog} {...contentProps} />

version.json

@@ -1,4 +1,4 @@
 {
-  "version": "3.6.0-beta.0",
+  "version": "3.7.0-beta.0",
-  "commit": "eb1550536c467a97394af88a80f823a03d5c8d63"
+  "commit": "c80dbb225e4e4673b1205a8419c82edef65fdfcb"
 }

version.txt

@@ -1 +1 @@
-3.6.0-beta.0
+3.7.0-beta.0