@rubin-epo/epo-widget-lib 0.6.0 → 0.6.2

package/dist/ColorTool.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("react"),N=require("react-i18next"),O=require("./widgets/ColorTool/utilities.cjs"),o=require("./widgets/ColorTool/styles.cjs"),W=require("@rubin-epo/epo-react-lib/SelectListbox"),H=require("./widgets/ColorTool/Actions/index.cjs"),y=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),R=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),$=l=>l&&l.__esModule?l:{default:l},v=$(W),T=({data:l,objectOptions:p=[],selectedData:n,colorOptions:L=[],selectionCallback:r,isDisabled:u=!1,isDisplayOnly:C=!1,config:S={actions:["reset"],width:600,height:600,hideSubtitle:!1}})=>{var g;const _={actions:["reset"],width:600,height:600,hideSubtitle:!1},h=x.useRef(null),{t:a}=N.useTranslation(),q=x.useCallback(t=>{const{label:f}=t,{filters:b}=n,M=b.map(m=>m.label===f?t:m);return r&&r({...n,filters:M})},[n,r]),F=x.useCallback(t=>{if(t!==null)return r&&r({name:t,filters:O.getDataFiltersByName(l,t)})},[r,l]),{filters:c,name:d}=n,{actions:w,width:s,height:i,hideSubtitle:B}={..._,...S};if(C)return e.jsx(y.default,{ref:h,filters:c,width:s,height:i,selectedObjectName:d});const j=l.length>1,I=a("colorTool.actions.select_an_object");return e.jsx(o.WidgetContainer,{children:e.jsxs(o.WidgetLayout,{style:{"--image-width":typeof s=="number"?`${s}px`:s,"--image-height":typeof i=="number"?`${i}px`:i},children:[d&&j&&e.jsx(o.Title,{children:!B&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:a("colorTool.labels.object")}),e.jsx("dd",{children:d})]})}),e.jsxs(o.ControlsContainer,{children:[c&&e.jsxs(e.Fragment,{children:[e.jsx(o.ToolsHeader,{id:"filterLabel",children:a("colorTool.labels.filter")}),e.jsx(o.ToolsHeader,{id:"colorLabel",children:a("colorTool.labels.color")}),e.jsx(o.ToolsHeader,{id:"intensityLabel",children:a("colorTool.labels.color_intensity")})]}),c&&c.map(t=>{const{label:f,isDisabled:b}=t;return e.jsx(R.default,{filter:t,isDisabled:u||b,colorOptions:L,onChangeFilterCallback:q,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"},`filter-${f}`)})]}),e.jsx(y.default,{ref:h,filters:c,width:s,height:i,selectedObjectName:d,children:j&&e.jsx(o.SelectionContainer,{children:e.jsx(v.default,{id:"astroObjectSelector",placeholder:I,options:p,onChangeCallback:F,value:d,isDisabled:u,width:"100%",maxWidth:"100%"})})}),e.jsx(H.default,{actions:w,images:(g=h.current)==null?void 0:g.getElementsByTagName("canvas"),selectedData:n,width:s,height:i,isDisabled:u,selectionCallback:r})]})})};T.displayName="Widgets.ColorTool";exports.default=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("react"),W=require("react-i18next"),H=require("./widgets/ColorTool/utilities.cjs"),l=require("./widgets/ColorTool/styles.cjs"),N=require("@rubin-epo/epo-react-lib/SelectListbox"),R=require("./widgets/ColorTool/Actions/index.cjs"),T=require("./widgets/ColorTool/ImageComposite/ImageComposite.cjs"),$=require("./widgets/ColorTool/FilterControls/FilterControls.cjs"),v=o=>o&&o.__esModule?o:{default:o},E=v(N),p=({data:o,objectOptions:L=[],selectedData:d,colorOptions:C=[],selectionCallback:i,isDisabled:u=!1,isDisplayOnly:S=!1,className:g,config:_={actions:["reset"],width:600,height:600,hideSubtitle:!1}})=>{var j;const q={actions:["reset"],width:600,height:600,hideSubtitle:!1},h=y.useRef(null),{t:n}=W.useTranslation(),{filters:a,name:c}=d,{actions:F,width:r,height:s,hideSubtitle:w}={...q,..._};if(S)return e.jsx(T.default,{ref:h,filters:a,width:r,height:s,selectedObjectName:c,className:g});const B=t=>{const{label:f}=t,{filters:b}=d,O=b.map(m=>m.label===f?t:m);return i&&i({...d,filters:O})},I=t=>{if(t!==null)return i&&i({name:t,filters:H.getDataFiltersByName(o,t)})},x=o.length>1,M=n("colorTool.actions.select_an_object");return e.jsx(l.WidgetContainer,{className:g,children:e.jsxs(l.WidgetLayout,{style:{"--image-width":typeof r=="number"?`${r}px`:r,"--image-height":typeof s=="number"?`${s}px`:s},children:[c&&x&&e.jsx(l.Title,{children:!w&&e.jsxs(e.Fragment,{children:[e.jsx("dt",{children:n("colorTool.labels.object")}),e.jsx("dd",{children:c})]})}),e.jsxs(l.ControlsContainer,{children:[a&&e.jsxs(e.Fragment,{children:[e.jsx(l.ToolsHeader,{id:"filterLabel",children:n("colorTool.labels.filter")}),e.jsx(l.ToolsHeader,{id:"colorLabel",children:n("colorTool.labels.color")}),e.jsx(l.ToolsHeader,{id:"intensityLabel",children:n("colorTool.labels.color_intensity")})]}),a&&a.map(t=>{const{label:f,isDisabled:b}=t;return y.createElement($.default,{filter:t,colorOptions:C,key:`filter-${f}`,isDisabled:u||b,onChangeFilterCallback:B,buttonLabelledById:"filterLabel",selectLabelledById:"colorLabel",sliderLabelledById:"intensityLabel"})})]}),e.jsx(T.default,{ref:h,filters:a,width:r,height:s,selectedObjectName:c,children:x&&e.jsx(l.SelectionContainer,{children:e.jsx(E.default,{id:"astroObjectSelector",placeholder:M,options:L,onChangeCallback:I,value:c,isDisabled:u,width:"100%",maxWidth:"100%"})})}),e.jsx(R.default,{actions:F,images:(j=h.current)==null?void 0:j.getElementsByTagName("canvas"),selectedData:d,width:r,height:s,isDisabled:u,selectionCallback:i})]})})};p.displayName="Widgets.ColorTool";exports.default=p;

package/dist/ColorTool.js

@@ -1,121 +1,117 @@
-import { jsx as e, jsxs as c, Fragment as L } from "react/jsx-runtime";
-import { useRef as $, useCallback as T } from "react";
+import { jsx as e, jsxs as c, Fragment as T } from "react/jsx-runtime";
+import { useRef as $, createElement as E } from "react";
 import { useTranslation as R } from "react-i18next";
 import { getDataFiltersByName as A } from "./widgets/ColorTool/utilities.js";
-import { WidgetContainer as E, WidgetLayout as H, Title as M, ControlsContainer as P, ToolsHeader as p, SelectionContainer as q } from "./widgets/ColorTool/styles.js";
-import v from "@rubin-epo/epo-react-lib/SelectListbox";
-import z from "./widgets/ColorTool/Actions/index.js";
+import { WidgetContainer as H, WidgetLayout as M, Title as P, ControlsContainer as q, ToolsHeader as b, SelectionContainer as v } from "./widgets/ColorTool/styles.js";
+import z from "@rubin-epo/epo-react-lib/SelectListbox";
+import D from "./widgets/ColorTool/Actions/index.js";
 import C from "./widgets/ColorTool/ImageComposite/ImageComposite.js";
 import G from "./widgets/ColorTool/FilterControls/FilterControls.js";
 const J = ({
-  data: d,
+  data: g,
   objectOptions: j = [],
-  selectedData: i,
+  selectedData: a,
   colorOptions: x = [],
-  selectionCallback: o,
-  isDisabled: h = !1,
+  selectionCallback: r,
+  isDisabled: d = !1,
   isDisplayOnly: S = !1,
-  config: w = {
+  className: p,
+  config: F = {
     actions: ["reset"],
     width: 600,
     height: 600,
     hideSubtitle: !1
   }
 }) => {
-  var g;
-  const B = {
+  var y;
+  const w = {
     actions: ["reset"],
     width: 600,
     height: 600,
     hideSubtitle: !1
-  }, m = $(null), { t: n } = R(), F = T(
-    (t) => {
-      const { label: f } = t, { filters: b } = i, _ = b.map(
-        (y) => y.label === f ? t : y
-      );
-      return o && o({
-        ...i,
-        filters: _
-      });
-    },
-    [i, o]
-  ), I = T(
-    (t) => {
-      if (t !== null)
-        return o && o({
-          name: t,
-          filters: A(d, t)
-        });
-    },
-    [o, d]
-  ), { filters: s, name: a } = i, { actions: N, width: l, height: r, hideSubtitle: W } = {
-    ...B,
-    ...w
+  }, h = $(null), { t: i } = R(), { filters: n, name: s } = a, { actions: B, width: o, height: l, hideSubtitle: I } = {
+    ...w,
+    ...F
   };
   if (S)
     return /* @__PURE__ */ e(
       C,
       {
-        ref: m,
-        filters: s,
-        width: l,
-        height: r,
-        selectedObjectName: a
+        ref: h,
+        filters: n,
+        width: o,
+        height: l,
+        selectedObjectName: s,
+        className: p
       }
     );
-  const u = d.length > 1, O = n("colorTool.actions.select_an_object");
-  return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ c(
-    H,
+  const W = (t) => {
+    const { label: m } = t, { filters: f } = a, _ = f.map(
+      (L) => L.label === m ? t : L
+    );
+    return r && r({
+      ...a,
+      filters: _
+    });
+  }, N = (t) => {
+    if (t !== null)
+      return r && r({
+        name: t,
+        filters: A(g, t)
+      });
+  }, u = g.length > 1, O = i("colorTool.actions.select_an_object");
+  return /* @__PURE__ */ e(H, { className: p, children: /* @__PURE__ */ c(
+    M,
     {
       style: {
-        "--image-width": typeof l == "number" ? `${l}px` : l,
-        "--image-height": typeof r == "number" ? `${r}px` : r
+        "--image-width": typeof o == "number" ? `${o}px` : o,
+        "--image-height": typeof l == "number" ? `${l}px` : l
       },
       children: [
-        a && u && /* @__PURE__ */ e(M, { children: !W && /* @__PURE__ */ c(L, { children: [
-          /* @__PURE__ */ e("dt", { children: n("colorTool.labels.object") }),
-          /* @__PURE__ */ e("dd", { children: a })
+        s && u && /* @__PURE__ */ e(P, { children: !I && /* @__PURE__ */ c(T, { children: [
+          /* @__PURE__ */ e("dt", { children: i("colorTool.labels.object") }),
+          /* @__PURE__ */ e("dd", { children: s })
         ] }) }),
-        /* @__PURE__ */ c(P, { children: [
-          s && /* @__PURE__ */ c(L, { children: [
-            /* @__PURE__ */ e(p, { id: "filterLabel", children: n("colorTool.labels.filter") }),
-            /* @__PURE__ */ e(p, { id: "colorLabel", children: n("colorTool.labels.color") }),
-            /* @__PURE__ */ e(p, { id: "intensityLabel", children: n("colorTool.labels.color_intensity") })
+        /* @__PURE__ */ c(q, { children: [
+          n && /* @__PURE__ */ c(T, { children: [
+            /* @__PURE__ */ e(b, { id: "filterLabel", children: i("colorTool.labels.filter") }),
+            /* @__PURE__ */ e(b, { id: "colorLabel", children: i("colorTool.labels.color") }),
+            /* @__PURE__ */ e(b, { id: "intensityLabel", children: i("colorTool.labels.color_intensity") })
           ] }),
-          s && s.map((t) => {
-            const { label: f, isDisabled: b } = t;
-            return /* @__PURE__ */ e(
+          n && n.map((t) => {
+            const { label: m, isDisabled: f } = t;
+            return /* @__PURE__ */ E(
               G,
               {
                 filter: t,
-                isDisabled: h || b,
                 colorOptions: x,
-                onChangeFilterCallback: F,
+                key: `filter-${m}`,
+                isDisabled: d || f,
+                onChangeFilterCallback: W,
                 buttonLabelledById: "filterLabel",
                 selectLabelledById: "colorLabel",
                 sliderLabelledById: "intensityLabel"
-              },
-              `filter-${f}`
+              }
             );
           })
         ] }),
         /* @__PURE__ */ e(
           C,
           {
-            ref: m,
-            filters: s,
-            width: l,
-            height: r,
-            selectedObjectName: a,
-            children: u && /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(
-              v,
+            ref: h,
+            filters: n,
+            width: o,
+            height: l,
+            selectedObjectName: s,
+            children: u && /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(
+              z,
               {
                 id: "astroObjectSelector",
                 placeholder: O,
                 options: j,
-                onChangeCallback: I,
-                value: a,
-                isDisabled: h,
+                onChangeCallback: N,
+                value: s,
+                isDisabled: d,
                 width: "100%",
                 maxWidth: "100%"
               }
@@ -123,15 +119,15 @@ const J = ({
           }
         ),
         /* @__PURE__ */ e(
-          z,
+          D,
           {
-            actions: N,
-            images: (g = m.current) == null ? void 0 : g.getElementsByTagName("canvas"),
-            selectedData: i,
-            width: l,
-            height: r,
-            isDisabled: h,
-            selectionCallback: o
+            actions: B,
+            images: (y = h.current) == null ? void 0 : y.getElementsByTagName("canvas"),
+            selectedData: a,
+            width: o,
+            height: l,
+            isDisabled: d,
+            selectionCallback: r
           }
         )
       ]

package/dist/widgets/ColorTool/ColorTool.d.ts

@@ -39,6 +39,7 @@ interface ColorToolProps {
     isDisabled?: boolean;
     isDisplayOnly?: boolean;
     config?: ColorToolConfig;
+    className?: string;
 }
 declare const ColorTool: FunctionComponent<ColorToolProps>;
 export default ColorTool;

package/dist/widgets/ColorTool/FilterControls/FilterControls.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),S=require("../utilities.cjs"),T=require("react-i18next"),l=require("./styles.cjs"),f=e=>e&&e.__esModule?e:{default:e},I=f(q),a=({filter:e,colorOptions:d,isDisabled:r,onChangeFilterCallback:s,buttonLabelledById:u,selectLabelledById:h,sliderLabelledById:x})=>{const{t:b}=T.useTranslation(),{label:i,color:c="",value:g,active:n,min:m,max:j}=e,_=()=>s&&s({...e,active:!n}),p=o=>o&&s&&s({...e,color:o}),y=o=>s&&s({...e,brightness:S.getBrightnessValue(m,j,o),value:o}),v=b("colorTool.actions.select_filter");return t.jsxs(t.Fragment,{children:[t.jsxs(l.FilterLabel,{"aria-labelledby":u,children:[t.jsx(l.HiddenCheckbox,{disabled:r,checked:n,type:"checkbox",onChange:_}),t.jsx(l.FilterToggle,{as:"span",children:i})]}),t.jsx(I.default,{isDisabled:r,placeholder:v,value:c,options:d,onChangeCallback:p,width:"100%",maxWidth:"100%",labelledById:h}),t.jsx(l.Slider,{min:1,max:100,onChangeCallback:y,isDisabled:!n,labelledbyId:x,value:g,label:i,color:c})]})};a.displayName="Widgets.ColorTool.FilterControls";const B=a;exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),S=require("../utilities.cjs"),T=require("react-i18next"),l=require("./styles.cjs"),f=e=>e&&e.__esModule?e:{default:e},I=f(q),d=({filter:e,colorOptions:a,isDisabled:i,onChangeFilterCallback:t,buttonLabelledById:u,selectLabelledById:h,sliderLabelledById:x})=>{const{t:b}=T.useTranslation(),{label:r,color:c="",value:g,active:n,min:m,max:j}=e,_=()=>t&&t({...e,active:!n}),p=o=>o&&t&&t({...e,color:o}),y=o=>t&&t({...e,brightness:S.getBrightnessValue(m,j,o),value:o}),v=b("colorTool.actions.select_filter");return s.jsxs(l.FilterContainer,{disabled:i,children:[s.jsxs(l.FilterLabel,{children:[s.jsx(l.HiddenCheckbox,{checked:n,type:"checkbox",onChange:_,"aria-describedby":u}),s.jsx(l.FilterToggle,{as:"span",children:r})]}),s.jsx(I.default,{placeholder:v,value:c,options:a,onChangeCallback:p,width:"100%",maxWidth:"100%",labelledById:h}),s.jsx(l.Slider,{min:1,max:100,onChangeCallback:y,isDisabled:!n||i,labelledbyId:x,value:g,label:r,color:c})]})};d.displayName="Widgets.ColorTool.FilterControls";const B=d;exports.default=B;

package/dist/widgets/ColorTool/FilterControls/FilterControls.js

@@ -1,9 +1,9 @@
-import { jsxs as i, Fragment as B, jsx as l } from "react/jsx-runtime";
-import I from "@rubin-epo/epo-react-lib/SelectListbox";
-import { getBrightnessValue as j } from "../utilities.js";
-import { useTranslation as C } from "react-i18next";
-import { FilterLabel as L, HiddenCheckbox as S, FilterToggle as W, Slider as w } from "./styles.js";
-const d = ({
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import B from "@rubin-epo/epo-react-lib/SelectListbox";
+import { getBrightnessValue as C } from "../utilities.js";
+import { useTranslation as I } from "react-i18next";
+import { FilterContainer as j, FilterLabel as L, HiddenCheckbox as S, FilterToggle as W, Slider as w } from "./styles.js";
+const a = ({
   filter: t,
   colorOptions: c,
   isDisabled: r,
@@ -12,30 +12,29 @@ const d = ({
   selectLabelledById: h,
   sliderLabelledById: p
 }) => {
-  const { t: b } = C(), { label: n, color: a = "", value: x, active: s, min: g, max: u } = t, y = () => e && e({ ...t, active: !s }), f = (o) => o && e && e({ ...t, color: o }), v = (o) => e && e({
+  const { t: b } = I(), { label: i, color: n = "", value: x, active: l, min: g, max: u } = t, y = () => e && e({ ...t, active: !l }), f = (o) => o && e && e({ ...t, color: o }), v = (o) => e && e({
     ...t,
-    brightness: j(g, u, o),
+    brightness: C(g, u, o),
     value: o
   }), T = b("colorTool.actions.select_filter");
-  return /* @__PURE__ */ i(B, { children: [
-    /* @__PURE__ */ i(L, { "aria-labelledby": m, children: [
-      /* @__PURE__ */ l(
+  return /* @__PURE__ */ d(j, { disabled: r, children: [
+    /* @__PURE__ */ d(L, { children: [
+      /* @__PURE__ */ s(
         S,
         {
-          disabled: r,
-          checked: s,
+          checked: l,
           type: "checkbox",
-          onChange: y
+          onChange: y,
+          "aria-describedby": m
         }
       ),
-      /* @__PURE__ */ l(W, { as: "span", children: n })
+      /* @__PURE__ */ s(W, { as: "span", children: i })
     ] }),
-    /* @__PURE__ */ l(
-      I,
+    /* @__PURE__ */ s(
+      B,
       {
-        isDisabled: r,
         placeholder: T,
-        value: a,
+        value: n,
         options: c,
         onChangeCallback: f,
         width: "100%",
@@ -43,23 +42,23 @@ const d = ({
         labelledById: h
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ s(
       w,
       {
         min: 1,
         max: 100,
         onChangeCallback: v,
-        isDisabled: !s,
+        isDisabled: !l || r,
         labelledbyId: p,
         value: x,
-        label: n,
-        color: a
+        label: i,
+        color: n
       }
     )
   ] });
 };
-d.displayName = "Widgets.ColorTool.FilterControls";
-const _ = d;
+a.displayName = "Widgets.ColorTool.FilterControls";
+const _ = a;
 export {
   _ as default
 };

package/dist/widgets/ColorTool/FilterControls/styles.cjs

@@ -1,11 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),l=require("@rubin-epo/epo-react-lib/HorizontalSlider"),n=require("@rubin-epo/epo-react-lib/Button"),o=e=>e&&e.__esModule?e:{default:e},t=o(i),d=o(l),r=o(n),s=t.default.input`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),l=require("@rubin-epo/epo-react-lib/HorizontalSlider"),n=require("@rubin-epo/epo-react-lib/Button"),o=t=>t&&t.__esModule?t:{default:t},e=o(i),r=o(l),d=o(n),a=e.default.fieldset`
+  padding: 0;
+  margin: 0;
+  border: none;
+  display: grid;
+  align-items: center;
+  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
+  grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
+  grid-auto-rows: max-content;
+  grid-column: 1 / -1;
+`,s=e.default.input`
   position: absolute;
   left: -999px;
   width: 1px;
   height: 1px;
   top: auto;
   overflow: hidden;
-`,u=t.default(r.default)`
+`,u=e.default(d.default)`
   background-color: var(--filter-toggle-background, #f7f7f7);
   border: 1px solid;
   color: var(--filter-toggle-color, #6c6e6e);
@@ -19,7 +29,7 @@
   height: 38px;
   padding: 0;
   user-select: none;
-`,a=t.default.label`
+`,f=e.default.label`
   overflow: hidden;
 
   input:not(:disabled) + span {
@@ -52,7 +62,7 @@
     outline: 1px solid var(--white, #fff);
     outline-offset: -3px;
   }
-`,f=t.default(d.default)`
+`,c=e.default(r.default)`
   padding: 0;
   width: 100%;
-`;exports.FilterLabel=a;exports.FilterToggle=u;exports.HiddenCheckbox=s;exports.Slider=f;
+`;exports.FilterContainer=a;exports.FilterLabel=f;exports.FilterToggle=u;exports.HiddenCheckbox=s;exports.Slider=c;

package/dist/widgets/ColorTool/FilterControls/styles.d.ts

@@ -1,3 +1,278 @@
+export declare const FilterContainer: import("styled-components").IStyledComponent<"web", {
+    ref?: import("react").LegacyRef<HTMLFieldSetElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    disabled?: boolean | undefined;
+    form?: string | undefined;
+    name?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    children?: import("react").ReactNode;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "page" | "time" | "step" | "true" | "false" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLFieldSetElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLFieldSetElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLFieldSetElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLFieldSetElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLFieldSetElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLFieldSetElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLFieldSetElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLFieldSetElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLFieldSetElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLFieldSetElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLFieldSetElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLFieldSetElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLFieldSetElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLFieldSetElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLFieldSetElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLFieldSetElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLFieldSetElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLFieldSetElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLFieldSetElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLFieldSetElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLFieldSetElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLFieldSetElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLFieldSetElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLFieldSetElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLFieldSetElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLFieldSetElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLFieldSetElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLFieldSetElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLFieldSetElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLFieldSetElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLFieldSetElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLFieldSetElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLFieldSetElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLFieldSetElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLFieldSetElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLFieldSetElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLFieldSetElement> | undefined;
+}>;
 export declare const HiddenCheckbox: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<HTMLInputElement> | undefined;
     key?: import("react").Key | null | undefined;

package/dist/widgets/ColorTool/FilterControls/styles.js

@@ -1,7 +1,17 @@
 import e from "styled-components";
 import o from "@rubin-epo/epo-react-lib/HorizontalSlider";
 import t from "@rubin-epo/epo-react-lib/Button";
-const r = e.input`
+const l = e.fieldset`
+  padding: 0;
+  margin: 0;
+  border: none;
+  display: grid;
+  align-items: center;
+  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
+  grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
+  grid-auto-rows: max-content;
+  grid-column: 1 / -1;
+`, d = e.input`
   position: absolute;
   left: -999px;
   width: 1px;
@@ -22,7 +32,7 @@ const r = e.input`
   height: 38px;
   padding: 0;
   user-select: none;
-`, d = e.label`
+`, a = e.label`
   overflow: hidden;
 
   input:not(:disabled) + span {
@@ -55,13 +65,14 @@ const r = e.input`
     outline: 1px solid var(--white, #fff);
     outline-offset: -3px;
   }
-`, f = e(o)`
+`, p = e(o)`
   padding: 0;
   width: 100%;
 `;
 export {
-  d as FilterLabel,
+  l as FilterContainer,
+  a as FilterLabel,
   s as FilterToggle,
-  r as HiddenCheckbox,
-  f as Slider
+  d as HiddenCheckbox,
+  p as Slider
 };

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),r=require("react"),q=require("@rubin-epo/epo-react-lib/CircularLoader"),c=require("./styles.cjs"),I=require("../utilities.cjs"),S=require("../FilterImage/FilterImage.cjs"),$=e=>e&&e.__esModule?e:{default:e},A=$(q),d=r.forwardRef(({filters:e,width:o,height:s,selectedObjectName:i,children:m},g)=>{const[p,b]=r.useState(i),[n,l]=r.useState(0),f=I.isFilterActive(e),C=e.filter(t=>!t.isDisabled).length,u=n!==C;i!==p&&(b(i),l(0));const y=r.useCallback(()=>l(t=>t+1),[n,e]);return a.jsxs(c.ImageContainer,{ref:g,style:{"--image-width":typeof o=="number"?`${o}px`:o,"--image-height":typeof s=="number"?`${s}px`:s},children:[!n&&f&&a.jsx(A.default,{isVisible:u}),a.jsx(c.LoadingContainer,{style:{"--loading-opacity":u?0:1},children:e&&e.map(t=>{const{label:v,image:x,color:L,brightness:_,active:j}=t;return a.jsx(S.default,{url:x,color:L,active:j,width:o,height:s,filters:{brightness:_,contrast:1.3},onLoadCallback:y},`filter-${v}`)})}),m]})});d.displayName="Widgets.ColorTool.ImageComposite";const F=d;exports.default=F;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),i=require("react"),x=require("@rubin-epo/epo-react-lib/CircularLoader"),c=require("./styles.cjs"),h=require("../utilities.cjs"),S=require("../FilterImage/FilterImage.cjs"),A=e=>e&&e.__esModule?e:{default:e},F=A(x),u=i.forwardRef(({filters:e,width:d,height:g,selectedObjectName:a,className:m,children:p},C)=>{const[b,f]=i.useState(a),[o,r]=i.useState(0),n=h.isFilterActive(e),y=e.filter(t=>!t.isDisabled).length,l=o!==y;a!==b&&(f(a),r(0));const v=i.useCallback(()=>r(t=>t+1),[o,e]);return s.jsxs(c.ImageContainer,{className:m,ref:C,style:{"--image-container-opacity":o&&n?1:.1},children:[!o&&n&&s.jsx(F.default,{isVisible:l}),s.jsx(c.LoadingContainer,{style:{"--loading-opacity":l?0:1},children:e&&e.map(t=>{const{label:L,image:_,color:j,brightness:q,active:I}=t;return s.jsx(S.default,{url:_,color:j,active:I,width:d,height:g,filters:{brightness:q,contrast:1.3},onLoadCallback:v},`filter-${L}`)})}),p]})});u.displayName="Widgets.ColorTool.ImageComposite";const M=u;exports.default=M;

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.d.ts

@@ -5,6 +5,7 @@ interface ImageCompositeProps {
     width: number;
     height: number;
     selectedObjectName: string;
+    className?: string;
 }
 declare const ImageComposite: import("react").ForwardRefExoticComponent<ImageCompositeProps & {
     children?: import("react").ReactNode;

package/dist/widgets/ColorTool/ImageComposite/ImageComposite.js

@@ -1,58 +1,60 @@
-import { jsxs as $, jsx as s } from "react/jsx-runtime";
-import { forwardRef as A, useState as l, useCallback as F } from "react";
-import j from "@rubin-epo/epo-react-lib/CircularLoader";
-import { ImageContainer as k, LoadingContainer as D } from "./styles.js";
-import { isFilterActive as P } from "../utilities.js";
-import R from "../FilterImage/FilterImage.js";
-const c = A(({ filters: o, width: r, height: t, selectedObjectName: a, children: p }, g) => {
-  const [d, f] = l(a), [i, n] = l(0), b = P(o), u = o.filter((e) => !e.isDisabled).length, m = i !== u;
-  a !== d && (f(a), n(0));
-  const C = F(
-    () => n((e) => e + 1),
-    [i, o]
-  );
-  return /* @__PURE__ */ $(
-    k,
-    {
-      ref: g,
-      style: {
-        "--image-width": typeof r == "number" ? `${r}px` : r,
-        "--image-height": typeof t == "number" ? `${t}px` : t
-      },
-      children: [
-        !i && b && /* @__PURE__ */ s(j, { isVisible: m }),
-        /* @__PURE__ */ s(
-          D,
-          {
-            style: { "--loading-opacity": m ? 0 : 1 },
-            children: o && o.map((e) => {
-              const { label: y, image: I, color: L, brightness: v, active: x } = e;
-              return /* @__PURE__ */ s(
-                R,
-                {
-                  url: I,
-                  color: L,
-                  active: x,
-                  width: r,
-                  height: t,
-                  filters: {
-                    brightness: v,
-                    contrast: 1.3
+import { jsxs as A, jsx as a } from "react/jsx-runtime";
+import { forwardRef as F, useState as m, useCallback as j } from "react";
+import k from "@rubin-epo/epo-react-lib/CircularLoader";
+import { ImageContainer as $, LoadingContainer as w } from "./styles.js";
+import { isFilterActive as D } from "../utilities.js";
+import P from "../FilterImage/FilterImage.js";
+const l = F(
+  ({ filters: o, width: c, height: d, selectedObjectName: i, className: g, children: p }, f) => {
+    const [C, b] = m(i), [e, r] = m(0), s = D(o), u = o.filter((t) => !t.isDisabled).length, n = e !== u;
+    i !== C && (b(i), r(0));
+    const y = j(
+      () => r((t) => t + 1),
+      [e, o]
+    );
+    return /* @__PURE__ */ A(
+      $,
+      {
+        className: g,
+        ref: f,
+        style: {
+          "--image-container-opacity": e && s ? 1 : 0.1
+        },
+        children: [
+          !e && s && /* @__PURE__ */ a(k, { isVisible: n }),
+          /* @__PURE__ */ a(
+            w,
+            {
+              style: { "--loading-opacity": n ? 0 : 1 },
+              children: o && o.map((t) => {
+                const { label: I, image: L, color: v, brightness: h, active: x } = t;
+                return /* @__PURE__ */ a(
+                  P,
+                  {
+                    url: L,
+                    color: v,
+                    active: x,
+                    width: c,
+                    height: d,
+                    filters: {
+                      brightness: h,
+                      contrast: 1.3
+                    },
+                    onLoadCallback: y
                   },
-                  onLoadCallback: C
-                },
-                `filter-${y}`
-              );
-            })
-          }
-        ),
-        p
-      ]
-    }
-  );
-});
-c.displayName = "Widgets.ColorTool.ImageComposite";
-const B = c;
+                  `filter-${I}`
+                );
+              })
+            }
+          ),
+          p
+        ]
+      }
+    );
+  }
+);
+l.displayName = "Widgets.ColorTool.ImageComposite";
+const z = l;
 export {
-  B as default
+  z as default
 };

package/dist/widgets/ColorTool/ImageComposite/styles.cjs

@@ -1,13 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},e=i(a),o=e.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),o=t=>t&&t.__esModule?t:{default:t},e=o(a),i=e.default.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   aspect-ratio: 1 / 1;
   grid-area: image;
-  background-color: rgba(0, 0, 0, 0.1);
-  max-width: var(--image-width);
-  max-height: var(--image-height);
+  background-color: rgba(0, 0, 0, var(--image-container-opacity, 0.1));
+  transition: background-color ease var(--DURATION, 0.2s);
 `,n=e.default.div`
   width: 100%;
   height: 100%;
@@ -16,4 +15,4 @@
   position: absolute;
   top: 0;
   left: 0;
-`;exports.ImageContainer=o;exports.LoadingContainer=n;
+`;exports.ImageContainer=i;exports.LoadingContainer=n;

package/dist/widgets/ColorTool/ImageComposite/styles.js

@@ -1,15 +1,14 @@
-import i from "styled-components";
-const a = i.div`
+import t from "styled-components";
+const i = t.div`
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   aspect-ratio: 1 / 1;
   grid-area: image;
-  background-color: rgba(0, 0, 0, 0.1);
-  max-width: var(--image-width);
-  max-height: var(--image-height);
-`, e = i.div`
+  background-color: rgba(0, 0, 0, var(--image-container-opacity, 0.1));
+  transition: background-color ease var(--DURATION, 0.2s);
+`, o = t.div`
   width: 100%;
   height: 100%;
   opacity: var(--loading-opacity, 0);
@@ -19,6 +18,6 @@ const a = i.div`
   left: 0;
 `;
 export {
-  a as ImageContainer,
-  e as LoadingContainer
+  i as ImageContainer,
+  o as LoadingContainer
 };

package/dist/widgets/ColorTool/styles.cjs

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),o=require("@rubin-epo/epo-react-lib/styles"),a=e=>e&&e.__esModule?e:{default:e},t=a(i),n=t.default.section`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=e=>e&&e.__esModule?e:{default:e},t=i(o),a=t.default.section`
   color: var(--neutral80, #404040);
   container: colorTool / inline-size;
-`,r=o.token("BREAK_LARGE_TABLET_MIN"),l=t.default.div`
-  --widget-areas: "image" "controls" "actions" "title";
+`,n="900px",r=t.default.div`
+  --widget-areas: "image" "title" "controls" "actions";
   display: grid;
   gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   grid-template-areas: var(--widget-areas);
   grid-template-columns: 1fr;
 
-  @container colorTool (min-width: ${r}) {
+  @container colorTool (min-width: ${n}) {
     --widget-areas: "controls image" "actions actions" "title title";
     grid-template-columns: 1fr var(--image-width, 1fr);
   }
-`,d=t.default.dl`
+`,l=t.default.dl`
   grid-area: title;
   margin: 0;
   font-size: 18px;
@@ -37,14 +37,14 @@
       white-space: pre;
     }
   }
-`,s=t.default.div`
+`,d=t.default.div`
   display: grid;
   grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
   grid-auto-rows: max-content;
   grid-area: controls;
-  gap: 10px;
+  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   align-items: center;
-`,c=t.default.canvas`
+`,s=t.default.canvas`
   user-select: none;
   position: absolute;
   top: 0;
@@ -56,11 +56,11 @@
   mix-blend-mode: screen;
   opacity: var(--image-opacity, 0);
   visibility: var(--image-visibility, hidden);
-`,g=t.default.div`
+`,c=t.default.div`
   position: absolute;
   top: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   left: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   width: calc(100% - var(--color-tool-padding, var(--PADDING_SMALL, 20px)) * 2);
-`,p=t.default.div`
+`,g=t.default.div`
   font-weight: var(--FONT_WEIGHT_BOLD, 600);
-`;exports.ControlsContainer=s;exports.Image=c;exports.SelectionContainer=g;exports.Title=d;exports.ToolsHeader=p;exports.WidgetContainer=n;exports.WidgetLayout=l;
+`;exports.ControlsContainer=d;exports.Image=s;exports.SelectionContainer=c;exports.Title=l;exports.ToolsHeader=g;exports.WidgetContainer=a;exports.WidgetLayout=r;

package/dist/widgets/ColorTool/styles.js

@@ -1,20 +1,19 @@
 import t from "styled-components";
-import { token as i } from "@rubin-epo/epo-react-lib/styles";
-const r = t.section`
+const a = t.section`
   color: var(--neutral80, #404040);
   container: colorTool / inline-size;
-`, o = i("BREAK_LARGE_TABLET_MIN"), n = t.div`
-  --widget-areas: "image" "controls" "actions" "title";
+`, i = "900px", e = t.div`
+  --widget-areas: "image" "title" "controls" "actions";
   display: grid;
   gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   grid-template-areas: var(--widget-areas);
   grid-template-columns: 1fr;
 
-  @container colorTool (min-width: ${o}) {
+  @container colorTool (min-width: ${i}) {
     --widget-areas: "controls image" "actions actions" "title title";
     grid-template-columns: 1fr var(--image-width, 1fr);
   }
-`, l = t.dl`
+`, r = t.dl`
   grid-area: title;
   margin: 0;
   font-size: 18px;
@@ -39,14 +38,14 @@ const r = t.section`
       white-space: pre;
     }
   }
-`, d = t.div`
+`, n = t.div`
   display: grid;
   grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
   grid-auto-rows: max-content;
   grid-area: controls;
-  gap: 10px;
+  gap: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   align-items: center;
-`, s = t.canvas`
+`, l = t.canvas`
   user-select: none;
   position: absolute;
   top: 0;
@@ -58,20 +57,20 @@ const r = t.section`
   mix-blend-mode: screen;
   opacity: var(--image-opacity, 0);
   visibility: var(--image-visibility, hidden);
-`, c = t.div`
+`, d = t.div`
   position: absolute;
   top: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   left: var(--color-tool-padding, var(--PADDING_SMALL, 20px));
   width: calc(100% - var(--color-tool-padding, var(--PADDING_SMALL, 20px)) * 2);
-`, p = t.div`
+`, s = t.div`
   font-weight: var(--FONT_WEIGHT_BOLD, 600);
 `;
 export {
-  d as ControlsContainer,
-  s as Image,
-  c as SelectionContainer,
-  l as Title,
-  p as ToolsHeader,
-  r as WidgetContainer,
-  n as WidgetLayout
+  n as ControlsContainer,
+  l as Image,
+  d as SelectionContainer,
+  r as Title,
+  s as ToolsHeader,
+  a as WidgetContainer,
+  e as WidgetLayout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",