@ohif/app 3.10.0-beta.80 → 3.10.0-beta.82

package/dist/{1919.bundle.42923d5d2f27680765de.js → 1919.bundle.fac1a1d5ed506f80403a.js}

@@ -944,8 +944,8 @@ const commandsModule = ({
 var react = __webpack_require__(86326);
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
 var ui_src = __webpack_require__(32907);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
-var ui_next_src = __webpack_require__(18817);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2637 modules
+var ui_next_src = __webpack_require__(52441);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 

package/dist/{2701.bundle.835eb3e0006bcfb85469.js → 2701.bundle.151bc3d7c101e4f6f775.js}

@@ -29,8 +29,8 @@ var ui_src = __webpack_require__(32907);
 var createReferencedImageDisplaySet = __webpack_require__(92643);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
 var cornerstone_src = __webpack_require__(7490);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
-var ui_next_src = __webpack_require__(18817);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2637 modules
+var ui_next_src = __webpack_require__(52441);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 

package/dist/{4202.bundle.0bd2c1e4f2a3c55f4404.js → 4202.bundle.0caa856ac58e5c08f2b4.js}

@@ -12,7 +12,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(86326);
 /* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(32907);
-/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(18817);
+/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(52441);
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
 

package/dist/{4526.bundle.7d643ae29b3ac24f4972.js → 4526.bundle.6e1a7b8e12adcff47cdd.js}

@@ -18,8 +18,8 @@ var react = __webpack_require__(86326);
 var es = __webpack_require__(99993);
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
 var src = __webpack_require__(32907);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
-var ui_next_src = __webpack_require__(18817);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2637 modules
+var ui_next_src = __webpack_require__(52441);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts
 function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
   const tools = customizationService.getCustomization('cornerstone.overlayViewportTools');

package/dist/{4834.bundle.9ac6bfd81e47b81a7b74.js → 4834.bundle.432fad75b5bb54e884f3.js}

@@ -27,7 +27,7 @@ const id = package_namespaceObject.UU;
 
 const toolbarButtons = [{
   id: 'MeasurementTools',
-  uiType: 'ohif.splitButton',
+  uiType: 'ohif.toolButtonList',
   props: {
     groupId: 'MeasurementTools',
     // group evaluate to determine which item should move to the top
@@ -147,7 +147,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'dragPan',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-move',
     label: 'Pan',
@@ -162,7 +162,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'TagBrowser',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'dicom-tag-browser',
     label: 'Dicom Tag Browser',

package/dist/{5247.bundle.91eadb4cf817594d55b1.js → 5247.bundle.d0400f68884686944810.js}

@@ -20,8 +20,8 @@ const id = package_namespaceObject.UU;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(86326);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
-var src = __webpack_require__(18817);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2637 modules
+var src = __webpack_require__(52441);
 // EXTERNAL MODULE: ../../core/src/index.ts + 73 modules
 var core_src = __webpack_require__(10532);
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
@@ -1381,8 +1381,8 @@ MicroscopyService.REGISTRATION = servicesManager => {
 
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
 var dcmjs_es = __webpack_require__(5842);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 133 modules
-var default_src = __webpack_require__(91395);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 135 modules
+var default_src = __webpack_require__(37100);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/DEVICE_OBSERVER_UID.js
 // We need to define a UID for this extension as a device, and it should be the same for all saves:
 

package/dist/{6027.bundle.6a8206ef297b237bc5fd.js → 6027.bundle.b98ce566f43e456b4173.js}

@@ -48,7 +48,7 @@ function _createSetToolActiveCommands(toolName, toolGroupIds = ['default', 'mpr'
 }
 const toolbarButtons = [{
   id: 'MeasurementTools',
-  uiType: 'ohif.splitButton',
+  uiType: 'ohif.toolButtonList',
   props: {
     groupId: 'MeasurementTools',
     evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
@@ -89,7 +89,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'Zoom',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-zoom',
     label: 'Zoom',
@@ -98,7 +98,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'WindowLevel',
-  uiType: 'ohif.splitButton',
+  uiType: 'ohif.toolButtonList',
   props: {
     groupId: 'WindowLevel',
     primary: core_src/* ToolbarService */.hx.createButton({
@@ -118,7 +118,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'Pan',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-move',
     label: 'Pan',
@@ -127,7 +127,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'Capture',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-capture',
     label: 'Capture',
@@ -153,7 +153,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'MoreTools',
-  uiType: 'ohif.splitButton',
+  uiType: 'ohif.toolButtonList',
   props: {
     groupId: 'MoreTools',
     evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',

package/dist/{6734.bundle.24f57935b90568978f81.js → 6734.bundle.a7cd598e47f99e8d6373.js}

@@ -373,7 +373,7 @@ const setToolActiveToolbar = {
 };
 const toolbarButtons = [{
   id: 'MeasurementTools',
-  uiType: 'ohif.splitButton',
+  uiType: 'ohif.toolButtonList',
   props: {
     groupId: 'MeasurementTools',
     // group evaluate to determine which item should move to the top
@@ -457,7 +457,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'Zoom',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-zoom',
     label: 'Zoom',
@@ -468,7 +468,7 @@ const toolbarButtons = [{
 // Window Level
 {
   id: 'WindowLevel',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-window-level',
     label: 'Window Level',
@@ -482,7 +482,7 @@ const toolbarButtons = [{
 // Pan...
 {
   id: 'Pan',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     type: 'tool',
     icon: 'tool-move',
@@ -492,7 +492,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'TrackballRotate',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     type: 'tool',
     icon: 'tool-3d-rotate',
@@ -505,7 +505,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'Capture',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     icon: 'tool-capture',
     label: 'Capture',
@@ -525,7 +525,7 @@ const toolbarButtons = [{
   }
 }, {
   id: 'Crosshairs',
-  uiType: 'ohif.radioGroup',
+  uiType: 'ohif.toolButton',
   props: {
     type: 'tool',
     icon: 'tool-crosshair',
@@ -558,7 +558,7 @@ const ReferenceLinesListeners = [{
 }];
 const moreTools = [{
   id: 'MoreTools',
-  uiType: 'ohif.splitButton',
+  uiType: 'ohif.toolButtonList',
   props: {
     groupId: 'MoreTools',
     evaluate: 'evaluate.group.promoteToPrimaryIfCornerstoneToolNotActiveInTheList',
@@ -841,9 +841,7 @@ function modeFactory({
       const {
         measurementService,
         toolbarService,
-        toolGroupService,
-        panelService,
-        segmentationService
+        toolGroupService
       } = servicesManager.services;
       measurementService.clearMeasurements();
 
@@ -854,13 +852,32 @@ function modeFactory({
 
       // // ActivatePanel event trigger for when a segmentation or measurement is added.
       // // Do not force activation so as to respect the state the user may have left the UI in.
-      _activatePanelTriggersSubscriptions = [...panelService.addActivatePanelTriggers(cornerstone.segmentation, [{
-        sourcePubSubService: segmentationService,
-        sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED]
-      }], true), ...panelService.addActivatePanelTriggers(tracked.measurements, [{
-        sourcePubSubService: measurementService,
-        sourceEvents: [measurementService.EVENTS.MEASUREMENT_ADDED, measurementService.EVENTS.RAW_MEASUREMENT_ADDED]
-      }], true), true];
+      // _activatePanelTriggersSubscriptions = [
+      //   ...panelService.addActivatePanelTriggers(
+      //     cornerstone.segmentation,
+      //     [
+      //       {
+      //         sourcePubSubService: segmentationService,
+      //         sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED],
+      //       },
+      //     ],
+      //     true
+      //   ),
+      //   ...panelService.addActivatePanelTriggers(
+      //     tracked.measurements,
+      //     [
+      //       {
+      //         sourcePubSubService: measurementService,
+      //         sourceEvents: [
+      //           measurementService.EVENTS.MEASUREMENT_ADDED,
+      //           measurementService.EVENTS.RAW_MEASUREMENT_ADDED,
+      //         ],
+      //       },
+      //     ],
+      //     true
+      //   ),
+      //   true,
+      // ];
     },
     onModeExit: ({
       servicesManager

package/dist/{1395.bundle.8176cda4db90bc91a0b5.js → 7100.bundle.cd391522079b32dffcbb.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[1395],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[7100],{
 
-/***/ 91395:
+/***/ 37100:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -2854,8 +2854,8 @@ var state = __webpack_require__(45981);
 var dist = __webpack_require__(4194);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(99993);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
-var ui_next_src = __webpack_require__(18817);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2637 modules
+var ui_next_src = __webpack_require__(52441);
 // EXTERNAL MODULE: ../../i18n/src/index.js + 150 modules
 var i18n_src = __webpack_require__(16076);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/Toolbar.tsx
@@ -2876,7 +2876,7 @@ function Toolbar({
   if (!toolbarButtons.length) {
     return null;
   }
-  return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons.map(toolDef => {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons?.map(toolDef => {
     if (!toolDef) {
       return null;
     }
@@ -2914,7 +2914,6 @@ function usePatientInfo(servicesManager) {
     PatientDOB: ''
   });
   const [isMixedPatients, setIsMixedPatients] = (0,react.useState)(false);
-  const displaySets = displaySetService.getActiveDisplaySets();
   const checkMixedPatients = PatientID => {
     const displaySets = displaySetService.getActiveDisplaySets();
     let isMixedPatients = false;
@@ -2929,8 +2928,13 @@ function usePatientInfo(servicesManager) {
     });
     setIsMixedPatients(isMixedPatients);
   };
-  const updatePatientInfo = () => {
-    const displaySet = displaySets[0];
+  const updatePatientInfo = ({
+    displaySetsAdded
+  }) => {
+    if (!displaySetsAdded.length) {
+      return;
+    }
+    const displaySet = displaySetsAdded[0];
     const instance = displaySet?.instances?.[0] || displaySet?.instance;
     if (!instance) {
       return;
@@ -2944,12 +2948,9 @@ function usePatientInfo(servicesManager) {
     checkMixedPatients(instance.PatientID || null);
   };
   (0,react.useEffect)(() => {
-    const subscription = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, () => updatePatientInfo());
+    const subscription = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, props => updatePatientInfo(props));
     return () => subscription.unsubscribe();
   }, []);
-  (0,react.useEffect)(() => {
-    updatePatientInfo();
-  }, [displaySets]);
   return {
     patientInfo,
     isMixedPatients
@@ -3073,8 +3074,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.10.0-beta.80";
-  const commitHash = "054b262e9cbeb0f44de65d05641efe1e8944a4f5";
+  const versionNumber = "3.10.0-beta.82";
+  const commitHash = "f10683c667ea8f20c8d3e99ee0fb206522757b71";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -3363,13 +3364,13 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     // And by virtue of the dependency on the minimum size state variables, this code
     // is executed on the render following an update of the minimum percentage sizes
     // for a panel.
-    if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
+    if (!resizableLeftPanelAPIRef.current?.isCollapsed()) {
       const leftSize = getPercentageSize(leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
-      resizableLeftPanelAPIRef.current.resize(leftSize);
+      resizableLeftPanelAPIRef.current?.resize(leftSize);
     }
-    if (!resizableRightPanelAPIRef.current.isCollapsed()) {
+    if (!resizableRightPanelAPIRef?.current?.isCollapsed()) {
       const rightSize = getPercentageSize(rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
-      resizableRightPanelAPIRef.current.resize(rightSize);
+      resizableRightPanelAPIRef?.current?.resize(rightSize);
     }
 
     // This observer kicks in when the ViewportLayout resizable panel group
@@ -3418,7 +3419,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     setLeftPanelClosed(false);
   }, [setLeftPanelClosed]);
   const onLeftPanelResize = (0,react.useCallback)(size => {
-    if (!resizablePanelGroupElemRef?.current || resizableLeftPanelAPIRef.current.isCollapsed()) {
+    if (!resizablePanelGroupElemRef?.current || resizableLeftPanelAPIRef.current?.isCollapsed()) {
       return;
     }
     const newExpandedWidth = getExpandedPixelWidth(size);
@@ -3440,7 +3441,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     setRightPanelClosed(false);
   }, [setRightPanelClosed]);
   const onRightPanelResize = (0,react.useCallback)(size => {
-    if (!resizablePanelGroupElemRef?.current || resizableRightPanelAPIRef.current.isCollapsed()) {
+    if (!resizablePanelGroupElemRef?.current || resizableRightPanelAPIRef?.current?.isCollapsed()) {
       return;
     }
     const newExpandedWidth = getExpandedPixelWidth(size);
@@ -3460,7 +3461,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   const getPercentageSize = pixelSize => {
     const {
       width: panelGroupWidth
-    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    } = resizablePanelGroupElemRef.current?.getBoundingClientRect();
     return pixelSize / (panelGroupWidth - resizableHandlesWidth.current) * 100;
   };
 
@@ -3471,7 +3472,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   const getExpandedPixelWidth = percentageSize => {
     const {
       width: panelGroupWidth
-    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    } = resizablePanelGroupElemRef.current?.getBoundingClientRect();
     const expandedWidth = percentageSize / 100 * (panelGroupWidth - resizableHandlesWidth.current) - panelGroupDefinition.shared.expandedInsideBorderSize;
     return expandedWidth;
   };
@@ -3780,6 +3781,7 @@ const defaultViewPresets = [{
 
 
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Components/MoreDropdownMenu.tsx
+function MoreDropdownMenu_extends() { return MoreDropdownMenu_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, MoreDropdownMenu_extends.apply(null, arguments); }
 
 
 
@@ -3800,6 +3802,14 @@ const getMenuItemsDefault = ({
   // This allows replacing the default child item for menus, whereas the entire
   // getMenuItems can also be replaced by providing it to the MoreDropdownMenu
   const menuContent = customizationService.getCustomization('ohif.menuContent');
+
+  // Default menu item component if none is provided through customization
+  const DefaultMenuItem = ({
+    item
+  }) => /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuItem */._2, {
+    onClick: item.onClick
+  }, item.label || item.title);
+  const MenuItemComponent = menuContent?.content || DefaultMenuItem;
   return /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuContent */.SQ, {
     hideWhenDetached: true,
     align: "start",
@@ -3807,13 +3817,12 @@ const getMenuItemsDefault = ({
       e.stopPropagation();
       e.preventDefault();
     }
-  }, items?.map((item, index) => /*#__PURE__*/react.createElement(menuContent.content, {
+  }, items?.map((item, index) => /*#__PURE__*/react.createElement(MenuItemComponent, MoreDropdownMenu_extends({
     key: item.id || `menu-item-${index}`,
-    item,
-    commandsManager,
-    servicesManager,
-    ...props
-  })));
+    item: item,
+    commandsManager: commandsManager,
+    servicesManager: servicesManager
+  }, props))));
 };
 
 /**
@@ -5119,13 +5128,6 @@ function getSopClassHandlerModule(appContextParam) {
   }];
 }
 /* harmony default export */ const src_getSopClassHandlerModule = (getSopClassHandlerModule);
-;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarDivider.tsx
-
-function ToolbarDivider() {
-  return /*#__PURE__*/react.createElement("span", {
-    className: "border-common-dark mx-2 h-8 w-4 self-center border-l"
-  });
-}
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
 function ToolbarLayoutSelector_extends() { return ToolbarLayoutSelector_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ToolbarLayoutSelector_extends.apply(null, arguments); }
 
@@ -5268,6 +5270,13 @@ LayoutSelector.propTypes = {
   servicesManager: (prop_types_default()).object.isRequired
 };
 /* harmony default export */ const ToolbarLayoutSelector = (ToolbarLayoutSelectorWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarDivider.tsx
+
+function ToolbarDivider() {
+  return /*#__PURE__*/react.createElement("span", {
+    className: "border-common-dark mx-2 h-8 w-4 self-center border-l"
+  });
+}
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx
 function ToolbarSplitButtonWithServices_extends() { return ToolbarSplitButtonWithServices_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ToolbarSplitButtonWithServices_extends.apply(null, arguments); }
 
@@ -5458,18 +5467,120 @@ function ProgressDropdownWithService({
     onChange: handleDropdownChange
   });
 }
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolButtonListWrapper.tsx
+function ToolButtonListWrapper_extends() { return ToolButtonListWrapper_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ToolButtonListWrapper_extends.apply(null, arguments); }
+
+
+/**
+ * Wraps the ToolButtonList component to handle the OHIF toolbar button structure
+ * @param props - Component props
+ * @returns Component
+ * // test
+ */
+function ToolButtonListWrapper({
+  groupId,
+  primary,
+  items,
+  onInteraction
+}) {
+  return /*#__PURE__*/react.createElement(ui_next_src/* ToolButtonList */.XI, null, /*#__PURE__*/react.createElement(ui_next_src/* ToolButtonListDefault */.mk, null, /*#__PURE__*/react.createElement("div", {
+    "data-cy": `${groupId}-split-button-primary`,
+    "data-tool": primary.id,
+    "data-active": primary.isActive
+  }, /*#__PURE__*/react.createElement(ui_next_src/* ToolButton */.T0, ToolButtonListWrapper_extends({}, primary, {
+    onInteraction: ({
+      itemId
+    }) => onInteraction?.({
+      groupId,
+      itemId,
+      commands: primary.commands
+    }),
+    className: primary.className
+  })))), /*#__PURE__*/react.createElement(ui_next_src/* ToolButtonListDivider */.It, {
+    className: primary.isActive ? 'opacity-0' : 'opacity-100'
+  }), /*#__PURE__*/react.createElement("div", {
+    "data-cy": `${groupId}-split-button-secondary`
+  }, /*#__PURE__*/react.createElement(ui_next_src/* ToolButtonListDropDown */.oI, null, items.map(item => /*#__PURE__*/react.createElement(ui_next_src/* ToolButtonListItem */.U$, ToolButtonListWrapper_extends({
+    key: item.id
+  }, item, {
+    "data-cy": item.id,
+    "data-tool": item.id,
+    "data-active": item.isActive,
+    onSelect: () => onInteraction?.({
+      groupId,
+      itemId: item.id,
+      commands: item.commands
+    })
+  }), /*#__PURE__*/react.createElement("span", {
+    className: "pl-1"
+  }, item.label || item.tooltip || item.id))))));
+}
+// EXTERNAL MODULE: ../../../node_modules/classnames/index.js
+var classnames = __webpack_require__(55530);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolBoxWrapper.tsx
+function ToolBoxWrapper_extends() { return ToolBoxWrapper_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ToolBoxWrapper_extends.apply(null, arguments); }
+
+
+
+
+/**
+ * Wraps the ToolButtonList component to handle the OHIF toolbar button structure
+ * @param props - Component props
+ * @returns Component
+ */
+function ToolBoxButtonGroupWrapper({
+  groupId,
+  items,
+  onInteraction,
+  ...props
+}) {
+  if (!items || !groupId) {
+    return null;
+  }
+  return /*#__PURE__*/react.createElement("div", {
+    className: "bg-popover flex flex-row space-x-1 rounded-md px-0 py-0"
+  }, items.map(item => /*#__PURE__*/react.createElement(ui_next_src/* ToolButton */.T0, ToolBoxWrapper_extends({}, item, {
+    key: item.id,
+    size: "small",
+    className: props.disabled && 'text-primary',
+    onInteraction: () => onInteraction?.({
+      groupId,
+      itemId: item.id,
+      commands: item.commands
+    })
+  }))));
+}
+function ToolBoxButtonWrapper({
+  onInteraction,
+  ...props
+}) {
+  return /*#__PURE__*/react.createElement("div", {
+    className: "bg-popover flex flex-row rounded-md px-0 py-0"
+  }, /*#__PURE__*/react.createElement(ui_next_src/* ToolButton */.T0, ToolBoxWrapper_extends({}, props, {
+    id: props.id,
+    size: "small",
+    className: classnames_default()(props.disabled && 'text-primary'),
+    onInteraction: () => onInteraction?.({
+      itemId: props.id,
+      commands: props.commands
+    })
+  })));
+}
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getToolbarModule.tsx
 
 
 
 
+// legacy
+
+
+
+
+
+// new
 
 
-const getClassName = isToggled => {
-  return {
-    className: isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light'
-  };
-};
 function getToolbarModule({
   commandsManager,
   servicesManager
@@ -5477,25 +5588,43 @@ function getToolbarModule({
   const {
     cineService
   } = servicesManager.services;
-  return [{
+  return [
+  // new
+  {
+    name: 'ohif.toolButton',
+    defaultComponent: ui_next_src/* ToolButton */.T0
+  }, {
+    name: 'ohif.toolButtonList',
+    defaultComponent: ToolButtonListWrapper
+  }, {
+    name: 'ohif.toolBoxButtonGroup',
+    defaultComponent: ToolBoxButtonGroupWrapper
+  }, {
+    name: 'ohif.toolBoxButton',
+    defaultComponent: ToolBoxButtonWrapper
+  },
+  // legacy
+  {
     name: 'ohif.radioGroup',
     defaultComponent: ui_src/* ToolbarButton */.IB
+  }, {
+    name: 'ohif.buttonGroup',
+    defaultComponent: Toolbar_ToolbarButtonGroupWithServices
   }, {
     name: 'ohif.divider',
     defaultComponent: ToolbarDivider
   }, {
     name: 'ohif.splitButton',
     defaultComponent: Toolbar_ToolbarSplitButtonWithServices
-  }, {
+  },
+  // others
+  {
     name: 'ohif.layoutSelector',
     defaultComponent: props => ToolbarLayoutSelector({
       ...props,
       commandsManager,
       servicesManager
     })
-  }, {
-    name: 'ohif.buttonGroup',
-    defaultComponent: Toolbar_ToolbarButtonGroupWithServices
   }, {
     name: 'ohif.progressDropdown',
     defaultComponent: ProgressDropdownWithService
@@ -5527,7 +5656,9 @@ function getToolbarModule({
     name: 'evaluate.cine',
     evaluate: () => {
       const isToggled = cineService.getState().isCineEnabled;
-      return getClassName(isToggled);
+      return {
+        className: ui_next_src/* utils.getToggledClassName */.Wp.getToggledClassName(isToggled)
+      };
     }
   }];
 }
@@ -5902,9 +6033,6 @@ var lodash_debounce = __webpack_require__(62051);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
 // EXTERNAL MODULE: ../../../node_modules/react-window/dist/index.esm.js
 var index_esm = __webpack_require__(28271);
-// EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(55530);
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomTagBrowser/DicomTagTable.tsx