@aics/vole-app 3.3.0 → 3.3.1

package/LICENSE

@@ -1,33 +1,29 @@
-Allen Institute Software License – This software license is the 2-clause BSD 
-license plus clause a third clause that prohibits redistribution and use for 
-commercial purposes without further permission. 
+BSD 3-Clause License
 
-Copyright © 2020. Allen Institute.  All rights reserved.
+Copyright (c) 2017-2026, Allen Institute
+All rights reserved.
 
-Redistribution and use in source and binary forms, with or without 
+Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:
 
-1. Redistributions of source code must retain the above copyright notice, this 
-list of conditions and the following disclaimer.
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
 
-2. Redistributions in binary form must reproduce the above copyright notice, 
-this list of conditions and the following disclaimer in the documentation 
-and/or other materials provided with the distribution.
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
 
-3. Redistributions and use for commercial purposes are not permitted without 
-the Allen Institute’s written permission. For purposes of this license, 
-commercial purposes are the incorporation of the Allen Institute's software 
-into anything for which you will charge fees or other compensation or use of 
-the software to perform a commercial service for a third party. Contact 
-terms@alleninstitute.org for commercial licensing opportunities.
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
 
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/es/aics-image-viewer/components/App/index.js

@@ -54,7 +54,8 @@ var defaultVisibleControls = {
   resetCameraButton: true,
   showAxesButton: true,
   showBoundingBoxButton: true,
-  metadataViewer: true
+  metadataViewer: true,
+  scaleLevelControls: true
 };
 var defaultProps = {
   // rawData has a "dtype" which is expected to be "uint8", a "shape":[c,z,y,x] and a "buffer" which is a DataView
@@ -151,8 +152,8 @@ var App = function App(props) {
   var showError = (_props$showError = props.showError) !== null && _props$showError !== void 0 ? _props$showError : _showError;
   useEffect(function () {
     // Get notifications of loading errors which occur after the initial load, e.g. on time change or new channel load
-    view3d.setLoadErrorHandler(function (_vol, e) {
-      return showError(e);
+    view3d.setLoadErrorHandler(function (vol, e) {
+      return showError(e, vol);
     });
     return function () {
       return view3d.setLoadErrorHandler(undefined);
@@ -323,17 +324,17 @@ var App = function App(props) {
 
     // save the channel's new range for remapping next time
     channelRangesRef.current[channelIndex] = [thisChannel.rawMin, thisChannel.rawMax];
-    view3d.updateLuts(image);
+
+    // Note: updateLuts and updateActiveChannels are not called here because the
+    // channelVersion bump (via onChannelDataLoaded) will trigger ChannelUpdater
+    // effects that apply LUT/color settings and call updateLuts with the final state.
     view3d.onVolumeData(image, [channelIndex]);
     if (image.channelNames[channelIndex] === maskChannelName) {
       view3d.setVolumeChannelAsMask(image, channelIndex);
     }
-    if (image.isLoaded()) {
-      view3d.updateActiveChannels(image);
-    }
   }, [view3d, changeChannelSetting, maskChannelName, props.viewerChannelSettings]);
-  var onError = useCallback(function (error) {
-    showError(error);
+  var onError = useCallback(function (error, image) {
+    showError(error, image);
     onImageTitleChange === null || onImageTitleChange === void 0 || onImageTitleChange(undefined);
   }, [showError, onImageTitleChange]);
   var volume = useVolume(scenes, {

package/es/aics-image-viewer/components/ChannelsWidget.js

@@ -139,14 +139,14 @@ var ChannelsWidget = function ChannelsWidget(props) {
   };
   var renderChannelRow = function renderChannelRow(channelIndex) {
     var channelName = channelNames[channelIndex];
-    return channelName ? /*#__PURE__*/React.createElement(ChannelsWidgetRow, {
+    return /*#__PURE__*/React.createElement(ChannelsWidgetRow, {
       key: channelIndex,
       index: channelIndex,
       channelDataForChannel: channelDataChannels[channelIndex],
       name: getDisplayName(channelName, channelIndex, viewerChannelSettings),
       onColorChangeComplete: props.onColorChangeComplete,
       saveIsosurface: props.saveIsosurface
-    }) : null;
+    });
   };
   var rows = channelDataChannels && Object.entries(channelGroupedByType).filter(function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),

package/es/aics-image-viewer/components/ControlPanel/index.js

@@ -1,4 +1,3 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -38,10 +37,11 @@ function ControlPanel(props) {
   var resetToDefaultViewerState = useViewerState(select("resetToDefaultViewerState"));
   var singleChannelMode = useViewerState(select("singleChannelMode"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
-  var controlPanelContainerRef = React.useRef(null);
-  var getDropdownContainer = controlPanelContainerRef.current ? function () {
-    return controlPanelContainerRef.current;
-  } : undefined;
+  var containerRef = React.useRef(null);
+  var getDropdownContainer = function getDropdownContainer() {
+    var _containerRef$current;
+    return (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 ? _containerRef$current : document.body;
+  };
   var viewerChannelSettings = props.viewerChannelSettings,
     visibleControls = props.visibleControls,
     hasImage = props.hasImage;
@@ -98,12 +98,11 @@ function ControlPanel(props) {
     }, "Single channel mode"))));
   };
   var renderTab = function renderTab(thisTab, icon) {
-    return /*#__PURE__*/React.createElement(Tooltip, _extends({
+    return /*#__PURE__*/React.createElement(Tooltip, {
       title: ControlTabNames[thisTab],
       placement: "right"
-    }, !props.collapsed && {
-      open: false
-    }), /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Button, {
+      "aria-label": ControlTabNames[thisTab],
       className: tab === thisTab ? "ant-btn-icon-only btn-tabactive" : "ant-btn-icon-only",
       onClick: function onClick() {
         return setTab(thisTab);
@@ -151,22 +150,27 @@ function ControlPanel(props) {
       onClick: resetToDefaultViewerState
     }, "Clear all settings"))));
   };
+  var collapseLabel = props.collapsed ? "Show panel" : "Hide panel";
   return /*#__PURE__*/React.createElement("div", {
     className: "control-panel-col-container",
-    ref: controlPanelContainerRef
+    ref: containerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "control-panel-tab-col",
     style: {
       flex: "0 0 50px"
     }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: collapseLabel,
+    placement: "right"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": collapseLabel,
     className: "ant-btn-icon-only btn-collapse" + (props.collapsed ? " btn-collapse-collapsed" : ""),
     onClick: function onClick() {
       return props.setCollapsed(!props.collapsed);
     }
   }, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "closePanel"
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "tab-divider"
   }), renderTab(ControlTab.Channels, /*#__PURE__*/React.createElement(ViewerIcon, {
     type: "channels"

package/es/aics-image-viewer/components/ControlPanel/styles.css

@@ -20,16 +20,16 @@
     }
 
 .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]).btn-tabactive{
-          color:var(--color-button-icon-activated-text);
-          background-color:var(--color-button-icon-activated-bg);
-          border-color:var(--color-button-icon-activated-outline);
+          color:var(--color-button-icon-active-text);
+          background-color:var(--color-button-icon-active-bg);
+          border-color:var(--color-button-icon-active-outline);
         }
 
 .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]):hover,
         .control-panel-col-container .control-panel-tab-col .ant-btn:not([disabled]):focus-visible{
-          color:var(--color-button-icon-activated-text);
+          color:var(--color-button-icon-active-text);
           background-color:var(--color-button-primary-hover-bg);
-          border-color:var(--color-button-icon-activated-outline);
+          border-color:var(--color-button-icon-active-outline);
         }
 
 .control-panel-col-container .control-panel-tab-col .btn-collapse svg{

package/es/aics-image-viewer/components/ErrorAlert/index.js

@@ -13,7 +13,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { VolumeLoadErrorType } from "@aics/vole-core";
-import { RightOutlined } from "@ant-design/icons";
+import { LeftOutlined, RightOutlined, WarningOutlined } from "@ant-design/icons";
 import { Alert, Button } from "antd";
 import React from "react";
 import { useConstructor } from "../../shared/utils/hooks";
@@ -40,115 +40,142 @@ var getErrorTitle = function getErrorTitle(error) {
   var _error$toString;
   return error instanceof Error && ((_error$toString = error.toString) === null || _error$toString === void 0 ? void 0 : _error$toString.call(error)) || typeof error === "string" && error || _typeof(error) === "object" && error !== null && error.title || "Unknown error";
 };
-var getErrorDescription = function getErrorDescription(error) {
+var getErrorDescription = function getErrorDescription(_ref2) {
   var _ERROR_TYPE_DESCRIPTI2;
+  var error = _ref2.error,
+    dims = _ref2.dims;
   var type = error.type;
   if (!type) {
     return _typeof(error) === "object" && error !== null && error.description || UNKNOWN_ERROR_DESCRIPTION;
   }
   if (type === VolumeLoadErrorType.TOO_LARGE && useViewerState.getState().useExactScaleLevel) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer cannot load this resolution level within memory limits. Try again with a smaller resolution level.");
+    var dimsDetail = "";
+    if (Array.isArray(dims)) {
+      var _dims = _slicedToArray(dims, 5),
+        _t = _dims[0],
+        _c = _dims[1],
+        z = _dims[2],
+        y = _dims[3],
+        x = _dims[4];
+      dimsDetail = " (".concat(x, " x ").concat(y, " x ").concat(z, ")");
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, "The viewer cannot load this resolution level", dimsDetail, " within memory limits. Try again with a smaller resolution level.");
   }
   return (_ERROR_TYPE_DESCRIPTI2 = ERROR_TYPE_DESCRIPTIONS[type]) !== null && _ERROR_TYPE_DESCRIPTI2 !== void 0 ? _ERROR_TYPE_DESCRIPTI2 : UNKNOWN_ERROR_DESCRIPTION;
 };
-var ErrorAlert = function ErrorAlert(_ref2) {
-  var errors = _ref2.errors,
-    _ref2$firstErrorCount = _ref2.firstErrorCount,
-    firstErrorCount = _ref2$firstErrorCount === void 0 ? 0 : _ref2$firstErrorCount,
-    _afterClose = _ref2.afterClose,
-    onSkipError = _ref2.onSkipError;
+var ErrorAlert = function ErrorAlert(_ref3) {
+  var errors = _ref3.errors,
+    afterClose = _ref3.afterClose;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     showDetails = _React$useState2[0],
     setShowDetails = _React$useState2[1];
   var _React$useState3 = React.useState(0),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    errorsSeenCount = _React$useState4[0],
-    setErrorsSeenCount = _React$useState4[1];
-  var error = Array.isArray(errors) ? errors[0] : errors;
+    errorIndex = _React$useState4[0],
+    setErrorIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    flash = _React$useState6[0],
+    setFlash = _React$useState6[1];
+  var error = errors[errorIndex];
   var infoStyle = {
     display: showDetails ? undefined : "none"
   };
-  var errorMessage = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  React.useEffect(function () {
+    setErrorIndex(errors.length - 1);
+    setFlash(errors.length > 1);
+    window.setTimeout(function () {
+      return setFlash(false);
+    }, 100);
+  }, [errors]);
+  var cause = error.error.cause;
+  var msg = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "error-title"
-  }, getErrorTitle(error) + (firstErrorCount > 1 ? " (".concat(firstErrorCount, ")") : ""), " ", /*#__PURE__*/React.createElement(Button, {
+  }, getErrorTitle(error.error) + (error.count > 1 ? " (".concat(error.count, ")") : ""), " ", /*#__PURE__*/React.createElement(Button, {
     type: "text",
     onClick: function onClick() {
       return setShowDetails(!showDetails);
     }
   }, showDetails ? "Show less info" : "Show more info")), /*#__PURE__*/React.createElement("div", {
     style: infoStyle
-  }, getErrorDescription(error)), error.cause !== undefined && /*#__PURE__*/React.createElement("div", {
+  }, getErrorDescription(error)), cause !== undefined && /*#__PURE__*/React.createElement("div", {
     className: "error-cause",
     style: infoStyle
-  }, "Caused by ", getErrorTitle(error.cause)));
-  var skipErrorButton = Array.isArray(errors) && errors.length > 1 && /*#__PURE__*/React.createElement(Button, {
-    type: "text",
-    onClick: function onClick() {
-      setErrorsSeenCount(function (count) {
-        return count + 1;
-      });
-      onSkipError === null || onSkipError === void 0 || onSkipError();
+  }, "Caused by ", getErrorTitle(cause)));
+  var pageButton = undefined;
+  if (errors.length > 1) {
+    if (errorIndex === errors.length - 1) {
+      pageButton = /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return setErrorIndex(function (i) {
+            return i - 1;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(LeftOutlined, null), " ", errors.length - 1, " previous error", errors.length > 2 ? "s" : "");
+    } else {
+      pageButton = /*#__PURE__*/React.createElement(React.Fragment, null, errorIndex > 0 && /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return setErrorIndex(function (i) {
+            return i - 1;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(LeftOutlined, null)), "Error ", errorIndex + 1, " of ", errors.length, /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        onClick: function onClick() {
+          return setErrorIndex(function (i) {
+            return i + 1;
+          });
+        }
+      }, /*#__PURE__*/React.createElement(RightOutlined, null)));
     }
-  }, "Error ", errorsSeenCount + 1, " of ", errors.length + errorsSeenCount, " ", /*#__PURE__*/React.createElement(RightOutlined, null));
+  }
+  var alertClass = flash ? "load-error-alert error-flash" : "load-error-alert";
   return /*#__PURE__*/React.createElement(Alert, {
     showIcon: true,
-    type: "error",
-    className: "load-error-alert",
-    message: errorMessage,
     closable: true,
-    afterClose: function afterClose() {
-      setErrorsSeenCount(0);
-      _afterClose === null || _afterClose === void 0 || _afterClose();
-    },
-    action: skipErrorButton
+    type: "error",
+    icon: /*#__PURE__*/React.createElement(WarningOutlined, null),
+    className: alertClass,
+    message: msg,
+    afterClose: afterClose,
+    action: pageButton
   });
 };
 export var useErrorAlert = function useErrorAlert() {
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    errorList = _React$useState6[0],
-    setErrorList = _React$useState6[1];
+  var _React$useState7 = React.useState([]),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    errors = _React$useState8[0],
+    setErrors = _React$useState8[1];
   // Keep track of which errors have been seen and how many times
   var seenErrors = useConstructor(function () {
     return new Map();
   });
-  var _React$useState7 = React.useState([]),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    errorCounts = _React$useState8[0],
-    setErrorCounts = _React$useState8[1];
-  var addError = React.useCallback(function (error) {
+  var addError = React.useCallback(function (error, image) {
     var _seenErrors$get;
     var errorTitle = getErrorTitle(error);
     console.error(error instanceof Error ? error : errorTitle);
-    var errorSeenCount = ((_seenErrors$get = seenErrors.get(errorTitle)) !== null && _seenErrors$get !== void 0 ? _seenErrors$get : 0) + 1;
-    setErrorList(function (prev) {
-      return [].concat(_toConsumableArray(prev), [error]);
+    var count = ((_seenErrors$get = seenErrors.get(errorTitle)) !== null && _seenErrors$get !== void 0 ? _seenErrors$get : 0) + 1;
+    var imageInfo = image === null || image === void 0 ? void 0 : image.imageInfo.imageInfo;
+    var dims = imageInfo && imageInfo.multiscaleLevelDims[imageInfo.multiscaleLevel].shape;
+    setErrors(function (prev) {
+      return [].concat(_toConsumableArray(prev), [{
+        error: error,
+        count: count,
+        dims: dims
+      }]);
     });
-    setErrorCounts(function (prev) {
-      return [].concat(_toConsumableArray(prev), [errorSeenCount]);
-    });
-    seenErrors.set(errorTitle, errorSeenCount);
+    seenErrors.set(errorTitle, count);
   }, [seenErrors]);
-  var onSkipError = React.useCallback(function () {
-    setErrorList(function (prev) {
-      return prev.slice(1);
-    });
-    setErrorCounts(function (prev) {
-      return prev.slice(1);
-    });
-  }, []);
   var afterClose = React.useCallback(function () {
-    setErrorList([]);
-    setErrorCounts([]);
+    return setErrors([]);
   }, []);
-  var errCount = errorCounts[0];
-  var alertComponent = errorList.length > 0 && /*#__PURE__*/React.createElement(ErrorAlert, {
-    errors: errorList,
-    firstErrorCount: errCount,
-    onSkipError: onSkipError,
+  var alertNode = errors.length > 0 && /*#__PURE__*/React.createElement(ErrorAlert, {
+    errors: errors,
     afterClose: afterClose
   });
-  return [alertComponent, addError];
+  return [alertNode, addError];
 };
 export default ErrorAlert;

package/es/aics-image-viewer/components/ErrorAlert/styles.css

@@ -5,24 +5,53 @@
   width:40vw;
   align-items:start;
   z-index:5000;
-  border-color:#dc4446;
+  border-color:var(--color-text-error);
   padding:12px 30px;
   color:var(--color-text-section);
 }
+
+  .load-error-alert.error-flash{
+    background-color:var(--color-text-error);
+  }
+
   .load-error-alert .ant-alert-icon,
   .load-error-alert .ant-alert-close-icon,
   .load-error-alert .ant-alert-message div{
     min-height:24px;
   }
-  .load-error-alert .ant-btn-text{
+
+  .load-error-alert .ant-alert-close-icon{
+    margin-inline-start:14px;
+  }
+
+  .load-error-alert .ant-alert-action{
+    display:inline-flex;
+    align-items:center;
+    gap:4px;
+  }
+
+  .load-error-alert .ant-alert-action > button{
+      gap:4px;
+      border:none !important;
+    }
+
+  .load-error-alert .ant-btn-text,
+  .load-error-alert .ant-alert-action{
     color:var(--color-text-link);
   }
+
   .load-error-alert .ant-btn-text:hover{
-      color:#25affe !important;
-    }
+    color:#25affe !important;
+  }
+
+  .load-error-alert .anticon{
+    font-size:21px;
+  }
+
   .load-error-alert .ant-alert-message > div.error-title{
       font-weight:600;
     }
+
   .load-error-alert .ant-alert-message > div.error-cause{
       font-style:italic;
       color:var(--color-text-body);

package/es/aics-image-viewer/components/StyleProvider/index.js

@@ -1,8 +1,8 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 import { theme as AntTheme, ConfigProvider } from "antd";
 import React from "react";
-import styled, { css } from "styled-components";
+import styled, { createGlobalStyle, css } from "styled-components";
 var palette = {
   black: "#000000",
   white: "#ffffff",
@@ -18,7 +18,7 @@ var palette = {
   darkPurple: "#7e46d4",
   veryDarkPurple: "#5f369f",
   veryLtPurple: "#e7e4f2",
-  brightRed: "#ff4d4d",
+  brightRed: "#dc4446",
   brightYellow: "#e39b0d",
   brightGreen: "#61d900",
   veryBrightGreen: "#61ff00",
@@ -79,10 +79,10 @@ var theme = {
         outline: palette.ltGrey,
         hoverOutline: palette.ltPurple,
         hoverText: palette.ltPurple,
-        activeOutline: palette.medPurple,
-        activatedText: palette.white,
-        activatedBg: palette.medDarkGrey,
-        activatedOutline: palette.purpleGrey,
+        activeText: palette.white,
+        activeBg: palette.medDarkGrey,
+        activeOutline: palette.purpleGrey,
+        disabledOutline: palette.medGrey,
         disabledText: palette.medGrey
       }
     },
@@ -136,7 +136,7 @@ var theme = {
       }
     },
     tooltip: {
-      bg: palette.black
+      bg: palette.medDarkGrey
     },
     modal: {
       maskBg: "#000000cc",
@@ -150,10 +150,11 @@ var theme = {
   }
 };
 /** Makes theme styling available to child components via CSS variables. */
-var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  & *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-bg);\n      color: var(--color-button-tertiary-hover-text);\n    }\n\n    &:active:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-active-outline);\n      color: var(--color-button-tertiary-active-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  & .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  & .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  & .ant-select-dropdown,\n  & .ant-dropdown-menu,\n  & .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  & .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  & .ant-dropdown-menu,\n  & .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    & .ant-dropdown-menu-item,\n    & .ant-select-item {\n      border-radius: 0;\n    }\n  }\n"])), function (_ref) {
+var CssProvider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  ", "\n\n  h1, h2, h3, h4, p {\n    font-family: var(--font-family);\n  }\n\n  h1 {\n    color: var(--color-text-header);\n    font-size: 28px;\n    font-weight: 400;\n  }\n\n  h2 {\n    color: var(--color-text-section);\n    font-size: 19px;\n    font-weight: 400;\n  }\n\n  h3 {\n    color: var(--color-text-header);\n    font-size: 16px;\n    font-weight: 600;\n  }\n\n  h4 {\n    color: var(--color-text-header);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  p {\n    color: var(--color-text-body);\n    font-size: 14px;\n    font-weight: 400;\n  }\n\n  a {\n    color: var(--color-text-link);\n  }\n\n  *::selection {\n    background-color: var(--color-text-selection-bg);\n    color: var(--color-text-selection-text);\n  }\n\n  /** TODO: Go through these styles and see if we can use Ant ConfigProvider for them instead. */\n  .ant-btn-link,\n  .ant-btn-text,\n  .ant-btn-primary,\n  .ant-btn-icon-only {\n    box-shadow: none;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border-color: var(--color-button-primary-hover-bg);\n      color: var(--color-button-primary-text);\n      outline: none;\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--color-button-primary-hover-bg);\n      border: 1px solid var(--color-button-primary-active-outline);\n      color: var(--color-button-primary-text);\n    }\n  }\n\n  /* Let us use buttons with type=\"text\" as purely semantic containers - don't bring any styling! */\n  .ant-btn-text {\n    width: unset;\n    height: unset;\n    padding: unset;\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: unset;\n      border-color: transparent;\n    }\n  }\n\n  .ant-btn-icon-only:disabled {\n    color: var(--color-button-icon-disabled-text);\n  }\n\n  .ant-btn-link:not(:disabled) {\n    // Change from default blue link text\n    color: var(--color-button-link-text);\n  }\n\n  /**\n   * Tertiary style buttons. Grey outline by default, turns to light\n   * purple outline on hover.\n   */\n  .ant-btn-default:not(.ant-btn-icon-only) {\n    background-color: var(--color-button-tertiary-bg);\n    color: var(--color-button-tertiary-text);\n    border-color: var(--color-button-tertiary-outline);\n\n    &:hover:not(:disabled),\n    &:focus-visible:not(:disabled) {\n      background-color: transparent;\n      border-color: var(--color-button-tertiary-hover-outline);\n      color: var(--color-button-tertiary-hover-text);\n    }\n  }\n\n  // Overrides for checkbox styling\n  .ant-checkbox-input {\n    &:hover,\n    &:focus-visible {\n      border: 1px solid white;\n    }\n  }\n\n  .ant-checkbox.ant-checkbox-checked {\n    background-color: var(--color-checkbox-bg);\n  }\n\n  .ant-checkbox-inner {\n    background-color: transparent !important;\n  }\n\n  // Add outlines to modals and dropdowns\n  .ant-select-dropdown,\n  .ant-dropdown-menu,\n  .ant-modal-content {\n    border: 1px solid var(--color-modal-border);\n  }\n\n  // Force active/hovered text to be white instead of grey for better contrast\n  .ant-dropdown-menu-item-active {\n    color: var(--color-menu-hover-text);\n  }\n\n  // Remove padding in dropdown menus and make items reactangular + flush with the edge\n  .ant-dropdown-menu,\n  .ant-select-dropdown {\n    padding: 0;\n    overflow: hidden;\n\n    .ant-dropdown-menu-item,\n    .ant-select-item:not(.ant-select-item-option-disabled) {\n      border-radius: 0;\n      color: var(--color-button-icon-active-text);\n    }\n  }\n\n  .ant-select {\n    &.ant-select-disabled .ant-select-selector {\n      border-color: var(--color-button-icon-disabled-outline);\n    }\n\n    .ant-select-arrow {\n      transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n    }\n\n    /* Control response to hover + active menu */\n    &:hover:not(.ant-select-disabled),\n    &:focus-visible:not(.ant-select-disabled),\n    &.ant-select.ant-select-open {\n      .ant-select-selector,\n      .ant-select-arrow,\n      .ant-select-selection-item {\n        color: var(--color-button-tertiary-hover-text);\n        outline-color: var(--color-button-tertiary-hover-outline);\n      }\n    }\n  }\n\n  // Toolbar has special colors for radio buttons and will use these variables to apply them\n  --color-button-radio-hover-outline: var(--color-button-tertiary-hover-outline);\n  --color-button-radio-hover-text: var(--color-button-tertiary-hover-text);\n\n  .ant-radio-button-wrapper {\n    &::before {\n      content: none;\n    }\n\n    &.ant-radio-button-wrapper-checked {\n      color: var(--color-button-icon-active-text);\n\n      &:not(:first-child) {\n        box-shadow: -1px 0px 0px 0px var(--color-button-tertiary-active-outline);\n      }\n    }\n\n    &:hover,\n    &:has(:focus-visible) {\n      color: var(--color-button-radio-hover-text);\n      border-color: var(--color-button-radio-hover-outline);\n      outline: none;\n      z-index: 2;\n\n      &:not(:first-child) {\n        box-shadow: -1px 0px 0px 0px var(--color-button-radio-hover-outline);\n      }\n    }\n  }\n\n"])), function (_ref) {
   var $theme = _ref.$theme;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-activated-text: ", ";\n      --color-button-icon-activated-bg: ", ";\n      --color-button-icon-activated-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n      --color-controlpanel-isovalue-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-alert-warning-text: ", ";\n      --color-alert-warning-bg: ", ";\n      --color-alert-info-text: ", ";\n      --color-alert-info-bg: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activatedText, $theme.colors.button.tertiary.activatedBg, $theme.colors.button.tertiary.activatedOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.controlPanel.isovalueSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.alert.warning.text, $theme.colors.alert.warning.bg, $theme.colors.alert.info.text, $theme.colors.alert.info.bg, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      /* Component and color variables. */\n      // TODO: Fix inconsistent use of border vs. outline\n      // TODO: Remove variables that aren't used in other CSS files. These should be set directly\n      // from the $theme object to reduce unnecessary variables.\n      --color-text-link: ", ";\n      --color-text-header: ", ";\n      --color-text-section: ", ";\n      --color-text-body: ", ";\n      --color-text-error: ", ";\n\n      --color-text-selection-bg: ", ";\n      --color-text-selection-text: ", ";\n\n      --color-header-title: ", ";\n      --color-header-hover-title: ", ";\n      --color-header-bg: ", ";\n      --color-header-border: ", ";\n\n      --color-button-primary-bg: ", ";\n      --color-button-primary-text: ", ";\n      --color-button-primary-hover-bg: ", ";\n      --color-button-primary-active-bg: ", ";\n      --color-button-primary-active-outline: ", ";\n      --color-button-primary-disabled-bg: ", ";\n\n      --color-button-link-text: ", ";\n\n      --color-button-secondary-bg: ", ";\n      --color-button-secondary-text: ", ";\n      --color-button-secondary-outline: ", ";\n\n      --color-button-tertiary-bg: transparent;\n      --color-button-tertiary-text: ", ";\n      --color-button-tertiary-outline: ", ";\n      --color-button-tertiary-hover-outline: ", ";\n      --color-button-tertiary-hover-text: ", ";\n      --color-button-tertiary-active-outline: ", ";\n      --color-button-tertiary-active-text: ", ";\n\n      --color-button-icon-disabled-outline: ", ";\n      --color-button-icon-disabled-text: ", ";\n      --color-button-icon-active-text: ", ";\n      --color-button-icon-active-bg: ", ";\n      --color-button-icon-active-outline: ", ";\n\n      --color-toolbar-button-bg: ", ";\n\n      --color-controlpanel-bg: ", ";\n      --color-controlpanel-border: ", ";\n      --color-controlpanel-section-text: ", ";\n      --color-controlpanel-text: ", ";\n      --color-controlpanel-section-bg: ", ";\n      --color-controlpanel-drawer-bg: ", ";\n      --color-controlpanel-ramp-slider: ", ";\n      --color-controlpanel-isovalue-slider: ", ";\n\n      --color-landingpage-bg: ", ";\n      --color-landingpage-bg-alt: ", ";\n      --color-landingpage-text: ", ";\n      --color-landingpage-banner-highlight-bg: ", ";\n\n      --color-statusflag-border: ", ";\n      --color-statusflag-text: ", ";\n\n      --color-alert-warning-text: ", ";\n      --color-alert-warning-bg: ", ";\n      --color-alert-info-text: ", ";\n      --color-alert-info-bg: ", ";\n\n      --color-layout-dividers: ", ";\n\n      --color-modal-border: ", ";\n\n      --color-menu-hover-text: ", ";\n      --color-menu-selected-text: ", ";\n\n      --color-checkbox-bg: ", ";\n\n      --font-family: ", ";\n    "])), $theme.colors.text.link, $theme.colors.text.header, $theme.colors.text.section, $theme.colors.text.body, $theme.colors.text.error, $theme.colors.text.selectionBg, $theme.colors.text.selectionText, $theme.colors.header.title, $theme.colors.header.hoverTitle, $theme.colors.header.bg, $theme.colors.header.border, $theme.colors.button.primary.bg, $theme.colors.button.primary.text, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.hoverBg, $theme.colors.button.primary.activeOutline, $theme.colors.button.primary.disabledBg, $theme.colors.button.link.text, $theme.colors.button.secondary.bg, $theme.colors.button.secondary.text, $theme.colors.button.secondary.outline, $theme.colors.button.tertiary.text, $theme.colors.button.tertiary.outline, $theme.colors.button.tertiary.hoverOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.activeOutline, $theme.colors.button.tertiary.hoverText, $theme.colors.button.tertiary.disabledOutline, $theme.colors.button.tertiary.disabledText, $theme.colors.button.tertiary.activeText, $theme.colors.button.tertiary.activeBg, $theme.colors.button.tertiary.activeOutline, $theme.colors.toolbar.buttonBg, $theme.colors.controlPanel.bg, $theme.colors.controlPanel.border, $theme.colors.controlPanel.sectionText, $theme.colors.controlPanel.text, $theme.colors.controlPanel.sectionBg, $theme.colors.controlPanel.drawerBg, $theme.colors.controlPanel.rampSlider, $theme.colors.controlPanel.isovalueSlider, $theme.colors.landingPage.bg, $theme.colors.landingPage.bgAlt, $theme.colors.landingPage.text, $theme.colors.landingPage.bannerBg, $theme.colors.statusFlag.border, $theme.colors.statusFlag.text, $theme.colors.alert.warning.text, $theme.colors.alert.warning.bg, $theme.colors.alert.info.text, $theme.colors.alert.info.bg, $theme.colors.layout.dividers, $theme.colors.modal.border, $theme.colors.menu.hoverText, $theme.colors.menu.selectedText, $theme.colors.checkbox.bg, $theme.fonts.family);
 });
+var GlobalTooltipStyle = createGlobalStyle(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ant-tooltip-inner {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    /* !important needed: antd hardcodes text-align: start on tooltip inner */\n    text-align: center !important;\n    line-height: 1.4;\n    font-weight: 400;\n    /* !important needed: antd's CSS-in-JS injects tooltip styles into portals at higher specificity than global stylesheets */\n    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.30), 0 3px 6px -4px rgba(0, 0, 0, 0.40), 0 9px 28px 8px rgba(0, 0, 0, 0.20) !important;\n  }\n\n"])));
 
 /**
  * Provides CSS variables and global styling for the image viewer.
@@ -192,7 +193,14 @@ export default function StyleProvider(props) {
           primaryColor: theme.colors.button.primary.text,
           defaultHoverBg: theme.colors.button.secondary.bg,
           defaultActiveBg: theme.colors.button.secondary.bg,
-          defaultActiveBorderColor: theme.colors.button.tertiary.activeOutline
+          defaultActiveBorderColor: theme.colors.button.primary.activeOutline
+        },
+        Checkbox: {
+          borderRadiusSM: 2,
+          colorBgContainer: theme.colors.checkbox.bg,
+          colorPrimary: theme.colors.checkbox.bg,
+          colorPrimaryHover: theme.colors.checkbox.hoverBg,
+          colorText: theme.colors.checkbox.text
         },
         Collapse: {
           borderRadiusLG: 0,
@@ -205,26 +213,38 @@ export default function StyleProvider(props) {
         Layout: {
           siderBg: theme.colors.controlPanel.bg
         },
-        Checkbox: {
-          borderRadiusSM: 2,
-          colorBgContainer: theme.colors.checkbox.bg,
-          colorPrimary: theme.colors.checkbox.bg,
-          colorPrimaryHover: theme.colors.checkbox.hoverBg,
-          colorText: theme.colors.checkbox.text
-        },
-        Tooltip: {
-          colorBgSpotlight: theme.colors.tooltip.bg
-        },
         Modal: {
           colorBgMask: theme.colors.modal.maskBg,
           contentBg: theme.colors.modal.bg,
           headerBg: theme.colors.modal.bg,
           footerBg: theme.colors.modal.bg,
           titleFontSize: 19
+        },
+        Radio: {
+          buttonCheckedBg: theme.colors.button.tertiary.activeBg,
+          buttonColor: theme.colors.button.tertiary.text,
+          // can't style borders and text of activated buttons independently within ant's system, so we set border
+          //   colors here and text/bg colors in custom css
+          colorPrimary: theme.colors.button.tertiary.activeOutline
+        },
+        Select: {
+          colorText: theme.colors.button.tertiary.text,
+          colorBorder: theme.colors.button.tertiary.outline,
+          // arrow color
+          colorTextQuaternary: theme.colors.button.tertiary.text,
+          colorTextDisabled: theme.colors.button.tertiary.disabledText,
+          colorTextPlaceholder: theme.colors.button.tertiary.hoverText,
+          colorBgContainerDisabled: "transparent"
+        },
+        // Additional tooltip overrides (font-weight, box-shadow, layout) are in GlobalTooltipStyle below,
+        // which is required because antd renders tooltips in portals outside the scoped CssProvider.
+        Tooltip: {
+          colorBgSpotlight: theme.colors.tooltip.bg,
+          fontSize: 12
         }
       }
     }
-  }, /*#__PURE__*/React.createElement(CssProvider, {
+  }, /*#__PURE__*/React.createElement(GlobalTooltipStyle, null), /*#__PURE__*/React.createElement(CssProvider, {
     $theme: theme
   }, props.children));
 }