@ohif/app 3.9.0-beta.100 → 3.9.0-beta.102

package/dist/{app.bundle.45f2a3ef78a27f5267c7.js → app.bundle.e5b29f933faa2638176c.js}

@@ -6263,8 +6263,8 @@ function WorkList({
     };
   });
   const hasStudies = numOfStudies > 0;
-  const versionNumber = "3.9.0-beta.100";
-  const commitHash = "8fc395e68fa9b9affb3d8287b9bd151c555fdc05";
+  const versionNumber = "3.9.0-beta.102";
+  const commitHash = "06104257402e872d447e59cb166184d9a3548f8b";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -13337,7 +13337,7 @@ const detectionOptions = {
   }
 });
 ;// CONCATENATED MODULE: ../../i18n/package.json
-const package_namespaceObject = /*#__PURE__*/JSON.parse('{"rE":"3.9.0-beta.99"}');
+const package_namespaceObject = /*#__PURE__*/JSON.parse('{"rE":"3.9.0-beta.101"}');
 ;// CONCATENATED MODULE: ../../i18n/src/utils.js
 const languagesMap = {
   ar: 'Arabic',
@@ -20534,10 +20534,8 @@ __webpack_require__.d(__webpack_exports__, {
   QQ: () => (/* reexport */ SegmentationGroupTable_SegmentationGroupTable),
   fO: () => (/* reexport */ SegmentationGroupTable_SegmentationGroupTableExpanded),
   l6: () => (/* reexport */ components_Select),
-  wv: () => (/* reexport */ components_SidePanel),
   n: () => (/* reexport */ contextProviders_SnackbarProvider),
   fk: () => (/* reexport */ components_SplitButton),
-  M4: () => (/* reexport */ components_StudyBrowser),
   r5: () => (/* reexport */ components_StudyListExpandedRow),
   y_: () => (/* reexport */ StudyListFilter_StudyListFilter),
   e$: () => (/* reexport */ components_StudyListPagination),
@@ -20547,7 +20545,6 @@ __webpack_require__.d(__webpack_exports__, {
   cx: () => (/* reexport */ components_ThemeWrapper),
   TM: () => (/* reexport */ AdvancedToolbox_ToolSettings),
   IB: () => (/* reexport */ components_ToolbarButton),
-  OO: () => (/* reexport */ Toolbox_Toolbox),
   nB: () => (/* reexport */ ToolboxProvider),
   m_: () => (/* reexport */ components_Tooltip),
   ax: () => (/* reexport */ TooltipClipboard_TooltipClipboard),
@@ -20570,13 +20567,13 @@ __webpack_require__.d(__webpack_exports__, {
   Bz: () => (/* reexport */ useImageViewer),
   hS: () => (/* reexport */ useModal),
   Fo: () => (/* reexport */ hooks_useSessionStorage),
-  Z1: () => (/* reexport */ useToolbox),
+  Z1: () => (/* reexport */ ToolboxContext_useToolbox),
   fY: () => (/* reexport */ useUserAuthentication),
   OR: () => (/* reexport */ useViewportDialog),
   ih: () => (/* reexport */ useViewportGrid)
 });
 
-// UNUSED EXPORTS: AdvancedToolbox, BackgroundColor, CheckBox, ContextMenu, DateRange, Dropdown, ExpandableToolbarButton, HeaderPatientInfo, HotkeyField, HotkeysPreferences, ICONS, ImageViewerContext, InputDateRange, InputGroup, InputLabelWrapper, InputMultiSelect, InputText, LegacyCinePlayer, LegacySidePanel, LegacySplitButton, LegacyViewportActionBar, ListMenu, MeasurementItem, ModalComponent, ModalConsumer, NavBar, SegmentationTable, StudyBrowserSort, StudyItem, StudyListTableRow, Svg, SwitchLabelLocation, Table, TableBody, TableCell, TableHead, TableRow, Thumbnail, ThumbnailList, ThumbnailNoImage, ThumbnailTracked, UserAuthenticationContext, Viewport, ViewportActionBar, ViewportGridContext, addIcon, getIcon, useDialog, useSnackbar, withDialog, withModal, withSnackbar
+// UNUSED EXPORTS: AdvancedToolbox, BackgroundColor, CheckBox, ContextMenu, DateRange, Dropdown, ExpandableToolbarButton, HeaderPatientInfo, HotkeyField, HotkeysPreferences, ICONS, ImageViewerContext, InputDateRange, InputGroup, InputLabelWrapper, InputMultiSelect, InputText, LegacyCinePlayer, LegacySidePanel, LegacySplitButton, LegacyViewportActionBar, ListMenu, MeasurementItem, ModalComponent, ModalConsumer, NavBar, SegmentationTable, SidePanel, StudyBrowser, StudyBrowserSort, StudyItem, StudyListTableRow, Svg, SwitchLabelLocation, Table, TableBody, TableCell, TableHead, TableRow, Thumbnail, ThumbnailList, ThumbnailNoImage, ThumbnailTracked, Toolbox, UserAuthenticationContext, Viewport, ViewportActionBar, ViewportGridContext, addIcon, getIcon, useDialog, useSnackbar, withDialog, withModal, withSnackbar
 
 // NAMESPACE OBJECT: ../../ui/src/types/index.ts
 var types_namespaceObject = {};
@@ -20673,8 +20670,8 @@ var react_namespaceObject = /*#__PURE__*/__webpack_require__.t(react, 2);
 var cjs = __webpack_require__(43908);
 var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(61466);
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+var node_modules_classnames = __webpack_require__(61466);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(node_modules_classnames);
 // EXTERNAL MODULE: ../../core/src/utils/guid.js
 var guid = __webpack_require__(26933);
 ;// CONCATENATED MODULE: ../../ui/src/contextProviders/DialogProvider.css
@@ -23308,7 +23305,7 @@ const ToolboxProvider = ({
  * 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 ToolboxContext_useToolbox = toolbarSectionId => {
   const context = (0,react.useContext)(ToolboxContext);
   if (context === undefined) {
     throw new Error('useToolbox must be used within a ToolboxProvider');
@@ -36317,7 +36314,7 @@ const createBaseStyle = expandedWidth => {
     height: '99.8%'
   };
 };
-const SidePanel = ({
+const SidePanel_SidePanel = ({
   side,
   className,
   activeTabIndex: activeTabIndexProp = null,
@@ -36482,7 +36479,7 @@ const SidePanel = ({
     return null;
   })) : /*#__PURE__*/react.createElement(react.Fragment, null, getCloseStateComponent()));
 };
-SidePanel.propTypes = {
+SidePanel_SidePanel.propTypes = {
   side: prop_types_default().oneOf(['left', 'right']).isRequired,
   className: (prop_types_default()).string,
   activeTabIndex: (prop_types_default()).number,
@@ -36497,10 +36494,10 @@ SidePanel.propTypes = {
   onActiveTabIndexChange: (prop_types_default()).func,
   expandedWidth: (prop_types_default()).number
 };
-/* harmony default export */ const SidePanel_SidePanel = (SidePanel);
+/* harmony default export */ const components_SidePanel_SidePanel = ((/* unused pure expression or super */ null && (SidePanel_SidePanel)));
 ;// CONCATENATED MODULE: ../../ui/src/components/SidePanel/index.js
 
-/* harmony default export */ const components_SidePanel = (SidePanel_SidePanel);
+/* harmony default export */ const components_SidePanel = ((/* unused pure expression or super */ null && (SidePanel)));
 // EXTERNAL MODULE: ../../../node_modules/react-outside-click-handler/index.js
 var react_outside_click_handler = __webpack_require__(17076);
 ;// CONCATENATED MODULE: ../../ui/src/components/ListMenu/ListMenu.tsx
@@ -37898,7 +37895,7 @@ const getTrackedSeries = displaySets => {
   return trackedSeries;
 };
 const StudyBrowser_noop = () => {};
-const StudyBrowser = ({
+const StudyBrowser_StudyBrowser = ({
   tabs,
   activeTabName,
   expandedStudyInstanceUIDs,
@@ -37993,7 +37990,7 @@ const StudyBrowser = ({
     className: "ohif-scrollbar invisible-scrollbar flex flex-1 flex-col overflow-auto"
   }, getTabContent()));
 };
-StudyBrowser.propTypes = {
+StudyBrowser_StudyBrowser.propTypes = {
   onClickTab: (prop_types_default()).func.isRequired,
   onClickStudy: (prop_types_default()).func,
   onClickThumbnail: (prop_types_default()).func,
@@ -38036,10 +38033,10 @@ StudyBrowser.propTypes = {
     })).isRequired
   }))
 };
-/* harmony default export */ const StudyBrowser_StudyBrowser = (StudyBrowser);
+/* harmony default export */ const components_StudyBrowser_StudyBrowser = ((/* unused pure expression or super */ null && (StudyBrowser_StudyBrowser)));
 ;// CONCATENATED MODULE: ../../ui/src/components/StudyBrowser/index.js
 
-/* harmony default export */ const components_StudyBrowser = (StudyBrowser_StudyBrowser);
+/* harmony default export */ const components_StudyBrowser = ((/* unused pure expression or super */ null && (StudyBrowser)));
 ;// CONCATENATED MODULE: ../../ui/src/components/Table/Table.tsx
 
 
@@ -61280,7 +61277,7 @@ function _getMoreThanOneTabLayout(swiperRef, setSwiper, prevRef, nextRef, tabs,
 
 
 
-const PanelSection = ({
+const PanelSection_PanelSection = ({
   title,
   children,
   actionIcons = [],
@@ -61317,7 +61314,7 @@ const PanelSection = ({
     className: `bg-primary-dark flex flex-col overflow-hidden rounded-b-[4px] ${childrenClassName}`
   }, children)));
 };
-PanelSection.propTypes = {
+PanelSection_PanelSection.propTypes = {
   title: (prop_types_default()).string,
   children: (prop_types_default()).node,
   childrenClassName: (prop_types_default()).string,
@@ -61326,10 +61323,10 @@ PanelSection.propTypes = {
     onClick: (prop_types_default()).func
   }))
 };
-/* harmony default export */ const PanelSection_PanelSection = (PanelSection);
+/* harmony default export */ const components_PanelSection_PanelSection = (PanelSection_PanelSection);
 ;// CONCATENATED MODULE: ../../ui/src/components/PanelSection/index.js
 
-/* harmony default export */ const components_PanelSection = (PanelSection_PanelSection);
+/* harmony default export */ const components_PanelSection = (components_PanelSection_PanelSection);
 ;// CONCATENATED MODULE: ../../ui/src/components/AdvancedToolbox/ToolSettings.tsx
 
 
@@ -61339,7 +61336,7 @@ const SETTING_TYPES = {
   CUSTOM: 'custom',
   DOUBLE_RANGE: 'double-range'
 };
-function ToolSettings({
+function ToolSettings_ToolSettings({
   options
 }) {
   if (!options) {
@@ -61434,7 +61431,7 @@ const renderCustomSetting = option => {
     key: option.id
   }, typeof option.children === 'function' ? option.children() : option.children);
 };
-/* harmony default export */ const AdvancedToolbox_ToolSettings = (ToolSettings);
+/* harmony default export */ const AdvancedToolbox_ToolSettings = (ToolSettings_ToolSettings);
 ;// CONCATENATED MODULE: ../../ui/src/components/AdvancedToolbox/AdvancedToolbox.tsx
 
 
@@ -63871,8 +63868,8 @@ function ToolboxUI_extends() { return ToolboxUI_extends = Object.assign ? Object
 
 const ItemsPerRow = 4;
 function usePrevious(value) {
-  const ref = (0,react.useRef)();
-  (0,react.useEffect)(() => {
+  const ref = useRef();
+  useEffect(() => {
     ref.current = value;
   });
   return ref.current;
@@ -63881,7 +63878,7 @@ function usePrevious(value) {
 /**
  * Just refactoring from the toolbox component to make it more readable
  */
-function ToolboxUI(props) {
+function ToolboxUI_ToolboxUI(props) {
   const {
     toolbarButtons,
     handleToolSelect,
@@ -63898,7 +63895,7 @@ function ToolboxUI(props) {
   } = toolboxState;
   const activeToolOptions = toolOptions?.[activeTool];
   const prevToolOptions = usePrevious(activeToolOptions);
-  (0,react.useEffect)(() => {
+  useEffect(() => {
     if (!activeToolOptions || Array.isArray(activeToolOptions) === false) {
       return;
     }
@@ -63918,9 +63915,9 @@ function ToolboxUI(props) {
     });
   }, [activeToolOptions, selectedEvent]);
   const render = () => {
-    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "flex flex-col bg-black"
-    }, /*#__PURE__*/react.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "bg-primary-dark mt-0.5 flex flex-wrap py-2"
     }, toolbarButtons.map((toolDef, index) => {
       if (!toolDef) {
@@ -63945,27 +63942,27 @@ function ToolboxUI(props) {
           commands
         });
       };
-      return /*#__PURE__*/react.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
         key: id,
-        className: classnames_default()({
+        className: classnames({
           [toolClasses]: true,
           'border-secondary-light flex flex-col items-center justify-center rounded-md border': true
         })
-      }, /*#__PURE__*/react.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: "flex rounded-md bg-black"
-      }, /*#__PURE__*/react.createElement(Component, ToolboxUI_extends({}, componentProps, props, {
+      }, /*#__PURE__*/React.createElement(Component, ToolboxUI_extends({}, componentProps, props, {
         id: id,
         servicesManager: servicesManager,
         onInteraction: onInteraction,
         size: "toolbox"
       }))));
-    }))), /*#__PURE__*/react.createElement("div", {
+    }))), /*#__PURE__*/React.createElement("div", {
       className: "bg-primary-dark h-auto px-2"
-    }, activeToolOptions && /*#__PURE__*/react.createElement(AdvancedToolbox_ToolSettings, {
+    }, activeToolOptions && /*#__PURE__*/React.createElement(ToolSettings, {
       options: activeToolOptions
     })));
   };
-  return useCollapsedPanel ? /*#__PURE__*/react.createElement(components_PanelSection, {
+  return useCollapsedPanel ? /*#__PURE__*/React.createElement(PanelSection, {
     childrenClassName: "flex-shrink-0",
     title: title
   }, render()) : render();
@@ -64002,13 +63999,13 @@ function Toolbox({
   const {
     onInteraction,
     toolbarButtons
-  } = (0,src/* useToolbar */.tR)({
+  } = useToolbar({
     servicesManager,
     buttonSection: buttonSectionId
   });
-  const prevButtonIdsRef = (0,react.useRef)('');
-  const prevToolboxStateRef = (0,react.useRef)('');
-  (0,react.useEffect)(() => {
+  const prevButtonIdsRef = useRef('');
+  const prevToolboxStateRef = useRef('');
+  useEffect(() => {
     const currentButtonIdsStr = JSON.stringify(toolbarButtons.map(button => {
       const {
         id,
@@ -64106,12 +64103,12 @@ function Toolbox({
   const handleToolOptionChange = (toolName, optionName, newValue) => {
     api.handleToolOptionChange(toolName, optionName, newValue);
   };
-  (0,react.useEffect)(() => {
+  useEffect(() => {
     return () => {
       api.handleToolSelect(null);
     };
   }, []);
-  return /*#__PURE__*/react.createElement(ToolboxUI, Toolbox_extends({}, props, {
+  return /*#__PURE__*/React.createElement(ToolboxUI, Toolbox_extends({}, props, {
     title: title,
     toolbarButtons: toolbarButtons,
     toolboxState: toolboxState,
@@ -64120,7 +64117,7 @@ function Toolbox({
     onInteraction: onInteraction
   }));
 }
-/* harmony default export */ const Toolbox_Toolbox = (Toolbox);
+/* harmony default export */ const Toolbox_Toolbox = ((/* unused pure expression or super */ null && (Toolbox)));
 ;// CONCATENATED MODULE: ../../ui/src/components/Toolbox/index.js
 
 
@@ -69690,6 +69687,10 @@ class CustomizationService extends pubSubServiceInterface/* PubSubService */.R {
   }
   onModeEnter() {
     super.reset();
+    const modeCustomizationKeys = Array.from(this.modeCustomizations.keys());
+    for (const key of modeCustomizationKeys) {
+      this.transformedCustomizations.delete(key);
+    }
     this.modeCustomizations.clear();
   }
   getModeCustomizations() {
@@ -196885,6 +196886,65 @@ const Icons_Icons = {
   })), /*#__PURE__*/react.createElement("path", {
     d: "M0 0h22v22H0z"
   }))),
+  DicomTagBrowser: props => /*#__PURE__*/react.createElement("svg", {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 28 28",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/react.createElement("title", null, "tool-dicom-tag-browser"), /*#__PURE__*/react.createElement("g", {
+    id: "tool-dicom-tag-browser",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/react.createElement("rect", {
+    id: "Rectangle",
+    x: "0",
+    y: "0",
+    width: "28",
+    height: "28"
+  }), /*#__PURE__*/react.createElement("g", {
+    id: "Group",
+    transform: "translate(4, 5.5)",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.5"
+  }, /*#__PURE__*/react.createElement("circle", {
+    id: "Oval",
+    cx: "1.73913043",
+    cy: "1.73913043",
+    r: "1.73913043"
+  }), /*#__PURE__*/react.createElement("line", {
+    x1: "6.95652174",
+    y1: "1.73913043",
+    x2: "20",
+    y2: "1.73913043",
+    id: "Path"
+  }), /*#__PURE__*/react.createElement("circle", {
+    id: "Oval",
+    cx: "1.73913043",
+    cy: "8.69565217",
+    r: "1.73913043"
+  }), /*#__PURE__*/react.createElement("line", {
+    x1: "6.95652174",
+    y1: "8.69565217",
+    x2: "20",
+    y2: "8.69565217",
+    id: "Path"
+  }), /*#__PURE__*/react.createElement("circle", {
+    id: "Oval",
+    cx: "1.73913043",
+    cy: "15.6521739",
+    r: "1.73913043"
+  }), /*#__PURE__*/react.createElement("line", {
+    x1: "6.95652174",
+    y1: "15.6521739",
+    x2: "20",
+    y2: "15.6521739",
+    id: "Path"
+  })))),
   // Aliases
   'tab-segmentation': props => Icons_Icons.TabSegmentation(props),
   'tab-studies': props => Icons_Icons.TabStudies(props),
@@ -197525,7 +197585,6 @@ const SidePanel = ({
   onActiveTabIndexChange
 }) => {
   const [panelOpen, setPanelOpen] = (0,react.useState)(activeTabIndexProp !== null);
-  const [renderHeader, setRenderHeader] = (0,react.useState)(false);
   const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(0);
   const styleMap = createStyleMap(expandedWidth, borderSize, collapsedWidth);
   const baseStyle = createBaseStyle(expandedWidth);
@@ -197552,9 +197611,6 @@ const SidePanel = ({
       });
     }
   }, [onActiveTabIndexChange, updatePanelOpen]);
-  (0,react.useEffect)(() => {
-    setRenderHeader(tabs.length === 1);
-  }, [tabs]);
   (0,react.useEffect)(() => {
     updateActiveTabIndex(activeTabIndexProp);
   }, [activeTabIndexProp, updateActiveTabIndex]);
@@ -197596,7 +197652,7 @@ const SidePanel = ({
   };
   const getCloseIcon = () => {
     return /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()('absolute flex h-[24px] cursor-pointer items-center justify-center', side === 'left' ? 'right-0' : 'left-0'),
+      className: classnames_default()('absolute flex cursor-pointer items-center justify-center', side === 'left' ? 'right-0' : 'left-0'),
       style: {
         width: `${closeIconWidth}px`
       },
@@ -197649,13 +197705,17 @@ const SidePanel = ({
       }, getToolTipContent(tab.label, disabled)))));
     }))));
   };
+  const getOneTabComponent = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]'),
+      "data-cy": `${tabs[0].name}-btn`,
+      onClick: () => updatePanelOpen(!panelOpen)
+    }, getCloseIcon(), /*#__PURE__*/react.createElement("span", null, tabs[0].label));
+  };
   const getOpenStateComponent = () => {
-    if (tabs.length === 1) {
-      return null;
-    }
     return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
       className: "bg-bkg-med flex h-[40px] select-none rounded-t p-2"
-    }, getTabGridComponent()), /*#__PURE__*/react.createElement(Separator_Separator, {
+    }, tabs.length === 1 ? getOneTabComponent() : getTabGridComponent()), /*#__PURE__*/react.createElement(Separator_Separator, {
       orientation: "horizontal",
       className: "bg-black",
       thickness: "2px"
@@ -197667,10 +197727,7 @@ const SidePanel = ({
   }, panelOpen ? /*#__PURE__*/react.createElement(react.Fragment, null, getOpenStateComponent(), tabs.map((tab, tabIndex) => {
     if (tabIndex === activeTabIndex) {
       return /*#__PURE__*/react.createElement(tab.content, {
-        key: tabIndex,
-        getCloseIcon: getCloseIcon,
-        tab: tab,
-        renderHeader: renderHeader
+        key: tabIndex
       });
     }
     return null;
@@ -197756,1006 +197813,6 @@ DisplaySetMessageListTooltip.propTypes = {
 ;// CONCATENATED MODULE: ../../ui-next/src/components/DisplaySetMessageListTooltip/index.ts
 
 
-;// CONCATENATED MODULE: ../../ui-next/src/components/Thumbnail/Thumbnail.tsx
-
-
-
-
-
-
-
-
-/**
- * Display a thumbnail for a display set.
- */
-const Thumbnail = ({
-  displaySetInstanceUID,
-  className,
-  imageSrc,
-  imageAltText,
-  description,
-  seriesNumber,
-  numInstances,
-  loadingProgress,
-  countIcon,
-  messages,
-  dragData = {},
-  isActive,
-  onClick,
-  onDoubleClick,
-  viewPreset = 'thumbnails',
-  modality,
-  isHydratedForDerivedDisplaySet = false,
-  canReject = false,
-  onReject = () => {},
-  isTracked = false,
-  onClickUntrack = () => {}
-}) => {
-  // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as
-  // this will still allow for "drag", even if there is no drop target for the
-  // specified item.
-  const [collectedProps, drag, dragPreview] = (0,esm/* useDrag */.i3)({
-    type: 'displayset',
-    item: {
-      ...dragData
-    },
-    canDrag: function (monitor) {
-      return Object.keys(dragData).length !== 0;
-    }
-  });
-  const [lastTap, setLastTap] = (0,react.useState)(0);
-  const handleTouchEnd = e => {
-    const currentTime = new Date().getTime();
-    const tapLength = currentTime - lastTap;
-    if (tapLength < 300 && tapLength > 0) {
-      onDoubleClick(e);
-    } else {
-      onClick(e);
-    }
-    setLastTap(currentTime);
-  };
-  const renderThumbnailPreset = () => {
-    return /*#__PURE__*/react.createElement("div", {
-      className: "flex h-full w-full flex-col items-center justify-center gap-[2px] p-[4px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "h-[114px] w-[128px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "relative"
-    }, imageSrc ? /*#__PURE__*/react.createElement("img", {
-      src: imageSrc,
-      alt: imageAltText,
-      className: "h-[114px] w-[128px] rounded",
-      crossOrigin: "anonymous"
-    }) : /*#__PURE__*/react.createElement("div", {
-      className: "bg-background h-[114px] w-[128px] rounded"
-    }), /*#__PURE__*/react.createElement("div", {
-      className: "bg-muted absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] p-[4px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()('h-[10px] w-[10px] rounded-[2px]', isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65', loadingProgress && loadingProgress < 1 && 'bg-primary/25')
-    }), /*#__PURE__*/react.createElement("div", {
-      className: "text-[11px] text-white"
-    }, modality)), /*#__PURE__*/react.createElement("div", {
-      className: "absolute top-0 right-0 flex items-center gap-[4px]"
-    }, /*#__PURE__*/react.createElement(DisplaySetMessageListTooltip, {
-      messages: messages,
-      id: `display-set-tooltip-${displaySetInstanceUID}`
-    }), canReject && /*#__PURE__*/react.createElement(Icons_Icons.Trash, {
-      className: "h-[20px] w-[20px] text-red-500",
-      onClick: onReject
-    }), isTracked && /*#__PURE__*/react.createElement(Tooltip_TooltipProvider, null, /*#__PURE__*/react.createElement(Tooltip_Tooltip, null, /*#__PURE__*/react.createElement(Tooltip_TooltipTrigger, null, /*#__PURE__*/react.createElement("div", {
-      className: "group"
-    }, /*#__PURE__*/react.createElement(Icons_Icons.StatusTracking, {
-      className: "text-primary-light h-[20px] w-[20px] group-hover:hidden"
-    }), /*#__PURE__*/react.createElement(Icons_Icons.Cancel, {
-      className: "text-primary-light hidden h-[15px] w-[15px] group-hover:block",
-      onClick: onClickUntrack
-    }))), /*#__PURE__*/react.createElement(Tooltip_TooltipContent, {
-      side: "right"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex flex-1 flex-row"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex-2 flex items-center justify-center pr-4"
-    }, /*#__PURE__*/react.createElement(Icons_Icons.InfoLink, {
-      className: "text-primary-active"
-    })), /*#__PURE__*/react.createElement("div", {
-      className: "flex flex-1 flex-col"
-    }, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement("span", {
-      className: "text-white"
-    }, isTracked ? 'Series is tracked' : 'Series is untracked')))))))))), /*#__PURE__*/react.createElement("div", {
-      className: "flex h-[52px] w-[128px] flex-col"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "text-[12px] text-white"
-    }, description), /*#__PURE__*/react.createElement("div", {
-      className: "flex h-[12px] items-center gap-[7px] overflow-hidden"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "text-muted-foreground text-[12px]"
-    }, " S:", seriesNumber), /*#__PURE__*/react.createElement("div", {
-      className: "text-muted-foreground text-[12px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex items-center gap-[4px]"
-    }, ' ', countIcon ? ( /*#__PURE__*/react.createElement(Icons_Icons[countIcon] || Icons_Icons.MissingIcon, {
-      className: 'w-3'
-    })) : /*#__PURE__*/react.createElement(Icons_Icons.InfoSeries, {
-      className: "w-3"
-    }), /*#__PURE__*/react.createElement("div", null, numInstances))))));
-  };
-  const renderListPreset = () => {
-    return /*#__PURE__*/react.createElement("div", {
-      className: "flex h-full w-full items-center justify-between pr-[8px] pl-[8px] pt-[4px] pb-[4px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "relative flex h-[32px] items-center gap-[8px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: classnames_default()('h-[32px] w-[4px] rounded-[2px]', isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65', loadingProgress && loadingProgress < 1 && 'bg-primary/25')
-    }), /*#__PURE__*/react.createElement("div", {
-      className: "flex h-full flex-col"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex items-center gap-[7px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "text-[13px] text-white"
-    }, modality), /*#__PURE__*/react.createElement("div", {
-      className: "max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-[13px] text-white"
-    }, description)), /*#__PURE__*/react.createElement("div", {
-      className: "flex h-[12px] items-center gap-[7px] overflow-hidden"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "text-muted-foreground text-[12px]"
-    }, " S:", seriesNumber), /*#__PURE__*/react.createElement("div", {
-      className: "text-muted-foreground text-[12px]"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex items-center gap-[4px]"
-    }, ' ', countIcon ? ( /*#__PURE__*/react.createElement(Icons_Icons[countIcon] || Icons_Icons.MissingIcon, {
-      className: 'w-3'
-    })) : /*#__PURE__*/react.createElement(Icons_Icons.InfoSeries, {
-      className: "w-3"
-    }), /*#__PURE__*/react.createElement("div", null, numInstances)))))), /*#__PURE__*/react.createElement("div", {
-      className: "flex h-full items-center gap-[4px]"
-    }, /*#__PURE__*/react.createElement(DisplaySetMessageListTooltip, {
-      messages: messages,
-      id: `display-set-tooltip-${displaySetInstanceUID}`
-    }), canReject && /*#__PURE__*/react.createElement(Icons_Icons.Trash, {
-      className: "h-[20px] w-[20px] text-red-500",
-      onClick: onReject
-    }), isTracked && /*#__PURE__*/react.createElement(Tooltip_TooltipProvider, null, /*#__PURE__*/react.createElement(Tooltip_Tooltip, null, /*#__PURE__*/react.createElement(Tooltip_TooltipTrigger, null, /*#__PURE__*/react.createElement("div", {
-      className: "group"
-    }, /*#__PURE__*/react.createElement(Icons_Icons.StatusTracking, {
-      className: "text-primary-light h-[20px] w-[20px] group-hover:hidden"
-    }), /*#__PURE__*/react.createElement(Icons_Icons.Cancel, {
-      className: "text-primary-light hidden h-[15px] w-[15px] group-hover:block",
-      onClick: onClickUntrack
-    }))), /*#__PURE__*/react.createElement(Tooltip_TooltipContent, {
-      side: "right"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex flex-1 flex-row"
-    }, /*#__PURE__*/react.createElement("div", {
-      className: "flex-2 flex items-center justify-center pr-4"
-    }, /*#__PURE__*/react.createElement(Icons_Icons.InfoLink, {
-      className: "text-primary-active"
-    })), /*#__PURE__*/react.createElement("div", {
-      className: "flex flex-1 flex-col"
-    }, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement("span", {
-      className: "text-white"
-    }, isTracked ? 'Series is tracked' : 'Series is untracked')))))))));
-  };
-  return /*#__PURE__*/react.createElement("div", {
-    className: classnames_default()(className, 'bg-muted hover:bg-primary/30 flex cursor-pointer select-none flex-col outline-none', viewPreset === 'thumbnails' && 'h-[170px] w-[135px]', viewPreset === 'list' && 'h-[40px] w-[275px]'),
-    id: `thumbnail-${displaySetInstanceUID}`,
-    "data-cy": `study-browser-thumbnail`,
-    "data-series": seriesNumber,
-    onClick: onClick,
-    onDoubleClick: onDoubleClick,
-    onTouchEnd: handleTouchEnd,
-    role: "button"
-  }, /*#__PURE__*/react.createElement("div", {
-    ref: drag,
-    className: "h-full w-full"
-  }, viewPreset === 'thumbnails' && renderThumbnailPreset(), viewPreset === 'list' && renderListPreset()));
-};
-Thumbnail.propTypes = {
-  displaySetInstanceUID: (prop_types_default()).string.isRequired,
-  className: (prop_types_default()).string,
-  imageSrc: (prop_types_default()).string,
-  /**
-   * Data the thumbnail should expose to a receiving drop target. Use a matching
-   * `dragData.type` to identify which targets can receive this draggable item.
-   * If this is not set, drag-n-drop will be disabled for this thumbnail.
-   *
-   * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
-   */
-  dragData: prop_types_default().shape({
-    /** Must match the "type" a dropTarget expects */
-    type: (prop_types_default()).string.isRequired
-  }),
-  imageAltText: (prop_types_default()).string,
-  description: (prop_types_default()).string.isRequired,
-  seriesNumber: (prop_types_default()).any,
-  numInstances: (prop_types_default()).number.isRequired,
-  loadingProgress: (prop_types_default()).number,
-  messages: (prop_types_default()).object,
-  isActive: (prop_types_default()).bool.isRequired,
-  onClick: (prop_types_default()).func.isRequired,
-  onDoubleClick: (prop_types_default()).func.isRequired,
-  viewPreset: (prop_types_default()).string,
-  modality: (prop_types_default()).string,
-  isHydratedForDerivedDisplaySet: (prop_types_default()).bool,
-  canReject: (prop_types_default()).bool,
-  onReject: (prop_types_default()).func,
-  isTracked: (prop_types_default()).bool,
-  onClickUntrack: (prop_types_default()).func,
-  countIcon: (prop_types_default()).string
-};
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/Thumbnail/index.ts
-
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/ThumbnailList/ThumbnailList.tsx
-
-
-
-const ThumbnailList = ({
-  thumbnails,
-  onThumbnailClick,
-  onThumbnailDoubleClick,
-  onClickUntrack,
-  activeDisplaySetInstanceUIDs = [],
-  viewPreset
-}) => {
-  return /*#__PURE__*/react.createElement("div", {
-    id: "ohif-thumbnail-list",
-    className: `ohif-scrollbar bg-bkg-low grid place-items-center overflow-y-hidden pt-[4px] pr-[2.5px] pl-[2.5px] ${viewPreset === 'thumbnails' ? 'grid-cols-2 gap-[4px] pb-[12px]' : 'grid-cols-1 gap-[2px]'}`
-  }, thumbnails.map(({
-    displaySetInstanceUID,
-    description,
-    dragData,
-    seriesNumber,
-    numInstances,
-    loadingProgress,
-    modality,
-    componentType,
-    seriesDate,
-    countIcon,
-    isTracked,
-    canReject,
-    onReject,
-    imageSrc,
-    messages,
-    imageAltText,
-    isHydratedForDerivedDisplaySet
-  }) => {
-    const isActive = activeDisplaySetInstanceUIDs.includes(displaySetInstanceUID);
-    switch (componentType) {
-      case 'thumbnail':
-        return /*#__PURE__*/react.createElement(Thumbnail, {
-          key: displaySetInstanceUID,
-          displaySetInstanceUID: displaySetInstanceUID,
-          dragData: dragData,
-          description: description,
-          seriesNumber: seriesNumber,
-          numInstances: numInstances || 1,
-          countIcon: countIcon,
-          imageSrc: imageSrc,
-          imageAltText: imageAltText,
-          messages: messages,
-          isActive: isActive,
-          onClick: () => onThumbnailClick(displaySetInstanceUID),
-          onDoubleClick: () => onThumbnailDoubleClick(displaySetInstanceUID),
-          viewPreset: viewPreset,
-          modality: modality
-        });
-      case 'thumbnailTracked':
-        return /*#__PURE__*/react.createElement(Thumbnail, {
-          key: displaySetInstanceUID,
-          displaySetInstanceUID: displaySetInstanceUID,
-          dragData: dragData,
-          description: description,
-          seriesNumber: seriesNumber,
-          numInstances: numInstances,
-          loadingProgress: loadingProgress,
-          countIcon: countIcon,
-          imageSrc: imageSrc,
-          imageAltText: imageAltText,
-          messages: messages,
-          isTracked: isTracked,
-          isActive: isActive,
-          onClick: () => onThumbnailClick(displaySetInstanceUID),
-          onDoubleClick: () => onThumbnailDoubleClick(displaySetInstanceUID),
-          onClickUntrack: () => onClickUntrack(displaySetInstanceUID),
-          viewPreset: viewPreset,
-          modality: modality
-        });
-      case 'thumbnailNoImage':
-        return /*#__PURE__*/react.createElement(Thumbnail, {
-          isActive: isActive,
-          key: displaySetInstanceUID,
-          displaySetInstanceUID: displaySetInstanceUID,
-          dragData: dragData,
-          modality: modality,
-          messages: messages,
-          description: description,
-          onClick: () => onThumbnailClick(displaySetInstanceUID),
-          onDoubleClick: () => onThumbnailDoubleClick(displaySetInstanceUID),
-          viewPreset: viewPreset,
-          countIcon: countIcon,
-          seriesNumber: seriesNumber,
-          numInstances: numInstances || 1,
-          isHydratedForDerivedDisplaySet: isHydratedForDerivedDisplaySet,
-          canReject: canReject,
-          onReject: onReject
-        });
-      default:
-        return /*#__PURE__*/react.createElement(react.Fragment, null);
-    }
-  }));
-};
-ThumbnailList.propTypes = {
-  thumbnails: prop_types_default().arrayOf(prop_types_default().shape({
-    displaySetInstanceUID: (prop_types_default()).string.isRequired,
-    imageSrc: (prop_types_default()).string,
-    imageAltText: (prop_types_default()).string,
-    seriesDate: (prop_types_default()).string,
-    seriesNumber: (prop_types_default()).any,
-    numInstances: (prop_types_default()).number,
-    description: (prop_types_default()).string,
-    componentType: (prop_types_default()).any,
-    isTracked: (prop_types_default()).bool,
-    /**
-     * Data the thumbnail should expose to a receiving drop target. Use a matching
-     * `dragData.type` to identify which targets can receive this draggable item.
-     * If this is not set, drag-n-drop will be disabled for this thumbnail.
-     *
-     * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
-     */
-    dragData: prop_types_default().shape({
-      /** Must match the "type" a dropTarget expects */
-      type: (prop_types_default()).string.isRequired
-    })
-  })),
-  activeDisplaySetInstanceUIDs: prop_types_default().arrayOf((prop_types_default()).string),
-  onThumbnailClick: (prop_types_default()).func.isRequired,
-  onThumbnailDoubleClick: (prop_types_default()).func.isRequired,
-  onClickUntrack: (prop_types_default()).func.isRequired,
-  viewPreset: (prop_types_default()).string
-};
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/ThumbnailList/index.ts
-
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyItem/StudyItem.tsx
-
-
-
-
-
-const StudyItem = ({
-  date,
-  description,
-  numInstances,
-  modalities,
-  isActive,
-  onClick,
-  isExpanded,
-  displaySets,
-  activeDisplaySetInstanceUIDs,
-  onClickThumbnail,
-  onDoubleClickThumbnail,
-  onClickUntrack,
-  viewPreset = 'thumbnails'
-}) => {
-  return /*#__PURE__*/react.createElement(Accordion_Accordion, {
-    type: "single",
-    collapsible: true,
-    onClick: onClick,
-    onKeyDown: onClick,
-    role: "button",
-    tabIndex: 0,
-    defaultValue: isActive ? 'study-item' : undefined
-  }, /*#__PURE__*/react.createElement(Accordion_AccordionItem, {
-    value: "study-item"
-  }, /*#__PURE__*/react.createElement(Accordion_AccordionTrigger, {
-    className: classnames_default()('hover:bg-accent bg-popover rounded')
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex h-[40px] flex-1 flex-row"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex w-full flex-row items-center justify-between"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col items-start text-[13px]"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "text-white"
-  }, date), /*#__PURE__*/react.createElement("div", {
-    className: "text-muted-foreground max-w-[160px] overflow-hidden truncate whitespace-nowrap"
-  }, description)), /*#__PURE__*/react.createElement("div", {
-    className: "text-muted-foreground mr-2 flex flex-col items-end text-[12px]"
-  }, /*#__PURE__*/react.createElement("div", null, modalities), /*#__PURE__*/react.createElement("div", null, numInstances))))), /*#__PURE__*/react.createElement(Accordion_AccordionContent, {
-    onClick: event => {
-      event.stopPropagation();
-    }
-  }, isExpanded && displaySets && /*#__PURE__*/react.createElement(ThumbnailList, {
-    thumbnails: displaySets,
-    activeDisplaySetInstanceUIDs: activeDisplaySetInstanceUIDs,
-    onThumbnailClick: onClickThumbnail,
-    onThumbnailDoubleClick: onDoubleClickThumbnail,
-    onClickUntrack: onClickUntrack,
-    viewPreset: viewPreset
-  }))));
-};
-StudyItem.propTypes = {
-  date: (prop_types_default()).string.isRequired,
-  description: (prop_types_default()).string,
-  modalities: (prop_types_default()).string.isRequired,
-  numInstances: (prop_types_default()).number.isRequired,
-  trackedSeries: (prop_types_default()).number,
-  isActive: (prop_types_default()).bool,
-  onClick: (prop_types_default()).func.isRequired,
-  isExpanded: (prop_types_default()).bool,
-  displaySets: (prop_types_default()).array,
-  activeDisplaySetInstanceUIDs: (prop_types_default()).array,
-  onClickThumbnail: (prop_types_default()).func,
-  onDoubleClickThumbnail: (prop_types_default()).func,
-  onClickUntrack: (prop_types_default()).func,
-  viewPreset: (prop_types_default()).string
-};
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyItem/index.ts
-
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
-
-
-function StudyBrowserSort({
-  servicesManager
-}) {
-  const {
-    customizationService,
-    displaySetService
-  } = servicesManager.services;
-  const {
-    values: sortFunctions
-  } = customizationService.get('studyBrowser.sortFunctions');
-  const [selectedSort, setSelectedSort] = (0,react.useState)(sortFunctions[0]);
-  const [sortDirection, setSortDirection] = (0,react.useState)('ascending');
-  const handleSortChange = event => {
-    const selectedSortFunction = sortFunctions.find(sort => sort.label === event.target.value);
-    setSelectedSort(selectedSortFunction);
-  };
-  const toggleSortDirection = e => {
-    e.stopPropagation();
-    setSortDirection(prevDirection => prevDirection === 'ascending' ? 'descending' : 'ascending');
-  };
-  (0,react.useEffect)(() => {
-    displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection);
-  }, [displaySetService, selectedSort, sortDirection]);
-  (0,react.useEffect)(() => {
-    const SubscriptionDisplaySetsChanged = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_CHANGED, () => {
-      displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection, true);
-    });
-    const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, () => {
-      displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection, true);
-    });
-    return () => {
-      SubscriptionDisplaySetsChanged.unsubscribe();
-      SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
-    };
-  }, [displaySetService, selectedSort, sortDirection]);
-  return /*#__PURE__*/react.createElement("div", {
-    className: "border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-center rounded border bg-black p-2"
-  }, /*#__PURE__*/react.createElement("select", {
-    onChange: handleSortChange,
-    value: selectedSort.label,
-    onClick: e => e.stopPropagation(),
-    className: "w-full appearance-none bg-transparent text-sm leading-tight text-white shadow transition duration-300 focus:outline-none"
-  }, sortFunctions.map(sort => /*#__PURE__*/react.createElement("option", {
-    className: "appearance-none bg-black text-white",
-    value: sort.label,
-    key: sort.label
-  }, sort.label))), /*#__PURE__*/react.createElement("button", {
-    onClick: toggleSortDirection,
-    className: "flex items-center justify-center"
-  }, sortDirection === 'ascending' ? /*#__PURE__*/react.createElement(Icons_Icons.SortingAscending, {
-    className: "text-primary-main w-2"
-  }) : /*#__PURE__*/react.createElement(Icons_Icons.SortingDescending, {
-    className: "text-primary-main w-2"
-  })));
-}
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserSort/index.ts
-
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
-
-function StudyBrowserViewOptions({
-  tabs,
-  onSelectTab,
-  activeTabName
-}) {
-  const handleTabChange = tabName => {
-    onSelectTab(tabName);
-  };
-  return /*#__PURE__*/react.createElement("div", {
-    className: "border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-center rounded border bg-black p-2"
-  }, /*#__PURE__*/react.createElement("select", {
-    onChange: e => handleTabChange(e.target.value),
-    value: activeTabName,
-    onClick: e => e.stopPropagation(),
-    className: "w-full appearance-none bg-transparent text-sm leading-tight text-white shadow transition duration-300 focus:outline-none"
-  }, tabs.map(tab => {
-    const {
-      name,
-      label,
-      studies
-    } = tab;
-    const isActive = activeTabName === name;
-    const isDisabled = !studies.length;
-    if (isDisabled) {
-      return null;
-    }
-    return /*#__PURE__*/react.createElement("option", {
-      className: `appearance-none bg-black text-white ${isActive ? 'font-bold' : ''}`,
-      value: name,
-      key: name
-    }, label);
-  })));
-}
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserViewOptions/index.ts
-
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowser/StudyBrowser.tsx
-
-
-
-
-
-const getTrackedSeries = displaySets => {
-  let trackedSeries = 0;
-  displaySets.forEach(displaySet => {
-    if (displaySet.isTracked) {
-      trackedSeries++;
-    }
-  });
-  return trackedSeries;
-};
-const noop = () => {};
-const StudyBrowser = ({
-  tabs,
-  activeTabName,
-  expandedStudyInstanceUIDs,
-  onClickTab = noop,
-  onClickStudy = noop,
-  onClickThumbnail = noop,
-  onDoubleClickThumbnail = noop,
-  onClickUntrack = noop,
-  activeDisplaySetInstanceUIDs,
-  servicesManager,
-  showSettings,
-  viewPresets
-}) => {
-  const getTabContent = () => {
-    const tabData = tabs.find(tab => tab.name === activeTabName);
-    const viewPreset = viewPresets ? viewPresets.filter(preset => preset.selected)[0]?.id : 'thumbnails';
-    return tabData.studies.map(({
-      studyInstanceUid,
-      date,
-      description,
-      numInstances,
-      modalities,
-      displaySets
-    }) => {
-      const isExpanded = expandedStudyInstanceUIDs.includes(studyInstanceUid);
-      return /*#__PURE__*/react.createElement(react.Fragment, {
-        key: studyInstanceUid
-      }, /*#__PURE__*/react.createElement(StudyItem, {
-        date: date,
-        description: description,
-        numInstances: numInstances,
-        isExpanded: isExpanded,
-        displaySets: displaySets,
-        modalities: modalities,
-        trackedSeries: getTrackedSeries(displaySets),
-        isActive: isExpanded,
-        onClick: () => {
-          onClickStudy(studyInstanceUid);
-        },
-        onClickThumbnail: onClickThumbnail,
-        onDoubleClickThumbnail: onDoubleClickThumbnail,
-        onClickUntrack: onClickUntrack,
-        activeDisplaySetInstanceUIDs: activeDisplaySetInstanceUIDs,
-        "data-cy": "thumbnail-list",
-        viewPreset: viewPreset
-      }));
-    });
-  };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, showSettings && /*#__PURE__*/react.createElement("div", {
-    className: "w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]",
-    "data-cy": 'studyBrowser-panel'
-  }, /*#__PURE__*/react.createElement(StudyBrowserViewOptions, {
-    tabs: tabs,
-    onSelectTab: onClickTab,
-    activeTabName: activeTabName
-  }), /*#__PURE__*/react.createElement(StudyBrowserSort, {
-    servicesManager: servicesManager
-  })), /*#__PURE__*/react.createElement("div", {
-    className: "ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto"
-  }, getTabContent()));
-};
-StudyBrowser.propTypes = {
-  onClickTab: (prop_types_default()).func.isRequired,
-  onClickStudy: (prop_types_default()).func,
-  onClickThumbnail: (prop_types_default()).func,
-  onDoubleClickThumbnail: (prop_types_default()).func,
-  onClickUntrack: (prop_types_default()).func,
-  activeTabName: (prop_types_default()).string.isRequired,
-  expandedStudyInstanceUIDs: prop_types_default().arrayOf((prop_types_default()).string).isRequired,
-  activeDisplaySetInstanceUIDs: prop_types_default().arrayOf((prop_types_default()).string),
-  tabs: prop_types_default().arrayOf(prop_types_default().shape({
-    name: (prop_types_default()).string.isRequired,
-    label: (prop_types_default()).string.isRequired,
-    studies: prop_types_default().arrayOf(prop_types_default().shape({
-      studyInstanceUid: (prop_types_default()).string.isRequired,
-      date: (prop_types_default()).string,
-      numInstances: (prop_types_default()).number,
-      modalities: (prop_types_default()).string,
-      description: (prop_types_default()).string,
-      displaySets: prop_types_default().arrayOf(prop_types_default().shape({
-        displaySetInstanceUID: (prop_types_default()).string.isRequired,
-        imageSrc: (prop_types_default()).string,
-        imageAltText: (prop_types_default()).string,
-        seriesDate: (prop_types_default()).string,
-        seriesNumber: (prop_types_default()).any,
-        numInstances: (prop_types_default()).number,
-        description: (prop_types_default()).string,
-        componentType: prop_types_default().oneOf(['thumbnail', 'thumbnailTracked', 'thumbnailNoImage']).isRequired,
-        isTracked: (prop_types_default()).bool,
-        /**
-         * Data the thumbnail should expose to a receiving drop target. Use a matching
-         * `dragData.type` to identify which targets can receive this draggable item.
-         * If this is not set, drag-n-drop will be disabled for this thumbnail.
-         *
-         * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
-         */
-        dragData: prop_types_default().shape({
-          /** Must match the "type" a dropTarget expects */
-          type: (prop_types_default()).string.isRequired
-        })
-      }))
-    })).isRequired
-  }))
-};
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowser/index.ts
-
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/PanelSection/PanelSection.tsx
-
-
-
-const PanelSection = ({
-  title,
-  children,
-  actionIcons = [],
-  childrenClassName
-}) => {
-  const [areChildrenVisible, setChildrenVisible] = (0,react.useState)(true);
-  const handleHeaderClick = () => {
-    setChildrenVisible(!areChildrenVisible);
-  };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "bg-secondary-dark flex h-7 cursor-pointer select-none items-center justify-between rounded-[4px] pl-2.5 text-[13px]",
-    onClick: handleHeaderClick
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "text-aqua-pale"
-  }, title), /*#__PURE__*/react.createElement("div", {
-    className: "flex items-center space-x-1"
-  }, actionIcons.map((icon, index) => {
-    const Icon = Icons_Icons[icon.name];
-    return /*#__PURE__*/react.createElement(Icon, {
-      key: index,
-      onClick: e => {
-        e.stopPropagation();
-        if (!areChildrenVisible) {
-          setChildrenVisible(true);
-        }
-        icon.onClick();
-      }
-    });
-  }), /*#__PURE__*/react.createElement("div", {
-    className: "grid h-[28px] w-[28px] place-items-center"
-  }, areChildrenVisible ? /*#__PURE__*/react.createElement(Icons_Icons.ChevronOpen, null) : /*#__PURE__*/react.createElement(Icons_Icons.ChevronClosed, null)))), areChildrenVisible && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "h-[2px] bg-black"
-  }), /*#__PURE__*/react.createElement("div", {
-    className: `bg-primary-dark flex flex-col overflow-hidden rounded-b-[4px] ${childrenClassName}`
-  }, children)));
-};
-PanelSection.propTypes = {
-  title: (prop_types_default()).string,
-  children: (prop_types_default()).node,
-  childrenClassName: (prop_types_default()).string,
-  actionIcons: prop_types_default().arrayOf(prop_types_default().shape({
-    name: (prop_types_default()).string,
-    onClick: (prop_types_default()).func
-  }))
-};
-
-;// CONCATENATED MODULE: ../../ui-next/src/components/PanelSection/index.ts
-
-
-// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
-var src = __webpack_require__(44657);
-;// CONCATENATED MODULE: ../../ui-next/src/components/Toolbox/ToolboxUI.tsx
-function ToolboxUI_extends() { return ToolboxUI_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; }, ToolboxUI_extends.apply(null, arguments); }
-
-
-// Migrate this file to the new UI eventually
-
-
-const ItemsPerRow = 4;
-function ToolboxUI_usePrevious(value) {
-  const ref = (0,react.useRef)();
-  (0,react.useEffect)(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-/**
- * Just refactoring from the toolbox component to make it more readable
- */
-function ToolboxUI(props) {
-  const {
-    toolbarButtons,
-    handleToolSelect,
-    toolboxState,
-    numRows,
-    servicesManager,
-    title,
-    useCollapsedPanel = true
-  } = props;
-  const {
-    activeTool,
-    toolOptions,
-    selectedEvent
-  } = toolboxState;
-  const activeToolOptions = toolOptions?.[activeTool];
-  const prevToolOptions = ToolboxUI_usePrevious(activeToolOptions);
-  (0,react.useEffect)(() => {
-    if (!activeToolOptions || Array.isArray(activeToolOptions) === false) {
-      return;
-    }
-    activeToolOptions.forEach((option, index) => {
-      const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
-      if (!prevOption || option.value !== prevOption.value || selectedEvent) {
-        const isOptionValid = option.condition ? option.condition({
-          options: activeToolOptions
-        }) : true;
-        if (isOptionValid) {
-          const {
-            commands
-          } = option;
-          commands(option.value);
-        }
-      }
-    });
-  }, [activeToolOptions, selectedEvent]);
-  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
-      }) => {
-        const idToUse = itemId || id;
-        handleToolSelect(idToUse);
-        props.onInteraction({
-          itemId,
-          commands
-        });
-      };
-      return /*#__PURE__*/react.createElement("div", {
-        key: id,
-        className: classnames_default()({
-          [toolClasses]: true,
-          'border-secondary-light flex flex-col items-center justify-center rounded-md border': true
-        })
-      }, /*#__PURE__*/react.createElement("div", {
-        className: "flex rounded-md bg-black"
-      }, /*#__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(src/* ToolSettings */.TM, {
-      options: activeToolOptions
-    })));
-  };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, useCollapsedPanel ? /*#__PURE__*/react.createElement(PanelSection, {
-    childrenClassName: "flex-shrink-0",
-    title: title
-  }, render()) : render());
-}
-
-// EXTERNAL MODULE: ../../core/src/index.ts + 74 modules
-var core_src = __webpack_require__(10541);
-;// CONCATENATED MODULE: ../../ui-next/src/components/Toolbox/Toolbox.tsx
-function Toolbox_extends() { return Toolbox_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; }, Toolbox_extends.apply(null, arguments); }
-
-
-
-// Migrate this file to the new UI eventually
-
-
-
-/**
- * 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,
-  renderHeader,
-  getCloseIcon,
-  tab,
-  ...props
-}) {
-  const {
-    state: toolboxState,
-    api
-  } = (0,src/* useToolbox */.Z1)(buttonSectionId);
-  const {
-    onInteraction,
-    toolbarButtons
-  } = (0,core_src/* useToolbar */.tR)({
-    servicesManager,
-    buttonSection: buttonSectionId
-  });
-  const prevButtonIdsRef = (0,react.useRef)('');
-  const prevToolboxStateRef = (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}`;
-    }));
-    const currentToolBoxStateStr = JSON.stringify(Object.keys(toolboxState.toolOptions).map(tool => {
-      const options = toolboxState.toolOptions[tool];
-      if (Array.isArray(options)) {
-        return options?.map(option => `${option.id}-${option.value}`);
-      }
-    }));
-    if (prevButtonIdsRef.current === currentButtonIdsStr && prevToolboxStateRef.current === currentToolBoxStateStr) {
-      return;
-    }
-    prevButtonIdsRef.current = currentButtonIdsStr;
-    prevToolboxStateRef.current = currentToolBoxStateStr;
-    const initializeOptionsWithEnhancements = toolbarButtons.reduce((accumulator, toolbarButton) => {
-      const {
-        id: buttonId,
-        componentProps
-      } = toolbarButton;
-      const createEnhancedOptions = (options, parentId) => {
-        const optionsToUse = Array.isArray(options) ? options : [options];
-        return optionsToUse.map(option => {
-          if (typeof option.optionComponent === 'function') {
-            return option;
-          }
-          const value = toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ?? option.value;
-          const updatedOptions = toolboxState.toolOptions?.[parentId];
-          return {
-            ...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';
-                const isFunction = typeof command === 'function';
-                if (isString) {
-                  commandsManager.run(command, {
-                    value
-                  });
-                } else if (isObject) {
-                  commandsManager.run({
-                    ...command,
-                    commandOptions: {
-                      ...command.commandOptions,
-                      ...option,
-                      value,
-                      options: updatedOptions
-                    }
-                  });
-                } else if (isFunction) {
-                  command({
-                    value,
-                    commandsManager,
-                    servicesManager,
-                    options: updatedOptions
-                  });
-                }
-              });
-            }
-          };
-        });
-      };
-      const {
-        items,
-        options
-      } = componentProps;
-      if (items?.length) {
-        items.forEach(({
-          options,
-          id
-        }) => {
-          accumulator[id] = createEnhancedOptions(options, id);
-        });
-      } else if (options?.length) {
-        accumulator[buttonId] = createEnhancedOptions(options, buttonId);
-      } else if (options?.optionComponent) {
-        accumulator[buttonId] = options.optionComponent;
-      }
-      return accumulator;
-    }, {});
-    api.initializeToolOptions(initializeOptionsWithEnhancements);
-  }, [toolbarButtons, api, toolboxState, commandsManager, servicesManager]);
-  const handleToolOptionChange = (toolName, optionName, newValue) => {
-    api.handleToolOptionChange(toolName, optionName, newValue);
-  };
-  (0,react.useEffect)(() => {
-    return () => {
-      api.handleToolSelect(null);
-    };
-  }, []);
-  return /*#__PURE__*/react.createElement(react.Fragment, null, renderHeader && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]"
-  }, /*#__PURE__*/react.createElement("span", null, tab.label))), getCloseIcon()), /*#__PURE__*/react.createElement(Separator_Separator, {
-    orientation: "horizontal",
-    className: "bg-black",
-    thickness: "2px"
-  })), /*#__PURE__*/react.createElement(ToolboxUI, Toolbox_extends({}, props, {
-    title: title,
-    toolbarButtons: toolbarButtons,
-    toolboxState: toolboxState,
-    handleToolSelect: id => api.handleToolSelect(id),
-    handleToolOptionChange: handleToolOptionChange,
-    onInteraction: onInteraction
-  })));
-}
-/* harmony default export */ const Toolbox_Toolbox = (Toolbox);
-;// CONCATENATED MODULE: ../../ui-next/src/components/Toolbox/index.ts
-
-
-
 ;// CONCATENATED MODULE: ../../../node_modules/@radix-ui/react-menu/dist/index.mjs
 "use client";
 
@@ -199973,6 +199030,1005 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 ;// CONCATENATED MODULE: ../../ui-next/src/components/DropdownMenu/index.ts
 
 
+;// CONCATENATED MODULE: ../../ui-next/src/components/Thumbnail/Thumbnail.tsx
+
+
+
+
+
+
+
+
+
+
+/**
+ * Display a thumbnail for a display set.
+ */
+const Thumbnail = ({
+  displaySetInstanceUID,
+  className,
+  imageSrc,
+  imageAltText,
+  description,
+  seriesNumber,
+  numInstances,
+  loadingProgress,
+  countIcon,
+  messages,
+  dragData = {},
+  isActive,
+  onClick,
+  onDoubleClick,
+  viewPreset = 'thumbnails',
+  modality,
+  isHydratedForDerivedDisplaySet = false,
+  canReject = false,
+  onReject = () => {},
+  isTracked = false,
+  thumbnailType = 'thumbnail',
+  onClickUntrack = () => {},
+  onThumbnailContextMenu
+}) => {
+  // TODO: We should wrap our thumbnail to create a "DraggableThumbnail", as
+  // this will still allow for "drag", even if there is no drop target for the
+  // specified item.
+  const [collectedProps, drag, dragPreview] = (0,esm/* useDrag */.i3)({
+    type: 'displayset',
+    item: {
+      ...dragData
+    },
+    canDrag: function (monitor) {
+      return Object.keys(dragData).length !== 0;
+    }
+  });
+  const [lastTap, setLastTap] = (0,react.useState)(0);
+  const handleTouchEnd = e => {
+    const currentTime = new Date().getTime();
+    const tapLength = currentTime - lastTap;
+    if (tapLength < 300 && tapLength > 0) {
+      onDoubleClick(e);
+    } else {
+      onClick(e);
+    }
+    setLastTap(currentTime);
+  };
+  const renderThumbnailPreset = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex h-full w-full flex-col items-center justify-center gap-[2px] p-[4px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "h-[114px] w-[128px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "relative"
+    }, imageSrc ? /*#__PURE__*/react.createElement("img", {
+      src: imageSrc,
+      alt: imageAltText,
+      className: "h-[114px] w-[128px] rounded",
+      crossOrigin: "anonymous"
+    }) : /*#__PURE__*/react.createElement("div", {
+      className: "bg-background h-[114px] w-[128px] rounded"
+    }), /*#__PURE__*/react.createElement("div", {
+      className: "bg-muted absolute bottom-0 left-0 flex h-[14px] items-center gap-[4px] p-[4px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('h-[10px] w-[10px] rounded-[2px]', isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65', loadingProgress && loadingProgress < 1 && 'bg-primary/25')
+    }), /*#__PURE__*/react.createElement("div", {
+      className: "text-[11px] text-white"
+    }, modality)), /*#__PURE__*/react.createElement("div", {
+      className: "absolute top-0 right-0 flex items-center gap-[4px]"
+    }, /*#__PURE__*/react.createElement(DisplaySetMessageListTooltip, {
+      messages: messages,
+      id: `display-set-tooltip-${displaySetInstanceUID}`
+    }), canReject && /*#__PURE__*/react.createElement(Icons_Icons.Trash, {
+      className: "h-[20px] w-[20px] text-red-500",
+      onClick: onReject
+    }), isTracked && /*#__PURE__*/react.createElement(Tooltip_TooltipProvider, null, /*#__PURE__*/react.createElement(Tooltip_Tooltip, null, /*#__PURE__*/react.createElement(Tooltip_TooltipTrigger, null, /*#__PURE__*/react.createElement("div", {
+      className: "group"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.StatusTracking, {
+      className: "text-primary-light h-[20px] w-[20px] group-hover:hidden"
+    }), /*#__PURE__*/react.createElement(Icons_Icons.Cancel, {
+      className: "text-primary-light hidden h-[15px] w-[15px] group-hover:block",
+      onClick: onClickUntrack
+    }))), /*#__PURE__*/react.createElement(Tooltip_TooltipContent, {
+      side: "right"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-1 flex-row"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex-2 flex items-center justify-center pr-4"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.InfoLink, {
+      className: "text-primary-active"
+    })), /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-1 flex-col"
+    }, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement("span", {
+      className: "text-white"
+    }, isTracked ? 'Series is tracked' : 'Series is untracked')))))))), /*#__PURE__*/react.createElement("div", {
+      className: "absolute bottom-0 right-0 flex items-center gap-[4px] p-[4px]"
+    }, /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenu, null, /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenuTrigger, {
+      asChild: true
+    }, /*#__PURE__*/react.createElement(Button_Button, {
+      variant: "ghost",
+      size: "icon",
+      className: "hidden group-hover:inline-flex data-[state=open]:inline-flex"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.More, null))), /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenuContent, {
+      asChild: true,
+      hideWhenDetached: true
+    }, /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenuItem, {
+      onSelect: () => {
+        onThumbnailContextMenu('openDICOMTagViewer', {
+          displaySetInstanceUID
+        });
+      },
+      className: "gap-[6px]"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.DicomTagBrowser, null), "Tag Browser")))))), /*#__PURE__*/react.createElement("div", {
+      className: "flex h-[52px] w-[128px] flex-col"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "min-h-[18px] w-[128px] overflow-hidden text-ellipsis text-[12px] text-white"
+    }, description), /*#__PURE__*/react.createElement("div", {
+      className: "flex h-[12px] items-center gap-[7px] overflow-hidden"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-muted-foreground text-[12px]"
+    }, " S:", seriesNumber), /*#__PURE__*/react.createElement("div", {
+      className: "text-muted-foreground text-[12px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex items-center gap-[4px]"
+    }, ' ', countIcon ? ( /*#__PURE__*/react.createElement(Icons_Icons[countIcon] || Icons_Icons.MissingIcon, {
+      className: 'w-3'
+    })) : /*#__PURE__*/react.createElement(Icons_Icons.InfoSeries, {
+      className: "w-3"
+    }), /*#__PURE__*/react.createElement("div", null, numInstances))))));
+  };
+  const renderListPreset = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex h-full w-full items-center justify-between pr-[8px] pl-[8px] pt-[4px] pb-[4px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "relative flex h-[32px] items-center gap-[8px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('h-[32px] w-[4px] rounded-[2px]', isActive || isHydratedForDerivedDisplaySet ? 'bg-highlight' : 'bg-primary/65', loadingProgress && loadingProgress < 1 && 'bg-primary/25')
+    }), /*#__PURE__*/react.createElement("div", {
+      className: "flex h-full flex-col"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex items-center gap-[7px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-[13px] text-white"
+    }, modality), /*#__PURE__*/react.createElement("div", {
+      className: "max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-[13px] text-white"
+    }, description)), /*#__PURE__*/react.createElement("div", {
+      className: "flex h-[12px] items-center gap-[7px] overflow-hidden"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-muted-foreground text-[12px]"
+    }, " S:", seriesNumber), /*#__PURE__*/react.createElement("div", {
+      className: "text-muted-foreground text-[12px]"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex items-center gap-[4px]"
+    }, ' ', countIcon ? ( /*#__PURE__*/react.createElement(Icons_Icons[countIcon] || Icons_Icons.MissingIcon, {
+      className: 'w-3'
+    })) : /*#__PURE__*/react.createElement(Icons_Icons.InfoSeries, {
+      className: "w-3"
+    }), /*#__PURE__*/react.createElement("div", null, numInstances)))))), /*#__PURE__*/react.createElement("div", {
+      className: "flex h-full items-center gap-[4px]"
+    }, /*#__PURE__*/react.createElement(DisplaySetMessageListTooltip, {
+      messages: messages,
+      id: `display-set-tooltip-${displaySetInstanceUID}`
+    }), canReject && /*#__PURE__*/react.createElement(Icons_Icons.Trash, {
+      className: "h-[20px] w-[20px] text-red-500",
+      onClick: onReject
+    }), isTracked && /*#__PURE__*/react.createElement(Tooltip_TooltipProvider, null, /*#__PURE__*/react.createElement(Tooltip_Tooltip, null, /*#__PURE__*/react.createElement(Tooltip_TooltipTrigger, null, /*#__PURE__*/react.createElement("div", {
+      className: "group"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.StatusTracking, {
+      className: "text-primary-light h-[20px] w-[20px] group-hover:hidden"
+    }), /*#__PURE__*/react.createElement(Icons_Icons.Cancel, {
+      className: "text-primary-light hidden h-[15px] w-[15px] group-hover:block",
+      onClick: onClickUntrack
+    }))), /*#__PURE__*/react.createElement(Tooltip_TooltipContent, {
+      side: "right"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-1 flex-row"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "flex-2 flex items-center justify-center pr-4"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.InfoLink, {
+      className: "text-primary-active"
+    })), /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-1 flex-col"
+    }, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement("span", {
+      className: "text-white"
+    }, isTracked ? 'Series is tracked' : 'Series is untracked'))))))), /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenu, null, /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenuTrigger, {
+      asChild: true
+    }, /*#__PURE__*/react.createElement(Button_Button, {
+      variant: "ghost",
+      size: "icon",
+      className: "hidden group-hover:inline-flex data-[state=open]:inline-flex"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.More, null))), /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenuContent, {
+      asChild: true,
+      hideWhenDetached: true
+    }, /*#__PURE__*/react.createElement(DropdownMenu_DropdownMenuItem, {
+      onSelect: () => {
+        onThumbnailContextMenu('openDICOMTagViewer', {
+          displaySetInstanceUID
+        });
+      },
+      className: "gap-[6px]"
+    }, /*#__PURE__*/react.createElement(Icons_Icons.DicomTagBrowser, null), "Tag Browser")))));
+  };
+  return /*#__PURE__*/react.createElement("div", {
+    className: classnames_default()(className, 'bg-muted hover:bg-primary/30 group flex cursor-pointer select-none flex-col outline-none', viewPreset === 'thumbnails' && 'h-[170px] w-[135px]', viewPreset === 'list' && 'col-span-2 h-[40px] w-[275px]'),
+    id: `thumbnail-${displaySetInstanceUID}`,
+    "data-cy": thumbnailType === 'thumbnailNoImage' ? 'study-browser-thumbnail-no-image' : 'study-browser-thumbnail',
+    "data-series": seriesNumber,
+    onClick: onClick,
+    onDoubleClick: onDoubleClick,
+    onTouchEnd: handleTouchEnd,
+    role: "button"
+  }, /*#__PURE__*/react.createElement("div", {
+    ref: drag,
+    className: "h-full w-full"
+  }, viewPreset === 'thumbnails' && renderThumbnailPreset(), viewPreset === 'list' && renderListPreset()));
+};
+Thumbnail.propTypes = {
+  displaySetInstanceUID: (prop_types_default()).string.isRequired,
+  className: (prop_types_default()).string,
+  imageSrc: (prop_types_default()).string,
+  /**
+   * Data the thumbnail should expose to a receiving drop target. Use a matching
+   * `dragData.type` to identify which targets can receive this draggable item.
+   * If this is not set, drag-n-drop will be disabled for this thumbnail.
+   *
+   * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
+   */
+  dragData: prop_types_default().shape({
+    /** Must match the "type" a dropTarget expects */
+    type: (prop_types_default()).string.isRequired
+  }),
+  imageAltText: (prop_types_default()).string,
+  description: (prop_types_default()).string.isRequired,
+  seriesNumber: (prop_types_default()).any,
+  numInstances: (prop_types_default()).number.isRequired,
+  loadingProgress: (prop_types_default()).number,
+  messages: (prop_types_default()).object,
+  isActive: (prop_types_default()).bool.isRequired,
+  onClick: (prop_types_default()).func.isRequired,
+  onDoubleClick: (prop_types_default()).func.isRequired,
+  viewPreset: (prop_types_default()).string,
+  modality: (prop_types_default()).string,
+  isHydratedForDerivedDisplaySet: (prop_types_default()).bool,
+  canReject: (prop_types_default()).bool,
+  onReject: (prop_types_default()).func,
+  isTracked: (prop_types_default()).bool,
+  onClickUntrack: (prop_types_default()).func,
+  countIcon: (prop_types_default()).string,
+  thumbnailType: prop_types_default().oneOf(['thumbnail', 'thumbnailTracked', 'thumbnailNoImage'])
+};
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/Thumbnail/index.ts
+
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/ThumbnailList/ThumbnailList.tsx
+
+
+
+const ThumbnailList = ({
+  thumbnails,
+  onThumbnailClick,
+  onThumbnailDoubleClick,
+  onClickUntrack,
+  activeDisplaySetInstanceUIDs = [],
+  viewPreset,
+  onThumbnailContextMenu
+}) => {
+  return /*#__PURE__*/react.createElement("div", {
+    className: "min-h-[350px]",
+    style: {
+      '--radix-accordion-content-height': '350px'
+    }
+  }, /*#__PURE__*/react.createElement("div", {
+    id: "ohif-thumbnail-list",
+    className: `ohif-scrollbar bg-bkg-low grid place-items-center overflow-y-hidden pt-[4px] pr-[2.5px] pl-[2.5px] ${viewPreset === 'thumbnails' ? 'grid-cols-2 gap-[4px] pb-[12px]' : 'grid-cols-1 gap-[2px]'}`
+  }, thumbnails.map(({
+    displaySetInstanceUID,
+    description,
+    dragData,
+    seriesNumber,
+    numInstances,
+    loadingProgress,
+    modality,
+    componentType,
+    seriesDate,
+    countIcon,
+    isTracked,
+    canReject,
+    onReject,
+    imageSrc,
+    messages,
+    imageAltText,
+    isHydratedForDerivedDisplaySet
+  }) => {
+    const isActive = activeDisplaySetInstanceUIDs.includes(displaySetInstanceUID);
+    return /*#__PURE__*/react.createElement(Thumbnail, {
+      key: displaySetInstanceUID,
+      displaySetInstanceUID: displaySetInstanceUID,
+      dragData: dragData,
+      description: description,
+      seriesNumber: seriesNumber,
+      numInstances: numInstances || 1,
+      countIcon: countIcon,
+      imageSrc: imageSrc,
+      imageAltText: imageAltText,
+      messages: messages,
+      isActive: isActive,
+      modality: modality,
+      viewPreset: componentType === 'thumbnailNoImage' ? 'list' : viewPreset,
+      thumbnailType: componentType,
+      onClick: () => onThumbnailClick(displaySetInstanceUID),
+      onDoubleClick: () => onThumbnailDoubleClick(displaySetInstanceUID),
+      isTracked: isTracked,
+      loadingProgress: loadingProgress,
+      onClickUntrack: () => onClickUntrack(displaySetInstanceUID),
+      isHydratedForDerivedDisplaySet: isHydratedForDerivedDisplaySet,
+      canReject: canReject,
+      onReject: onReject,
+      onThumbnailContextMenu: onThumbnailContextMenu
+    });
+  })));
+};
+ThumbnailList.propTypes = {
+  thumbnails: prop_types_default().arrayOf(prop_types_default().shape({
+    displaySetInstanceUID: (prop_types_default()).string.isRequired,
+    imageSrc: (prop_types_default()).string,
+    imageAltText: (prop_types_default()).string,
+    seriesDate: (prop_types_default()).string,
+    seriesNumber: (prop_types_default()).any,
+    numInstances: (prop_types_default()).number,
+    description: (prop_types_default()).string,
+    componentType: (prop_types_default()).any,
+    isTracked: (prop_types_default()).bool,
+    /**
+     * Data the thumbnail should expose to a receiving drop target. Use a matching
+     * `dragData.type` to identify which targets can receive this draggable item.
+     * If this is not set, drag-n-drop will be disabled for this thumbnail.
+     *
+     * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
+     */
+    dragData: prop_types_default().shape({
+      /** Must match the "type" a dropTarget expects */
+      type: (prop_types_default()).string.isRequired
+    })
+  })),
+  activeDisplaySetInstanceUIDs: prop_types_default().arrayOf((prop_types_default()).string),
+  onThumbnailClick: (prop_types_default()).func.isRequired,
+  onThumbnailDoubleClick: (prop_types_default()).func.isRequired,
+  onClickUntrack: (prop_types_default()).func.isRequired,
+  viewPreset: (prop_types_default()).string
+};
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/ThumbnailList/index.ts
+
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyItem/StudyItem.tsx
+
+
+
+
+
+const StudyItem = ({
+  date,
+  description,
+  numInstances,
+  modalities,
+  isActive,
+  onClick,
+  isExpanded,
+  displaySets,
+  activeDisplaySetInstanceUIDs,
+  onClickThumbnail,
+  onDoubleClickThumbnail,
+  onClickUntrack,
+  viewPreset = 'thumbnails',
+  onThumbnailContextMenu
+}) => {
+  return /*#__PURE__*/react.createElement(Accordion_Accordion, {
+    type: "single",
+    collapsible: true,
+    onClick: onClick,
+    onKeyDown: onClick,
+    role: "button",
+    tabIndex: 0,
+    defaultValue: isActive ? 'study-item' : undefined
+  }, /*#__PURE__*/react.createElement(Accordion_AccordionItem, {
+    value: "study-item"
+  }, /*#__PURE__*/react.createElement(Accordion_AccordionTrigger, {
+    className: classnames_default()('hover:bg-accent bg-popover rounded')
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex h-[40px] flex-1 flex-row"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex w-full flex-row items-center justify-between"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex flex-col items-start text-[13px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-white"
+  }, date), /*#__PURE__*/react.createElement("div", {
+    className: "text-muted-foreground h-[18px] max-w-[160px] overflow-hidden truncate whitespace-nowrap"
+  }, description)), /*#__PURE__*/react.createElement("div", {
+    className: "text-muted-foreground mr-2 flex flex-col items-end text-[12px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "max-w-[150px] overflow-hidden text-ellipsis"
+  }, modalities), /*#__PURE__*/react.createElement("div", null, numInstances))))), /*#__PURE__*/react.createElement(Accordion_AccordionContent, {
+    onClick: event => {
+      event.stopPropagation();
+    }
+  }, isExpanded && displaySets && /*#__PURE__*/react.createElement(ThumbnailList, {
+    thumbnails: displaySets,
+    activeDisplaySetInstanceUIDs: activeDisplaySetInstanceUIDs,
+    onThumbnailClick: onClickThumbnail,
+    onThumbnailDoubleClick: onDoubleClickThumbnail,
+    onClickUntrack: onClickUntrack,
+    viewPreset: viewPreset,
+    onThumbnailContextMenu: onThumbnailContextMenu
+  }))));
+};
+StudyItem.propTypes = {
+  date: (prop_types_default()).string.isRequired,
+  description: (prop_types_default()).string,
+  modalities: (prop_types_default()).string.isRequired,
+  numInstances: (prop_types_default()).number.isRequired,
+  trackedSeries: (prop_types_default()).number,
+  isActive: (prop_types_default()).bool,
+  onClick: (prop_types_default()).func.isRequired,
+  isExpanded: (prop_types_default()).bool,
+  displaySets: (prop_types_default()).array,
+  activeDisplaySetInstanceUIDs: (prop_types_default()).array,
+  onClickThumbnail: (prop_types_default()).func,
+  onDoubleClickThumbnail: (prop_types_default()).func,
+  onClickUntrack: (prop_types_default()).func,
+  viewPreset: (prop_types_default()).string
+};
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyItem/index.ts
+
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserSort/StudyBrowserSort.tsx
+
+
+function StudyBrowserSort({
+  servicesManager
+}) {
+  const {
+    customizationService,
+    displaySetService
+  } = servicesManager.services;
+  const {
+    values: sortFunctions
+  } = customizationService.get('studyBrowser.sortFunctions');
+  const [selectedSort, setSelectedSort] = (0,react.useState)(sortFunctions[0]);
+  const [sortDirection, setSortDirection] = (0,react.useState)('ascending');
+  const handleSortChange = event => {
+    const selectedSortFunction = sortFunctions.find(sort => sort.label === event.target.value);
+    setSelectedSort(selectedSortFunction);
+  };
+  const toggleSortDirection = e => {
+    e.stopPropagation();
+    setSortDirection(prevDirection => prevDirection === 'ascending' ? 'descending' : 'ascending');
+  };
+  (0,react.useEffect)(() => {
+    displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection);
+  }, [displaySetService, selectedSort, sortDirection]);
+  (0,react.useEffect)(() => {
+    const SubscriptionDisplaySetsChanged = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_CHANGED, () => {
+      displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection, true);
+    });
+    const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, () => {
+      displaySetService.sortDisplaySets(selectedSort.sortFunction, sortDirection, true);
+    });
+    return () => {
+      SubscriptionDisplaySetsChanged.unsubscribe();
+      SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
+    };
+  }, [displaySetService, selectedSort, sortDirection]);
+  return /*#__PURE__*/react.createElement("div", {
+    className: "border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-center rounded border bg-black p-2"
+  }, /*#__PURE__*/react.createElement("select", {
+    onChange: handleSortChange,
+    value: selectedSort.label,
+    onClick: e => e.stopPropagation(),
+    className: "w-full appearance-none bg-transparent text-sm leading-tight text-white shadow transition duration-300 focus:outline-none"
+  }, sortFunctions.map(sort => /*#__PURE__*/react.createElement("option", {
+    className: "appearance-none bg-black text-white",
+    value: sort.label,
+    key: sort.label
+  }, sort.label))), /*#__PURE__*/react.createElement("button", {
+    onClick: toggleSortDirection,
+    className: "flex items-center justify-center"
+  }, sortDirection === 'ascending' ? /*#__PURE__*/react.createElement(Icons_Icons.SortingAscending, {
+    className: "text-primary-main w-2"
+  }) : /*#__PURE__*/react.createElement(Icons_Icons.SortingDescending, {
+    className: "text-primary-main w-2"
+  })));
+}
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserSort/index.ts
+
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx
+
+function StudyBrowserViewOptions({
+  tabs,
+  onSelectTab,
+  activeTabName
+}) {
+  const handleTabChange = tabName => {
+    onSelectTab(tabName);
+  };
+  return /*#__PURE__*/react.createElement("div", {
+    className: "border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-center rounded border bg-black p-2"
+  }, /*#__PURE__*/react.createElement("select", {
+    onChange: e => handleTabChange(e.target.value),
+    value: activeTabName,
+    onClick: e => e.stopPropagation(),
+    className: "w-full appearance-none bg-transparent text-sm leading-tight text-white shadow transition duration-300 focus:outline-none"
+  }, tabs.map(tab => {
+    const {
+      name,
+      label,
+      studies
+    } = tab;
+    const isActive = activeTabName === name;
+    const isDisabled = !studies.length;
+    if (isDisabled) {
+      return null;
+    }
+    return /*#__PURE__*/react.createElement("option", {
+      className: `appearance-none bg-black text-white ${isActive ? 'font-bold' : ''}`,
+      value: name,
+      key: name
+    }, label);
+  })));
+}
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowserViewOptions/index.ts
+
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowser/StudyBrowser.tsx
+
+
+
+
+
+const getTrackedSeries = displaySets => {
+  let trackedSeries = 0;
+  displaySets.forEach(displaySet => {
+    if (displaySet.isTracked) {
+      trackedSeries++;
+    }
+  });
+  return trackedSeries;
+};
+const noop = () => {};
+const StudyBrowser = ({
+  tabs,
+  activeTabName,
+  expandedStudyInstanceUIDs,
+  onClickTab = noop,
+  onClickStudy = noop,
+  onClickThumbnail = noop,
+  onDoubleClickThumbnail = noop,
+  onClickUntrack = noop,
+  activeDisplaySetInstanceUIDs,
+  servicesManager,
+  showSettings,
+  viewPresets,
+  onThumbnailContextMenu
+}) => {
+  const getTabContent = () => {
+    const tabData = tabs.find(tab => tab.name === activeTabName);
+    const viewPreset = viewPresets ? viewPresets.filter(preset => preset.selected)[0]?.id : 'thumbnails';
+    return tabData.studies.map(({
+      studyInstanceUid,
+      date,
+      description,
+      numInstances,
+      modalities,
+      displaySets
+    }) => {
+      const isExpanded = expandedStudyInstanceUIDs.includes(studyInstanceUid);
+      return /*#__PURE__*/react.createElement(react.Fragment, {
+        key: studyInstanceUid
+      }, /*#__PURE__*/react.createElement(StudyItem, {
+        date: date,
+        description: description,
+        numInstances: numInstances,
+        isExpanded: isExpanded,
+        displaySets: displaySets,
+        modalities: modalities,
+        trackedSeries: getTrackedSeries(displaySets),
+        isActive: isExpanded,
+        onClick: () => {
+          onClickStudy(studyInstanceUid);
+        },
+        onClickThumbnail: onClickThumbnail,
+        onDoubleClickThumbnail: onDoubleClickThumbnail,
+        onClickUntrack: onClickUntrack,
+        activeDisplaySetInstanceUIDs: activeDisplaySetInstanceUIDs,
+        "data-cy": "thumbnail-list",
+        viewPreset: viewPreset,
+        onThumbnailContextMenu: onThumbnailContextMenu
+      }));
+    });
+  };
+  return /*#__PURE__*/react.createElement(react.Fragment, null, showSettings && /*#__PURE__*/react.createElement("div", {
+    className: "w-100 bg-bkg-low flex h-[48px] items-center justify-center gap-[10px] px-[8px] py-[10px]",
+    "data-cy": 'studyBrowser-panel'
+  }, /*#__PURE__*/react.createElement(StudyBrowserViewOptions, {
+    tabs: tabs,
+    onSelectTab: onClickTab,
+    activeTabName: activeTabName
+  }), /*#__PURE__*/react.createElement(StudyBrowserSort, {
+    servicesManager: servicesManager
+  })), /*#__PURE__*/react.createElement("div", {
+    className: "ohif-scrollbar invisible-scrollbar bg-bkg-low flex flex-1 flex-col gap-[4px] overflow-auto"
+  }, getTabContent()));
+};
+StudyBrowser.propTypes = {
+  onClickTab: (prop_types_default()).func.isRequired,
+  onClickStudy: (prop_types_default()).func,
+  onClickThumbnail: (prop_types_default()).func,
+  onDoubleClickThumbnail: (prop_types_default()).func,
+  onClickUntrack: (prop_types_default()).func,
+  activeTabName: (prop_types_default()).string.isRequired,
+  expandedStudyInstanceUIDs: prop_types_default().arrayOf((prop_types_default()).string).isRequired,
+  activeDisplaySetInstanceUIDs: prop_types_default().arrayOf((prop_types_default()).string),
+  tabs: prop_types_default().arrayOf(prop_types_default().shape({
+    name: (prop_types_default()).string.isRequired,
+    label: (prop_types_default()).string.isRequired,
+    studies: prop_types_default().arrayOf(prop_types_default().shape({
+      studyInstanceUid: (prop_types_default()).string.isRequired,
+      date: (prop_types_default()).string,
+      numInstances: (prop_types_default()).number,
+      modalities: (prop_types_default()).string,
+      description: (prop_types_default()).string,
+      displaySets: prop_types_default().arrayOf(prop_types_default().shape({
+        displaySetInstanceUID: (prop_types_default()).string.isRequired,
+        imageSrc: (prop_types_default()).string,
+        imageAltText: (prop_types_default()).string,
+        seriesDate: (prop_types_default()).string,
+        seriesNumber: (prop_types_default()).any,
+        numInstances: (prop_types_default()).number,
+        description: (prop_types_default()).string,
+        componentType: prop_types_default().oneOf(['thumbnail', 'thumbnailTracked', 'thumbnailNoImage']).isRequired,
+        isTracked: (prop_types_default()).bool,
+        /**
+         * Data the thumbnail should expose to a receiving drop target. Use a matching
+         * `dragData.type` to identify which targets can receive this draggable item.
+         * If this is not set, drag-n-drop will be disabled for this thumbnail.
+         *
+         * Ref: https://react-dnd.github.io/react-dnd/docs/api/use-drag#specification-object-members
+         */
+        dragData: prop_types_default().shape({
+          /** Must match the "type" a dropTarget expects */
+          type: (prop_types_default()).string.isRequired
+        })
+      }))
+    })).isRequired
+  }))
+};
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/StudyBrowser/index.ts
+
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/PanelSection/PanelSection.tsx
+
+
+
+const PanelSection = ({
+  title,
+  children,
+  actionIcons = [],
+  childrenClassName
+}) => {
+  const [areChildrenVisible, setChildrenVisible] = (0,react.useState)(true);
+  const handleHeaderClick = () => {
+    setChildrenVisible(!areChildrenVisible);
+  };
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "bg-secondary-dark flex h-7 cursor-pointer select-none items-center justify-between rounded-[4px] pl-2.5 text-[13px]",
+    onClick: handleHeaderClick
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-aqua-pale"
+  }, title), /*#__PURE__*/react.createElement("div", {
+    className: "flex items-center space-x-1"
+  }, actionIcons.map((icon, index) => {
+    const Icon = Icons_Icons[icon.name];
+    return /*#__PURE__*/react.createElement(Icon, {
+      key: index,
+      onClick: e => {
+        e.stopPropagation();
+        if (!areChildrenVisible) {
+          setChildrenVisible(true);
+        }
+        icon.onClick();
+      }
+    });
+  }), /*#__PURE__*/react.createElement("div", {
+    className: "grid h-[28px] w-[28px] place-items-center"
+  }, areChildrenVisible ? /*#__PURE__*/react.createElement(Icons_Icons.ChevronOpen, null) : /*#__PURE__*/react.createElement(Icons_Icons.ChevronClosed, null)))), areChildrenVisible && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "h-[2px] bg-black"
+  }), /*#__PURE__*/react.createElement("div", {
+    className: `bg-primary-dark flex flex-col overflow-hidden rounded-b-[4px] ${childrenClassName}`
+  }, children)));
+};
+PanelSection.propTypes = {
+  title: (prop_types_default()).string,
+  children: (prop_types_default()).node,
+  childrenClassName: (prop_types_default()).string,
+  actionIcons: prop_types_default().arrayOf(prop_types_default().shape({
+    name: (prop_types_default()).string,
+    onClick: (prop_types_default()).func
+  }))
+};
+
+;// CONCATENATED MODULE: ../../ui-next/src/components/PanelSection/index.ts
+
+
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var src = __webpack_require__(44657);
+;// CONCATENATED MODULE: ../../ui-next/src/components/Toolbox/ToolboxUI.tsx
+function ToolboxUI_extends() { return ToolboxUI_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; }, ToolboxUI_extends.apply(null, arguments); }
+
+
+// Migrate this file to the new UI eventually
+
+
+const ItemsPerRow = 4;
+function ToolboxUI_usePrevious(value) {
+  const ref = (0,react.useRef)();
+  (0,react.useEffect)(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+/**
+ * Just refactoring from the toolbox component to make it more readable
+ */
+function ToolboxUI(props) {
+  const {
+    toolbarButtons,
+    handleToolSelect,
+    toolboxState,
+    numRows,
+    servicesManager,
+    title,
+    useCollapsedPanel = true
+  } = props;
+  const {
+    activeTool,
+    toolOptions,
+    selectedEvent
+  } = toolboxState;
+  const activeToolOptions = toolOptions?.[activeTool];
+  const prevToolOptions = ToolboxUI_usePrevious(activeToolOptions);
+  (0,react.useEffect)(() => {
+    if (!activeToolOptions || Array.isArray(activeToolOptions) === false) {
+      return;
+    }
+    activeToolOptions.forEach((option, index) => {
+      const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
+      if (!prevOption || option.value !== prevOption.value || selectedEvent) {
+        const isOptionValid = option.condition ? option.condition({
+          options: activeToolOptions
+        }) : true;
+        if (isOptionValid) {
+          const {
+            commands
+          } = option;
+          commands(option.value);
+        }
+      }
+    });
+  }, [activeToolOptions, selectedEvent]);
+  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
+      }) => {
+        const idToUse = itemId || id;
+        handleToolSelect(idToUse);
+        props.onInteraction({
+          itemId,
+          commands
+        });
+      };
+      return /*#__PURE__*/react.createElement("div", {
+        key: id,
+        className: classnames_default()({
+          [toolClasses]: true,
+          'border-secondary-light flex flex-col items-center justify-center rounded-md border': true
+        })
+      }, /*#__PURE__*/react.createElement("div", {
+        className: "flex rounded-md bg-black"
+      }, /*#__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(src/* ToolSettings */.TM, {
+      options: activeToolOptions
+    })));
+  };
+  return /*#__PURE__*/react.createElement(react.Fragment, null, useCollapsedPanel ? /*#__PURE__*/react.createElement(PanelSection, {
+    childrenClassName: "flex-shrink-0",
+    title: title
+  }, render()) : render());
+}
+
+// EXTERNAL MODULE: ../../core/src/index.ts + 74 modules
+var core_src = __webpack_require__(10541);
+;// CONCATENATED MODULE: ../../ui-next/src/components/Toolbox/Toolbox.tsx
+function Toolbox_extends() { return Toolbox_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; }, Toolbox_extends.apply(null, arguments); }
+
+
+
+// Migrate this file to the new UI eventually
+
+/**
+ * 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
+  } = (0,src/* useToolbox */.Z1)(buttonSectionId);
+  const {
+    onInteraction,
+    toolbarButtons
+  } = (0,core_src/* useToolbar */.tR)({
+    servicesManager,
+    buttonSection: buttonSectionId
+  });
+  const prevButtonIdsRef = (0,react.useRef)('');
+  const prevToolboxStateRef = (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}`;
+    }));
+    const currentToolBoxStateStr = JSON.stringify(Object.keys(toolboxState.toolOptions).map(tool => {
+      const options = toolboxState.toolOptions[tool];
+      if (Array.isArray(options)) {
+        return options?.map(option => `${option.id}-${option.value}`);
+      }
+    }));
+    if (prevButtonIdsRef.current === currentButtonIdsStr && prevToolboxStateRef.current === currentToolBoxStateStr) {
+      return;
+    }
+    prevButtonIdsRef.current = currentButtonIdsStr;
+    prevToolboxStateRef.current = currentToolBoxStateStr;
+    const initializeOptionsWithEnhancements = toolbarButtons.reduce((accumulator, toolbarButton) => {
+      const {
+        id: buttonId,
+        componentProps
+      } = toolbarButton;
+      const createEnhancedOptions = (options, parentId) => {
+        const optionsToUse = Array.isArray(options) ? options : [options];
+        return optionsToUse.map(option => {
+          if (typeof option.optionComponent === 'function') {
+            return option;
+          }
+          const value = toolboxState.toolOptions?.[parentId]?.find(prop => prop.id === option.id)?.value ?? option.value;
+          const updatedOptions = toolboxState.toolOptions?.[parentId];
+          return {
+            ...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';
+                const isFunction = typeof command === 'function';
+                if (isString) {
+                  commandsManager.run(command, {
+                    value
+                  });
+                } else if (isObject) {
+                  commandsManager.run({
+                    ...command,
+                    commandOptions: {
+                      ...command.commandOptions,
+                      ...option,
+                      value,
+                      options: updatedOptions
+                    }
+                  });
+                } else if (isFunction) {
+                  command({
+                    value,
+                    commandsManager,
+                    servicesManager,
+                    options: updatedOptions
+                  });
+                }
+              });
+            }
+          };
+        });
+      };
+      const {
+        items,
+        options
+      } = componentProps;
+      if (items?.length) {
+        items.forEach(({
+          options,
+          id
+        }) => {
+          accumulator[id] = createEnhancedOptions(options, id);
+        });
+      } else if (options?.length) {
+        accumulator[buttonId] = createEnhancedOptions(options, buttonId);
+      } else if (options?.optionComponent) {
+        accumulator[buttonId] = options.optionComponent;
+      }
+      return accumulator;
+    }, {});
+    api.initializeToolOptions(initializeOptionsWithEnhancements);
+  }, [toolbarButtons, api, toolboxState, commandsManager, servicesManager]);
+  const handleToolOptionChange = (toolName, optionName, newValue) => {
+    api.handleToolOptionChange(toolName, optionName, newValue);
+  };
+  (0,react.useEffect)(() => {
+    return () => {
+      api.handleToolSelect(null);
+    };
+  }, []);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ToolboxUI, Toolbox_extends({}, props, {
+    title: title,
+    toolbarButtons: toolbarButtons,
+    toolboxState: toolboxState,
+    handleToolSelect: id => api.handleToolSelect(id),
+    handleToolOptionChange: handleToolOptionChange,
+    onInteraction: onInteraction
+  })));
+}
+/* harmony default export */ const Toolbox_Toolbox = (Toolbox);
+;// CONCATENATED MODULE: ../../ui-next/src/components/Toolbox/index.ts
+
+
+
 // EXTERNAL MODULE: ../../../node_modules/react-shepherd/dist/index.js
 var dist = __webpack_require__(5302);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
@@ -409704,7 +409760,7 @@ function __disposeResources(env) {
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + ({"572":"polySeg","3054":"histogram-worker","3584":"suv-peak-worker"}[chunkId] || chunkId) + ".bundle." + {"44":"2434ac081ec624827ce7","140":"834e192f4fa1182809e3","445":"ada0ef1412342d5599cb","572":"e73d9d124f22e40be8a9","612":"07fb99d653db74839730","914":"9372fff6a4624c35d259","1156":"b35e7bc9ce99d59a6512","1471":"68b4d7e296a8994404d3","1597":"3a5983064adc10301b95","1617":"2169d929628279d83b28","1727":"0e5ce8831ef8bb34899c","1836":"0cb6c000321d0863c41d","1920":"99de8331dcd10ede537d","2211":"ec304bdde7a72395b0db","2327":"a674773cd95aa37b90e6","2392":"9ce41d170e7d7d36ca79","3054":"dba1191f438be8396c73","3194":"e5328296fe69ff83bd73","3236":"5cb72eb058e14d5d266e","3342":"0c3edb9855a615ef6a6e","3404":"c1aea18e16001cf20244","3584":"541fa8cf744041222c7e","3675":"28226f3c153b08059c5d","3722":"5e8f70021eefb2fe1508","3726":"1eb58097501c18d23329","4012":"454c55e01a595766081f","4129":"f222c5facab0be65bac6","4202":"1127627b7cdbb7ed1aaa","4444":"6c7e3ba769aa56aba140","5323":"3389b9441d1e1d7d7293","5350":"c86d16b39e3a82940999","6552":"0bbd4979f69f6f4d1556","6835":"d3700fdda3df47c5f085","7370":"7556283dc08d0c902b54","7516":"575cbef44055bfa6f9cf","7778":"53b95f4c85063cc0353a","7853":"973b23f4f25a0821872e","8218":"15d6da2c5f9c8685ae9f","8324":"152345761c3b0d428590","8362":"3e2e255355b2ee1beec7","8560":"929add0d5a4b24d234df","8792":"e96d57d1d5854c14ce4c","9014":"9f7d744bdc166a58874a","9404":"bcf5540131619fbd939a","9455":"4c6698fea09feff95f9f","9806":"7cf51eda77977eee4ee6"}[chunkId] + ".js";
+/******/ 			return "" + ({"572":"polySeg","3054":"histogram-worker","3584":"suv-peak-worker"}[chunkId] || chunkId) + ".bundle." + {"44":"248223cbd5284282963a","140":"7a5de4db1e8e78d53244","445":"ada0ef1412342d5599cb","572":"e73d9d124f22e40be8a9","612":"07fb99d653db74839730","914":"9372fff6a4624c35d259","1156":"b37b2a8d6dba5d35ef64","1471":"23ed44fce3b02968fa7b","1597":"ad76fdeb3061bcfa1681","1617":"2169d929628279d83b28","1727":"0e5ce8831ef8bb34899c","1836":"0cb6c000321d0863c41d","1920":"2e0f60f6b04c5b781064","2211":"a3eb113173d861685ea1","2327":"c60b7cf05680af5b70c1","2392":"c09eef47c2a8c6674225","3054":"dba1191f438be8396c73","3194":"052149a399b3ecec92c8","3236":"5cb72eb058e14d5d266e","3342":"0c3edb9855a615ef6a6e","3404":"c1aea18e16001cf20244","3584":"541fa8cf744041222c7e","3675":"bbe5f470f9c04976b51b","3722":"5e8f70021eefb2fe1508","3726":"1eb58097501c18d23329","4012":"e2d71adefdf700d9f3b1","4129":"2d2f56d83cc84af8fb4e","4202":"c8ddc4d76d963bc3176f","4444":"363fa1b70c8c1ef6745e","5323":"c1fe781cca10b6ace921","5350":"72ded9946d8ebecbb318","6552":"b595a3327cbdbe9245c8","6835":"d3700fdda3df47c5f085","7370":"f8725a8dc428f9e237b4","7516":"4a9c2a92ba1b593defaf","7778":"53b95f4c85063cc0353a","7853":"e56257f620547271b4dd","8218":"755f36e5b1663e48f304","8324":"ae1b5a7a34a85d846285","8362":"3e2e255355b2ee1beec7","8560":"929add0d5a4b24d234df","8792":"6ecd3510022078878c4b","9014":"ac341275cc94cdceef4b","9404":"829d1ce23cd52e6dfc89","9455":"4c6698fea09feff95f9f","9806":"a7c532f7be2473e93737"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/