@aics/vole-app 3.2.1 → 3.2.2

package/README.md

@@ -1,5 +1,9 @@
 # Vol-E App
 
+<p>
+  <a href="https://www.npmjs.com/package/@aics/vole-app"><img src="https://img.shields.io/npm/v/%40aics%2Fvole-app" alt="npm package"></a>
+</p>
+
 Volume Explorer (Vol-E) is a browser based volume viewer built with React and WebGL (Three.js). This package wraps the [vole-core](https://github.com/allen-cell-animated/vole-core) library.
 
 For the latest stable release, please visit [https://vole.allencell.org](https://vole.allencell.org)

package/es/aics-image-viewer/components/{ChannelsWidgetRow/index.js → ChannelsWidgetRow.js}

@@ -4,14 +4,13 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-import { Button, Checkbox, List } from "antd";
+import { Button, Checkbox } from "antd";
 import React, { useCallback, useState } from "react";
-import { colorArrayToObject, colorObjectToArray } from "../../shared/utils/colorRepresentations";
-import { select, useViewerState } from "../../state/store";
-import ColorPicker from "../ColorPicker";
-import ViewerIcon from "../shared/ViewerIcon";
-import TfEditor from "../TfEditor";
-import "./styles.css";
+import { colorArrayToObject, colorObjectToArray } from "../shared/utils/colorRepresentations";
+import { select, useViewerState } from "../state/store";
+import ControlPanelRow from "./shared/ControlPanelRow";
+import ViewerIcon from "./shared/ViewerIcon";
+import TfEditor from "./TfEditor";
 var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
   var index = props.index,
     saveIsosurface = props.saveIsosurface;
@@ -52,22 +51,12 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       isosurfaceEnabled: target.checked
     });
   };
-  var onColorChange = function onColorChange(newRGB, _oldRGB, index) {
+  var onColorChange = useCallback(function (newRGB) {
     var color = colorObjectToArray(newRGB);
     changeChannelSetting(index, {
       color: color
     });
-  };
-  var createColorPicker = function createColorPicker() {
-    return /*#__PURE__*/React.createElement(ColorPicker, {
-      color: colorArrayToObject(channelState.color),
-      onColorChange: onColorChange,
-      onColorChangeComplete: props.onColorChangeComplete,
-      disableAlpha: true,
-      idx: index,
-      width: 18
-    });
-  };
+  }, [index, changeChannelSetting]);
   var thisChannelOnly = singleChannelMode && singleChannelIndex === index;
   var visibilityControls = singleChannelMode ? /*#__PURE__*/React.createElement("div", {
     className: "channel-visibility-controls".concat(thisChannelOnly ? " single-channel" : "")
@@ -134,15 +123,17 @@ var ChannelsWidgetRow = function ChannelsWidgetRow(props) {
       saveIsosurface: saveThisIsosurface
     });
   };
-  var rowClass = "channel-row".concat(controlsOpen ? "" : " controls-closed").concat(thisChannelOnly ? " single-channel" : "");
-  return /*#__PURE__*/React.createElement(List.Item, {
+  var rowClass = controlsOpen ? "" : " controls-closed";
+  return /*#__PURE__*/React.createElement(ControlPanelRow, {
     key: index,
-    className: rowClass,
-    onClick: onClickChannel
-  }, /*#__PURE__*/React.createElement(List.Item.Meta, {
     title: props.name,
-    avatar: createColorPicker()
-  }), visibilityControls, controlsOpen && /*#__PURE__*/React.createElement("div", {
+    color: colorArrayToObject(channelState.color),
+    onColorChange: onColorChange,
+    onColorChangeComplete: props.onColorChangeComplete,
+    onClick: onClickChannel,
+    className: rowClass,
+    highlight: thisChannelOnly
+  }, visibilityControls, controlsOpen && /*#__PURE__*/React.createElement("div", {
     style: {
       width: "100%"
     }

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

@@ -44,13 +44,13 @@ var ColorPicker = function ColorPicker(props) {
     var _props$onColorChange;
     setCurrentColor(color.rgb);
     // supply onColorChange callback in props.
-    (_props$onColorChange = props.onColorChange) === null || _props$onColorChange === void 0 || _props$onColorChange.call(props, color.rgb, currentColor, props.idx);
+    (_props$onColorChange = props.onColorChange) === null || _props$onColorChange === void 0 || _props$onColorChange.call(props, color.rgb, currentColor);
   };
   var handleChangeComplete = function handleChangeComplete(color) {
     var _props$onColorChangeC;
     setCurrentColor(color.rgb);
     // supply onColorChange callback in props.
-    (_props$onColorChangeC = props.onColorChangeComplete) === null || _props$onColorChangeC === void 0 || _props$onColorChangeC.call(props, color.rgb, currentColor, props.idx);
+    (_props$onColorChangeC = props.onColorChangeComplete) === null || _props$onColorChangeC === void 0 || _props$onColorChangeC.call(props, color.rgb, currentColor);
   };
   React.useEffect(function () {
     return setCurrentColor(props.color);

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

@@ -8,10 +8,6 @@
     border-right:1px solid var(--color-controlpanel-border);
   }
 
-.control-panel-col-container .ant-checkbox-wrapper{
-    align-items:center;
-  }
-
 .control-panel-col-container .control-panel-tab-col{
     text-align:center;
   }
@@ -52,7 +48,6 @@
     }
 
 .control-panel-col-container .control-panel-col{
-    flex:1 auto;
     max-width:540px;
     overflow-y:scroll;
     scrollbar-width:none;
@@ -86,20 +81,14 @@
       border-top:1px solid var(--color-controlpanel-border);
     }
 
-.control-panel-col-container .control-panel-col .control-panel-content .ant-list-item-meta .ant-list-item-meta-title{
-        margin:0;
-      }
-
 .control-panel-col-container .control-panel-col .control-panel-content .channel-visibility-controls,
       .control-panel-col-container .control-panel-col .control-panel-content .ant-collapse-extra{
+        align-self:end;
         width:40%;
         display:flex;
       }
 
-.control-panel-col-container .control-panel-col .control-panel-content .channel-visibility-controls .ant-checkbox-wrapper,
-        .control-panel-col-container .control-panel-col .control-panel-content .channel-visibility-controls .single-channel-text,
-        .control-panel-col-container .control-panel-col .control-panel-content .ant-collapse-extra .ant-checkbox-wrapper,
-        .control-panel-col-container .control-panel-col .control-panel-content .ant-collapse-extra .single-channel-text{
+.control-panel-col-container .control-panel-col .control-panel-content .channel-visibility-controls .ant-checkbox-wrapper, .control-panel-col-container .control-panel-col .control-panel-content .ant-collapse-extra .ant-checkbox-wrapper{
           flex:4;
         }
 
@@ -128,38 +117,6 @@
         border-bottom:1px solid var(--color-controlpanel-border);
       }
 
-.control-panel-col-container .control-panel-col .ant-list-item,
-    .control-panel-col-container .control-panel-col .color-picker-row{
-      padding:0 16px;
-      border-bottom:none;
-      display:flex;
-      flex-flow:row wrap;
-      color:var(--color-controlpanel-text);
-    }
-
-.control-panel-col-container .control-panel-col .ant-list-item::after, .control-panel-col-container .control-panel-col .color-picker-row::after{
-        content:"";
-        margin-top:22px;
-        width:100%;
-        border-bottom:1px solid var(--color-controlpanel-border);
-      }
-
-.control-panel-col-container .control-panel-col .ant-list-item{
-      padding-top:22px;
-    }
-
-.control-panel-col-container .control-panel-col .ant-list-item::after{
-        margin-top:22px;
-      }
-
-.control-panel-col-container .control-panel-col .color-picker-row{
-      padding-top:16px;
-    }
-
-.control-panel-col-container .control-panel-col .color-picker-row::after{
-        margin-top:16px;
-      }
-
 .control-panel-col-container .control-panel-col .noUi-horizontal .noUi-handle{
     box-shadow:none;
     cursor:pointer;

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

@@ -1,43 +1,26 @@
 import React from "react";
 import { colorArrayToObject, colorObjectToArray } from "../shared/utils/colorRepresentations";
 import { select, useViewerState } from "../state/store";
-import ColorPicker from "./ColorPicker";
-var ColorPickerRow = function ColorPickerRow(_ref) {
-  var color = _ref.color,
-    _onColorChange = _ref.onColorChange,
-    children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "color-picker-row"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      marginRight: "16px",
-      display: "flex",
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(ColorPicker, {
-    color: colorArrayToObject(color),
-    onColorChange: function onColorChange(color) {
-      return _onColorChange(colorObjectToArray(color));
-    },
-    width: 18,
-    disableAlpha: true
-  })), /*#__PURE__*/React.createElement("span", null, children));
-};
+import ControlPanelRow from "./shared/ControlPanelRow";
 var CustomizeWidget = function CustomizeWidget(props) {
   var showBoundingBox = useViewerState(select("showBoundingBox"));
   var backgroundColor = useViewerState(select("backgroundColor"));
   var boundingBoxColor = useViewerState(select("boundingBoxColor"));
   var changeViewerSetting = useViewerState(select("changeViewerSetting"));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.visibleControls.backgroundColorPicker && /*#__PURE__*/React.createElement(ColorPickerRow, {
-    color: backgroundColor,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.visibleControls.backgroundColorPicker && /*#__PURE__*/React.createElement(ControlPanelRow, {
+    color: colorArrayToObject(backgroundColor),
     onColorChange: function onColorChange(color) {
-      return changeViewerSetting("backgroundColor", color);
-    }
-  }, "Background color"), props.visibleControls.boundingBoxColorPicker && /*#__PURE__*/React.createElement(ColorPickerRow, {
-    color: boundingBoxColor,
+      return changeViewerSetting("backgroundColor", colorObjectToArray(color));
+    },
+    title: "Background color",
+    verticalMargin: 16
+  }), props.visibleControls.boundingBoxColorPicker && /*#__PURE__*/React.createElement(ControlPanelRow, {
+    color: colorArrayToObject(boundingBoxColor),
     onColorChange: function onColorChange(color) {
-      return changeViewerSetting("boundingBoxColor", color);
-    }
-  }, "Bounding box color", !showBoundingBox && /*#__PURE__*/React.createElement("i", null, " - bounding box turned off")));
+      return changeViewerSetting("boundingBoxColor", colorObjectToArray(color));
+    },
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, "Bounding box color", !showBoundingBox && /*#__PURE__*/React.createElement("i", null, " - bounding box turned off")),
+    verticalMargin: 16
+  }));
 };
 export default CustomizeWidget;

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

@@ -613,7 +613,7 @@ var TfEditor = function TfEditor(props) {
     rawMin = _props$channelData.rawMin,
     rawMax = _props$channelData.rawMax;
   return /*#__PURE__*/React.createElement("div", {
-    className: "tf-editor"
+    className: "aics-tf-editor"
   }, /*#__PURE__*/React.createElement("div", {
     className: "tf-editor-control-row"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {

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

@@ -1,22 +1,22 @@
-.channel-row .tf-editor{
+.aics-tf-editor{
   margin-top:27px;
 }
 
-.channel-row .tf-editor .tf-editor-svg.dragging-slider{
+.aics-tf-editor .tf-editor-svg.dragging-slider{
     cursor:ew-resize;
   }
 
-.channel-row .tf-editor .tf-editor-svg.dragging-point{
+.aics-tf-editor .tf-editor-svg.dragging-point{
     cursor:move;
   }
 
-.channel-row .tf-editor .tf-editor-popover{
+.aics-tf-editor .tf-editor-popover{
     position:absolute;
     z-index:9999;
     width:100%;
   }
 
-.channel-row .tf-editor .tf-editor-cover{
+.aics-tf-editor .tf-editor-cover{
     position:fixed;
     top:0;
     left:0;
@@ -24,7 +24,7 @@
     bottom:0;
   }
 
-.channel-row .tf-editor .tf-editor-control-row{
+.aics-tf-editor .tf-editor-control-row{
     display:flex;
     color:var(--color-controlpanel-text);
     justify-content:space-between;
@@ -32,31 +32,31 @@
     min-height:24px;
   }
 
-.channel-row .tf-editor .tf-editor-control-row:not(:first-child){
+.aics-tf-editor .tf-editor-control-row:not(:first-child){
       margin-bottom:12px;
     }
 
-.channel-row .tf-editor .tf-editor-control-row > div{
+.aics-tf-editor .tf-editor-control-row > div{
       display:flex;
       gap:5px;
     }
 
-.channel-row .tf-editor .tf-editor-control-row .ant-input-number{
+.aics-tf-editor .tf-editor-control-row .ant-input-number{
       border-color:var(--color-button-tertiary-outline);
       width:64px;
     }
 
-.channel-row .tf-editor .tf-editor-control-row .ant-input-number input{
+.aics-tf-editor .tf-editor-control-row .ant-input-number input{
         text-align:right;
       }
 
-.channel-row .tf-editor h4{
+.aics-tf-editor h4{
     font-size:16px;
     margin-top:0;
     margin-bottom:12px;
   }
 
-.channel-row .tf-editor .tick text{
+.aics-tf-editor .tick text{
     fill:var(--color-controlpanel-text);
     user-select:none;
     -o-user-select:none;
@@ -65,58 +65,58 @@
     -webkit-user-select:none;
   }
 
-.channel-row .tf-editor rect.bar{
+.aics-tf-editor rect.bar{
     fill:var(--color-controlpanel-border);
   }
 
-.channel-row .tf-editor .axis path,
-  .channel-row .tf-editor .axis line{
+.aics-tf-editor .axis path,
+  .aics-tf-editor .axis line{
     stroke:var(--color-controlpanel-border);
   }
 
-.channel-row .tf-editor rect{
+.aics-tf-editor rect{
     fill:none;
     pointer-events:all;
   }
 
-.channel-row .tf-editor .line{
+.aics-tf-editor .line{
     stroke:#aeacae;
     stroke-width:1px;
   }
 
-.channel-row .tf-editor .sliders path,
-    .channel-row .tf-editor .sliders line{
+.aics-tf-editor .sliders path,
+    .aics-tf-editor .sliders line{
       cursor:ew-resize;
     }
 
-.channel-row .tf-editor .sliders line.slider-click-target{
+.aics-tf-editor .sliders line.slider-click-target{
       stroke:transparent;
     }
 
-.channel-row .tf-editor .sliders.sliders-ramp path{
+.aics-tf-editor .sliders.sliders-ramp path{
         fill:var(--color-controlpanel-ramp-slider);
       }
 
-.channel-row .tf-editor .sliders.sliders-ramp line:not(.slider-click-target){
+.aics-tf-editor .sliders.sliders-ramp line:not(.slider-click-target){
         stroke:var(--color-controlpanel-ramp-slider);
       }
 
-.channel-row .tf-editor .sliders.sliders-isovalue path{
+.aics-tf-editor .sliders.sliders-isovalue path{
         fill:var(--color-controlpanel-isovalue-slider);
       }
 
-.channel-row .tf-editor .sliders.sliders-isovalue line:not(.slider-click-target){
+.aics-tf-editor .sliders.sliders-isovalue line:not(.slider-click-target){
         stroke:var(--color-controlpanel-isovalue-slider);
       }
 
-.channel-row .tf-editor circle{
+.aics-tf-editor circle{
     fill-opacity:0.6;
     cursor:move;
     stroke:#aeacae;
     stroke-width:1.5px;
   }
 
-.channel-row .tf-editor circle.selected{
+.aics-tf-editor circle.selected{
       fill:white;
       stroke:white;
     }

package/es/aics-image-viewer/components/shared/ControlPanelRow/index.js

@@ -0,0 +1,48 @@
+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 _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 React from "react";
+import ColorPicker from "../../ColorPicker";
+import "./styles.css";
+var defaultProps = {
+  verticalMargin: 22,
+  showColorPicker: true,
+  color: {
+    r: 255,
+    g: 255,
+    b: 255
+  },
+  highlight: false
+};
+var ControlPanelRow = function ControlPanelRow(inputProps) {
+  var props = _objectSpread(_objectSpread({}, defaultProps), inputProps);
+  var color = props.color,
+    onColorChange = props.onColorChange,
+    onColorChangeComplete = props.onColorChangeComplete;
+  var colorPickerProps = {
+    color: color,
+    onColorChange: onColorChange,
+    onColorChangeComplete: onColorChangeComplete
+  };
+  var style = {
+    "--control-panel-row-vertical-margin": props.verticalMargin + "px"
+  };
+  var createTitle = props.title !== undefined || props.showColorPicker;
+  var baseClass = "control-panel-row".concat(props.highlight ? " control-panel-row-highlight" : "");
+  var className = props.className ? "".concat(baseClass, " ").concat(props.className) : baseClass;
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    style: style,
+    onClick: props.onClick
+  }, createTitle && /*#__PURE__*/React.createElement("div", {
+    className: "control-panel-row-title"
+  }, props.showColorPicker && /*#__PURE__*/React.createElement(ColorPicker, _extends({
+    disableAlpha: true,
+    width: 18
+  }, colorPickerProps)), props.title && /*#__PURE__*/React.createElement("h4", null, props.title)), props.children);
+};
+export default ControlPanelRow;

package/es/aics-image-viewer/components/shared/ControlPanelRow/styles.css

@@ -0,0 +1,64 @@
+.control-panel-col .control-panel-row{
+  padding:var(--control-panel-row-vertical-margin) 16px 0;
+  display:flex;
+  flex-flow:row wrap;
+  justify-content:space-between;
+  color:var(--color-controlpanel-text);
+}
+
+  .control-panel-col .control-panel-row .ant-checkbox-wrapper{
+    color:var(--color-controlpanel-text);
+  }
+
+  .control-panel-col .control-panel-row .control-panel-row-title{
+    display:flex;
+    align-items:center;
+    flex-grow:1;
+  }
+
+  .control-panel-col .control-panel-row .control-panel-row-title .color-picker{
+      margin-right:16px;
+    }
+
+  .control-panel-col .control-panel-row .control-panel-row-title h4{
+      margin:0;
+    }
+
+  .control-panel-col .control-panel-row .ant-btn-text{
+    color:var(--color-button-icon-activated-text);
+    transition:color 0.3s;
+  }
+
+  .control-panel-col .control-panel-row .ant-btn-text:hover,
+    .control-panel-col .control-panel-row .ant-btn-text:focus-visible{
+      color:var(--color-button-tertiary-hover-text) !important;
+    }
+
+  .control-panel-col .control-panel-row.controls-closed .ant-btn-text:not(:focus-visible){
+    color:var(--color-controlpanel-text);
+  }
+
+  .control-panel-col .control-panel-row.control-panel-row-highlight{
+    background-color:var(--color-button-primary-bg);
+  }
+
+  .control-panel-col .control-panel-row.control-panel-row-highlight,
+    .control-panel-col .control-panel-row.control-panel-row-highlight h4{
+      color:var(--color-button-primary-text);
+      font-weight:600;
+    }
+
+  .control-panel-col .control-panel-row.control-panel-row-highlight .color-picker .color-picker-swatch{
+      border-color:var(--color-button-primary-text);
+    }
+
+  .control-panel-col .control-panel-row::after{
+    content:"";
+    margin-top:var(--control-panel-row-vertical-margin);
+    width:100%;
+    border-bottom:1px solid var(--color-controlpanel-border);
+  }
+
+.control-panel-col .ant-collapse-item:not(:last-child) .control-panel-row:last-child::after{
+  border-bottom:none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aics/vole-app",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "web view of cell volume images",
   "main": "es/index.js",
   "module": "es/index.js",

package/type-declarations/aics-image-viewer/components/{ChannelsWidgetRow/index.d.ts → ChannelsWidgetRow.d.ts}

@@ -1,8 +1,7 @@
 import type { Channel } from "@aics/vole-core";
 import React from "react";
-import type { IsosurfaceFormat } from "../../shared/types";
-import { type ColorObject } from "../../shared/utils/colorRepresentations";
-import "./styles.css";
+import type { IsosurfaceFormat } from "../shared/types";
+import { type ColorObject } from "../shared/utils/colorRepresentations";
 interface ChannelsWidgetRowProps {
     index: number;
     name: string;

package/type-declarations/aics-image-viewer/components/ColorPicker/index.d.ts

@@ -1,13 +1,12 @@
 import React from "react";
 import type { ColorObject } from "../../shared/utils/colorRepresentations";
 import "./styles.css";
-type ColorChangeHandler = (currentColor: ColorObject, prevColor?: ColorObject, idx?: number) => void;
-interface ColorPickerProps {
+type ColorChangeHandler = (currentColor: ColorObject, prevColor: ColorObject) => void;
+export interface ColorPickerProps {
     color: ColorObject;
     width: number;
     onColorChange?: ColorChangeHandler;
     onColorChangeComplete?: ColorChangeHandler;
-    idx?: any;
     disableAlpha?: boolean;
 }
 declare const ColorPicker: React.FC<ColorPickerProps>;

package/type-declarations/aics-image-viewer/components/shared/ControlPanelRow/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { type ColorPickerProps } from "../../ColorPicker";
+import "./styles.css";
+type ColorPickerPropPassthru = Partial<Pick<ColorPickerProps, "color" | "onColorChange" | "onColorChangeComplete">>;
+export type ControlPanelRowProps = React.PropsWithChildren<ColorPickerPropPassthru & {
+    verticalMargin?: number;
+    showColorPicker?: boolean;
+    title?: React.ReactNode;
+    onClick?: React.MouseEventHandler;
+    className?: string;
+    highlight?: boolean;
+}>;
+declare const ControlPanelRow: React.FC<ControlPanelRowProps>;
+export default ControlPanelRow;

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

@@ -1,48 +0,0 @@
-.control-panel-content .ant-list-item.channel-row .ant-list-item-meta-title,
-  .control-panel-content .ant-list-item.channel-row .ant-checkbox-wrapper{
-    color:var(--color-controlpanel-text);
-  }
-
-.control-panel-content .ant-list-item.channel-row .ant-list-item-meta{
-    align-items:center;
-  }
-
-.control-panel-content .ant-list-item.channel-row .ant-btn-text{
-    color:var(--color-button-icon-activated-text);
-    transition:color 0.3s;
-  }
-
-.control-panel-content .ant-list-item.channel-row .ant-btn-text:hover,
-    .control-panel-content .ant-list-item.channel-row .ant-btn-text:focus-visible{
-      color:var(--color-button-tertiary-hover-text) !important;
-    }
-
-.control-panel-content .ant-list-item.channel-row .button-row{
-    margin-top:16px;
-    display:flex;
-    justify-content:start;
-    align-items:end;
-    gap:5px;
-  }
-
-.control-panel-content .ant-list-item.channel-row .button-row .ant-btn.ant-btn-sm{
-      padding:12px 8px;
-    }
-
-.control-panel-content .ant-list-item.channel-row.controls-closed .ant-btn-text:not(:focus-visible){
-    color:var(--color-controlpanel-text);
-  }
-
-.control-panel-content .ant-list-item.channel-row.single-channel{
-    background-color:var(--color-button-primary-bg);
-  }
-
-.control-panel-content .ant-list-item.channel-row.single-channel .channel-visibility-controls,
-    .control-panel-content .ant-list-item.channel-row.single-channel .ant-list-item-meta-title{
-      color:var(--color-button-primary-text);
-      font-weight:600;
-    }
-
-.control-panel-content .ant-list-item.channel-row.single-channel .color-picker .color-picker-swatch{
-      border-color:var(--color-button-primary-text);
-    }