@ohif/app 3.8.0-beta.63 → 3.8.0-beta.65

package/dist/{app.bundle.22ffa6050ebef98b2066.js → app.bundle.0c24b249dc8b631916ef.js}

@@ -51,7 +51,7 @@ var useSearchParams = __webpack_require__(86669);
 
 /***/ }),
 
-/***/ 45573:
+/***/ 68870:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -99,12 +99,12 @@ Compose.propTypes = {
   components: (prop_types_default()).array,
   children: (prop_types_default()).node.isRequired
 };
-// EXTERNAL MODULE: ../../ui/src/index.js + 489 modules
-var ui_src = __webpack_require__(6804);
+// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
+var ui_src = __webpack_require__(58046);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(15575);
-// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
-var core_src = __webpack_require__(14283);
+// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
+var core_src = __webpack_require__(78198);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
 var react_router_dist = __webpack_require__(10971);
 // EXTERNAL MODULE: ./hooks/useSearchParams.ts
@@ -993,7 +993,7 @@ function WorkList({
           }) // launch-arrow | launch-info
           ,
           onClick: () => {},
-          "data-cy": `mode-${mode.routeName}-${studyInstanceUid}`,
+          dataCY: `mode-${mode.routeName}-${studyInstanceUid}`,
           className: isValidMode ? 'text-[13px]' : 'bg-[#222d44] text-[13px]'
         }, mode.displayName));
       }))),
@@ -1002,8 +1002,8 @@ function WorkList({
     };
   });
   const hasStudies = numOfStudies > 0;
-  const versionNumber = "3.8.0-beta.63";
-  const commitHash = "45b68e841dcb9e28a2ea991c37ee7ac4a8c5b71e";
+  const versionNumber = "3.8.0-beta.65";
+  const commitHash = "617043fe0da5de91fbea4ac33a27f1df16ae1ca6";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -1533,6 +1533,7 @@ function ViewerViewportGrid(props) {
     numRows
   } = layout;
   const elementRef = (0,react.useRef)(null);
+  const layoutHash = (0,react.useRef)(null);
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const {
@@ -1541,6 +1542,7 @@ function ViewerViewportGrid(props) {
     hangingProtocolService,
     uiNotificationService
   } = servicesManager.services;
+  const generateLayoutHash = () => `${numCols}-${numRows}`;
 
   /**
    * This callback runs after the viewports structure has changed in any way.
@@ -1641,6 +1643,16 @@ function ViewerViewportGrid(props) {
       unsubscribe();
     };
   }, []);
+
+  // Check viewport readiness in useEffect
+  (0,react.useEffect)(() => {
+    const allReady = viewportGridService.getGridViewportsReady();
+    const sameLayoutHash = layoutHash.current === generateLayoutHash();
+    if (allReady && !sameLayoutHash) {
+      layoutHash.current = generateLayoutHash();
+      viewportGridService.publishViewportsReady();
+    }
+  }, [viewportGridService, generateLayoutHash]);
   (0,react.useEffect)(() => {
     const {
       unsubscribe
@@ -1811,7 +1823,10 @@ function ViewerViewportGrid(props) {
         dataSource: dataSource,
         viewportOptions: viewportOptions,
         displaySetOptions: displaySetOptions,
-        needsRerendering: displaySetsNeedsRerendering
+        needsRerendering: displaySetsNeedsRerendering,
+        onReady: () => {
+          viewportGridService.setViewportIsReady(viewportId, true);
+        }
       })));
     }
     return viewportPanes;
@@ -1876,68 +1891,6 @@ function _getViewportComponent(displaySets, viewportComponents, uiNotificationSe
   return components_EmptyViewport;
 }
 /* harmony default export */ const ViewportGrid = (ViewerViewportGrid);
-;// CONCATENATED MODULE: ./routes/Mode/studiesList.ts
-
-/**
- * Compare function for sorting
- *
- * @param a - some simple value (string, number, timestamp)
- * @param b - some simple value
- * @param defaultCompare - default return value as a fallback when a===b
- * @returns - compare a and b, returning 1 if a<b -1 if a>b and defaultCompare otherwise
- */
-const compare = (a, b, defaultCompare = 0) => {
-  if (a === b) {
-    return defaultCompare;
-  }
-  if (a < b) {
-    return 1;
-  }
-  return -1;
-};
-
-/**
- * The studies from display sets gets the studies in study date
- * order or in study instance UID order - not very useful, but
- * if not specifically specified then at least making it consistent is useful.
- */
-const getStudiesfromDisplaySets = displaysets => {
-  const studyMap = {};
-  const ret = displaySets.reduce((prev, curr) => {
-    const {
-      StudyInstanceUID
-    } = curr;
-    if (!studyMap[StudyInstanceUID]) {
-      const study = core_src.DicomMetadataStore.getStudy(StudyInstanceUID);
-      studyMap[StudyInstanceUID] = study;
-      prev.push(study);
-    }
-    return prev;
-  }, []);
-  // Return the sorted studies, first on study date and second on study instance UID
-  ret.sort((a, b) => {
-    return compare(a.StudyDate, b.StudyDate, compare(a.StudyInstanceUID, b.StudyInstanceUID));
-  });
-  return ret;
-};
-
-/**
- * The studies retrieve from the Uids is faster and gets the studies
- * in the original order, as specified.
- */
-const getStudiesFromUIDs = studyUids => {
-  if (!studyUids?.length) {
-    return;
-  }
-  return studyUids.map(uid => core_src.DicomMetadataStore.getStudy(uid));
-};
-
-/** Gets the array of studies */
-const getStudies = (studyUids, displaySets) => {
-  return getStudiesFromUIDs(studyUids) || getStudiesfromDisplaySets(displaySets);
-};
-/* harmony default export */ const studiesList = (getStudies);
-
 ;// CONCATENATED MODULE: ./utils/history.ts
 const history_history = {
   navigate: null
@@ -1962,15 +1915,15 @@ modes.push("@ohif/mode-microscopy");
 async function loadModule(module) {
   if (typeof module !== 'string') return module;
   if (module === "@ohif/extension-default") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(931), __webpack_require__.e(704), __webpack_require__.e(481)]).then(__webpack_require__.bind(__webpack_require__, 49704));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(931), __webpack_require__.e(90), __webpack_require__.e(481)]).then(__webpack_require__.bind(__webpack_require__, 54090));
     return imported.default;
   }
   if (module === "@ohif/extension-cornerstone") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(290), __webpack_require__.e(963)]).then(__webpack_require__.bind(__webpack_require__, 34963));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(290), __webpack_require__.e(701)]).then(__webpack_require__.bind(__webpack_require__, 20701));
     return imported.default;
   }
   if (module === "@ohif/extension-measurement-tracking") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(342), __webpack_require__.e(931), __webpack_require__.e(835), __webpack_require__.e(704), __webpack_require__.e(559), __webpack_require__.e(155)]).then(__webpack_require__.bind(__webpack_require__, 63934));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(342), __webpack_require__.e(931), __webpack_require__.e(835), __webpack_require__.e(90), __webpack_require__.e(559), __webpack_require__.e(155)]).then(__webpack_require__.bind(__webpack_require__, 63934));
     return imported.default;
   }
   if (module === "@ohif/extension-cornerstone-dicom-sr") {
@@ -1978,7 +1931,7 @@ async function loadModule(module) {
     return imported.default;
   }
   if (module === "@ohif/extension-cornerstone-dicom-seg") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(342), __webpack_require__.e(931), __webpack_require__.e(726), __webpack_require__.e(704), __webpack_require__.e(50)]).then(__webpack_require__.bind(__webpack_require__, 71093));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(504), __webpack_require__.e(191), __webpack_require__.e(644), __webpack_require__.e(342), __webpack_require__.e(931), __webpack_require__.e(726), __webpack_require__.e(90), __webpack_require__.e(638)]).then(__webpack_require__.bind(__webpack_require__, 92169));
     return imported.default;
   }
   if (module === "@ohif/extension-dicom-microscopy") {
@@ -2006,11 +1959,11 @@ async function loadModule(module) {
     return imported.default;
   }
   if (module === "@ohif/mode-longitudinal") {
-    const imported = await __webpack_require__.e(/* import() */ 68).then(__webpack_require__.bind(__webpack_require__, 76068));
+    const imported = await __webpack_require__.e(/* import() */ 41).then(__webpack_require__.bind(__webpack_require__, 97041));
     return imported.default;
   }
   if (module === "@ohif/mode-segmentation") {
-    const imported = await __webpack_require__.e(/* import() */ 317).then(__webpack_require__.bind(__webpack_require__, 55317));
+    const imported = await __webpack_require__.e(/* import() */ 699).then(__webpack_require__.bind(__webpack_require__, 40080));
     return imported.default;
   }
   if (module === "@ohif/mode-tmtv") {
@@ -2022,7 +1975,7 @@ async function loadModule(module) {
     return imported.default;
   }
   if (module === "@ohif/mode-test") {
-    const imported = await __webpack_require__.e(/* import() */ 250).then(__webpack_require__.bind(__webpack_require__, 11250));
+    const imported = await __webpack_require__.e(/* import() */ 448).then(__webpack_require__.bind(__webpack_require__, 14448));
     return imported.default;
   }
   if (module === "@ohif/mode-basic-dev-mode") {
@@ -2038,6 +1991,68 @@ function importItems(modules) {
   return Promise.all(modules.map(loadModule));
 }
 
+;// CONCATENATED MODULE: ./routes/Mode/studiesList.ts
+
+/**
+ * Compare function for sorting
+ *
+ * @param a - some simple value (string, number, timestamp)
+ * @param b - some simple value
+ * @param defaultCompare - default return value as a fallback when a===b
+ * @returns - compare a and b, returning 1 if a<b -1 if a>b and defaultCompare otherwise
+ */
+const compare = (a, b, defaultCompare = 0) => {
+  if (a === b) {
+    return defaultCompare;
+  }
+  if (a < b) {
+    return 1;
+  }
+  return -1;
+};
+
+/**
+ * The studies from display sets gets the studies in study date
+ * order or in study instance UID order - not very useful, but
+ * if not specifically specified then at least making it consistent is useful.
+ */
+const getStudiesfromDisplaySets = displaysets => {
+  const studyMap = {};
+  const ret = displaySets.reduce((prev, curr) => {
+    const {
+      StudyInstanceUID
+    } = curr;
+    if (!studyMap[StudyInstanceUID]) {
+      const study = core_src.DicomMetadataStore.getStudy(StudyInstanceUID);
+      studyMap[StudyInstanceUID] = study;
+      prev.push(study);
+    }
+    return prev;
+  }, []);
+  // Return the sorted studies, first on study date and second on study instance UID
+  ret.sort((a, b) => {
+    return compare(a.StudyDate, b.StudyDate, compare(a.StudyInstanceUID, b.StudyInstanceUID));
+  });
+  return ret;
+};
+
+/**
+ * The studies retrieve from the Uids is faster and gets the studies
+ * in the original order, as specified.
+ */
+const getStudiesFromUIDs = studyUids => {
+  if (!studyUids?.length) {
+    return;
+  }
+  return studyUids.map(uid => core_src.DicomMetadataStore.getStudy(uid));
+};
+
+/** Gets the array of studies */
+const getStudies = (studyUids, displaySets) => {
+  return getStudiesFromUIDs(studyUids) || getStudiesfromDisplaySets(displaySets);
+};
+/* harmony default export */ const studiesList = (getStudies);
+
 ;// CONCATENATED MODULE: ./utils/isSeriesFilterUsed.ts
 /**
  * This function is used to check if the filter is used. Its intend is to
@@ -2055,23 +2070,12 @@ function isSeriesFilterUsed(instances, filters) {
   }
   return seriesInstanceUIDs.includes(instances[0].SeriesInstanceUID);
 }
-;// CONCATENATED MODULE: ./routes/Mode/Mode.tsx
-
-
-
-// TODO: DicomMetadataStore should be injected?
-
-
-
-
-
-
+;// CONCATENATED MODULE: ./routes/Mode/defaultRouteInit.ts
 
 
 
 
 const {
-  getSplitParam,
   sortingCriteria
 } = core_src.utils;
 
@@ -2190,6 +2194,55 @@ function defaultRouteInit({
   });
   return unsubscriptions;
 }
+;// CONCATENATED MODULE: ./routes/Mode/updateAuthServiceAndCleanUrl.ts
+/**
+ * Updates the user authentication service with the provided token and cleans the token from the URL.
+ * @param token - The token to set in the user authentication service.
+ * @param location - The location object from the router.
+ * @param userAuthenticationService - The user authentication service instance.
+ */
+function updateAuthServiceAndCleanUrl(token, location, userAuthenticationService) {
+  if (!token) {
+    return;
+  }
+
+  // if a token is passed in, set the userAuthenticationService to use it
+  // for the Authorization header for all requests
+  userAuthenticationService.setServiceImplementation({
+    getAuthorizationHeader: () => ({
+      Authorization: 'Bearer ' + token
+    })
+  });
+
+  // Create a URL object with the current location
+  const urlObj = new URL(window.location.origin + window.location.pathname + location.search);
+
+  // Remove the token from the URL object
+  urlObj.searchParams.delete('token');
+  const cleanUrl = urlObj.toString();
+
+  // Update the browser's history without the token
+  if (window.history && window.history.replaceState) {
+    window.history.replaceState(null, '', cleanUrl);
+  }
+}
+;// CONCATENATED MODULE: ./routes/Mode/Mode.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+const {
+  getSplitParam
+} = core_src.utils;
 function ModeRoute({
   mode,
   dataSourceName,
@@ -2219,7 +2272,7 @@ function ModeRoute({
   const lowerCaseSearchParams = (0,hooks/* useSearchParams */.o)({
     lowerCaseKeys: true
   });
-  const [studyInstanceUIDs, setStudyInstanceUIDs] = (0,react.useState)();
+  const [studyInstanceUIDs, setStudyInstanceUIDs] = (0,react.useState)(null);
   const [refresh, setRefresh] = (0,react.useState)(false);
   const [ExtensionDependenciesLoaded, setExtensionDependenciesLoaded] = (0,react.useState)(false);
   const layoutTemplateData = (0,react.useRef)(false);
@@ -2246,25 +2299,7 @@ function ModeRoute({
   const runTimeHangingProtocolId = lowerCaseSearchParams.get('hangingprotocolid');
   const token = lowerCaseSearchParams.get('token');
   if (token) {
-    // if a token is passed in, set the userAuthenticationService to use it
-    // for the Authorization header for all requests
-    userAuthenticationService.setServiceImplementation({
-      getAuthorizationHeader: () => ({
-        Authorization: 'Bearer ' + token
-      })
-    });
-
-    // Create a URL object with the current location
-    const urlObj = new URL(window.location.origin + window.location.pathname + location.search);
-
-    // Remove the token from the URL object
-    urlObj.searchParams.delete('token');
-    const cleanUrl = urlObj.toString();
-
-    // Update the browser's history without the token
-    if (window.history && window.history.replaceState) {
-      window.history.replaceState(null, '', cleanUrl);
-    }
+    updateAuthServiceAndCleanUrl(token, location, userAuthenticationService);
   }
 
   // Preserve the old array interface for hotkeys
@@ -2279,32 +2314,6 @@ function ModeRoute({
 
   // Only handling one route per mode for now
   const route = mode.routes[0];
-
-  // For each extension, look up their context modules
-  // TODO: move to extension manager.
-  let contextModules = [];
-  Object.keys(extensions).forEach(extensionId => {
-    const allRegisteredModuleIds = Object.keys(extensionManager.modulesMap);
-    const moduleIds = allRegisteredModuleIds.filter(id => id.includes(`${extensionId}.contextModule.`));
-    if (!moduleIds || !moduleIds.length) {
-      return;
-    }
-    const modules = moduleIds.map(extensionManager.getModuleEntry);
-    contextModules = contextModules.concat(modules);
-  });
-  const contextModuleProviders = contextModules.map(a => a.provider);
-  const CombinedContextProvider = ({
-    children
-  }) => Compose({
-    components: contextModuleProviders,
-    children
-  });
-  function ViewportGridWithDataSource(props) {
-    return ViewportGrid({
-      ...props,
-      dataSource
-    });
-  }
   (0,react.useEffect)(() => {
     const loadExtensions = async () => {
       const loadedExtensions = await importItems(Object.keys(extensions));
@@ -2349,7 +2358,7 @@ function ModeRoute({
     };
   }, [location, ExtensionDependenciesLoaded]);
   (0,react.useEffect)(() => {
-    if (!ExtensionDependenciesLoaded) {
+    if (!ExtensionDependenciesLoaded || !studyInstanceUIDs?.length) {
       return;
     }
     const retrieveLayoutData = async () => {
@@ -2363,7 +2372,7 @@ function ModeRoute({
         setRefresh(!refresh);
       }
     };
-    if (studyInstanceUIDs?.length && studyInstanceUIDs[0] !== undefined) {
+    if (Array.isArray(studyInstanceUIDs) && studyInstanceUIDs[0]) {
       retrieveLayoutData();
     }
     return () => {
@@ -2371,7 +2380,7 @@ function ModeRoute({
     };
   }, [studyInstanceUIDs, ExtensionDependenciesLoaded]);
   (0,react.useEffect)(() => {
-    if (!hotkeys || !ExtensionDependenciesLoaded) {
+    if (!hotkeys || !ExtensionDependenciesLoaded || !studyInstanceUIDs?.length) {
       return;
     }
     hotkeysManager.setDefaultHotKeys(hotkeys);
@@ -2384,9 +2393,9 @@ function ModeRoute({
     return () => {
       hotkeysManager.destroy();
     };
-  }, [ExtensionDependenciesLoaded]);
+  }, [ExtensionDependenciesLoaded, hotkeys, studyInstanceUIDs]);
   (0,react.useEffect)(() => {
-    if (!layoutTemplateData.current || !ExtensionDependenciesLoaded) {
+    if (!layoutTemplateData.current || !ExtensionDependenciesLoaded || !studyInstanceUIDs?.length) {
       return;
     }
     const setupRouteInit = async () => {
@@ -2493,20 +2502,57 @@ function ModeRoute({
       extensionManager.onModeExit();
     };
   }, [mode, dataSourceName, location, ExtensionDependenciesLoaded, route, servicesManager, extensionManager, hotkeysManager, studyInstanceUIDs, refresh]);
-  const renderLayoutData = props => {
+  if (!studyInstanceUIDs || !layoutTemplateData.current || !ExtensionDependenciesLoaded) {
+    return null;
+  }
+  const ViewportGridWithDataSource = props => {
+    return ViewportGrid({
+      ...props,
+      dataSource
+    });
+  };
+  const CombinedExtensionsContextProvider = createCombinedContextProvider(extensionManager, servicesManager, commandsManager);
+  const getLayoutComponent = props => {
     const layoutTemplateModuleEntry = extensionManager.getModuleEntry(layoutTemplateData.current.id);
     const LayoutComponent = layoutTemplateModuleEntry.component;
     return /*#__PURE__*/react.createElement(LayoutComponent, props);
   };
-  return /*#__PURE__*/react.createElement(ui_src/* ImageViewerProvider */.xy
-  // initialState={{ StudyInstanceUIDs: StudyInstanceUIDs }}
-  , {
-    StudyInstanceUIDs: studyInstanceUIDs
-    // reducer={reducer}
-  }, /*#__PURE__*/react.createElement(CombinedContextProvider, null, /*#__PURE__*/react.createElement(ui_src/* DragAndDropProvider */.G8, null, layoutTemplateData.current && studyInstanceUIDs?.[0] !== undefined && ExtensionDependenciesLoaded && renderLayoutData({
+  const LayoutComponent = getLayoutComponent({
     ...layoutTemplateData.current.props,
     ViewportGridComp: ViewportGridWithDataSource
-  }))));
+  });
+  return /*#__PURE__*/react.createElement(ui_src/* ImageViewerProvider */.xy, {
+    StudyInstanceUIDs: studyInstanceUIDs
+  }, CombinedExtensionsContextProvider ? /*#__PURE__*/react.createElement(CombinedExtensionsContextProvider, null, /*#__PURE__*/react.createElement(ui_src/* DragAndDropProvider */.G8, null, LayoutComponent)) : /*#__PURE__*/react.createElement(ui_src/* DragAndDropProvider */.G8, null, LayoutComponent));
+}
+
+/**
+ * Creates a combined context provider using the context modules from the extension manager.
+ * @param {object} extensionManager - The extension manager instance.
+ * @param {object} servicesManager - The services manager instance.
+ * @param {object} commandsManager - The commands manager instance.
+ * @returns {React.Component} - A React component that provides combined contexts to its children.
+ */
+function createCombinedContextProvider(extensionManager, servicesManager, commandsManager) {
+  const extensionsContextModules = extensionManager.getModulesByType(extensionManager.constructor.MODULE_TYPES.CONTEXT);
+  if (!extensionsContextModules?.length) {
+    return;
+  }
+  const contextModuleProviders = extensionsContextModules.flatMap(({
+    module
+  }) => {
+    return module.map(aContextModule => {
+      return aContextModule.provider;
+    });
+  });
+  return ({
+    children
+  }) => {
+    return Compose({
+      components: contextModuleProviders,
+      children
+    });
+  };
 }
 ModeRoute.propTypes = {
   mode: (prop_types_default()).object.isRequired,
@@ -2781,7 +2827,8 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
     hotkeysManager,
     appConfig
   });
-  servicesManager.registerServices([core_src/* UINotificationService */.v4.REGISTRATION, core_src/* UIModalService */.zo.REGISTRATION, core_src/* UIDialogService */.u$.REGISTRATION, core_src/* UIViewportDialogService */.A$.REGISTRATION, core_src.MeasurementService.REGISTRATION, core_src/* DisplaySetService */.IO.REGISTRATION, [core_src/* CustomizationService */.V0.REGISTRATION, appConfig.customizationService], core_src/* ToolbarService */.hx.REGISTRATION, core_src/* ViewportGridService */.sI.REGISTRATION, core_src/* HangingProtocolService */.Qe.REGISTRATION, core_src/* CineService */.xx.REGISTRATION, core_src/* UserAuthenticationService */.pS.REGISTRATION, core_src/* PanelService */.Mr.REGISTRATION, core_src/* StateSyncService */.wb.REGISTRATION]);
+  servicesManager.setExtensionManager(extensionManager);
+  servicesManager.registerServices([core_src/* UINotificationService */.v4.REGISTRATION, core_src/* UIModalService */.zo.REGISTRATION, core_src/* UIDialogService */.u$.REGISTRATION, core_src/* UIViewportDialogService */.A$.REGISTRATION, core_src.MeasurementService.REGISTRATION, core_src/* DisplaySetService */.IO.REGISTRATION, [core_src/* CustomizationService */.V0.REGISTRATION, appConfig.customizationService], core_src.ToolbarService.REGISTRATION, core_src/* ViewportGridService */.sI.REGISTRATION, core_src/* HangingProtocolService */.Qe.REGISTRATION, core_src/* CineService */.xx.REGISTRATION, core_src/* UserAuthenticationService */.pS.REGISTRATION, core_src/* PanelService */.Mr.REGISTRATION, core_src/* StateSyncService */.wb.REGISTRATION]);
   core_src/* errorHandler */.r_.getHTTPErrorHandler = () => {
     if (typeof appConfig.httpErrorHandler === 'function') {
       return appConfig.httpErrorHandler;
@@ -3175,7 +3222,7 @@ function App({
     service: userAuthenticationService
   }], [es/* I18nextProvider */.xC, {
     i18n: src/* default */.A
-  }], [ui_src/* ThemeWrapper */.L$], [ui_src/* ViewportGridProvider */.ql, {
+  }], [ui_src/* ThemeWrapper */.L$], [ui_src/* ToolboxProvider */.nB], [ui_src/* ViewportGridProvider */.ql, {
     service: viewportGridService
   }], [ui_src/* ViewportDialogProvider */.cm, {
     service: uiViewportDialogService
@@ -6486,7 +6533,7 @@ const detectionOptions = {
   }
 });
 ;// CONCATENATED MODULE: ../../i18n/package.json
-const package_namespaceObject = /*#__PURE__*/JSON.parse('{"rE":"3.8.0-beta.62"}');
+const package_namespaceObject = /*#__PURE__*/JSON.parse('{"rE":"3.8.0-beta.64"}');
 ;// CONCATENATED MODULE: ../../i18n/src/utils.js
 const languagesMap = {
   ar: 'Arabic',
@@ -8969,21 +9016,46 @@ toolCapture.defaultProps = {
 var toolLayout = function toolLayout(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
     fill: "none",
-    fillRule: "evenodd",
-    stroke: "currentColor",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M0 0h28v28H0z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M.5 9.995v7.9a2 2 0 0 0 2 2h8.862M19.695 6.357V2.5a2 2 0 0 0-2-2h-7.7 0",
+    strokeWidth: "1.25",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.4.5H2.5a2 2 0 0 0-2 2v7.7h0",
+    strokeWidth: "1.25",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    opacity: ".55",
     strokeLinecap: "round",
-    strokeLinejoin: "round",
     strokeWidth: "1.5"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    fill: "currentColor",
-    d: "M9.313 8.52a.793.793 0 0 1-.792.793H2.188a.792.792 0 0 1-.792-.792V2.188c0-.438.354-.792.791-.792h6.334c.437 0 .792.354.792.791v6.334z"
+    d: "M10 17V3M3 10h13"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "rotate(-20 43.208 -34.372)",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.25"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
+    cx: "5.124",
+    cy: "5.767",
+    r: "1.282"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M19.604 8.52a.792.792 0 0 1-.791.793h-6.334a.792.792 0 0 1-.791-.792V2.188c0-.438.354-.792.791-.792h6.334a.79.79 0 0 1 .791.791v6.334zM9.313 18.813a.792.792 0 0 1-.792.791H2.188a.791.791 0 0 1-.792-.791v-6.334a.79.79 0 0 1 .791-.791h6.334c.437 0 .792.354.792.791v6.334zm10.291 0a.79.79 0 0 1-.791.791h-6.334a.79.79 0 0 1-.791-.791v-6.334a.79.79 0 0 1 .791-.791h6.334a.79.79 0 0 1 .791.791v6.334z"
-  })));
+    d: "m6.214.808.377 1.241a.85.85 0 0 0 1.003.582l1.259-.292a1.144 1.144 0 0 1 1.089 1.896l-.88.95a.856.856 0 0 0 0 1.16l.88.949a1.144 1.144 0 0 1-1.09 1.896l-1.258-.292a.849.849 0 0 0-1.007.586l-.377 1.241a1.138 1.138 0 0 1-2.179 0l-.374-1.241A.848.848 0 0 0 2.654 8.9l-1.258.292a1.144 1.144 0 0 1-1.09-1.896l.881-.95a.856.856 0 0 0 0-1.16l-.88-.95a1.144 1.144 0 0 1 1.089-1.895l1.258.291a.848.848 0 0 0 1.003-.581L4.035.81A1.138 1.138 0 0 1 6.214.808Z"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    strokeLinejoin: "round",
+    d: "m21 27.25-2.5-2.632.35-.368L21 26.513l2.15-2.263.35.368z"
+  }))));
 };
 toolLayout.defaultProps = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 21 21"
+  width: "28",
+  height: "28",
+  viewBox: "0 0 28 28",
+  xmlns: "http://www.w3.org/2000/svg"
 };
 var toolMore = function toolMore(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
@@ -9968,19 +10040,19 @@ var iconToolBrush = function iconToolBrush(props) {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M3.246 22.329a.432.432 0 0 1 .024-.79c2.056-.833 1.394-3.177 2.004-4.43a3.075 3.075 0 0 1 4.083-1.405c4.592 2.238-.874 9.117-6.11 6.625ZM21.597 3.302a1.194 1.194 0 0 0-1.635.045L9.692 13.589a5.196 5.196 0 0 1 3.129 2.646l8.92-11.298a1.194 1.194 0 0 0-.144-1.635Z",
+    d: "M0 0h24v24H0z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M3.246 21.829a.432.432 0 0 1 .024-.79c2.056-.833 1.394-3.177 2.004-4.43a3.075 3.075 0 0 1 4.083-1.405c4.592 2.238-.874 9.117-6.11 6.625ZM21.597 2.302a1.194 1.194 0 0 0-1.635.045L9.692 12.589a5.196 5.196 0 0 1 3.129 2.646l8.92-11.298a1.194 1.194 0 0 0-.144-1.635Z",
     stroke: "currentColor",
-    strokeWidth: "1.25",
+    strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M0 0h25v25H0z"
   })));
 };
 iconToolBrush.defaultProps = {
-  width: "25",
-  height: "25",
-  viewBox: "0 0 25 25",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg"
 };
 var iconToolEraser = function iconToolEraser(props) {
@@ -9988,19 +10060,19 @@ var iconToolEraser = function iconToolEraser(props) {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M8.391 20.504a5.08 5.08 0 0 1-3.118-1.291l-1.982-1.984a1.832 1.832 0 0 1 0-2.583L14.404 3.533a1.832 1.832 0 0 1 2.583 0l4.721 4.721c.71.715.71 1.869 0 2.583l-8.373 8.374a5.08 5.08 0 0 1-3.118 1.293H8.391ZM10.217 7.719l7.305 7.305M2 22.328h21",
+    d: "M0 0h24v24H0z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M8.478 18.003a4.354 4.354 0 0 1-2.672-1.107l-1.7-1.7a1.57 1.57 0 0 1 0-2.214l9.526-9.525a1.57 1.57 0 0 1 2.214 0l4.047 4.047a1.57 1.57 0 0 1 0 2.214l-7.178 7.177a4.354 4.354 0 0 1-2.672 1.108H8.478ZM10.043 7.045l6.261 6.261M3 20.567h18",
     stroke: "currentColor",
-    strokeWidth: "1.25",
+    strokeWidth: "1.5",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M0 0h25v25H0z"
   })));
 };
 iconToolEraser.defaultProps = {
-  width: "25",
-  height: "25",
-  viewBox: "0 0 25 25",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg"
 };
 var iconToolScissor = function iconToolScissor(props) {
@@ -10040,7 +10112,13 @@ var iconToolShape = function iconToolShape(props) {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M0 0h25v25H0z"
+    d: "M0 0h24v24H0z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    cx: "16",
+    cy: "15",
+    r: "6"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
     stroke: "currentColor",
     strokeWidth: "1.5",
@@ -10048,19 +10126,13 @@ var iconToolShape = function iconToolShape(props) {
     y: "3",
     width: "13",
     height: "13",
-    rx: "1"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    cx: "16.5",
-    cy: "16.5",
-    r: "6.5"
+    rx: "2"
   })));
 };
 iconToolShape.defaultProps = {
-  width: "25",
-  height: "25",
-  viewBox: "0 0 25 25",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg"
 };
 var iconToolThreshold = function iconToolThreshold(props) {
@@ -10068,35 +10140,35 @@ var iconToolThreshold = function iconToolThreshold(props) {
     fill: "none",
     fillRule: "evenodd"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M0 0h24v24H0z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(2.418 14.367)",
     stroke: "currentColor",
-    strokeWidth: "1.25",
+    strokeWidth: "1.5"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
     strokeLinecap: "round",
-    d: "M19.457 16.87H22.5M2.5 16.87h12.174"
+    d: "M16.582 2.133h2.5M.082 2.133h12"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
+    cx: "14.224",
+    cy: "2.092",
+    r: "2.092"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "matrix(-1 0 0 1 21.5 5.367)",
     stroke: "currentColor",
-    strokeWidth: "1.25",
-    cx: "16.848",
-    cy: "16.87",
-    r: "2.174"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    stroke: "currentColor",
-    strokeWidth: "1.25",
+    strokeWidth: "1.5"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
     strokeLinecap: "round",
-    d: "M11.63 8.174h10.435M2.5 8.174h4.783"
+    d: "M16 2.133h3.082M.082 2.133H11"
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("circle", {
-    stroke: "currentColor",
-    strokeWidth: "1.25",
-    cx: "9.457",
-    cy: "8.174",
-    r: "2.174"
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M0 0h25v25H0z"
-  })));
+    cx: "13.224",
+    cy: "2.092",
+    r: "2.092"
+  }))));
 };
 iconToolThreshold.defaultProps = {
-  width: "25",
-  height: "25",
-  viewBox: "0 0 25 25",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg"
 };
 /** Old OHIF */
@@ -10133,6 +10205,243 @@ oldStop.defaultProps = {
   'aria-labelledby': "title",
   fill: "currentColor"
 };
+/** LAYOUT */
+var layoutAdvanced3DFourUp = function layoutAdvanced3DFourUp(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "27",
+    height: "16.2",
+    rx: "2"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M13.886 0H2a2 2 0 0 0-2 2v12.2a2 2 0 0 0 2 2h11.886V0Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M13.886 0H25a2 2 0 0 1 2 2v6.5H13.886V0Z",
+    fill: "#263A71"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M13.886 8.486H0V14.2a2 2 0 0 0 2 2h11.886V8.486ZM13.886 8.486H27V14.2a2 2 0 0 1-2 2H13.886V8.486Z"
+  })));
+};
+layoutAdvanced3DFourUp.defaultProps = {
+  width: "29",
+  height: "18",
+  viewBox: "0 0 29 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutAdvanced3DMain = function layoutAdvanced3DMain(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "27",
+    height: "16.2",
+    rx: "2"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M18 7.714h9V14.2a2 2 0 0 1-2 2h-7V7.714ZM0 7.714h9.257V16.2H2a2 2 0 0 1-2-2V7.714Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M25 0H2a2 2 0 0 0-2 2v6.486h27V2a2 2 0 0 0-2-2Z",
+    fill: "#263A71"
+  })));
+};
+layoutAdvanced3DMain.defaultProps = {
+  width: "29",
+  height: "18",
+  viewBox: "0 0 29 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutAdvanced3DOnly = function layoutAdvanced3DOnly(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "27",
+    height: "16.2",
+    rx: "2",
+    transform: "translate(1 1)",
+    fill: "#263A71",
+    stroke: "currentColor",
+    fillRule: "evenodd"
+  }));
+};
+layoutAdvanced3DOnly.defaultProps = {
+  width: "29",
+  height: "18",
+  viewBox: "0 0 29 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutAdvanced3DPrimary = function layoutAdvanced3DPrimary(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "27",
+    height: "16.2",
+    rx: "2"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.429 10.5H27V14a2 2 0 0 1-2 2h-9.571v-5.5ZM15.429 0H25a2 2 0 0 1 2 2v3.4H15.429V0Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M16.2 0H2a2 2 0 0 0-2 2v12.2a2 2 0 0 0 2 2h14.2V0Z",
+    fill: "#263A71"
+  })));
+};
+layoutAdvanced3DPrimary.defaultProps = {
+  width: "29",
+  height: "18",
+  viewBox: "0 0 29 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutAdvancedAxialPrimary = function layoutAdvancedAxialPrimary(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M16.429 1H26a2 2 0 0 1 2 2v12.2a2 2 0 0 1-2 2h-9.571V1Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M16.429 1H26a2 2 0 0 1 2 2v6.486H16.429V1Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M16.7 1H3a2 2 0 0 0-2 2v12.2a2 2 0 0 0 2 2h13.7V1Z"
+  })));
+};
+layoutAdvancedAxialPrimary.defaultProps = {
+  width: "29",
+  height: "18",
+  viewBox: "0 0 29 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutAdvancedMPR = function layoutAdvancedMPR(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M18.743 1H26a2 2 0 0 1 2 2v12.2a2 2 0 0 1-2 2h-7.257V1Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10 1h9v16.2h-9z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M10.257 1H3a2 2 0 0 0-2 2v12.2a2 2 0 0 0 2 2h7.257V1Z"
+  })));
+};
+layoutAdvancedMPR.defaultProps = {
+  width: "29",
+  height: "18",
+  viewBox: "0 0 29 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutCommon1x1 = function layoutCommon1x1(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "26",
+    height: "15.6",
+    rx: "2",
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }));
+};
+layoutCommon1x1.defaultProps = {
+  width: "28",
+  height: "18",
+  viewBox: "0 0 28 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutCommon1x2 = function layoutCommon1x2(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "26",
+    height: "15.6",
+    rx: "2"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M13 0H2a2 2 0 0 0-2 2v11.6a2 2 0 0 0 2 2h11V0Z"
+  })));
+};
+layoutCommon1x2.defaultProps = {
+  width: "28",
+  height: "18",
+  viewBox: "0 0 28 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutCommon2x2 = function layoutCommon2x2(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "26",
+    height: "15.6",
+    rx: "2"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M13 0H2a2 2 0 0 0-2 2v11.6a2 2 0 0 0 2 2h11V0Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M24 0H2a2 2 0 0 0-2 2v6h26V2a2 2 0 0 0-2-2Z"
+  })));
+};
+layoutCommon2x2.defaultProps = {
+  width: "28",
+  height: "18",
+  viewBox: "0 0 28 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var layoutCommon2x3 = function layoutCommon2x3(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    transform: "translate(1 1)",
+    stroke: "currentColor",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
+    width: "26",
+    height: "15.6",
+    rx: "2"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M9 0H2a2 2 0 0 0-2 2v11.6a2 2 0 0 0 2 2h7V0Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M17 0H2a2 2 0 0 0-2 2v11.6a2 2 0 0 0 2 2h15V0Z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M24 0H2a2 2 0 0 0-2 2v6h26V2a2 2 0 0 0-2-2Z"
+  })));
+};
+layoutCommon2x3.defaultProps = {
+  width: "28",
+  height: "18",
+  viewBox: "0 0 28 18",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var iconToolRotate = function iconToolRotate(props) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M0 0h28v28H0z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.5"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "m10 24.996 2.5-1.998-2.5-2.002"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M12.5 22.998c-3.462.654-7.5-1.5-8.5-5M18 3l-2.5 1.998L18 7"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M15.5 4.998c3.462-.654 7.5 1.5 8.5 5M14 8.75l-5 2.188 5 2.187 5-2.188z"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
+    d: "M9 10.938v5.937l5 2.188 5-2.188v-5.938M14 13.125v5.938"
+  }))));
+};
+iconToolRotate.defaultProps = {
+  width: "28",
+  height: "28",
+  viewBox: "0 0 28 28",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 /** New investigational use */
 var investigationalUse = function investigationalUse(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", props, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("g", {
@@ -10253,7 +10562,7 @@ const ICONS = {
   'tool-window-level': toolWindow,
   'tool-annotate': toolAnnotate,
   'tool-bidirectional': toolBidirectional,
-  'tool-elipse': toolElipse,
+  'tool-ellipse': toolElipse,
   'tool-circle': toolCircle,
   'tool-length': toolLength,
   'tool-stack-scroll': toolStackScroll,
@@ -10274,6 +10583,7 @@ const ICONS = {
   'tool-freehand-line': toolFreehand,
   'tool-freehand-polygon': toolFreehandPolygon,
   'tool-polygon': toolPolygon,
+  'tool-3d-rotate': iconToolRotate,
   'edit-patient': editPatient,
   'icon-mpr': iconMPR,
   'icon-next-inactive': iconNextInactive,
@@ -10311,6 +10621,17 @@ const ICONS = {
   'old-trash': oldTrash,
   'old-play': oldPlay,
   'old-stop': oldStop,
+  /** LAYOUT */
+  'layout-advanced-3d-four-up': layoutAdvanced3DFourUp,
+  'layout-advanced-3d-main': layoutAdvanced3DMain,
+  'layout-advanced-3d-only': layoutAdvanced3DOnly,
+  'layout-advanced-3d-primary': layoutAdvanced3DPrimary,
+  'layout-advanced-axial-primary': layoutAdvancedAxialPrimary,
+  'layout-advanced-mpr': layoutAdvancedMPR,
+  'layout-common-1x1': layoutCommon1x1,
+  'layout-common-1x2': layoutCommon1x2,
+  'layout-common-2x2': layoutCommon2x2,
+  'layout-common-2x3': layoutCommon2x3,
   /** New investigational use */
   'illustration-investigational-use': investigationalUse
 };
@@ -10336,43 +10657,16 @@ function getIcon(key, props) {
 
 /***/ }),
 
-/***/ 53589:
+/***/ 1675:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(66348);
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  A: () => (/* binding */ components_Icon)
-});
-
-// EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(41766);
-// EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(11374);
-var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/components/Icon/getIcon.js
-var getIcon = __webpack_require__(32854);
-;// CONCATENATED MODULE: ../../ui/src/components/Icon/Icon.tsx
-
-
-
-const Icon = ({
-  name,
-  ...otherProps
-}) => {
-  return /*#__PURE__*/react.createElement(react.Fragment, null, (0,getIcon/* default */.Ay)(name, {
-    ...otherProps
-  }));
-};
-Icon.propTypes = {
-  name: (prop_types_default()).string.isRequired,
-  className: (prop_types_default()).string
-};
-/* harmony default export */ const Icon_Icon = (Icon);
-;// CONCATENATED MODULE: ../../ui/src/components/Icon/index.js
-
-/* harmony default export */ const components_Icon = (Icon_Icon);
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_Icon__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .A);
 
 /***/ }),
 
@@ -10505,7 +10799,7 @@ Typography.propTypes = {
 
 /***/ }),
 
-/***/ 6804:
+/***/ 58046:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -10513,9 +10807,9 @@ Typography.propTypes = {
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
   VT: () => (/* reexport */ components_AboutModal),
-  om: () => (/* reexport */ components_AdvancedToolbox),
   $n: () => (/* reexport */ components_Button),
   Ny: () => (/* reexport */ ButtonEnums_namespaceObject),
+  e2: () => (/* reexport */ components_ButtonGroup),
   F0: () => (/* reexport */ components_CinePlayer),
   p: () => (/* reexport */ CineProvider),
   lG: () => (/* reexport */ components_Dialog),
@@ -10528,11 +10822,11 @@ __webpack_require__.d(__webpack_exports__, {
   uq: () => (/* reexport */ components_ImageScrollbar),
   xy: () => (/* reexport */ ImageViewerProvider),
   pd: () => (/* reexport */ components_Input),
-  Z5: () => (/* reexport */ components_InputDoubleRange),
   Cv: () => (/* reexport */ components_InputFilterText),
   Qr: () => (/* reexport */ components_InputRange),
   j: () => (/* reexport */ components_InvestigationalUseDialog),
   JU: () => (/* reexport */ components_Label),
+  qu: () => (/* reexport */ components_LayoutPreset),
   sG: () => (/* reexport */ components_LayoutSelector),
   _H: () => (/* reexport */ components_LegacyButton),
   xA: () => (/* reexport */ components_LegacyButtonGroup),
@@ -10557,6 +10851,8 @@ __webpack_require__.d(__webpack_exports__, {
   u3: () => (/* reexport */ components_StudySummary),
   L$: () => (/* reexport */ components_ThemeWrapper),
   IB: () => (/* reexport */ components_ToolbarButton),
+  OO: () => (/* reexport */ Toolbox_Toolbox),
+  nB: () => (/* reexport */ ToolboxProvider),
   m_: () => (/* reexport */ components_Tooltip),
   ax: () => (/* reexport */ TooltipClipboard_TooltipClipboard),
   o5: () => (/* reexport */ Typography/* default */.A),
@@ -10579,7 +10875,7 @@ __webpack_require__.d(__webpack_exports__, {
   ih: () => (/* reexport */ useViewportGrid)
 });
 
-// UNUSED EXPORTS: BackgroundColor, ButtonGroup, CheckBox, ContextMenu, DateRange, Dropdown, ExpandableToolbarButton, HotkeyField, HotkeysPreferences, ICONS, IconButton, ImageViewerContext, InputDateRange, InputGroup, InputLabelWrapper, InputMultiSelect, InputNumber, InputText, LegacyCinePlayer, LegacySidePanel, LegacyViewportActionBar, ListMenu, MeasurementItem, ModalComponent, ModalConsumer, NavBar, PanelSection, StudyItem, StudyListTableRow, Svg, Table, TableBody, TableCell, TableHead, TableRow, Thumbnail, ThumbnailList, ThumbnailNoImage, ThumbnailTracked, Types, UserAuthenticationContext, Viewport, ViewportGridContext, addIcon, getIcon, useDialog, useSnackbar, withDialog, withModal, withSnackbar
+// UNUSED EXPORTS: AdvancedToolbox, BackgroundColor, CheckBox, ContextMenu, DateRange, Dropdown, ExpandableToolbarButton, HotkeyField, HotkeysPreferences, ICONS, IconButton, ImageViewerContext, InputDateRange, InputDoubleRange, InputGroup, InputLabelWrapper, InputMultiSelect, InputNumber, InputText, LegacyCinePlayer, LegacySidePanel, LegacySplitButton, LegacyViewportActionBar, ListMenu, MeasurementItem, ModalComponent, ModalConsumer, NavBar, PanelSection, StudyItem, StudyListTableRow, Svg, Table, TableBody, TableCell, TableHead, TableRow, Thumbnail, ThumbnailList, ThumbnailNoImage, ThumbnailTracked, ToolSettings, Types, UserAuthenticationContext, Viewport, ViewportGridContext, addIcon, getIcon, useDialog, useSnackbar, useToolbox, withDialog, withModal, withSnackbar
 
 // NAMESPACE OBJECT: ../../../node_modules/react-dnd-html5-backend/dist/esm/NativeTypes.js
 var NativeTypes_namespaceObject = {};
@@ -17540,17 +17836,10 @@ ModalProvider.propTypes = {
 const ModalConsumer = ModalContext.Consumer;
 ;// CONCATENATED MODULE: ../../ui/src/contextProviders/ImageViewerProvider.tsx
 
-
-// export const IMAGE_VIEWER_DEFAULT_VALUE = {
-//   StudyInstanceUIDs: [],
-//   setImageViewer: () => {},
-// };
-
-const ImageViewerContext = /*#__PURE__*/(0,react.createContext)();
+const ImageViewerContext = /*#__PURE__*/(0,react.createContext)(null);
+const useImageViewer = () => (0,react.useContext)(ImageViewerContext);
 function ImageViewerProvider({
   StudyInstanceUIDs,
-  reducer,
-  initialState,
   children
 }) {
   const value = (0,react.useMemo)(() => {
@@ -17562,7 +17851,6 @@ function ImageViewerProvider({
     value: value
   }, children);
 }
-const useImageViewer = () => (0,react.useContext)(ImageViewerContext);
 ;// CONCATENATED MODULE: ../../ui/src/contextProviders/CineProvider.tsx
 
 
@@ -17657,7 +17945,7 @@ function CineProvider({
   const api = {
     getState,
     setCine,
-    setIsCineEnabled,
+    setIsCineEnabled: isCineEnabled => service.setIsCineEnabled(isCineEnabled),
     playClip: (element, playClipOptions) => service.playClip(element, playClipOptions),
     stopClip: element => service.stopClip(element)
   };
@@ -17679,8 +17967,8 @@ const useCine = () => (0,react.useContext)(CineContext);
   SUCCESS: 'success',
   ERROR: 'error'
 });
-// EXTERNAL MODULE: ../../ui/src/components/Icon/index.js + 1 modules
-var Icon = __webpack_require__(53589);
+// EXTERNAL MODULE: ../../ui/src/components/Icon/index.js
+var Icon = __webpack_require__(1675);
 ;// CONCATENATED MODULE: ../../ui/src/components/Snackbar/SnackbarItem.tsx
 
 
@@ -17955,8 +18243,8 @@ ViewportDialogProvider.propTypes = {
 // EXTERNAL MODULE: ../../../node_modules/lodash.merge/index.js
 var lodash_merge = __webpack_require__(40592);
 var lodash_merge_default = /*#__PURE__*/__webpack_require__.n(lodash_merge);
-// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
-var src = __webpack_require__(14283);
+// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
+var src = __webpack_require__(78198);
 ;// CONCATENATED MODULE: ../../ui/src/utils/viewportLabels.ts
 const viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 /* harmony default export */ const utils_viewportLabels = (viewportLabels);
@@ -17980,6 +18268,7 @@ const ViewportGridProvider_DEFAULT_STATE = {
     default: {
       viewportId: 'default',
       displaySetInstanceUIDs: [],
+      isReady: false,
       viewportOptions: {
         viewportId: 'default'
       },
@@ -18177,6 +18466,7 @@ function ViewportGridProvider({
                 y: yPos
               });
               viewport.viewportLabel = getViewportLabel(viewports, viewport.viewportId);
+              viewport.isReady = false;
               if (!viewport.viewportOptions.presentationIds) {
                 viewport.viewportOptions.presentationIds = src/* ViewportGridService */.sI.getPresentationIds(viewport, viewports);
               }
@@ -18207,6 +18497,26 @@ function ViewportGridProvider({
             ...action.payload
           };
         }
+      case 'VIEWPORT_IS_READY':
+        {
+          const {
+            viewportId,
+            isReady
+          } = action.payload;
+          const viewports = new Map(state.viewports);
+          const viewport = viewports.get(viewportId);
+          if (!viewport) {
+            return;
+          }
+          viewports.set(viewportId, {
+            ...viewport,
+            isReady
+          });
+          return {
+            ...state,
+            viewports
+          };
+        }
       default:
         return action.payload;
     }
@@ -18230,6 +18540,22 @@ function ViewportGridProvider({
     type: 'SET_DISPLAYSETS_FOR_VIEWPORTS',
     payload: viewports
   }), [dispatch]);
+  const setViewportIsReady = (0,react.useCallback)((viewportId, isReady) => {
+    dispatch({
+      type: 'VIEWPORT_IS_READY',
+      payload: {
+        viewportId,
+        isReady
+      }
+    });
+  }, [dispatch, viewportGridState]);
+  const getGridViewportsReady = (0,react.useCallback)(() => {
+    const {
+      viewports
+    } = viewportGridState;
+    const readyViewports = Array.from(viewports.values()).filter(viewport => viewport.isReady);
+    return readyViewports.length === viewports.size;
+  }, [viewportGridState]);
   const setLayout = (0,react.useCallback)(({
     layoutType,
     numRows,
@@ -18283,10 +18609,12 @@ function ViewportGridProvider({
         reset,
         onModeExit: reset,
         set,
-        getNumViewportPanes
+        getNumViewportPanes,
+        setViewportIsReady,
+        getGridViewportsReady
       });
     }
-  }, [getState, service, setActiveViewportId, setDisplaySetsForViewports, setLayout, reset, set, getNumViewportPanes]);
+  }, [getState, service, setActiveViewportId, setDisplaySetsForViewports, setLayout, reset, set, getNumViewportPanes, setViewportIsReady, getGridViewportsReady]);
 
   // run many of the calls through the service itself since we want to publish events
   const api = {
@@ -18299,8 +18627,11 @@ function ViewportGridProvider({
     set: gridLayoutState => service.setState(gridLayoutState),
     // run it through the service itself since we want to publish events
     getNumViewportPanes,
+    setViewportIsReady,
+    getGridViewportsReady,
     getActiveViewportOptionByKey,
-    setViewportGridSizeChanged: props => service.setViewportGridSizeChanged(props)
+    setViewportGridSizeChanged: props => service.setViewportGridSizeChanged(props),
+    publishViewportsReady: () => service.publishViewportsReady()
   };
   return /*#__PURE__*/react.createElement(ViewportGridContext.Provider, {
     value: [viewportGridState, api]
@@ -18311,6 +18642,133 @@ ViewportGridProvider.propTypes = {
   service: prop_types_default().instanceOf(src/* ViewportGridService */.sI).isRequired
 };
 const useViewportGrid = () => (0,react.useContext)(ViewportGridContext);
+;// CONCATENATED MODULE: ../../ui/src/contextProviders/Toolbox/ToolboxContext.tsx
+
+const ToolboxContext_initialState = {};
+const toolboxReducer = (state, action) => {
+  const {
+    toolbarSectionId
+  } = action.payload;
+  if (!state[toolbarSectionId]) {
+    state[toolbarSectionId] = {
+      activeTool: null,
+      toolOptions: {}
+    };
+  }
+  switch (action.type) {
+    case 'SET_ACTIVE_TOOL':
+      return {
+        ...state,
+        [toolbarSectionId]: {
+          ...state[toolbarSectionId],
+          activeTool: action.payload.activeTool
+        }
+      };
+    case 'UPDATE_TOOL_OPTION':
+      const {
+        toolName,
+        optionName,
+        value
+      } = action.payload;
+      return {
+        ...state,
+        [toolbarSectionId]: {
+          ...state[toolbarSectionId],
+          toolOptions: {
+            ...state[toolbarSectionId].toolOptions,
+            [toolName]: state[toolbarSectionId].toolOptions[toolName].map(option => option.id === optionName ? {
+              ...option,
+              value
+            } : option)
+          }
+        }
+      };
+    case 'INITIALIZE_TOOL_OPTIONS':
+      // Initialize tool options for each toolbarSectionId
+      return {
+        ...state,
+        [action.toolbarSectionId]: {
+          ...state[action.toolbarSectionId],
+          toolOptions: action.payload
+        }
+      };
+    default:
+      return state;
+  }
+};
+const ToolboxContext = /*#__PURE__*/(0,react.createContext)();
+const ToolboxProvider = ({
+  children
+}) => {
+  const [state, dispatch] = (0,react.useReducer)(toolboxReducer, ToolboxContext_initialState);
+  const handleToolSelect = (toolbarSectionId, toolName) => {
+    dispatch({
+      type: 'SET_ACTIVE_TOOL',
+      payload: {
+        toolbarSectionId,
+        activeTool: toolName
+      }
+    });
+  };
+  const handleToolOptionChange = (toolbarSectionId, toolName, optionName, newValue) => {
+    dispatch({
+      type: 'UPDATE_TOOL_OPTION',
+      payload: {
+        toolbarSectionId,
+        toolName,
+        optionName,
+        value: newValue
+      }
+    });
+  };
+  const initializeToolOptions = (toolbarSectionId, toolOptions) => {
+    dispatch({
+      type: 'INITIALIZE_TOOL_OPTIONS',
+      toolbarSectionId,
+      payload: toolOptions
+    });
+  };
+  const api = {
+    handleToolSelect,
+    handleToolOptionChange,
+    initializeToolOptions
+  };
+  const value = {
+    state,
+    api
+  };
+  return /*#__PURE__*/react.createElement(ToolboxContext.Provider, {
+    value: value
+  }, children);
+};
+
+/**
+ * Custom hook for accessing toolbox state and actions for a specific toolbar section.
+ * You can use this hook to access the state and actions for a specific toolbar section (
+ * defined by the toolbarSectionId) in your custom toolbar components. This hook
+ * helps to manage the state and actions for the tools and their options in the toolbar.
+ */
+const useToolbox = toolbarSectionId => {
+  const context = (0,react.useContext)(ToolboxContext);
+  if (context === undefined) {
+    throw new Error('useToolbox must be used within a ToolboxProvider');
+  }
+  const {
+    state,
+    api
+  } = context;
+  return {
+    state: state[toolbarSectionId] || {
+      activeTool: null,
+      toolOptions: {}
+    },
+    api: {
+      handleToolSelect: toolName => api.handleToolSelect(toolbarSectionId, toolName),
+      handleToolOptionChange: (toolName, optionName, value) => api.handleToolOptionChange(toolbarSectionId, toolName, optionName, value),
+      initializeToolOptions: toolOptions => api.initializeToolOptions(toolbarSectionId, toolOptions)
+    }
+  };
+};
 ;// CONCATENATED MODULE: ../../ui/src/contextProviders/UserAuthenticationProvider.tsx
 
 
@@ -18432,6 +18890,7 @@ const useUserAuthentication = () => (0,react.useContext)(UserAuthenticationConte
 
 
 
+
 ;// CONCATENATED MODULE: ../../../node_modules/browser-detect/dist/browser-detect.es5.js
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -19254,6 +19713,7 @@ const arrowPositionStyle = {
 };
 const Tooltip = ({
   content,
+  secondaryContent = null,
   isSticky,
   position,
   className,
@@ -19290,9 +19750,11 @@ const Tooltip = ({
     })
   }, /*#__PURE__*/react.createElement("div", {
     className: classnames_default()('tooltip-box bg-primary-dark border-secondary-light w-max-content relative inset-x-auto top-full rounded border text-base text-white', {
-      'py-1 px-4': !tight
+      'py-[6px] px-[8px]': !tight
     })
-  }, typeof content === 'string' ? t(content) : content, /*#__PURE__*/react.createElement("svg", {
+  }, /*#__PURE__*/react.createElement("div", null, typeof content === 'string' ? t(content) : content), /*#__PURE__*/react.createElement("div", {
+    className: "text-aqua-pale"
+  }, typeof secondaryContent === 'string' ? t(secondaryContent) : secondaryContent), /*#__PURE__*/react.createElement("svg", {
     className: "text-primary-dark stroke-secondary-light absolute h-4",
     style: arrowPositionStyle[position],
     xmlns: "http://www.w3.org/2000/svg",
@@ -19363,9 +19825,11 @@ const Button = ({
   name,
   className,
   onClick,
+  dataCY,
   startIconTooltip = null,
   endIconTooltip = null
 }) => {
+  dataCY = dataCY || `${name}-btn`;
   const startIcon = startIconProp && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.cloneElement(startIconProp, {
     className: classnames_default()('w-4 h-4 fill-current', startIconProp?.props?.className)
   }));
@@ -19387,7 +19851,7 @@ const Button = ({
     disabled: disabled,
     ref: buttonElement,
     onClick: handleOnClick,
-    "data-cy": `${name}-btn`
+    "data-cy": dataCY
   }, startIconTooltip ? /*#__PURE__*/react.createElement(Tooltip_Tooltip, {
     content: startIconTooltip
   }, startIcon) : startIcon, children, endIconTooltip ? /*#__PURE__*/react.createElement(Tooltip_Tooltip, {
@@ -19422,7 +19886,9 @@ Button.propTypes = {
   /** Tooltip for the start icon */
   startIconTooltip: (prop_types_default()).node,
   /** Tooltip for the end icon */
-  endIconTooltip: (prop_types_default()).node
+  endIconTooltip: (prop_types_default()).node,
+  /** Data attribute for testing */
+  dataCY: (prop_types_default()).string
 };
 /* harmony default export */ const Button_Button = (Button);
 ;// CONCATENATED MODULE: ../../ui/src/components/Button/index.js
@@ -19431,23 +19897,25 @@ Button.propTypes = {
 
 /* harmony default export */ const components_Button = (Button_Button);
 ;// CONCATENATED MODULE: ../../ui/src/components/ButtonGroup/ButtonGroup.tsx
-function ButtonGroup_extends() { ButtonGroup_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ButtonGroup_extends.apply(this, arguments); }
 
 
 
 
 const ButtonGroup = ({
-  buttons,
-  onActiveIndexChange,
+  children,
   className,
   orientation = ButtonEnums_orientation.horizontal,
-  defaultActiveIndex = 0
+  activeIndex: defaultActiveIndex = 0,
+  onActiveIndexChange,
+  disabled = false
 }) => {
   const [activeIndex, setActiveIndex] = (0,react.useState)(defaultActiveIndex);
-  const handleButtonClick = (e, index) => {
+  (0,react.useEffect)(() => {
+    setActiveIndex(defaultActiveIndex);
+  }, [defaultActiveIndex]);
+  const handleButtonClick = index => {
     setActiveIndex(index);
     onActiveIndexChange && onActiveIndexChange(index);
-    buttons[index].onClick && buttons[index].onClick(e);
   };
   const orientationClasses = {
     horizontal: 'flex-row',
@@ -19455,24 +19923,28 @@ const ButtonGroup = ({
   };
   const wrapperClasses = classnames_default()('inline-flex', orientationClasses[orientation], className);
   return /*#__PURE__*/react.createElement("div", {
-    className: classnames_default()(wrapperClasses, 'border-secondary-light rounded-[5px] border bg-black text-[13px] ')
-  }, buttons.map((buttonProps, index) => {
-    const isActive = index === activeIndex;
-    return /*#__PURE__*/react.createElement("button", ButtonGroup_extends({}, buttonProps, {
-      key: index,
-      className: classnames_default()('rounded-[4px] px-2 py-1', isActive ? 'bg-customblue-40 text-white' : 'text-primary-active bg-black'),
-      onClick: e => handleButtonClick(e, index)
-    }));
+    className: classnames_default()(wrapperClasses, 'border-secondary-light rounded-[5px] border bg-black text-[13px]')
+  }, react.Children.map(children, (child, index) => {
+    if ( /*#__PURE__*/react.isValidElement(child)) {
+      return /*#__PURE__*/(0,react.cloneElement)(child, {
+        key: index,
+        className: classnames_default()('rounded-[4px] px-2 py-1', index === activeIndex ? 'bg-customblue-40 text-white' : 'text-primary-active bg-black', child.props.className, disabled ? 'ohif-disabled' : ''),
+        onClick: e => {
+          child.props.onClick && child.props.onClick(e);
+          handleButtonClick(index);
+        }
+      });
+    }
+    return child;
   }));
 };
 ButtonGroup.propTypes = {
-  buttons: prop_types_default().arrayOf((prop_types_default()).object).isRequired,
+  children: (prop_types_default()).node.isRequired,
   orientation: prop_types_default().oneOf(Object.values(ButtonEnums_orientation)),
-  type: prop_types_default().oneOf(Object.values(type)),
-  size: prop_types_default().oneOf(Object.values(size)),
-  defaultActiveIndex: (prop_types_default()).number,
+  activeIndex: (prop_types_default()).number,
   onActiveIndexChange: (prop_types_default()).func,
-  className: (prop_types_default()).string
+  className: (prop_types_default()).string,
+  disabled: (prop_types_default()).bool
 };
 /* harmony default export */ const ButtonGroup_ButtonGroup = (ButtonGroup);
 ;// CONCATENATED MODULE: ../../ui/src/components/ButtonGroup/index.js
@@ -20492,7 +20964,7 @@ const roundedClasses = {
   full: 'rounded-full'
 };
 const IconButton_disabledClasses = {
-  true: 'cursor-not-allowed',
+  true: 'ohif-disabled',
   false: ''
 };
 const variantClasses = {
@@ -20511,36 +20983,13 @@ const variantClasses = {
     black: 'border border-primary-main text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black'
   },
   contained: {
-    default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
+    default: 'text-common-bright hover:opacity-80 active:opacity-100 focus:opacity-80',
     primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     secondary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
     white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
     black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80'
   }
 };
-const backgroundClasses = {
-  text: {
-    default: '',
-    primary: '',
-    secondary: '',
-    white: '',
-    black: ''
-  },
-  outlined: {
-    default: 'bg-transparent',
-    primary: 'bg-transparent',
-    secondary: 'bg-transparent',
-    white: 'bg-transparent',
-    black: 'bg-black'
-  },
-  contained: {
-    default: 'bg-primary-light',
-    primary: 'bg-primary-main',
-    secondary: 'bg-secondary-light',
-    white: 'bg-white',
-    black: 'bg-black'
-  }
-};
 const IconButton_sizeClasses = {
   small: 'py-2 px-2 text-base',
   medium: 'py-3 px-3 text-lg',
@@ -20552,7 +21001,7 @@ const iconSizeClasses = {
   small: 'w-4 h-4',
   medium: 'w-5 h-5',
   large: 'w-6 h-6',
-  toolbar: 'w-5 h-5'
+  toolbar: 'w-[24px] h-[24px]'
 };
 const fullWidthClasses = {
   true: 'flex w-full',
@@ -20569,9 +21018,7 @@ const IconButton = ({
   fullWidth,
   onClick,
   className,
-  name,
   id,
-  bgColor,
   ...rest
 }) => {
   const buttonElement = (0,react.useRef)(null);
@@ -20579,11 +21026,11 @@ const IconButton = ({
     buttonElement.current.blur();
     onClick(e);
   };
-  const bgColorToUse = bgColor ? bgColor : backgroundClasses[variant][color];
+  const padding = size === 'toolbar' ? '8px' : size === 'toolbox' ? '4px' : null;
   return /*#__PURE__*/react.createElement("button", {
-    className: classnames_default()(baseClasses, variantClasses[variant][color], roundedClasses[rounded], IconButton_sizeClasses[size], fullWidthClasses[fullWidth], IconButton_disabledClasses[disabled], bgColorToUse, className),
+    className: classnames_default()(baseClasses, variantClasses[variant][color], roundedClasses[rounded], IconButton_sizeClasses[size], fullWidthClasses[fullWidth], IconButton_disabledClasses[disabled], className),
     style: {
-      padding: size === 'toolbar' ? '10px' : null
+      padding
     },
     ref: buttonElement,
     onClick: handleOnClick,
@@ -20606,7 +21053,7 @@ IconButton.defaultProps = {
 };
 IconButton.propTypes = {
   children: (prop_types_default()).node.isRequired,
-  size: prop_types_default().oneOf(['small', 'medium', 'large', 'initial', 'toolbar']),
+  size: prop_types_default().oneOf(['small', 'medium', 'large', 'initial', 'toolbar', 'toolbox']),
   rounded: prop_types_default().oneOf(['none', 'small', 'medium', 'large', 'full']),
   variant: prop_types_default().oneOf(['text', 'outlined', 'contained']),
   color: prop_types_default().oneOf(['default', 'primary', 'secondary', 'white', 'black', 'inherit']),
@@ -23262,7 +23709,7 @@ var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectWi
 
 
 
-;// CONCATENATED MODULE: ../../../node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js
+;// CONCATENATED MODULE: ../../../node_modules/@emotion/react/dist/emotion-element-43c6fea0.browser.esm.js
 
 
 
@@ -23273,8 +23720,8 @@ var emotion_use_insertion_effect_with_fallbacks_browser_esm_useInsertionEffectWi
 
 
 
-var emotion_element_c39617d8_browser_esm_isBrowser = "object" !== 'undefined';
-var emotion_element_c39617d8_browser_esm_hasOwnProperty = {}.hasOwnProperty;
+var emotion_element_43c6fea0_browser_esm_isBrowser = "object" !== 'undefined';
+var hasOwn = {}.hasOwnProperty;
 
 var EmotionCacheContext = /* #__PURE__ */react.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
@@ -23288,12 +23735,12 @@ typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm_cr
 
 if (false) {}
 
-var emotion_element_c39617d8_browser_esm_CacheProvider = EmotionCacheContext.Provider;
+var emotion_element_43c6fea0_browser_esm_CacheProvider = EmotionCacheContext.Provider;
 var __unsafe_useEmotionCache = function useEmotionCache() {
   return useContext(EmotionCacheContext);
 };
 
-var emotion_element_c39617d8_browser_esm_withEmotionCache = function withEmotionCache(func) {
+var emotion_element_43c6fea0_browser_esm_withEmotionCache = function withEmotionCache(func) {
   // $FlowFixMe
   return /*#__PURE__*/(0,react.forwardRef)(function (props, ref) {
     // the cache will never be null in the browser
@@ -23302,8 +23749,8 @@ var emotion_element_c39617d8_browser_esm_withEmotionCache = function withEmotion
   });
 };
 
-if (!emotion_element_c39617d8_browser_esm_isBrowser) {
-  emotion_element_c39617d8_browser_esm_withEmotionCache = function withEmotionCache(func) {
+if (!emotion_element_43c6fea0_browser_esm_isBrowser) {
+  emotion_element_43c6fea0_browser_esm_withEmotionCache = function withEmotionCache(func) {
     return function (props) {
       var cache = (0,react.useContext)(EmotionCacheContext);
 
@@ -23326,12 +23773,12 @@ if (!emotion_element_c39617d8_browser_esm_isBrowser) {
   };
 }
 
-var emotion_element_c39617d8_browser_esm_ThemeContext = /* #__PURE__ */react.createContext({});
+var emotion_element_43c6fea0_browser_esm_ThemeContext = /* #__PURE__ */react.createContext({});
 
 if (false) {}
 
 var useTheme = function useTheme() {
-  return React.useContext(emotion_element_c39617d8_browser_esm_ThemeContext);
+  return React.useContext(emotion_element_43c6fea0_browser_esm_ThemeContext);
 };
 
 var getTheme = function getTheme(outerTheme, theme) {
@@ -23354,13 +23801,13 @@ var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */
   });
 })));
 var ThemeProvider = function ThemeProvider(props) {
-  var theme = React.useContext(emotion_element_c39617d8_browser_esm_ThemeContext);
+  var theme = React.useContext(emotion_element_43c6fea0_browser_esm_ThemeContext);
 
   if (props.theme !== theme) {
     theme = createCacheWithTheme(theme)(props.theme);
   }
 
-  return /*#__PURE__*/React.createElement(emotion_element_c39617d8_browser_esm_ThemeContext.Provider, {
+  return /*#__PURE__*/React.createElement(emotion_element_43c6fea0_browser_esm_ThemeContext.Provider, {
     value: theme
   }, props.children);
 };
@@ -23368,7 +23815,7 @@ function withTheme(Component) {
   var componentName = Component.displayName || Component.name || 'Component';
 
   var render = function render(props, ref) {
-    var theme = React.useContext(emotion_element_c39617d8_browser_esm_ThemeContext);
+    var theme = React.useContext(emotion_element_43c6fea0_browser_esm_ThemeContext);
     return /*#__PURE__*/React.createElement(Component, _extends({
       theme: theme,
       ref: ref
@@ -23432,7 +23879,7 @@ var createEmotionProps = function createEmotionProps(type, props) {
   var newProps = {};
 
   for (var key in props) {
-    if (emotion_element_c39617d8_browser_esm_hasOwnProperty.call(props, key)) {
+    if (hasOwn.call(props, key)) {
       newProps[key] = props[key];
     }
   }
@@ -23457,7 +23904,7 @@ var Insertion = function Insertion(_ref) {
   return null;
 };
 
-var Emotion = /* #__PURE__ */emotion_element_c39617d8_browser_esm_withEmotionCache(function (props, cache, ref) {
+var Emotion = /* #__PURE__ */emotion_element_43c6fea0_browser_esm_withEmotionCache(function (props, cache, ref) {
   var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
   // not passing the registered cache to serializeStyles because it would
   // make certain babel optimisations not possible
@@ -23476,7 +23923,7 @@ var Emotion = /* #__PURE__ */emotion_element_c39617d8_browser_esm_withEmotionCac
     className = props.className + " ";
   }
 
-  var serialized = emotion_serialize_browser_esm_serializeStyles(registeredStyles, undefined, react.useContext(emotion_element_c39617d8_browser_esm_ThemeContext));
+  var serialized = emotion_serialize_browser_esm_serializeStyles(registeredStyles, undefined, react.useContext(emotion_element_43c6fea0_browser_esm_ThemeContext));
 
   if (false) { var labelFromStack; }
 
@@ -23484,7 +23931,7 @@ var Emotion = /* #__PURE__ */emotion_element_c39617d8_browser_esm_withEmotionCac
   var newProps = {};
 
   for (var key in props) {
-    if (emotion_element_c39617d8_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) {
+    if (hasOwn.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) {
       newProps[key] = props[key];
     }
   }
@@ -23519,7 +23966,7 @@ var Emotion$1 = Emotion;
 
 var pkg = {
 	name: "@emotion/react",
-	version: "11.11.3",
+	version: "11.11.4",
 	main: "dist/emotion-react.cjs.js",
 	module: "dist/emotion-react.esm.js",
 	browser: {
@@ -23652,7 +24099,7 @@ var pkg = {
 var jsx = function jsx(type, props) {
   var args = arguments;
 
-  if (props == null || !emotion_element_c39617d8_browser_esm_hasOwnProperty.call(props, 'css')) {
+  if (props == null || !hasOwn.call(props, 'css')) {
     // $FlowFixMe
     return react.createElement.apply(undefined, args);
   }
@@ -30281,18 +30728,13 @@ function LayoutSelector({
       gridTemplateColumns: gridSize.repeat(columns),
       gridTemplateRows: gridSize.repeat(rows),
       backgroundColor: '#090c29' // primary-dark
-    },
-    className: "p-2"
+    }
   }, Array.apply(null, Array(rows * columns)).map(function (_, i) {
     return i;
   }).map(index => /*#__PURE__*/react.createElement("div", {
     key: index,
-    style: {
-      border: '1px solid white',
-      backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42'
-    },
+    className: `border-primary-dark border ${isHovered(index) ? 'bg-primary-active' : 'bg-[#04225b]'} cursor-pointer`,
     "data-cy": `Layout-${index % columns}-${Math.floor(index / columns)}`,
-    className: "cursor-pointer",
     onClick: () => {
       const x = index % columns;
       const y = Math.floor(index / columns);
@@ -30307,7 +30749,7 @@ function LayoutSelector({
 }
 LayoutSelector.defaultProps = {
   onSelection: () => {},
-  columns: 3,
+  columns: 4,
   rows: 3
 };
 LayoutSelector.propTypes = {
@@ -31251,12 +31693,7 @@ const NavBar = ({
   isSticky
 }) => {
   return /*#__PURE__*/react.createElement("div", {
-    className: classnames_default()('bg-secondary-dark z-20 flex flex-row items-center border-b-4 border-black px-1', isSticky && stickyClasses, !isSticky && notStickyClasses, className),
-    style: {
-      paddingTop: '4px',
-      paddingBottom: '4px',
-      minHeight: '52px'
-    }
+    className: classnames_default()('bg-secondary-dark z-20 border-black px-1', isSticky && stickyClasses, !isSticky && notStickyClasses, className)
   }, children);
 };
 NavBar.propTypes = {
@@ -32156,7 +32593,7 @@ const SegmentItem = ({
     "data-cy": 'segment-item'
   }, /*#__PURE__*/react.createElement("div", {
     className: classnames_default()('bg-primary-dark group/number grid w-[32px] place-items-center', {
-      'bg-primary-light border-primary-light rounded-l-[4px] border text-black': isActive,
+      '!bg-primary-light border-primary-light rounded-l-[4px] border text-black': isActive,
       'border-primary-dark border': !isActive
     }),
     onMouseEnter: () => setIsNumberBoxHovering(true),
@@ -32566,8 +33003,8 @@ const getGridStyle = (side, numTabs = 0, gridWidth, expandedWidth) => {
     width: `${gridWidth}px`
   };
 };
-const getTabClassNames = (numColumns, numTabs, tabIndex, isActiveTab) => classnames_default()('h-[28px] mb-[2px] cursor-pointer text-white bg-black', {
-  'hover:text-primary-active': !isActiveTab,
+const getTabClassNames = (numColumns, numTabs, tabIndex, isActiveTab, isTabDisabled) => classnames_default()('h-[28px] mb-[2px] cursor-pointer text-white bg-black', {
+  'hover:text-primary-active': !isActiveTab && !isTabDisabled,
   'rounded-l': tabIndex % numColumns === 0,
   'rounded-r': (tabIndex + 1) % numColumns === 0 || tabIndex === numTabs - 1
 });
@@ -32603,6 +33040,11 @@ const createStyleMap = (expandedWidth, borderSize, collapsedWidth) => {
     }
   };
 };
+const getToolTipContent = (label, disabled) => {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", null, label), disabled && /*#__PURE__*/react.createElement("div", {
+    className: "text-white"
+  }, 'Not available based on current context'));
+};
 const createBaseStyle = expandedWidth => {
   return {
     maxWidth: `${expandedWidth}px`,
@@ -32667,18 +33109,21 @@ const SidePanel = ({
     }, _childComponents.map((childComponent, index) => /*#__PURE__*/react.createElement(components_Tooltip, {
       position: side === 'left' ? 'right' : 'left',
       key: index,
-      content: `${childComponent.label}`,
+      content: getToolTipContent(childComponent.label, childComponent.disabled),
       className: classnames_default()('flex items-center', side === 'left' ? 'justify-end ' : 'justify-start ')
     }, /*#__PURE__*/react.createElement("div", {
       id: `${childComponent.name}-btn`,
       "data-cy": `${childComponent.name}-btn`,
       className: "text-primary-active hover:cursor-pointer",
       onClick: () => {
-        updateActiveTabIndex(index);
+        return childComponent.disabled ? null : updateActiveTabIndex(index);
       }
     }, /*#__PURE__*/react.createElement(Icon/* default */.A, {
       name: childComponent.iconName,
-      className: "text-primary-active",
+      className: classnames_default()({
+        'text-primary-active': true,
+        'ohif-disabled': childComponent.disabled
+      }),
       style: {
         width: '22px',
         height: '22px'
@@ -32708,6 +33153,9 @@ const SidePanel = ({
       className: classnames_default()('bg-primary-dark text-primary-active flex flex-wrap'),
       style: getGridStyle(side, tabs.length, gridWidth, expandedWidth)
     }, tabs.map((tab, tabIndex) => {
+      const {
+        disabled
+      } = tab;
       return /*#__PURE__*/react.createElement(react.Fragment, {
         key: tabIndex
       }, tabIndex % numCols !== 0 && /*#__PURE__*/react.createElement("div", {
@@ -32717,16 +33165,19 @@ const SidePanel = ({
       })), /*#__PURE__*/react.createElement(components_Tooltip, {
         position: 'bottom',
         key: tabIndex,
-        content: `${tab.label}`
+        content: getToolTipContent(tab.label, disabled)
       }, /*#__PURE__*/react.createElement("div", {
-        className: getTabClassNames(numCols, tabs.length, tabIndex, tabIndex === activeTabIndex),
+        className: getTabClassNames(numCols, tabs.length, tabIndex, tabIndex === activeTabIndex, disabled),
         style: getTabStyle(tabs.length),
-        onClick: () => updateActiveTabIndex(tabIndex),
+        onClick: () => {
+          return disabled ? null : updateActiveTabIndex(tabIndex);
+        },
         "data-cy": `${tab.name}-btn`
       }, /*#__PURE__*/react.createElement("div", {
         className: getTabIconClassNames(tabs.length, tabIndex === activeTabIndex)
       }, /*#__PURE__*/react.createElement(Icon/* default */.A, {
         name: tab.iconName,
+        className: `${tab.disabled && 'ohif-disabled'}`,
         style: {
           width: '22px',
           height: '22px'
@@ -32786,6 +33237,8 @@ var react_outside_click_handler = __webpack_require__(17076);
 
 
 
+const flex = 'flex flex-row justify-between items-center';
+const theme = 'bg-indigo-dark text-white';
 const ListMenu = ({
   items = [],
   renderer,
@@ -32797,24 +33250,23 @@ const ListMenu = ({
     index,
     isSelected
   }) => {
-    const flex = 'flex flex-row justify-between items-center';
-    const theme = 'bg-indigo-dark';
     const onClickHandler = () => {
       setSelectedIndex(index);
       onClick({
         item,
         selectedIndex: index
       });
-      if (item.onClick) {
-        item.onClick({
-          ...item,
-          index,
-          isSelected
-        });
-      }
+      item.onClick?.({
+        ...item,
+        index,
+        isSelected
+      });
     };
     return /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()(flex, theme, 'cursor-pointer'),
+      className: classnames_default()(flex, theme, {
+        'cursor-pointer': !item.disabled,
+        'ohif-disabled': item.disabled
+      }),
       onClick: onClickHandler,
       "data-cy": item.id
     }, renderer && renderer({
@@ -32859,36 +33311,28 @@ function SplitButton_extends() { SplitButton_extends = Object.assign ? Object.as
 
 const SplitButton_baseClasses = {
   Button: 'flex items-center rounded-md border-transparent cursor-pointer group/button',
-  Primary:
-  // By default border on left, top and bottom for hover effect and only rounded on left side.
-  // Extra padding on right to compensate for no right border.
-  'h-full border-l-2 border-t-2 border-b-2 rounded-tl-md rounded-bl-md group/primary !pl-2 !py-2',
+  Primary: 'h-full border-l-2 border-t-2 border-b-2 rounded-tl-md rounded-bl-md group/primary !pl-2 !py-2',
   Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4 border-2 border-transparent group/secondary',
   SecondaryIcon: 'w-4 h-full stroke-1',
-  Separator: 'border-l py-2.5',
+  Separator: 'border-l py-3 ml-0.5',
   Content: 'absolute z-10 top-0 mt-12'
 };
 const SplitButton_classes = {
   Button: ({
-    isExpanded,
-    primary
-  }) => classnames_default()(SplitButton_baseClasses.Button, !isExpanded && !primary.isActive && 'hover:!bg-primary-dark hover:border-primary-dark'),
+    isExpanded
+  }) => classnames_default()(SplitButton_baseClasses.Button, !isExpanded && 'hover:!bg-primary-dark hover:border-primary-dark'),
   Interface: 'h-full flex flex-row items-center',
   Primary: ({
-    primary,
-    isExpanded
-  }) => classnames_default()(SplitButton_baseClasses.Primary, primary.isActive ? isExpanded ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light' : `${primary.isToggle ? 'border-secondary-dark bg-secondary-light' : 'border-primary-light bg-primary-light'}
-            border-2 rounded-md !p-2` // Full, rounded border with less right padding when active.
-  : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light
-        ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}
-        `),
+    isExpanded,
+    isActive
+  }) => classnames_default()(SplitButton_baseClasses.Primary, isActive ? isExpanded ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light' : 'border-primary-light bg-primary-light border-2 rounded-md !p-2' : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}`),
   Secondary: ({
     isExpanded,
     primary
   }) => classnames_default()(SplitButton_baseClasses.Secondary, isExpanded ? 'bg-primary-light !rounded-tr-md !rounded-br-md' : primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark group-hover/button:border-primary-dark'),
   SecondaryIcon: ({
     isExpanded
-  }) => classnames_default()(SplitButton_baseClasses.SecondaryIcon, isExpanded ? 'text-primary-dark' : 'text-[#348cfd] group-hover/secondary:text-primary-light'),
+  }) => classnames_default()(SplitButton_baseClasses.SecondaryIcon, isExpanded ? 'text-primary-dark' : 'text-primary-active group-hover/secondary:text-primary-light'),
   Separator: ({
     primary,
     isExpanded,
@@ -32898,14 +33342,36 @@ const SplitButton_classes = {
     isExpanded
   }) => classnames_default()(SplitButton_baseClasses.Content, isExpanded ? 'block' : 'hidden')
 };
+const DefaultListItemRenderer = props => {
+  const {
+    t,
+    icon,
+    label,
+    className,
+    isActive
+  } = props;
+  return /*#__PURE__*/react.createElement("div", {
+    className: classnames_default()('flex h-8 w-full flex-row items-center p-3', 'whitespace-pre text-base', className, `${isActive ? 'hover:opacity-80' : 'hover:bg-primary-dark '}`)
+  }, icon && /*#__PURE__*/react.createElement("span", {
+    className: "mr-4"
+  }, /*#__PURE__*/react.createElement(Icon/* default */.A, {
+    name: icon,
+    className: "h-5 w-5"
+  })), /*#__PURE__*/react.createElement("span", {
+    className: "mr-5"
+  }, t?.(label)));
+};
+
+/**
+ * This is a more generic version of SplitButton without the isActive
+ * and other interaction props
+ */
 const SplitButton = ({
-  isToggle,
   groupId,
   primary,
   secondary,
   items,
   renderer,
-  isActive,
   onInteraction,
   Component
 }) => {
@@ -32928,22 +33394,11 @@ const SplitButton = ({
     ...state,
     isExpanded: false
   });
-  const renderPrimaryButton = () => /*#__PURE__*/react.createElement(Component, SplitButton_extends({
-    key: primary.id
-  }, primary, {
-    isActive: isActive,
-    onInteraction: onInteraction,
-    rounded: "none",
-    className: SplitButton_classes.Primary({
-      ...state,
-      primary: {
-        isActive,
-        isToggle
-      }
-    }),
-    "data-tool": primary.id,
-    "data-cy": `${groupId}-split-button-primary`
-  }));
+  const listItemRenderer = renderer || DefaultListItemRenderer;
+  const primaryClassNames = classnames_default()(SplitButton_classes.Primary({
+    isExpanded: state.isExpanded,
+    isActive: primary.isActive
+  }), primary.className);
   return /*#__PURE__*/react.createElement(react_outside_click_handler["default"], {
     onOutsideClick: collapse,
     disabled: !state.isExpanded
@@ -32952,10 +33407,7 @@ const SplitButton = ({
     className: "relative"
   }, /*#__PURE__*/react.createElement("div", {
     className: SplitButton_classes.Button({
-      ...state,
-      primary: {
-        isActive
-      }
+      ...state
     }),
     style: {
       height: '40px'
@@ -32966,19 +33418,23 @@ const SplitButton = ({
     className: SplitButton_classes.Interface
   }, /*#__PURE__*/react.createElement("div", {
     onClick: collapse
-  }, renderPrimaryButton()), /*#__PURE__*/react.createElement("div", {
+  }, /*#__PURE__*/react.createElement(Component, SplitButton_extends({
+    key: primary.id
+  }, primary, {
+    onInteraction: onInteraction,
+    rounded: "none",
+    className: primaryClassNames,
+    "data-tool": primary.id,
+    "data-cy": `${groupId}-split-button-primary`
+  }))), /*#__PURE__*/react.createElement("div", {
     className: SplitButton_classes.Separator({
       ...state,
-      primary: {
-        isActive
-      }
+      primary
     })
   }), /*#__PURE__*/react.createElement("div", {
     className: SplitButton_classes.Secondary({
       ...state,
-      primary: {
-        isActive
-      }
+      primary
     }),
     onClick: toggleExpanded,
     "data-cy": `${groupId}-split-button-secondary`
@@ -32989,10 +33445,7 @@ const SplitButton = ({
   }, /*#__PURE__*/react.createElement(Icon/* default */.A, {
     name: secondary.icon,
     className: SplitButton_classes.SecondaryIcon({
-      ...state,
-      primary: {
-        isActive
-      }
+      ...state
     })
   }))))), /*#__PURE__*/react.createElement("div", {
     className: SplitButton_classes.Content({
@@ -33002,7 +33455,7 @@ const SplitButton = ({
   }, /*#__PURE__*/react.createElement(components_ListMenu, {
     items: items,
     onClick: collapse,
-    renderer: args => renderer({
+    renderer: args => listItemRenderer({
       ...args,
       t
     })
@@ -33017,7 +33470,8 @@ SplitButton.propTypes = {
   renderer: (prop_types_default()).func,
   isActive: (prop_types_default()).bool,
   onInteraction: (prop_types_default()).func.isRequired,
-  Component: (prop_types_default()).elementType
+  Component: (prop_types_default()).elementType,
+  interactionType: prop_types_default().oneOf(['action', 'tool', 'toggle'])
 };
 SplitButton.defaultProps = {
   isToggle: false,
@@ -33666,7 +34120,7 @@ const Thumbnail = ({
   }, imageSrc ? /*#__PURE__*/react.createElement("img", {
     src: imageSrc,
     alt: imageAltText,
-    className: "min-h-32 object-none",
+    className: "min-h-32 object-contain",
     crossOrigin: "anonymous"
   }) : /*#__PURE__*/react.createElement("div", null, imageAltText)), /*#__PURE__*/react.createElement("div", {
     className: "flex flex-1 flex-row items-center pt-2 text-base text-blue-300"
@@ -33830,6 +34284,9 @@ ThumbnailNoImage.propTypes = {
 
 
 
+
+// Todo: This class to me feels like it belongs in an extension, not in platform/ui
+// because it is dealing with mode specific components/information
 function ThumbnailTracked({
   displaySetInstanceUID,
   className,
@@ -33920,7 +34377,6 @@ function ThumbnailTracked({
     onDoubleClick: onDoubleClick
   }));
 }
-;
 ThumbnailTracked.propTypes = {
   /**
    * Data the thumbnail should expose to a receiving drop target. Use a matching
@@ -34959,9 +35415,7 @@ function ToolbarButton_extends() { ToolbarButton_extends = Object.assign ? Objec
 
 
 
-
 const ToolbarButton = ({
-  type = 'tool',
   id,
   icon,
   label,
@@ -34969,39 +35423,33 @@ const ToolbarButton = ({
   onInteraction,
   dropdownContent,
   //
-  isActive,
   className,
+  size,
+  toolTipClassName,
+  disableToolTip = false,
   ...rest
   //
 }) => {
-  const classes = {
-    tool: isActive ? 'text-black' : 'text-common-bright hover:!bg-primary-dark hover:text-primary-light',
-    toggle: isActive ? '!text-[#348CFD]' : 'text-common-bright hover:!bg-primary-dark hover:text-primary-light',
-    action: isActive ? 'text-black' : 'text-common-bright hover:!bg-primary-dark hover:text-primary-light'
-  };
-  const bgClasses = {
-    toggle: isActive && 'bg-transparent'
-  };
-  const activeClass = isActive ? 'active' : '';
-  const shouldShowDropdown = !!isActive && !!dropdownContent;
+  const shouldShowDropdown = !!dropdownContent;
   const iconEl = icon ? /*#__PURE__*/react.createElement(Icon/* default */.A, {
     name: icon
   }) : /*#__PURE__*/react.createElement("div", null, label || 'Missing icon and label');
+  const sizeToUse = size ?? 'toolbar';
+  const toolTipClassNameToUse = toolTipClassName !== undefined ? toolTipClassName : sizeToUse === 'toolbar' ? 'w-[40px] h-[40px]' : 'w-[32px] h-[32px]';
   return /*#__PURE__*/react.createElement("div", {
     key: id
   }, /*#__PURE__*/react.createElement(components_Tooltip, {
     isSticky: shouldShowDropdown,
     content: shouldShowDropdown ? dropdownContent : label,
-    tight: shouldShowDropdown
+    tight: shouldShowDropdown,
+    className: toolTipClassNameToUse,
+    isDisabled: disableToolTip
   }, /*#__PURE__*/react.createElement(components_IconButton, ToolbarButton_extends({
-    variant: isActive ? 'contained' : 'text',
-    bgColor: bgClasses[type],
-    size: "toolbar",
-    className: classnames_default()(activeClass, classes[type], className),
+    size: sizeToUse,
+    className: className,
     onClick: () => {
       onInteraction({
         itemId: id,
-        interactionType: type,
         commands
       });
     },
@@ -35011,25 +35459,21 @@ const ToolbarButton = ({
   }, rest), iconEl)));
 };
 ToolbarButton.defaultProps = {
-  dropdownContent: null,
-  isActive: false,
-  type: 'action'
+  dropdownContent: null
 };
 ToolbarButton.propTypes = {
   /* Influences background/hover styling */
-  type: prop_types_default().oneOf(['action', 'toggle', 'tool']),
   id: (prop_types_default()).string.isRequired,
-  isActive: (prop_types_default()).bool,
   className: (prop_types_default()).string,
-  commands: prop_types_default().arrayOf(prop_types_default().shape({
-    commandName: (prop_types_default()).string.isRequired,
-    commandOptions: (prop_types_default()).object
-  })),
-  onInteraction: (prop_types_default()).func.isRequired,
+  commands: prop_types_default().oneOfType([(prop_types_default()).array, (prop_types_default()).object, (prop_types_default()).string]),
+  onInteraction: (prop_types_default()).func,
   icon: (prop_types_default()).string.isRequired,
   label: (prop_types_default()).string.isRequired,
   /** Tooltip content can be replaced for a customized content by passing a node to this value. */
-  dropdownContent: prop_types_default().oneOfType([(prop_types_default()).node, (prop_types_default()).func])
+  dropdownContent: prop_types_default().oneOfType([(prop_types_default()).node, (prop_types_default()).func]),
+  size: (prop_types_default()).string,
+  toolTipClassName: (prop_types_default()).string,
+  disableToolTip: (prop_types_default()).bool
 };
 /* harmony default export */ const ToolbarButton_ToolbarButton = (ToolbarButton);
 ;// CONCATENATED MODULE: ../../ui/src/components/ToolbarButton/index.js
@@ -36329,6 +36773,7 @@ UserPreferences.defaultProps = {
 
 /* harmony default export */ const components_UserPreferences = (UserPreferences_UserPreferences);
 ;// CONCATENATED MODULE: ../../ui/src/components/Header/Header.tsx
+function Header_extends() { Header_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Header_extends.apply(this, arguments); }
 
 
 
@@ -36358,13 +36803,12 @@ function Header_Header({
       onClickReturnButton();
     }
   };
-  return /*#__PURE__*/react.createElement(components_NavBar, {
-    className: "justify-between border-b-4 border-black",
+  return /*#__PURE__*/react.createElement(components_NavBar, Header_extends({
     isSticky: isSticky
+  }, props), /*#__PURE__*/react.createElement("div", {
+    className: "relative h-[48px] items-center "
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-1 justify-between"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex items-center"
+    className: "absolute left-0 top-1/2 -translate-y-1/2 "
   }, /*#__PURE__*/react.createElement("div", {
     className: classnames_default()('mr-3 inline-flex items-center', isReturnEnabled && 'cursor-pointer'),
     onClick: onClickReturn,
@@ -36377,9 +36821,11 @@ function Header_Header({
   }, WhiteLabeling?.createLogoComponentFn?.(react, props) || /*#__PURE__*/react.createElement(components_Svg, {
     name: "logo-ohif"
   })))), /*#__PURE__*/react.createElement("div", {
-    className: "flex items-center"
-  }, children), /*#__PURE__*/react.createElement("div", {
-    className: "flex items-center"
+    className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex items-center justify-center space-x-2"
+  }, children)), /*#__PURE__*/react.createElement("div", {
+    className: "absolute right-0 top-1/2 -translate-y-1/2 "
   }, /*#__PURE__*/react.createElement(Dropdown_Dropdown, {
     id: "options",
     showDropdownIcon: false,
@@ -36516,11 +36962,11 @@ const ViewportOverlay = ({
   topRight,
   bottomRight,
   bottomLeft,
-  color
+  color = 'text-primary-light'
 }) => {
   const overlay = 'absolute pointer-events-none viewport-overlay';
   return /*#__PURE__*/react.createElement("div", {
-    className: classnames_default()(color ? color : 'text-primary-light')
+    className: color
   }, /*#__PURE__*/react.createElement("div", {
     "data-cy": 'viewport-overlay-top-left',
     className: classnames_default()(overlay, ViewportOverlay_classes.topLeft)
@@ -49480,7 +49926,8 @@ PanelSection.propTypes = {
 const SETTING_TYPES = {
   RANGE: 'range',
   RADIO: 'radio',
-  CUSTOM: 'custom'
+  CUSTOM: 'custom',
+  DOUBLE_RANGE: 'double-range'
 };
 function ToolSettings({
   options
@@ -49488,68 +49935,103 @@ function ToolSettings({
   if (!options) {
     return null;
   }
-  const getButtons = option => {
-    const buttons = [];
-    option.values?.map(({
-      label,
-      value: optionValue
-    }, index) => {
-      buttons.push({
-        children: label,
-        onClick: () => option.onChange(optionValue),
-        key: `button-${option.id}-${index}` // A unique key
-      });
-    });
-    return buttons;
-  };
   return /*#__PURE__*/react.createElement("div", {
     className: "space-y-2 py-2 text-white"
   }, options?.map(option => {
-    if (option.type === SETTING_TYPES.RANGE) {
-      return /*#__PURE__*/react.createElement("div", {
-        className: "flex items-center",
-        key: option.id
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "w-1/3 text-[13px]"
-      }, option.name), /*#__PURE__*/react.createElement("div", {
-        className: "w-2/3"
-      }, /*#__PURE__*/react.createElement(components_InputRange, {
-        minValue: option.min,
-        maxValue: option.max,
-        step: option.step,
-        value: option.value,
-        onChange: e => option.onChange(e),
-        allowNumberEdit: true,
-        showAdjustmentArrows: false,
-        inputClassName: "ml-1 w-4/5 cursor-pointer"
-      })));
-    }
-    if (option.type === SETTING_TYPES.RADIO) {
-      return /*#__PURE__*/react.createElement("div", {
-        className: "flex items-center justify-between text-[13px]",
-        key: option.id
-      }, /*#__PURE__*/react.createElement("span", null, option.name), /*#__PURE__*/react.createElement("div", {
-        className: "max-w-1/2"
-      }, /*#__PURE__*/react.createElement(components_ButtonGroup, {
-        buttons: getButtons(option),
-        defaultActiveIndex: option.defaultActiveIndex,
-        size: size.small
-      })));
+    if (option.condition && option.condition?.({
+      options
+    }) === false) {
+      return null;
     }
-    if (option.type === SETTING_TYPES.CUSTOM) {
-      return /*#__PURE__*/react.createElement("div", {
-        key: option.id
-      }, typeof option.children === 'function' ? option.children() : option.children);
+    switch (option.type) {
+      case SETTING_TYPES.RANGE:
+        return renderRangeSetting(option);
+      case SETTING_TYPES.RADIO:
+        return renderRadioSetting(option);
+      case SETTING_TYPES.DOUBLE_RANGE:
+        return renderDoubleRangeSetting(option);
+      case SETTING_TYPES.CUSTOM:
+        return renderCustomSetting(option);
+      default:
+        return null;
     }
   }));
 }
+const renderRangeSetting = option => {
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex items-center",
+    key: option.id
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "w-1/3 text-[13px]"
+  }, option.name), /*#__PURE__*/react.createElement("div", {
+    className: "w-2/3"
+  }, /*#__PURE__*/react.createElement(components_InputRange, {
+    minValue: option.min,
+    maxValue: option.max,
+    step: option.step,
+    value: option.value,
+    onChange: value => option.commands?.(value),
+    allowNumberEdit: true,
+    showAdjustmentArrows: false,
+    inputClassName: "ml-1 w-4/5 cursor-pointer"
+  })));
+};
+const renderRadioSetting = option => {
+  const renderButtons = option => {
+    return option.values?.map(({
+      label,
+      value: optionValue
+    }, index) => /*#__PURE__*/react.createElement("button", {
+      onClick: () => {
+        option.commands?.(optionValue);
+      },
+      key: `button-${option.id}-${index}`
+    }, label));
+  };
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex items-center justify-between text-[13px]",
+    key: option.id
+  }, /*#__PURE__*/react.createElement("span", null, option.name), /*#__PURE__*/react.createElement("div", {
+    className: "max-w-1/2"
+  }, /*#__PURE__*/react.createElement(components_ButtonGroup, {
+    activeIndex: option.values.findIndex(({
+      value
+    }) => value === option.value) || 0
+  }, renderButtons(option))));
+};
+const renderDoubleRangeSetting = option => {
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex w-full items-center",
+    key: option.id
+  }, /*#__PURE__*/react.createElement(components_InputDoubleRange, {
+    values: option.values,
+    onChange: option.commands,
+    minValue: option.min,
+    maxValue: option.max,
+    step: option.step,
+    showLabel: true,
+    allowNumberEdit: true,
+    showAdjustmentArrows: false,
+    containerClassName: "w-full"
+  }));
+};
+const renderCustomSetting = option => {
+  return /*#__PURE__*/react.createElement("div", {
+    key: option.id
+  }, typeof option.children === 'function' ? option.children() : option.children);
+};
 /* harmony default export */ const AdvancedToolbox_ToolSettings = (ToolSettings);
 ;// CONCATENATED MODULE: ../../ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx
 
 
 
 
-const AdvancedToolbox = ({
+
+/**
+ * Use Toolbox component instead of this although it doesn't have "Advanced" in its name
+ * it is better to use it instead of this one
+ */
+const AdvancedToolbox_AdvancedToolbox = ({
   title,
   items
 }) => {
@@ -49593,11 +50075,13 @@ const AdvancedToolbox = ({
     options: activeItemOptions
   }))));
 };
-AdvancedToolbox.propTypes = {};
-/* harmony default export */ const AdvancedToolbox_AdvancedToolbox = (AdvancedToolbox);
+AdvancedToolbox_AdvancedToolbox.propTypes = {};
+/* harmony default export */ const components_AdvancedToolbox_AdvancedToolbox = ((/* unused pure expression or super */ null && (AdvancedToolbox_AdvancedToolbox)));
 ;// CONCATENATED MODULE: ../../ui/src/components/AdvancedToolbox/index.js
 
-/* harmony default export */ const components_AdvancedToolbox = (AdvancedToolbox_AdvancedToolbox);
+
+/* harmony default export */ const components_AdvancedToolbox = ((/* unused pure expression or super */ null && (AdvancedToolbox)));
+
 ;// CONCATENATED MODULE: ../../ui/src/components/InputDoubleRange/InputDoubleRange.css
 // extracted by mini-css-extract-plugin
 
@@ -49772,6 +50256,373 @@ InputDoubleRange.defaultProps = {
 ;// CONCATENATED MODULE: ../../ui/src/components/InputDoubleRange/index.js
 
 /* harmony default export */ const components_InputDoubleRange = (InputDoubleRange_InputDoubleRange);
+;// CONCATENATED MODULE: ../../ui/src/components/LegacySplitButton/LegacySplitButton.tsx
+function LegacySplitButton_extends() { LegacySplitButton_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return LegacySplitButton_extends.apply(this, arguments); }
+
+
+
+
+
+
+
+
+const LegacySplitButton_baseClasses = {
+  Button: 'flex items-center rounded-md border-transparent cursor-pointer group/button',
+  Primary:
+  // By default border on left, top and bottom for hover effect and only rounded on left side.
+  // Extra padding on right to compensate for no right border.
+  'h-full border-l-2 border-t-2 border-b-2 rounded-tl-md rounded-bl-md group/primary !pl-2 !py-2',
+  Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4 border-2 border-transparent group/secondary',
+  SecondaryIcon: 'w-4 h-full stroke-1',
+  Separator: 'border-l py-2.5',
+  Content: 'absolute z-10 top-0 mt-12'
+};
+const LegacySplitButton_classes = {
+  Button: ({
+    isExpanded,
+    primary
+  }) => classnames_default()(LegacySplitButton_baseClasses.Button, !isExpanded && !primary.isActive && 'hover:!bg-primary-dark hover:border-primary-dark'),
+  Interface: 'h-full flex flex-row items-center',
+  Primary: ({
+    isActive,
+    isExpanded
+  }) => classnames_default()(LegacySplitButton_baseClasses.Primary, isActive ? isExpanded ? 'border-primary-dark !bg-primary-dark hover:border-primary-dark !text-primary-light' : 'border-primary-light bg-primary-light border-2 rounded-md !p-2' : `focus:!text-black focus:!rounded-md focus:!border-primary-light focus:!bg-primary-light
+        ${isExpanded ? 'border-primary-dark bg-primary-dark !text-primary-light' : 'border-secondary-dark bg-secondary-dark group-hover/button:border-primary-dark group-hover/button:text-primary-light hover:!bg-primary-dark hover:border-primary-dark focus:!text-black'}
+        `),
+  Secondary: ({
+    isExpanded,
+    primary
+  }) => classnames_default()(LegacySplitButton_baseClasses.Secondary, isExpanded ? 'bg-primary-light !rounded-tr-md !rounded-br-md' : primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark group-hover/button:border-primary-dark'),
+  SecondaryIcon: ({
+    isExpanded
+  }) => classnames_default()(LegacySplitButton_baseClasses.SecondaryIcon, isExpanded ? 'text-primary-dark' : 'text-primary-active group-hover/secondary:text-primary-light'),
+  Separator: ({
+    primary,
+    isExpanded,
+    isHovering
+  }) => classnames_default()(LegacySplitButton_baseClasses.Separator, isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'),
+  Content: ({
+    isExpanded
+  }) => classnames_default()(LegacySplitButton_baseClasses.Content, isExpanded ? 'block' : 'hidden')
+};
+const LegacySplitButton_SplitButton = ({
+  groupId,
+  primary,
+  secondary,
+  items,
+  renderer,
+  onInteraction,
+  Component,
+  isActive
+}) => {
+  const {
+    t
+  } = (0,es/* useTranslation */.Bd)('Buttons');
+  const [state, setState] = (0,react.useState)({
+    isHovering: false,
+    isExpanded: false
+  });
+  const toggleExpanded = () => setState({
+    ...state,
+    isExpanded: !state.isExpanded
+  });
+  const setHover = hovering => setState({
+    ...state,
+    isHovering: hovering
+  });
+  const collapse = () => setState({
+    ...state,
+    isExpanded: false
+  });
+  const renderPrimaryButton = () => /*#__PURE__*/react.createElement(Component, LegacySplitButton_extends({
+    key: primary.id
+  }, primary, {
+    isActive: isActive,
+    onInteraction: onInteraction,
+    rounded: "none",
+    className: LegacySplitButton_classes.Primary({
+      isActive,
+      isExpanded: state.isExpanded
+    }),
+    "data-tool": primary.id,
+    "data-cy": `${groupId}-split-button-primary`
+  }));
+  return /*#__PURE__*/react.createElement(react_outside_click_handler["default"], {
+    onOutsideClick: collapse,
+    disabled: !state.isExpanded
+  }, /*#__PURE__*/react.createElement("div", {
+    id: "SplitButton",
+    className: "relative"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: LegacySplitButton_classes.Button({
+      ...state,
+      primary: {
+        isActive
+      }
+    }),
+    style: {
+      height: '40px'
+    },
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false)
+  }, /*#__PURE__*/react.createElement("div", {
+    className: LegacySplitButton_classes.Interface
+  }, /*#__PURE__*/react.createElement("div", {
+    onClick: collapse
+  }, renderPrimaryButton()), /*#__PURE__*/react.createElement("div", {
+    className: LegacySplitButton_classes.Separator({
+      ...state,
+      primary: {
+        isActive
+      }
+    })
+  }), /*#__PURE__*/react.createElement("div", {
+    className: LegacySplitButton_classes.Secondary({
+      ...state,
+      primary: {
+        isActive
+      }
+    }),
+    onClick: toggleExpanded,
+    "data-cy": `${groupId}-split-button-secondary`
+  }, /*#__PURE__*/react.createElement(components_Tooltip, {
+    isDisabled: state.isExpanded || !secondary.tooltip,
+    content: secondary.tooltip,
+    className: "h-full"
+  }, /*#__PURE__*/react.createElement(Icon/* default */.A, {
+    name: secondary.icon,
+    className: LegacySplitButton_classes.SecondaryIcon({
+      ...state
+    })
+  }))))), /*#__PURE__*/react.createElement("div", {
+    className: LegacySplitButton_classes.Content({
+      ...state
+    }),
+    "data-cy": `${groupId}-list-menu`
+  }, /*#__PURE__*/react.createElement(components_ListMenu, {
+    items: items,
+    onClick: collapse,
+    renderer: args => renderer({
+      ...args,
+      t
+    })
+  }))));
+};
+LegacySplitButton_SplitButton.propTypes = {
+  isToggle: (prop_types_default()).bool,
+  groupId: (prop_types_default()).string.isRequired,
+  primary: (prop_types_default()).object.isRequired,
+  secondary: (prop_types_default()).object.isRequired,
+  items: (prop_types_default()).array.isRequired,
+  renderer: (prop_types_default()).func,
+  isActive: (prop_types_default()).bool,
+  onInteraction: (prop_types_default()).func.isRequired,
+  Component: (prop_types_default()).elementType
+};
+LegacySplitButton_SplitButton.defaultProps = {
+  isToggle: false,
+  renderer: null,
+  isActive: false,
+  Component: null
+};
+/* harmony default export */ const LegacySplitButton_LegacySplitButton = ((/* unused pure expression or super */ null && (LegacySplitButton_SplitButton)));
+;// CONCATENATED MODULE: ../../ui/src/components/LegacySplitButton/index.js
+
+/* harmony default export */ const components_LegacySplitButton = ((/* unused pure expression or super */ null && (LegacySplitButton)));
+;// CONCATENATED MODULE: ../../ui/src/components/Toolbox/ToolboxUI.tsx
+function ToolboxUI_extends() { ToolboxUI_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolboxUI_extends.apply(this, arguments); }
+
+
+
+const ItemsPerRow = 4;
+
+/**
+ * Just refactoring from the toolbox component to make it more readable
+ */
+function ToolboxUI(props) {
+  const {
+    toolbarButtons,
+    handleToolSelect,
+    activeToolOptions,
+    numRows,
+    servicesManager,
+    title,
+    useCollapsedPanel = true
+  } = props;
+  const render = () => {
+    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-col bg-black"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "bg-primary-dark mt-0.5 flex flex-wrap py-2"
+    }, toolbarButtons.map((toolDef, index) => {
+      if (!toolDef) {
+        return null;
+      }
+      const {
+        id,
+        Component,
+        componentProps
+      } = toolDef;
+      const isLastRow = Math.floor(index / ItemsPerRow) + 1 === numRows;
+      const toolClasses = `ml-1 ${isLastRow ? '' : 'mb-2'}`;
+      const onInteraction = ({
+        itemId,
+        id,
+        commands
+      }) => {
+        handleToolSelect(itemId || id);
+        props.onInteraction({
+          itemId,
+          commands
+        });
+      };
+      return /*#__PURE__*/react.createElement("div", {
+        key: id,
+        className: classnames_default()({
+          [toolClasses]: true,
+          'flex flex-col items-center justify-center': true
+        })
+      }, componentProps.disabled ? /*#__PURE__*/react.createElement(components_Tooltip, {
+        position: "bottom",
+        content: componentProps.label,
+        secondaryContent: 'Not available on the current viewport'
+      }, /*#__PURE__*/react.createElement(Component, ToolboxUI_extends({}, componentProps, props, {
+        id: id,
+        servicesManager: servicesManager,
+        onInteraction: onInteraction,
+        size: "toolbox"
+      }))) : /*#__PURE__*/react.createElement(Component, ToolboxUI_extends({}, componentProps, props, {
+        id: id,
+        servicesManager: servicesManager,
+        onInteraction: onInteraction,
+        size: "toolbox"
+      })));
+    }))), /*#__PURE__*/react.createElement("div", {
+      className: "bg-primary-dark h-auto px-2"
+    }, activeToolOptions && /*#__PURE__*/react.createElement(AdvancedToolbox_ToolSettings, {
+      options: activeToolOptions
+    })));
+  };
+  return useCollapsedPanel ? /*#__PURE__*/react.createElement(components_PanelSection, {
+    title: title
+  }, render()) : render();
+}
+
+;// CONCATENATED MODULE: ../../ui/src/components/Toolbox/Toolbox.tsx
+function Toolbox_extends() { Toolbox_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Toolbox_extends.apply(this, arguments); }
+
+
+
+
+
+/**
+ * A toolbox is a collection of buttons and commands that they invoke, used to provide
+ * custom control panels to users. This component is a generic UI component that
+ * interacts with services and commands in a generic fashion. While it might
+ * seem unconventional to import it from the UI and integrate it into the JSX,
+ * it belongs in the UI components as there isn't anything in this component that
+ * couldn't be used for a completely different type of app. It plays a crucial
+ * role in enhancing the app with a toolbox by providing a way to integrate
+ * and display various tools and their corresponding options
+ */
+function Toolbox({
+  servicesManager,
+  buttonSectionId,
+  commandsManager,
+  title,
+  ...props
+}) {
+  const {
+    state: toolboxState,
+    api
+  } = useToolbox(buttonSectionId);
+  const {
+    onInteraction,
+    toolbarButtons
+  } = (0,src/* useToolbar */.tR)({
+    servicesManager,
+    buttonSection: buttonSectionId
+  });
+  const prevButtonIdsRef = (0,react.useRef)();
+  (0,react.useEffect)(() => {
+    const currentButtonIdsStr = JSON.stringify(toolbarButtons.map(button => {
+      const {
+        id,
+        componentProps
+      } = button;
+      if (componentProps.items?.length) {
+        return componentProps.items.map(item => `${item.id}-${item.disabled}`);
+      }
+      return `${id}-${componentProps.disabled}`;
+    }));
+    if (prevButtonIdsRef.current === currentButtonIdsStr) {
+      return;
+    }
+    prevButtonIdsRef.current = currentButtonIdsStr;
+    const initializeOptionsWithEnhancements = toolbarButtons.reduce((accumulator, toolbarButton) => {
+      const {
+        id: buttonId,
+        componentProps
+      } = toolbarButton;
+      const createEnhancedOptions = (options, parentId) => options.map(option => {
+        return {
+          ...option,
+          value: toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ?? option.value,
+          commands: value => {
+            api.handleToolOptionChange(parentId, option.id, value);
+            const {
+              isArray
+            } = Array;
+            const cmds = isArray(option.commands) ? option.commands : [option.commands];
+            cmds.forEach(command => {
+              const isString = typeof command === 'string';
+              const isObject = typeof command === 'object';
+              if (isString) {
+                commandsManager.run(command, {
+                  value
+                });
+              } else if (isObject) {
+                commandsManager.run({
+                  ...command,
+                  commandOptions: {
+                    ...command.commandOptions,
+                    ...option,
+                    value
+                  }
+                });
+              }
+            });
+          }
+        };
+      });
+      if (componentProps.items?.length) {
+        componentProps.items.forEach(item => {
+          accumulator[item.id] = createEnhancedOptions(item.options, item.id);
+        });
+      } else if (componentProps.options?.length) {
+        accumulator[buttonId] = createEnhancedOptions(componentProps.options, buttonId);
+      }
+      return accumulator;
+    }, {});
+    api.initializeToolOptions(initializeOptionsWithEnhancements);
+  }, [toolbarButtons, api]);
+  const handleToolOptionChange = (toolName, optionName, newValue) => {
+    api.handleToolOptionChange(toolName, optionName, newValue);
+  };
+  return /*#__PURE__*/react.createElement(ToolboxUI, Toolbox_extends({}, props, {
+    title: title,
+    toolbarButtons: toolbarButtons,
+    activeToolOptions: toolboxState.toolOptions?.[toolboxState.activeTool],
+    handleToolSelect: id => api.handleToolSelect(id),
+    handleToolOptionChange: handleToolOptionChange,
+    onInteraction: onInteraction
+  }));
+}
+/* harmony default export */ const Toolbox_Toolbox = (Toolbox);
+;// CONCATENATED MODULE: ../../ui/src/components/Toolbox/index.js
+
+
+
 ;// CONCATENATED MODULE: ../../ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
 
 
@@ -49875,6 +50726,45 @@ InvestigationalUseDialog.defaultProps = {
 ;// CONCATENATED MODULE: ../../ui/src/components/InvestigationalUseDialog/index.js
 
 /* harmony default export */ const components_InvestigationalUseDialog = (InvestigationalUseDialog_InvestigationalUseDialog);
+// EXTERNAL MODULE: ../../ui/src/components/Icon/Icon.tsx
+var Icon_Icon = __webpack_require__(66348);
+;// CONCATENATED MODULE: ../../ui/src/components/LayoutPreset/LayoutPreset.tsx
+
+
+
+function LayoutPreset({
+  onSelection,
+  title,
+  icon,
+  commandOptions,
+  classNames
+}) {
+  return /*#__PURE__*/react.createElement("div", {
+    className: classNames,
+    onClick: () => {
+      onSelection(commandOptions);
+    }
+  }, /*#__PURE__*/react.createElement(Icon_Icon/* default */.A, {
+    name: icon,
+    className: "group-hover:text-primary-light"
+  }), title && /*#__PURE__*/react.createElement("div", {
+    className: "font-inter text-sm text-white"
+  }, title));
+}
+LayoutPreset.defaultProps = {
+  onSelection: () => {}
+};
+LayoutPreset.propTypes = {
+  onSelection: (prop_types_default()).func.isRequired,
+  title: (prop_types_default()).string,
+  icon: (prop_types_default()).string.isRequired,
+  commandOptions: (prop_types_default()).object.isRequired,
+  classNames: (prop_types_default()).string
+};
+/* harmony default export */ const LayoutPreset_LayoutPreset = (LayoutPreset);
+;// CONCATENATED MODULE: ../../ui/src/components/LayoutPreset/index.js
+
+/* harmony default export */ const components_LayoutPreset = (LayoutPreset_LayoutPreset);
 ;// CONCATENATED MODULE: ../../ui/src/components/index.js
 
 
@@ -49955,6 +50845,10 @@ InvestigationalUseDialog.defaultProps = {
 
 
 
+
+
+
+
 
 
 
@@ -50011,12 +50905,6 @@ ModalComponent.propTypes = {
 };
 /* harmony default export */ const contextProviders_ModalComponent = ((/* unused pure expression or super */ null && (ModalComponent)));
 ;// CONCATENATED MODULE: ../../ui/src/index.js
-/** UTILS */
-//import utils from './utils';
-//export { utils };
-
-/** CONTEXT/HOOKS */
-// Export types - need to do as two lines due to a bug in babel
 
 
 
@@ -50173,7 +51061,7 @@ function _getImageOrientationPatient(image) {
 
 /***/ }),
 
-/***/ 14283:
+/***/ 78198:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -50199,7 +51087,7 @@ __webpack_require__.d(__webpack_exports__, {
   Rc: () => (/* reexport */ pubSubServiceInterface/* PubSubService */.R),
   CS: () => (/* reexport */ ServicesManager),
   wb: () => (/* reexport */ services_StateSyncService),
-  hx: () => (/* reexport */ ToolBarService),
+  ToolbarService: () => (/* reexport */ ToolBarService),
   u$: () => (/* reexport */ UIDialogService),
   zo: () => (/* reexport */ services_UIModalService),
   v4: () => (/* reexport */ services_UINotificationService),
@@ -50213,6 +51101,7 @@ __webpack_require__.d(__webpack_exports__, {
   ot: () => (/* binding */ hotkeys),
   Rm: () => (/* reexport */ src_log),
   Ml: () => (/* reexport */ pubSubServiceInterface/* default */.A),
+  tR: () => (/* reexport */ useToolbar),
   utils: () => (/* reexport */ utils/* default */.Ay)
 });
 
@@ -50354,7 +51243,7 @@ class MeasurementService extends pubSubServiceInterface/* PubSubService */.R {
     super(EVENTS);
     this.VALUE_TYPES = VALUE_TYPES;
     this.measurements = new Map();
-    this.unmappedMeasurements = new Set();
+    this.unmappedMeasurements = new Map();
     /**
      * Check if a given measurement service event is valid.
      *
@@ -50696,7 +51585,15 @@ class MeasurementService extends pubSubServiceInterface/* PubSubService */.R {
       measurement = toMeasurementSchema(sourceAnnotationDetail);
       measurement.source = source;
     } catch (error) {
-      this.unmappedMeasurements.add(sourceAnnotationDetail.uid);
+      // Todo: handle other
+      this.unmappedMeasurements.set(sourceAnnotationDetail.uid, {
+        ...sourceAnnotationDetail,
+        source: {
+          name: source.name,
+          version: source.version,
+          uid: source.uid
+        }
+      });
       console.log('Failed to map', error);
       throw new Error(`Failed to map '${sourceInfo}' measurement for annotationType ${annotationType}: ${error.message}`);
     }
@@ -50761,10 +51658,9 @@ class MeasurementService extends pubSubServiceInterface/* PubSubService */.R {
     });
   }
   clearMeasurements() {
-    this.unmappedMeasurements.clear();
-
     // Make a copy of the measurements
-    const measurements = [...this.measurements.values()];
+    const measurements = [...this.measurements.values(), ...this.unmappedMeasurements.values()];
+    this.unmappedMeasurements.clear();
     this.measurements.clear();
     this._broadcastEvent(this.EVENTS.MEASUREMENTS_CLEARED, {
       measurements
@@ -50913,10 +51809,16 @@ MeasurementService.VALUE_TYPES = VALUE_TYPES;
 class ServicesManager {
   constructor(commandsManager) {
     this.services = {};
+    this.registeredServiceNames = [];
+    this._commandsManager = void 0;
+    this._extensionManager = void 0;
     this._commandsManager = commandsManager;
     this.services = {};
     this.registeredServiceNames = [];
   }
+  setExtensionManager(extensionManager) {
+    this._extensionManager = extensionManager;
+  }
 
   /**
    * Registers a new service.
@@ -50941,7 +51843,8 @@ class ServicesManager {
       this.services[service.name] = service.create({
         configuration,
         commandsManager: this._commandsManager,
-        servicesManager: this
+        servicesManager: this,
+        extensionManager: this._extensionManager
       });
       if (service.altName) {
         console.log('Registering old name', service.altName);
@@ -51814,76 +52717,174 @@ class DisplaySetMessageList {
 
 /* harmony default export */ const services_DisplaySetService = (DisplaySetService);
 
-// EXTERNAL MODULE: ../../../node_modules/lodash.merge/index.js
-var lodash_merge = __webpack_require__(40592);
-var lodash_merge_default = /*#__PURE__*/__webpack_require__.n(lodash_merge);
 ;// CONCATENATED MODULE: ../../core/src/services/ToolBarService/ToolbarService.ts
 var ToolbarService_class;
 
-
 const ToolbarService_EVENTS = {
   TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
   TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified'
 };
 class ToolbarService extends pubSubServiceInterface/* PubSubService */.R {
-  static _createButton(type, id, icon, label, commands, tooltip, extraOptions) {
-    return {
+  static createButton(options) {
+    const {
       id,
       icon,
       label,
-      type,
       commands,
       tooltip,
-      ...extraOptions
+      evaluate,
+      listeners
+    } = options;
+    return {
+      id,
+      icon,
+      label,
+      commands,
+      tooltip: tooltip || label,
+      evaluate,
+      listeners
     };
   }
-  constructor(commandsManager) {
+  constructor(commandsManager, extensionManager, servicesManager) {
     super(ToolbarService_EVENTS);
-    this.buttons = {};
     this.state = {
-      primaryToolId: '',
-      toggles: {},
-      groups: {}
-    };
-    this.buttonSections = {
-      /**
-       * primary: ['Zoom', 'Wwwc'],
-       * secondary: ['Length', 'RectangleRoi']
-       */
+      buttons: {},
+      buttonSections: {}
     };
     this._commandsManager = void 0;
-    this.extensionManager = void 0;
-    this.defaultTool = void 0;
+    this._extensionManager = void 0;
+    this._servicesManager = void 0;
+    this._evaluateFunction = {};
+    this._serviceSubscriptions = [];
+    this.handleEvaluateNested = props => {
+      const {
+        primary,
+        items
+      } = props;
+      // handle group evaluate function
+      this.handleEvaluate(props);
+
+      // primary and items evaluate functions
+      if (primary) {
+        this.handleEvaluate(primary);
+      }
+      items.forEach(item => this.handleEvaluate(item));
+    };
+    this.handleEvaluate = props => {
+      const {
+        evaluate
+      } = props;
+      if (typeof evaluate === 'function') {
+        return;
+      }
+      if (Array.isArray(evaluate)) {
+        const evaluators = evaluate.map(evaluatorName => {
+          const evaluateFunction = this._evaluateFunction[evaluatorName];
+          if (!evaluateFunction) {
+            throw new Error(`Evaluate function not found for name: ${evaluatorName}, you can register an evaluate function with the getToolbarModule in your extensions`);
+          }
+          return evaluateFunction;
+        });
+        props.evaluate = args => {
+          const results = evaluators.map(evaluator => evaluator(args));
+          const mergedResult = results.reduce((acc, result) => {
+            return {
+              ...acc,
+              ...result
+            };
+          }, {});
+          return mergedResult;
+        };
+        return;
+      }
+      if (typeof evaluate === 'string') {
+        const evaluateFunction = this._evaluateFunction[evaluate];
+        if (evaluateFunction) {
+          props.evaluate = evaluateFunction;
+          return;
+        }
+        throw new Error(`Evaluate function not found for name: ${evaluate}, you can register an evaluate function with the getToolbarModule in your extensions`);
+      }
+      if (typeof evaluate === 'object') {
+        const {
+          name,
+          options
+        } = evaluate;
+        const evaluateFunction = this._evaluateFunction[name];
+        if (evaluateFunction) {
+          props.evaluate = args => evaluateFunction({
+            ...args,
+            ...options
+          });
+          return;
+        }
+        throw new Error(`Evaluate function not found for name: ${name}, you can register an evaluate function with the getToolbarModule in your extensions`);
+      }
+    };
     this._commandsManager = commandsManager;
-  }
-  init(extensionManager) {
-    this.extensionManager = extensionManager;
+    this._extensionManager = extensionManager;
+    this._servicesManager = servicesManager;
   }
   reset() {
     this.unsubscriptions.forEach(unsub => unsub());
     this.state = {
-      primaryToolId: 'WindowLevel',
-      toggles: {},
-      groups: {}
+      buttons: {},
+      buttonSections: {}
     };
     this.unsubscriptions = [];
-    this.buttonSections = {};
-    this.buttons = {};
   }
   onModeEnter() {
     this.reset();
   }
 
   /**
-   * Sets the default tool that will be activated whenever the primary tool is
-   * deactivated without activating another/different tool.
-   * @param interaction the interaction command that will set the default tool active
+   * Registers an evaluate function with the specified name.
+   *
+   * @param name - The name of the evaluate function.
+   * @param handler - The evaluate function handler.
    */
-  setDefaultTool(interaction) {
-    this.defaultTool = interaction;
+  registerEvaluateFunction(name, handler) {
+    this._evaluateFunction[name] = handler;
   }
-  getDefaultTool() {
-    return this.defaultTool;
+
+  /**
+   * Registers a service and its event to listen for updates and refreshes the toolbar state when the event is triggered.
+   * @param service - The service to register.
+   * @param event - The event to listen for.
+   */
+  registerEventForToolbarUpdate(service, events) {
+    const {
+      viewportGridService
+    } = this._servicesManager.services;
+    const callback = () => {
+      const viewportId = viewportGridService.getActiveViewportId();
+      this.refreshToolbarState({
+        viewportId
+      });
+    };
+    const unsubscriptions = events.map(event => {
+      if (service.subscribe) {
+        return service.subscribe(event, callback);
+      } else if (service.addEventListener) {
+        return service.addEventListener(event, callback);
+      }
+    });
+    unsubscriptions.forEach(unsub => this._serviceSubscriptions.push(unsub));
+  }
+
+  /**
+   * Adds buttons to the toolbar.
+   * @param buttons - The buttons to be added.
+   */
+  addButtons(buttons) {
+    buttons.forEach(button => {
+      if (!this.state.buttons[button.id]) {
+        this.state.buttons[button.id] = button;
+      }
+    });
+    this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {
+      ...this.state
+    });
   }
 
   /**
@@ -51894,162 +52895,182 @@ class ToolbarService extends pubSubServiceInterface/* PubSubService */.R {
    *    called with {...commandOptions,...options}
    */
   recordInteraction(interaction, options) {
-    if (!interaction) {
-      return;
-    }
-    const commandsManager = this._commandsManager;
-    const {
-      groupId,
-      itemId,
-      commands,
-      type
-    } = interaction;
-    let {
-      interactionType
-    } = interaction;
-
-    // if not interaction type, assume the type can be used
-    if (!interactionType) {
-      interactionType = type;
-    }
-    switch (interactionType) {
-      case 'action':
-        {
-          commandsManager.run(commands, options);
-          break;
-        }
-      case 'tool':
-        {
-          try {
-            const alternateInteraction = this.state.primaryToolId === itemId && this.defaultTool?.itemId !== itemId && this.getDefaultTool();
-            if (alternateInteraction) {
-              // Allow toggling the mode off
-              return this.recordInteraction(alternateInteraction, options);
-            }
-            commandsManager.run(commands, options);
-
-            // only set the primary tool if no error was thrown.
-            // if the itemId is not undefined use it; otherwise, set the first tool in
-            // the commands as the primary tool
-            this.state.primaryToolId = itemId || commands[0].commandOptions?.toolName;
-          } catch (error) {
-            console.warn(error);
-          }
-          break;
-        }
-      case 'toggle':
-        {
-          const {
-            commands
-          } = interaction;
-          let commandExecuted;
-
-          // only toggle if a command was executed
-          this.state.toggles[itemId] = this.state.toggles[itemId] === undefined ? true : !this.state.toggles[itemId];
-          if (!commands) {
-            break;
-          }
-          commands.forEach(({
-            commandName,
-            commandOptions,
-            context
-          }) => {
-            if (!commandOptions) {
-              commandOptions = {};
-            }
-            if (commandName) {
-              commandOptions.toggledState = this.state.toggles[itemId];
-              try {
-                commandsManager.runCommand(commandName, commandOptions, context);
-                commandExecuted = true;
-              } catch (error) {
-                console.warn(error);
-              }
-            }
-          });
-          if (!commandExecuted) {
-            // If no command was executed, we need to toggle the state back
-            this.state.toggles[itemId] = !this.state.toggles[itemId];
-          }
-          break;
-        }
-      default:
-        throw new Error(`Invalid interaction type: ${interactionType}`);
-    }
-
-    // Todo: comment out for now
-    // Run command if there's one associated
-    //
-    // NOTE: Should probably just do this for tools as well?
-    // But would be nice if we could enforce at least the command name?
-    // let unsubscribe;
-    // if (commandName) {
-    //   unsubscribe = commandsManager.runCommand(commandName, commandOptions);
-    // }
-
-    // // Storing the unsubscribe for later resetting
-    // if (unsubscribe && typeof unsubscribe === 'function') {
-    //   if (this.unsubscriptions.indexOf(unsubscribe) === -1) {
-    //     this.unsubscriptions.push(unsubscribe);
-    //   }
-    // }
+    // if interaction is a string, we can assume it is the itemId
+    // and get the props to get the other properties
+    if (typeof interaction === 'string') {
+      interaction = this.getButtonProps(interaction);
+    }
+    const itemId = interaction.itemId ?? interaction.id;
+    interaction.itemId = itemId;
+    const commands = Array.isArray(interaction.commands) ? interaction.commands : [interaction.commands];
+    if (!commands?.length) {
+      this.refreshToolbarState({
+        ...options?.refreshProps,
+        itemId,
+        interaction
+      });
+    }
+    const commandOptions = {
+      ...options,
+      ...interaction
+    };
 
-    // Track last touched id for each group
-    if (groupId) {
-      this.state.groups[groupId] = itemId;
-    }
-    this._broadcastEvent(this.EVENTS.TOOL_BAR_STATE_MODIFIED, {
-      ...this.state
+    // Loop through commands and run them with the combined options
+    this._commandsManager.run(commands, commandOptions);
+    this.refreshToolbarState({
+      ...options?.refreshProps,
+      itemId,
+      interaction
     });
   }
-  getButtons() {
-    return this.buttons;
-  }
-  getActiveTools() {
-    const activeTools = [this.state.primaryToolId];
-    Object.keys(this.state.toggles).forEach(key => {
-      if (this.state.toggles[key]) {
-        activeTools.push(key);
+
+  /**
+   * Consolidates the state of the toolbar after an interaction, it accepts
+   * props that get passed to the buttons
+   *
+   * @param refreshProps - The props that buttons need to get evaluated, they can be
+   * { viewportId, toolGroup} for cornerstoneTools.
+   *
+   * Todo: right now refreshToolbarState should be used in the context where
+   * we have access to the toolGroup and viewportId, but we should be able to
+   * pass the props to the toolbar service and it should be able to decide
+   * which buttons to evaluate based on the props
+   */
+  refreshToolbarState(refreshProps) {
+    const buttons = this.state.buttons;
+
+    // Tracks evaluated buttons to avoid re-evaluating them (this will
+    // cause issue for toggles where if the button is in primary
+    // and secondary it will be evaluated twice)
+    const evaluationResults = new Map();
+    const evaluateButtonProps = (button, props, refreshProps) => {
+      if (evaluationResults.has(button.id)) {
+        const {
+          disabled,
+          className,
+          isActive
+        } = evaluationResults.get(button.id);
+        return {
+          ...props,
+          disabled,
+          className,
+          isActive
+        };
+      } else {
+        const evaluated = props.evaluate?.({
+          ...refreshProps,
+          button
+        });
+        const updatedProps = {
+          ...props,
+          disabled: evaluated?.disabled || false,
+          className: evaluated?.className || '',
+          isActive: evaluated?.isActive // isActive will be undefined for buttons without this prop
+        };
+        evaluationResults.set(button.id, updatedProps);
+        return updatedProps;
+      }
+    };
+    const refreshedButtons = Object.values(buttons).reduce((acc, button) => {
+      const isNested = button.props?.groupId;
+      if (!isNested) {
+        this.handleEvaluate(button.props);
+        const buttonProps = button.props;
+        const updatedProps = evaluateButtonProps(button, buttonProps, refreshProps);
+        acc[button.id] = {
+          ...button,
+          props: updatedProps
+        };
+      } else {
+        let buttonProps = button.props;
+        // if it is nested we should perform evaluate on each item in the group
+        this.handleEvaluateNested(buttonProps);
+        const {
+          evaluate: groupEvaluate
+        } = buttonProps;
+        const groupEvaluated = groupEvaluate?.({
+          ...refreshProps,
+          button
+        });
+        // handle group evaluate function which might switch the primary
+        // item in the group
+        buttonProps = {
+          ...buttonProps,
+          primary: groupEvaluated?.primary || buttonProps.primary
+        };
+        const {
+          primary,
+          items
+        } = buttonProps;
+
+        // primary and items evaluate functions
+        let updatedPrimary;
+        if (primary) {
+          updatedPrimary = evaluateButtonProps(primary, primary, refreshProps);
+        }
+        const updatedItems = items.map(item => evaluateButtonProps(item, item, refreshProps));
+        buttonProps = {
+          ...buttonProps,
+          primary: updatedPrimary,
+          items: updatedItems
+        };
+        acc[button.id] = {
+          ...button,
+          props: buttonProps
+        };
       }
-    });
-    return activeTools;
-  }
-  getActivePrimaryTool() {
-    return this.state.primaryToolId;
+      return acc;
+    }, {});
+    this.setButtons(refreshedButtons);
+    return this.state;
   }
 
-  /** Sets the toggle state of a button to the isToggled state */
-  setToggled(id, isToggled) {
-    if (isToggled) {
-      this.state.toggles[id] = true;
-    } else {
-      delete this.state.toggles[id];
-    }
-  }
-  setButton(id, button) {
-    if (this.buttons[id]) {
-      this.buttons[id] = lodash_merge_default()(this.buttons[id], button);
-      this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {
-        buttons: this.buttons,
-        button: this.buttons[id],
-        buttonSections: this.buttonSections
-      });
-    }
+  /**
+   * Sets the buttons for the toolbar, don't use this method to record an
+   * interaction, since it doesn't update the state of the buttons, use
+   * this if you know the buttons you want to set and you want to set them
+   * all at once.
+   * @param buttons - The buttons to set.
+   */
+  setButtons(buttons) {
+    this.state.buttons = buttons;
+    this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {
+      buttons: this.state.buttons,
+      buttonSections: this.state.buttonSections
+    });
   }
+
+  /**
+   * Retrieves a button by its ID.
+   * @param id - The ID of the button to retrieve.
+   * @returns The button with the specified ID.
+   */
   getButton(id) {
-    return this.buttons[id];
+    return this.state.buttons[id];
   }
 
-  /** Gets a nested button, found in the items/props for the children */
-  getNestedButton(id) {
-    if (this.buttons[id]) {
-      return this.buttons[id];
-    }
-    for (const buttonId of Object.keys(this.buttons)) {
+  /**
+   * Retrieves the buttons from the toolbar service.
+   * @returns An array of buttons.
+   */
+  getButtons() {
+    return this.state.buttons;
+  }
+
+  /**
+   * Retrieves the button properties for the specified button ID.
+   * It prioritizes nested buttons over regular buttons if the ID is found
+   * in both.
+   *
+   * @param id - The ID of the button.
+   * @returns The button properties.
+   */
+  getButtonProps(id) {
+    for (const buttonId of Object.keys(this.state.buttons)) {
       const {
         primary,
         items
-      } = this.buttons[buttonId].props || {};
+      } = this.state.buttons[buttonId].props || {};
       if (primary?.id === id) {
         return primary;
       }
@@ -52058,79 +53079,52 @@ class ToolbarService extends pubSubServiceInterface/* PubSubService */.R {
         return found;
       }
     }
-  }
-  setButtons(buttons) {
-    this.buttons = buttons;
-    this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {
-      buttons: this.buttons,
-      buttonSections: this.buttonSections
-    });
-  }
-  _buttonTypes() {
-    const buttonTypes = {};
-    const registeredToolbarModules = this.extensionManager.modules['toolbarModule'];
-    if (Array.isArray(registeredToolbarModules) && registeredToolbarModules.length) {
-      registeredToolbarModules.forEach(toolbarModule => toolbarModule.module.forEach(def => {
-        buttonTypes[def.name] = def;
-      }));
+
+    // This should be checked after we checked the nested buttons, since
+    // we are checking based on the ids, the nested objects are higher priority
+    // and more specific
+    if (this.state.buttons[id]) {
+      return this.state.buttons[id].props;
     }
-    return buttonTypes;
   }
-  createButtonSection(key, buttons) {
-    // Maybe do this mapping at time of return, instead of time of create
-    // Props check important for validation here...
-
-    this.buttonSections[key] = buttons;
-    this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {});
+  _getButtonUITypes() {
+    const registeredToolbarModules = this._extensionManager.modules['toolbarModule'];
+    if (!Array.isArray(registeredToolbarModules)) {
+      return {};
+    }
+    return registeredToolbarModules.reduce((buttonTypes, toolbarModule) => {
+      toolbarModule.module.forEach(def => {
+        buttonTypes[def.name] = def;
+      });
+      return buttonTypes;
+    }, {});
   }
 
   /**
-   *
-   * Finds a button section by it's name/tool group id, then maps the list of string name
-   * identifiers to schema/values that can be used to render the buttons.
-   *
-   * @param toolGroupId - the tool group id
-   * @param props - optional properties to apply to every button of the section
-   * @param defaultToolGroupId - the fallback section to return if the given toolGroupId section is not available
+   * Creates a button section with the specified key and buttons.
+   * @param {string} key - The key of the button section.
+   * @param {Array} buttons - The buttons to be added to the section.
    */
-  getButtonSection(toolGroupId, props, defaultToolGroupId = 'primary') {
-    const buttonSectionIds = this.buttonSections[toolGroupId] || this.buttonSections[defaultToolGroupId];
-    const buttonsInSection = [];
-    if (buttonSectionIds && buttonSectionIds.length !== 0) {
-      buttonSectionIds.forEach(btnId => {
-        const btn = this.buttons[btnId];
-        const metadata = {};
-        const mappedBtn = this._mapButtonToDisplay(btn, toolGroupId, metadata, props);
-        buttonsInSection.push(mappedBtn);
-      });
-    }
-    return buttonsInSection;
+  createButtonSection(key, buttons) {
+    this.state.buttonSections[key] = buttons;
+    this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {
+      ...this.state
+    });
   }
 
   /**
+   * Retrieves the button section with the specified sectionId.
    *
-   * @param {object[]} buttons
-   * @param {string} buttons[].id
+   * @param sectionId - The ID of the button section to retrieve.
+   * @param props - Optional additional properties for mapping the button to display.
+   * @returns An array of buttons in the specified section, mapped to their display representation.
    */
-  addButtons(buttons) {
-    buttons.forEach(button => {
-      if (!this.buttons[button.id]) {
-        this.buttons[button.id] = button;
-      }
-    });
-    this._setTogglesForButtonItems(buttons);
-    this._broadcastEvent(this.EVENTS.TOOL_BAR_MODIFIED, {});
-  }
-  _setTogglesForButtonItems(buttons) {
-    if (!buttons) {
-      return;
-    }
-    buttons.forEach(buttonItem => {
-      if (buttonItem.type === 'toggle') {
-        this.setToggled(buttonItem.id, buttonItem.isActive);
-      }
-      this._setTogglesForButtonItems(buttonItem.props?.items);
-    });
+  getButtonSection(sectionId, props) {
+    const buttonSectionIds = this.state.buttonSections[sectionId];
+    return buttonSectionIds?.map(btnId => {
+      const btn = this.state.buttons[btnId];
+      return this._mapButtonToDisplay(btn, props);
+    }) || [];
   }
 
   /**
@@ -52140,19 +53134,23 @@ class ToolbarService extends pubSubServiceInterface/* PubSubService */.R {
    * @param {*} metadata
    * @param {*} props - Props set by the Viewer layer
    */
-  _mapButtonToDisplay(btn, btnSection, metadata, props) {
+  _mapButtonToDisplay(btn, props) {
     if (!btn) {
       return;
     }
     const {
       id,
-      type,
+      uiType,
       component
     } = btn;
-    const buttonType = this._buttonTypes()[type];
+    const {
+      groupId
+    } = btn.props;
+    const buttonType = this._getButtonUITypes()[uiType];
     if (!buttonType) {
       return;
     }
+    !groupId ? this.handleEvaluate(btn.props) : this.handleEvaluateNested(btn.props);
     return {
       id,
       Component: component || buttonType.defaultComponent,
@@ -52160,23 +53158,21 @@ class ToolbarService extends pubSubServiceInterface/* PubSubService */.R {
     };
   }
   getButtonComponentForUIType(uiType) {
-    return uiType ? this._buttonTypes()[uiType]?.defaultComponent ?? null : null;
+    return uiType ? this._getButtonUITypes()[uiType]?.defaultComponent ?? null : null;
   }
 }
 ToolbarService_class = ToolbarService;
 ToolbarService.REGISTRATION = {
   name: 'toolbarService',
-  // Note the old name is ToolBarService, with an upper B
   altName: 'ToolBarService',
   create: ({
-    commandsManager
+    commandsManager,
+    extensionManager,
+    servicesManager
   }) => {
-    return new ToolbarService_class(commandsManager);
+    return new ToolbarService_class(commandsManager, extensionManager, servicesManager);
   }
 };
-ToolbarService._createActionButton = ToolbarService_class._createButton.bind(null, 'action');
-ToolbarService._createToggleButton = ToolbarService_class._createButton.bind(null, 'toggle');
-ToolbarService._createToolButton = ToolbarService_class._createButton.bind(null, 'tool');
 ;// CONCATENATED MODULE: ../../core/src/services/ToolBarService/index.ts
 
 /* harmony default export */ const ToolBarService = (ToolbarService);
@@ -52334,7 +53330,8 @@ class ViewportGridService extends pubSubServiceInterface/* PubSubService */.R {
     reset: resetImplementation,
     onModeExit: onModeExitImplementation,
     set: setImplementation,
-    getNumViewportPanes: getNumViewportPanesImplementation
+    getNumViewportPanes: getNumViewportPanesImplementation,
+    setViewportIsReady: setViewportIsReadyImplementation
   }) {
     if (getStateImplementation) {
       this.serviceImplementation._getState = getStateImplementation;
@@ -52360,6 +53357,12 @@ class ViewportGridService extends pubSubServiceInterface/* PubSubService */.R {
     if (getNumViewportPanesImplementation) {
       this.serviceImplementation._getNumViewportPanes = getNumViewportPanesImplementation;
     }
+    if (setViewportIsReadyImplementation) {
+      this.serviceImplementation._setViewportIsReady = setViewportIsReadyImplementation;
+    }
+  }
+  publishViewportsReady() {
+    this._broadcastEvent(this.EVENTS.VIEWPORTS_READY, {});
   }
   setActiveViewportId(id) {
     this.serviceImplementation._setActiveViewport(id);
@@ -52370,6 +53373,9 @@ class ViewportGridService extends pubSubServiceInterface/* PubSubService */.R {
   getState() {
     return this.serviceImplementation._getState();
   }
+  setViewportIsReady(viewportId, callback) {
+    this.serviceImplementation._setViewportIsReady(viewportId, callback);
+  }
   getActiveViewportId() {
     const state = this.getState();
     return state.activeViewportId;
@@ -52402,6 +53408,17 @@ class ViewportGridService extends pubSubServiceInterface/* PubSubService */.R {
     });
   }
 
+  /**
+   * Retrieves the display set instance UIDs for a given viewport.
+   * @param viewportId The ID of the viewport.
+   * @returns An array of display set instance UIDs.
+   */
+  getDisplaySetsUIDsForViewport(viewportId) {
+    const state = this.getState();
+    const viewport = state.viewports.get(viewportId);
+    return viewport?.displaySetInstanceUIDs;
+  }
+
   /**
    *
    * @param numCols, numRows - the number of columns and rows to apply
@@ -52469,7 +53486,8 @@ ViewportGridService.EVENTS = {
   ACTIVE_VIEWPORT_ID_CHANGED: 'event::activeviewportidchanged',
   LAYOUT_CHANGED: 'event::layoutChanged',
   GRID_STATE_CHANGED: 'event::gridStateChanged',
-  GRID_SIZE_CHANGED: 'event::gridSizeChanged'
+  GRID_SIZE_CHANGED: 'event::gridSizeChanged',
+  VIEWPORTS_READY: 'event::viewportsReady'
 };
 ViewportGridService.REGISTRATION = {
   name: 'viewportGridService',
@@ -52486,82 +53504,81 @@ ViewportGridService.getPresentationIds = getPresentationIds;
 
 /* harmony default export */ const services_ViewportGridService = (ViewportGridService_ViewportGridService);
 ;// CONCATENATED MODULE: ../../core/src/services/CineService/CineService.ts
-const CineService_name = 'CineService';
-const CineService_publicAPI = {
-  name: CineService_name,
-  getState: _getState,
-  setCine: _setCine,
-  setIsCineEnabled: _setIsCineEnabled,
-  playClip: _playClip,
-  stopClip: _stopClip,
-  onModeExit: _onModeExit,
-  setServiceImplementation: CineService_setServiceImplementation
-};
-const CineService_serviceImplementation = {
-  _getState: () => console.warn('getState() NOT IMPLEMENTED'),
-  _setCine: () => console.warn('setCine() NOT IMPLEMENTED'),
-  _playClip: () => console.warn('playClip() NOT IMPLEMENTED'),
-  _stopClip: () => console.warn('stopClip() NOT IMPLEMENTED'),
-  _setIsCineEnabled: () => console.warn('setIsCineEnabled() NOT IMPLEMENTED')
-};
-function _getState() {
-  return CineService_serviceImplementation._getState();
-}
-function _setCine({
-  id,
-  frameRate,
-  isPlaying
-}) {
-  return CineService_serviceImplementation._setCine({
+var CineService_class;
+
+class CineService extends pubSubServiceInterface/* PubSubService */.R {
+  constructor() {
+    super(CineService.EVENTS);
+    this.serviceImplementation = {};
+    this.serviceImplementation = {};
+  }
+  getState() {
+    return this.serviceImplementation._getState();
+  }
+  setCine({
     id,
     frameRate,
     isPlaying
-  });
-}
-function _setIsCineEnabled(isCineEnabled) {
-  return CineService_serviceImplementation._setIsCineEnabled(isCineEnabled);
-}
-function _playClip(element, playClipOptions) {
-  return CineService_serviceImplementation._playClip(element, playClipOptions);
-}
-function _stopClip(element) {
-  return CineService_serviceImplementation._stopClip(element);
-}
-function _onModeExit() {
-  _setIsCineEnabled(false);
-}
-function CineService_setServiceImplementation({
-  getState: getStateImplementation,
-  setCine: setCineImplementation,
-  setIsCineEnabled: setIsCineEnabledImplementation,
-  playClip: playClipImplementation,
-  stopClip: stopClipImplementation
-}) {
-  if (getStateImplementation) {
-    CineService_serviceImplementation._getState = getStateImplementation;
+  }) {
+    return this.serviceImplementation._setCine({
+      id,
+      frameRate,
+      isPlaying
+    });
   }
-  if (setCineImplementation) {
-    CineService_serviceImplementation._setCine = setCineImplementation;
+  setIsCineEnabled(isCineEnabled) {
+    this.serviceImplementation._setIsCineEnabled(isCineEnabled);
+    // Todo: for some reason i need to do this setTimeout since the
+    // reducer state does not get updated right away and if we publish the
+    // event and we use the cineService.getState() it will return the old state
+    setTimeout(() => {
+      this._broadcastEvent(this.EVENTS.CINE_STATE_CHANGED, isCineEnabled);
+    }, 0);
   }
-  if (setIsCineEnabledImplementation) {
-    CineService_serviceImplementation._setIsCineEnabled = setIsCineEnabledImplementation;
+  playClip(element, playClipOptions) {
+    return this.serviceImplementation._playClip(element, playClipOptions);
   }
-  if (playClipImplementation) {
-    CineService_serviceImplementation._playClip = playClipImplementation;
+  stopClip(element) {
+    return this.serviceImplementation._stopClip(element);
   }
-  if (stopClipImplementation) {
-    CineService_serviceImplementation._stopClip = stopClipImplementation;
+  _onModeExit() {
+    this.setIsCineEnabled(false);
   }
-}
-const CineService = {
-  REGISTRATION: {
-    altName: CineService_name,
-    name: 'cineService',
-    create: ({
-      configuration = {}
-    }) => {
-      return CineService_publicAPI;
+  setServiceImplementation({
+    getState: getStateImplementation,
+    setCine: setCineImplementation,
+    setIsCineEnabled: setIsCineEnabledImplementation,
+    playClip: playClipImplementation,
+    stopClip: stopClipImplementation
+  }) {
+    if (getStateImplementation) {
+      this.serviceImplementation._getState = getStateImplementation;
+    }
+    if (setCineImplementation) {
+      this.serviceImplementation._setCine = setCineImplementation;
+    }
+    if (setIsCineEnabledImplementation) {
+      this.serviceImplementation._setIsCineEnabled = setIsCineEnabledImplementation;
+    }
+    if (playClipImplementation) {
+      this.serviceImplementation._playClip = playClipImplementation;
     }
+    if (stopClipImplementation) {
+      this.serviceImplementation._stopClip = stopClipImplementation;
+    }
+  }
+}
+CineService_class = CineService;
+CineService.EVENTS = {
+  CINE_STATE_CHANGED: 'event::cineStateChanged'
+};
+CineService.REGISTRATION = {
+  name: 'cineService',
+  altName: 'CineService',
+  create: ({
+    configuration = {}
+  }) => {
+    return new CineService_class();
   }
 };
 /* harmony default export */ const CineService_CineService = (CineService);
@@ -54790,7 +55807,7 @@ HangingProtocolService.REGISTRATION = {
 const UserAuthenticationService_name = 'userAuthenticationService';
 const UserAuthenticationService_publicAPI = {
   name: UserAuthenticationService_name,
-  getState: UserAuthenticationService_getState,
+  getState: _getState,
   setUser: _setUser,
   getUser: _getUser,
   getAuthorizationHeader: _getAuthorizationHeader,
@@ -54810,7 +55827,7 @@ const UserAuthenticationService_serviceImplementation = {
   _reset: () => console.warn('reset() NOT IMPLEMENTED'),
   _set: () => console.warn('set() NOT IMPLEMENTED')
 };
-function UserAuthenticationService_getState() {
+function _getState() {
   return UserAuthenticationService_serviceImplementation._getState();
 }
 function _setUser(user) {
@@ -54876,6 +55893,9 @@ function UserAuthenticationService_setServiceImplementation({
 ;// CONCATENATED MODULE: ../../core/src/services/UserAuthenticationService/index.js
 
 /* harmony default export */ const services_UserAuthenticationService = (UserAuthenticationService);
+// EXTERNAL MODULE: ../../../node_modules/lodash.merge/index.js
+var lodash_merge = __webpack_require__(40592);
+var lodash_merge_default = /*#__PURE__*/__webpack_require__.n(lodash_merge);
 ;// CONCATENATED MODULE: ../../core/src/services/CustomizationService/CustomizationService.ts
 var CustomizationService_class;
 
@@ -55002,10 +56022,10 @@ class CustomizationService extends pubSubServiceInterface/* PubSubService */.R {
     return this.getModeCustomization(customizationId, defaultValue);
   }
 
-  /** Mode customizations are changes to the behaviour of the extensions
+  /** Mode customizations are changes to the behavior of the extensions
    * when running in a given mode.  Reset clears mode customizations.
    * Note that global customizations over-ride mode customizations.
-   * @param defautlValue to return if no customization specified.
+   * @param defaultValue to return if no customization specified.
    */
   getModeCustomization(customizationId, defaultValue) {
     const customization = this.globalCustomizations[customizationId] ?? this.modeCustomizations[customizationId] ?? defaultValue;
@@ -55134,8 +56154,6 @@ CustomizationService.REGISTRATION = {
 ;// CONCATENATED MODULE: ../../core/src/services/CustomizationService/index.ts
 
 /* harmony default export */ const services_CustomizationService = (CustomizationService);
-// EXTERNAL MODULE: ../../core/src/types/Services.ts
-var Services = __webpack_require__(53857);
 ;// CONCATENATED MODULE: ../../core/src/services/StateSyncService/StateSyncService.ts
 var StateSyncService_class;
 
@@ -55288,7 +56306,6 @@ PanelService.REGISTRATION = {
 
 
 
-
 ;// CONCATENATED MODULE: ../../core/src/extensions/ExtensionManager.ts
 
 
@@ -55325,6 +56342,16 @@ class ExtensionManager extends pubSubServiceInterface/* PubSubService */.R {
     this._commandsManager = void 0;
     this._servicesManager = void 0;
     this._hotkeysManager = void 0;
+    this.modulesMap = void 0;
+    this.modules = void 0;
+    this.registeredExtensionIds = void 0;
+    this.moduleTypeNames = void 0;
+    this._appConfig = void 0;
+    this._extensionLifeCycleHooks = void 0;
+    this.dataSourceMap = void 0;
+    this.dataSourceDefs = void 0;
+    this.defaultDataSourceName = void 0;
+    this.activeDataSource = void 0;
     /**
      * An array of extensions, or an array of arrays that contains extension
      * configuration pairs.
@@ -55399,52 +56426,64 @@ class ExtensionManager extends pubSubServiceInterface/* PubSubService */.R {
       // Register Modules
       this.moduleTypeNames.forEach(moduleType => {
         const extensionModule = this._getExtensionModule(moduleType, extension, extensionId, configuration);
-        if (extensionModule) {
-          switch (moduleType) {
-            case MODULE_TYPES.COMMANDS:
-              this._initCommandsModule(extensionModule);
-              break;
-            case MODULE_TYPES.DATA_SOURCE:
-              this._initDataSourcesModule(extensionModule, extensionId, dataSources);
-              break;
-            case MODULE_TYPES.HANGING_PROTOCOL:
-              this._initHangingProtocolsModule(extensionModule, extensionId);
-            case MODULE_TYPES.TOOLBAR:
-            case MODULE_TYPES.VIEWPORT:
-            case MODULE_TYPES.PANEL:
-            case MODULE_TYPES.SOP_CLASS_HANDLER:
-            case MODULE_TYPES.CONTEXT:
-            case MODULE_TYPES.LAYOUT_TEMPLATE:
-            case MODULE_TYPES.CUSTOMIZATION:
-            case MODULE_TYPES.STATE_SYNC:
-            case MODULE_TYPES.UTILITY:
-              // Default for most extension points,
-              // Just adds each entry ready for consumption by mode.
-              extensionModule.forEach(element => {
-                if (!element.name) {
-                  throw new Error(`Extension ID ${extensionId} module ${moduleType} element has no name`);
-                }
-                const id = `${extensionId}.${moduleType}.${element.name}`;
-                element.id = id;
-                this.modulesMap[id] = element;
-              });
-              break;
-            default:
-              throw new Error(`Module type invalid: ${moduleType}`);
-          }
-          this.modules[moduleType].push({
-            extensionId,
-            module: extensionModule
-          });
+        if (!extensionModule) {
+          return;
+        }
+        switch (moduleType) {
+          case MODULE_TYPES.COMMANDS:
+            this._initCommandsModule(extensionModule);
+            break;
+          case MODULE_TYPES.DATA_SOURCE:
+            this._initDataSourcesModule(extensionModule, extensionId, dataSources);
+            break;
+          case MODULE_TYPES.HANGING_PROTOCOL:
+            this._initHangingProtocolsModule(extensionModule, extensionId);
+            break;
+          case MODULE_TYPES.PANEL:
+            this._initPanelModule(extensionModule, extensionId);
+            break;
+          case MODULE_TYPES.TOOLBAR:
+            this._initToolbarModule(extensionModule, extensionId);
+            break;
+          case MODULE_TYPES.VIEWPORT:
+          case MODULE_TYPES.SOP_CLASS_HANDLER:
+          case MODULE_TYPES.CONTEXT:
+          case MODULE_TYPES.LAYOUT_TEMPLATE:
+          case MODULE_TYPES.CUSTOMIZATION:
+          case MODULE_TYPES.STATE_SYNC:
+          case MODULE_TYPES.UTILITY:
+            this.processExtensionModule(extensionModule, extensionId, moduleType);
+            break;
+          default:
+            throw new Error(`Module type invalid: ${moduleType}`);
         }
+        this.modules[moduleType].push({
+          extensionId,
+          module: extensionModule
+        });
       });
 
       // Track extension registration
       this.registeredExtensionIds.push(extensionId);
     };
+    /**
+     * Retrieves the module entry associated with the given string entry
+     * @param stringEntry - The string entry to retrieve the module entry for which is
+     * in the format of `${extensionId}.${moduleType}.${moduleName}`
+     * @returns The module entry associated with the given string entry.
+     */
     this.getModuleEntry = stringEntry => {
       return this.modulesMap[stringEntry];
     };
+    /**
+     * Retrieves all modules of a given type for all registered extensions.
+     *
+     * @param moduleType - The type of modules to retrieve.
+     * @returns An array of modules of the specified type.
+     */
+    this.getModulesByType = moduleType => {
+      return this.modules[moduleType];
+    };
     this.getDataSources = dataSourceName => {
       if (dataSourceName === undefined) {
         // Default to the activeDataSource
@@ -55521,6 +56560,21 @@ class ExtensionManager extends pubSubServiceInterface/* PubSubService */.R {
         }
       });
     };
+    this._initPanelModule = (extensionModule, extensionId) => {
+      this.processExtensionModule(extensionModule, extensionId, MODULE_TYPES.PANEL);
+    };
+    this._initToolbarModule = (extensionModule, extensionId) => {
+      // check if the toolbar module has a handler function for evaluation of
+      // the toolbar button state
+      const {
+        toolbarService
+      } = this._servicesManager.services;
+      extensionModule.forEach(toolbarButton => {
+        if (toolbarButton.evaluate) {
+          toolbarService.registerEvaluateFunction(toolbarButton.name, toolbarButton.evaluate);
+        }
+      });
+    };
     /**
      *
      * @private
@@ -55636,6 +56690,23 @@ class ExtensionManager extends pubSubServiceInterface/* PubSubService */.R {
       }
     }
   }
+  /**
+   * Processes an extension module.
+   * @param extensionModule - The extension module to process.
+   * @param extensionId - The ID of the extension.
+   * @param moduleType - The type of the module.
+   */
+  processExtensionModule(extensionModule, extensionId, moduleType) {
+    extensionModule.forEach(element => {
+      if (!element.name) {
+        throw new Error(`Extension ID ${extensionId} module ${moduleType} element has no name`);
+      }
+      const id = `${extensionId}.${moduleType}.${element.name}`;
+      element.id = id;
+      this.modulesMap[id] = element;
+    });
+  }
+
   /**
    * Adds the given data source and optionally sets it as the active data source.
    * The method does this by first creating the data source.
@@ -55715,6 +56786,7 @@ class ExtensionManager extends pubSubServiceInterface/* PubSubService */.R {
 ExtensionManager.EVENTS = {
   ACTIVE_DATA_SOURCE_CHANGED: 'event::activedatasourcechanged'
 };
+ExtensionManager.MODULE_TYPES = MODULE_TYPES;
 function _capitalizeFirstCharacter(lower) {
   return lower.charAt(0).toUpperCase() + lower.substring(1);
 }
@@ -55881,7 +56953,10 @@ class CommandsManager {
    * Run one or more commands with specified extra options.
    * Returns the result of the last command run.
    *
-   * @param toRun - A specification of one or more commands
+   * @param toRun - A specification of one or more commands,
+   *  typically an object of { commandName, commandOptions, context }
+   * or an array of such objects. It can also be a single commandName as string
+   * if no options are needed.
    * @param options - to include in the commands run beyond
    *   the commandOptions specified in the base.
    */
@@ -55889,11 +56964,33 @@ class CommandsManager {
     if (!toRun) {
       return;
     }
-    const commands = Array.isArray(toRun) && toRun || toRun.commandName && [toRun] || Array.isArray(toRun.commands) && toRun.commands;
-    if (!commands) {
+
+    // Normalize `toRun` to an array of `ComplexCommand`
+    let commands = [];
+    if (typeof toRun === 'string') {
+      commands = [{
+        commandName: toRun
+      }];
+    } else if ('commandName' in toRun) {
+      commands = [toRun];
+    } else if ('commands' in toRun) {
+      const commandsInput = toRun.commands;
+      commands = Array.isArray(commandsInput) ? commandsInput.map(cmd => typeof cmd === 'string' ? {
+        commandName: cmd
+      } : cmd) : [{
+        commandName: commandsInput
+      }];
+    } else if (Array.isArray(toRun)) {
+      commands = toRun.map(cmd => typeof cmd === 'string' ? {
+        commandName: cmd
+      } : cmd);
+    }
+    if (commands.length === 0) {
       console.log("Command isn't runnable", toRun);
       return;
     }
+
+    // Execute each command in the array
     let result;
     commands.forEach(({
       commandName,
@@ -56197,13 +57294,6 @@ class HotkeysManager {
   }
 }
 /* harmony default export */ const classes_HotkeysManager = (HotkeysManager);
-
-// Commands Contexts:
-
-// --> Name and Priority
-// GLOBAL: 0
-// VIEWER::CORNERSTONE: 1
-// VIEWER::VTK: 1
 // EXTERNAL MODULE: ../../core/src/classes/ImageSet.ts
 var ImageSet = __webpack_require__(14169);
 // EXTERNAL MODULE: ../../../node_modules/query-string/index.js
@@ -57531,6 +58621,67 @@ let TimingEnum = /*#__PURE__*/function (TimingEnum) {
 ;// CONCATENATED MODULE: ../../core/src/enums/index.ts
 
 
+// EXTERNAL MODULE: ../../../node_modules/react/index.js
+var react = __webpack_require__(41766);
+;// CONCATENATED MODULE: ../../core/src/hooks/useToolbar.tsx
+
+function useToolbar({
+  servicesManager,
+  buttonSection = 'primary'
+}) {
+  const {
+    toolbarService,
+    viewportGridService
+  } = servicesManager.services;
+  const {
+    EVENTS
+  } = toolbarService;
+  const [toolbarButtons, setToolbarButtons] = (0,react.useState)(toolbarService.getButtonSection(buttonSection));
+
+  // Callback function for handling toolbar interactions
+  const onInteraction = (0,react.useCallback)(args => {
+    const viewportId = viewportGridService.getActiveViewportId();
+    const refreshProps = {
+      viewportId
+    };
+    toolbarService.recordInteraction(args, {
+      refreshProps
+    });
+  }, [toolbarService, viewportGridService]);
+
+  // Effect to handle toolbar modification events
+  (0,react.useEffect)(() => {
+    const handleToolbarModified = () => {
+      setToolbarButtons(toolbarService.getButtonSection(buttonSection));
+    };
+    const subs = [EVENTS.TOOL_BAR_MODIFIED, EVENTS.TOOL_BAR_STATE_MODIFIED].map(event => {
+      return toolbarService.subscribe(event, handleToolbarModified);
+    });
+    return () => {
+      subs.forEach(sub => sub.unsubscribe());
+    };
+  }, [toolbarService]);
+
+  // Effect to handle active viewportId change event
+  (0,react.useEffect)(() => {
+    const events = [viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, viewportGridService.EVENTS.VIEWPORTS_READY];
+    const subscriptions = events.map(event => {
+      return viewportGridService.subscribe(event, ({
+        viewportId
+      }) => {
+        viewportId = viewportId || viewportGridService.getActiveViewportId();
+        toolbarService.refreshToolbarState({
+          viewportId
+        });
+      });
+    });
+    return () => subscriptions.forEach(sub => sub.unsubscribe());
+  }, [viewportGridService, toolbarService]);
+  return {
+    toolbarButtons,
+    onInteraction
+  };
+}
 ;// CONCATENATED MODULE: ../../core/src/DataSources/IWebApiDataSource.js
 // TODO: Use above to inject so dependent datasources don't need to import or
 // depend on @ohif/core?
@@ -57626,6 +58777,7 @@ const IWebApiDataSource = {
 
 
 
+
 const hotkeys = {
   ...utils/* default.hotkeys */.Ay.hotkeys,
   defaults: {
@@ -57669,7 +58821,8 @@ const OHIF = {
   DicomMetadataStore: services_DicomMetadataStore,
   pubSubServiceInterface: pubSubServiceInterface/* default */.A,
   PubSubService: pubSubServiceInterface/* PubSubService */.R,
-  PanelService: services_PanelService
+  PanelService: services_PanelService,
+  useToolbar: useToolbar
 };
 
 
@@ -58158,13 +59311,6 @@ class PubSubService {
   }
 }
 
-/***/ }),
-
-/***/ 53857:
-/***/ (() => {
-
-
-
 /***/ }),
 
 /***/ 44563:
@@ -58362,7 +59508,7 @@ function uuidv4() {
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11374);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _Typography__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(64597);
-/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(53589);
+/* harmony import */ var _Icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1675);
 
 
 
@@ -58401,6 +59547,36 @@ ContextMenu.propTypes = {
 
 /***/ }),
 
+/***/ 66348:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41766);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11374);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _getIcon__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(32854);
+
+
+
+const Icon = ({
+  name,
+  ...otherProps
+}) => {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_getIcon__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Ay)(name, {
+    ...otherProps
+  }));
+};
+Icon.propTypes = {
+  name: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string).isRequired,
+  className: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+
+/***/ }),
+
 /***/ 64692:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -135496,7 +136672,7 @@ vtk.register = register;
 /* harmony export */ });
 /* unused harmony exports IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, UNSAFE_DeferredData, UNSAFE_ErrorResponseImpl, UNSAFE_convertRouteMatchToUiMatch, UNSAFE_convertRoutesToDataRoutes, UNSAFE_warning, createHashHistory, createMemoryHistory, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, isDeferredData, json, matchPath, normalizePathname, redirect, redirectDocument, resolvePath */
 /**
- * @remix-run/router v1.15.0
+ * @remix-run/router v1.15.3
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -135914,6 +137090,10 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options)
     // See https://bugzilla.mozilla.org/show_bug.cgi?id=878297
     let base = window.location.origin !== "null" ? window.location.origin : window.location.href;
     let href = typeof to === "string" ? to : createPath(to);
+    // Treating this as a full URL will strip any trailing spaces so we need to
+    // pre-encode them since they might be part of a matching splat param from
+    // an ancestor route
+    href = href.replace(/ $/, "%20");
     invariant(base, "No window.location.(origin|href) available to create URL for href: " + href);
     return new URL(href, base);
   }
@@ -136020,14 +137200,14 @@ function matchRoutes(routes, locationArg, basename) {
   rankRouteBranches(branches);
   let matches = null;
   for (let i = 0; matches == null && i < branches.length; ++i) {
-    matches = matchRouteBranch(branches[i],
     // Incoming pathnames are generally encoded from either window.location
     // or from router.navigate, but we want to match against the unencoded
     // paths in the route definitions.  Memory router locations won't be
     // encoded here but there also shouldn't be anything to decode so this
     // should be a safe operation.  This avoids needing matchRoutes to be
     // history-aware.
-    safelyDecodeURI(pathname));
+    let decoded = decodePath(pathname);
+    matches = matchRouteBranch(branches[i], decoded);
   }
   return matches;
 }
@@ -136286,7 +137466,7 @@ function matchPath(pattern, pathname) {
     if (isOptional && !value) {
       memo[paramName] = undefined;
     } else {
-      memo[paramName] = safelyDecodeURIComponent(value || "", paramName);
+      memo[paramName] = (value || "").replace(/%2F/g, "/");
     }
     return memo;
   }, {});
@@ -136338,22 +137518,14 @@ function compilePath(path, caseSensitive, end) {
   let matcher = new RegExp(regexpSource, caseSensitive ? undefined : "i");
   return [matcher, params];
 }
-function safelyDecodeURI(value) {
+function decodePath(value) {
   try {
-    return decodeURI(value);
+    return value.split("/").map(v => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
   } catch (error) {
     warning(false, "The URL path \"" + value + "\" could not be decoded because it is is a " + "malformed URL segment. This is probably due to a bad percent " + ("encoding (" + error + ")."));
     return value;
   }
 }
-function safelyDecodeURIComponent(value, paramName) {
-  try {
-    return decodeURIComponent(value);
-  } catch (error) {
-    warning(false, "The value for the URL param \"" + paramName + "\" will not be decoded because" + (" the string \"" + value + "\" is a malformed URL segment. This is probably") + (" due to a bad percent encoding (" + error + ")."));
-    return value;
-  }
-}
 /**
  * @private
  */
@@ -136879,7 +138051,21 @@ function createRouter(init) {
     // were marked for explicit hydration
     let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
     let errors = init.hydrationData ? init.hydrationData.errors : null;
-    initialized = initialMatches.every(m => m.route.loader && m.route.loader.hydrate !== true && (loaderData && loaderData[m.route.id] !== undefined || errors && errors[m.route.id] !== undefined));
+    let isRouteInitialized = m => {
+      // No loader, nothing to initialize
+      if (!m.route.loader) return true;
+      // Explicitly opting-in to running on hydration
+      if (m.route.loader.hydrate === true) return false;
+      // Otherwise, initialized if hydrated with data or an error
+      return loaderData && loaderData[m.route.id] !== undefined || errors && errors[m.route.id] !== undefined;
+    };
+    // If errors exist, don't consider routes below the boundary
+    if (errors) {
+      let idx = initialMatches.findIndex(m => errors[m.route.id] !== undefined);
+      initialized = initialMatches.slice(0, idx + 1).every(isRouteInitialized);
+    } else {
+      initialized = initialMatches.every(isRouteInitialized);
+    }
   } else {
     // Without partial hydration - we're initialized if we were provided any
     // hydrationData - which is expected to be complete
@@ -137532,7 +138718,7 @@ function createRouter(init) {
     // preserving any new action data or existing action data (in the case of
     // a revalidation interrupting an actionReload)
     // If we have partialHydration enabled, then don't update the state for the
-    // initial data load since iot's not a "navigation"
+    // initial data load since it's not a "navigation"
     if (!isUninterruptedRevalidation && (!future.v7_partialHydration || !initialHydration)) {
       revalidatingFetchers.forEach(rf => {
         let fetcher = state.fetchers.get(rf.key);
@@ -137618,6 +138804,18 @@ function createRouter(init) {
         }
       });
     });
+    // During partial hydration, preserve SSR errors for routes that don't re-run
+    if (future.v7_partialHydration && initialHydration && state.errors) {
+      Object.entries(state.errors).filter(_ref2 => {
+        let [id] = _ref2;
+        return !matchesToLoad.some(m => m.route.id === id);
+      }).forEach(_ref3 => {
+        let [routeId, error] = _ref3;
+        errors = Object.assign(errors || {}, {
+          [routeId]: error
+        });
+      });
+    }
     let updatedFetchers = markFetchRedirectsDone();
     let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);
     let shouldUpdateFetchers = updatedFetchers || didAbortFetchLoads || revalidatingFetchers.length > 0;
@@ -138160,12 +139358,12 @@ function createRouter(init) {
       blockers
     });
   }
-  function shouldBlockNavigation(_ref2) {
+  function shouldBlockNavigation(_ref4) {
     let {
       currentLocation,
       nextLocation,
       historyAction
-    } = _ref2;
+    } = _ref4;
     if (blockerFunctions.size === 0) {
       return;
     }
@@ -138776,8 +139974,8 @@ function normalizeNavigateOptions(normalizeFormMethod, isFetcher, path, opts) {
       }
       let text = typeof opts.body === "string" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ?
       // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
-      Array.from(opts.body.entries()).reduce((acc, _ref3) => {
-        let [name, value] = _ref3;
+      Array.from(opts.body.entries()).reduce((acc, _ref5) => {
+        let [name, value] = _ref5;
         return "" + acc + name + "=" + value + "\n";
       }, "") : String(opts.body);
       return {
@@ -166376,6 +167574,55 @@ module.exports = TypeError;
 module.exports = URIError;
 
 
+/***/ }),
+
+/***/ 65902:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+var $TypeError = __webpack_require__(18709);
+
+/** @type {import('./RequireObjectCoercible')} */
+module.exports = function RequireObjectCoercible(value) {
+	if (value == null) {
+		throw new $TypeError((arguments.length > 0 && arguments[1]) || ('Cannot call method on ' + value));
+	}
+	return value;
+};
+
+
+/***/ }),
+
+/***/ 44566:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+var $Object = __webpack_require__(89170);
+var RequireObjectCoercible = __webpack_require__(65902);
+
+/** @type {import('./ToObject')} */
+module.exports = function ToObject(value) {
+	RequireObjectCoercible(value);
+	return $Object(value);
+};
+
+
+/***/ }),
+
+/***/ 89170:
+/***/ ((module) => {
+
+"use strict";
+
+
+/** @type {import('.')} */
+module.exports = Object;
+
+
 /***/ }),
 
 /***/ 75153:
@@ -175177,13 +176424,17 @@ module.exports = hasPropertyDescriptors;
 
 
 var test = {
+	__proto__: null,
 	foo: {}
 };
 
 var $Object = Object;
 
+/** @type {import('.')} */
 module.exports = function hasProto() {
-	return { __proto__: test }.foo === test.foo && !({ __proto__: null } instanceof $Object);
+	// @ts-expect-error: TS errors on an inherited property for some reason
+	return { __proto__: test }.foo === test.foo
+		&& !(test instanceof $Object);
 };
 
 
@@ -208296,7 +209547,7 @@ module.exports = function shimAssign() {
 "use strict";
 
 
-var RequireObjectCoercible = __webpack_require__(70867);
+var RequireObjectCoercible = __webpack_require__(65902);
 var callBound = __webpack_require__(61389);
 
 var $isEnumerable = callBound('Object.prototype.propertyIsEnumerable');
@@ -229293,9 +230544,7 @@ var gOPD = __webpack_require__(95121);
 var $TypeError = __webpack_require__(18709);
 var $floor = GetIntrinsic('%Math.floor%');
 
-/** @typedef {(...args: unknown[]) => unknown} Func */
-
-/** @type {<T extends Func = Func>(fn: T, length: number, loose?: boolean) => T} */
+/** @type {import('.')} */
 module.exports = function setFunctionLength(fn, length) {
 	if (typeof fn !== 'function') {
 		throw new $TypeError('`fn` is not a function');
@@ -230121,8 +231370,8 @@ module.exports = str => encodeURIComponent(str).replace(/[!'()*]/g, x => `%${x.c
 "use strict";
 
 
-var RequireObjectCoercible = __webpack_require__(70867);
-var ToString = __webpack_require__(52169);
+var RequireObjectCoercible = __webpack_require__(65902);
+var ToString = __webpack_require__(78382);
 var callBound = __webpack_require__(61389);
 var $replace = callBound('String.prototype.replace');
 
@@ -230152,7 +231401,7 @@ module.exports = function trim() {
 
 var callBind = __webpack_require__(20325);
 var define = __webpack_require__(27086);
-var RequireObjectCoercible = __webpack_require__(70867);
+var RequireObjectCoercible = __webpack_require__(65902);
 
 var implementation = __webpack_require__(32900);
 var getPolyfill = __webpack_require__(45937);
@@ -231552,7 +232801,7 @@ var react_dom__WEBPACK_IMPORTED_MODULE_1___namespace_cache;
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10971);
 /* harmony import */ var _remix_run_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(29042);
 /**
- * React Router DOM v6.22.0
+ * React Router DOM v6.22.3
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -233001,7 +234250,7 @@ var react__WEBPACK_IMPORTED_MODULE_0___namespace_cache;
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41766);
 /* harmony import */ var _remix_run_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(29042);
 /**
- * React Router v6.22.0
+ * React Router v6.22.3
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -233327,7 +234576,26 @@ function useRoutesImpl(routes, locationArg, dataRouterState, future) {
     location = locationFromContext;
   }
   let pathname = location.pathname || "/";
-  let remainingPathname = parentPathnameBase === "/" ? pathname : pathname.slice(parentPathnameBase.length) || "/";
+  let remainingPathname = pathname;
+  if (parentPathnameBase !== "/") {
+    // Determine the remaining pathname by removing the # of URL segments the
+    // parentPathnameBase has, instead of removing based on character count.
+    // This is because we can't guarantee that incoming/outgoing encodings/
+    // decodings will match exactly.
+    // We decode paths before matching on a per-segment basis with
+    // decodeURIComponent(), but we re-encode pathnames via `new URL()` so they
+    // match what `window.location.pathname` would reflect.  Those don't 100%
+    // align when it comes to encoded URI characters such as % and &.
+    //
+    // So we may end up with:
+    //   pathname:           "/descendant/a%25b/match"
+    //   parentPathnameBase: "/descendant/a%b"
+    //
+    // And the direct substring removal approach won't work :/
+    let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
+    let segments = pathname.replace(/^\//, "").split("/");
+    remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
+  }
   let matches = (0,_remix_run_router__WEBPACK_IMPORTED_MODULE_1__/* .matchRoutes */ .ue)(routes, {
     pathname: remainingPathname
   });
@@ -235558,17 +236826,6 @@ module.exports = function OrdinaryDefineOwnProperty(O, P, Desc) {
 };
 
 
-/***/ }),
-
-/***/ 70867:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-"use strict";
-
-
-module.exports = __webpack_require__(71776);
-
-
 /***/ }),
 
 /***/ 62074:
@@ -235740,18 +236997,9 @@ module.exports = function ToNumber(argument) {
 "use strict";
 
 
-var GetIntrinsic = __webpack_require__(45159);
-
-var $Object = GetIntrinsic('%Object%');
-
-var RequireObjectCoercible = __webpack_require__(70867);
-
 // https://262.ecma-international.org/6.0/#sec-toobject
 
-module.exports = function ToObject(value) {
-	RequireObjectCoercible(value);
-	return $Object(value);
-};
+module.exports = __webpack_require__(44566);
 
 
 /***/ }),
@@ -236105,21 +237353,24 @@ module.exports = function truncate(x) {
 
 /***/ }),
 
-/***/ 71776:
+/***/ 78382:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 "use strict";
 
 
+var GetIntrinsic = __webpack_require__(45159);
+
+var $String = GetIntrinsic('%String%');
 var $TypeError = __webpack_require__(18709);
 
-// http://262.ecma-international.org/5.1/#sec-9.10
+// https://262.ecma-international.org/6.0/#sec-tostring
 
-module.exports = function CheckObjectCoercible(value, optMessage) {
-	if (value == null) {
-		throw new $TypeError(optMessage || ('Cannot call method on ' + value));
+module.exports = function ToString(argument) {
+	if (typeof argument === 'symbol') {
+		throw new $TypeError('Cannot convert a Symbol value to a string');
 	}
-	return value;
+	return $String(argument);
 };
 
 
@@ -236408,7 +237659,7 @@ module.exports = function isPropertyDescriptor(Desc) {
 		return false;
 	}
 
-    for (var key in Desc) { // eslint-disable-line
+	for (var key in Desc) { // eslint-disable-line
 		if (hasOwn(Desc, key) && !allowed[key]) {
 			return false;
 		}
@@ -241170,7 +242421,7 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + ({"525":"dicom-microscopy-viewer","572":"polySeg"}[chunkId] || chunkId) + ".bundle." + {"50":"55ad62f1f656f5fd5a36","68":"efc5ba2a44aa2b96ee1a","109":"b4fee2a22b622839baf5","121":"f6c25e845985d96c423c","155":"9e3dd18c9a3961232504","164":"710b5db3fef4d536a59f","188":"528e9ad81159c776affa","191":"4850ab82949bb6f0eb73","250":"d8b502b7ef6afc79a87e","270":"fd387adff5b064fca506","290":"8b4d7dfbc7cfe418a0f1","295":"c132f53e1397ef9d432a","297":"81d63bb0b66d63df6d86","317":"dd0879c5035c4b90fad3","339":"591a0a6075220b14c249","342":"a039c24e9f661f3b884d","481":"a2b01ffe06a262fa9375","504":"aa165082e2acc5ccf080","525":"d3a56dc9f62df5e11019","530":"ef1ea9d98f7b377a9d3a","544":"05b543f28d0c124950ef","559":"fc08eab02848a451ed34","572":"99be036bab9b7f011b0c","594":"3a5fa2e7d5636ddccb32","644":"1e77691d2eeb96a423b0","704":"842ada45436f1fb029aa","724":"294a41af83a5af33f3cc","726":"2bdb443d1b5620d74e6e","835":"15aff0b7433bb0dd6d6d","862":"c8eba798644149650775","889":"a776c87be9e3580f3437","905":"73a711d0255cb988fa6e","907":"6932f0458b9e0143c18a","931":"d270a1fda9a2836c3cc5","939":"84ee0b844023d924a22b","961":"6cf1599ed3a2871c040f","963":"874395d7b2d80f9e5831"}[chunkId] + ".js";
+/******/ 			return "" + ({"525":"dicom-microscopy-viewer","572":"polySeg"}[chunkId] || chunkId) + ".bundle." + {"41":"58b85dd990fb6fac615e","90":"abde898ebd3c74f521f9","109":"b4fee2a22b622839baf5","121":"fda405f29003c308ce09","155":"a57744809d0f46030ee0","164":"ff12d6019a627cda2a6c","188":"c448aed48915741e9f97","191":"4850ab82949bb6f0eb73","270":"16ac8114c5c4ce006f4a","290":"8b4d7dfbc7cfe418a0f1","295":"57700cd41fd87e1521b4","297":"81d63bb0b66d63df6d86","339":"57dac3644803cefe3e3d","342":"a039c24e9f661f3b884d","448":"d195aba3aef25ec286d1","481":"a2b01ffe06a262fa9375","504":"aa165082e2acc5ccf080","525":"d3a56dc9f62df5e11019","530":"72d9812f117036615a38","544":"c3009e245ceb1554c70a","559":"05bd51e94422a2cab116","572":"c1cec6312eb6c6dc3701","594":"14b122ab995e4b13e652","638":"a63003e18bed65f227bb","644":"1e77691d2eeb96a423b0","699":"efc67171e6d212f25a24","701":"bc40f1a7d5d6b1a4dd38","724":"3945f8d2e9c8b0b23628","726":"2bdb443d1b5620d74e6e","835":"15aff0b7433bb0dd6d6d","862":"d787dac01f4567560a42","889":"ffc727aa6d1a74f2138d","905":"6b5b42b2403e4676bb3a","907":"fbd5768fa5b53f9d3f86","931":"d270a1fda9a2836c3cc5","939":"84ee0b844023d924a22b","961":"8bb5a713fc5a3817c6a6"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/ 	
@@ -241279,6 +242530,9 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 		
 /******/ 			linkTag.rel = "stylesheet";
 /******/ 			linkTag.type = "text/css";
+/******/ 			if (__webpack_require__.nc) {
+/******/ 				linkTag.nonce = __webpack_require__.nc;
+/******/ 			}
 /******/ 			var onLinkComplete = (event) => {
 /******/ 				// avoid mem leaks.
 /******/ 				linkTag.onerror = linkTag.onload = null;
@@ -241336,7 +242590,7 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 		};
 /******/ 		
 /******/ 		__webpack_require__.f.miniCss = (chunkId, promises) => {
-/******/ 			var cssChunks = {"50":1,"155":1,"481":1,"544":1,"889":1,"963":1};
+/******/ 			var cssChunks = {"155":1,"481":1,"544":1,"638":1,"701":1,"889":1};
 /******/ 			if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
 /******/ 			else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
 /******/ 				promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
@@ -241458,9 +242712,6 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 	/* webpack/runtime/chunk prefetch trigger */
 /******/ 	(() => {
 /******/ 		var chunkToChildrenMap = {
-/******/ 			"50": [
-/******/ 				295
-/******/ 			],
 /******/ 			"155": [
 /******/ 				530,
 /******/ 				862
@@ -241471,14 +242722,17 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 			"559": [
 /******/ 				530
 /******/ 			],
+/******/ 			"638": [
+/******/ 				295
+/******/ 			],
+/******/ 			"701": [
+/******/ 				889
+/******/ 			],
 /******/ 			"907": [
 /******/ 				297
 /******/ 			],
 /******/ 			"961": [
 /******/ 				939
-/******/ 			],
-/******/ 			"963": [
-/******/ 				889
 /******/ 			]
 /******/ 		};
 /******/ 		__webpack_require__.f.prefetch = (chunkId, promises) => (Promise.all(promises).then(() => {
@@ -241492,7 +242746,7 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__(45573);
+/******/ 	var __webpack_exports__ = __webpack_require__(68870);
 /******/ 	
 /******/ })()
 ;