@rubin-epo/epo-widget-lib 0.2.0 → 0.4.0

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumLabels/SpectrumLabels.js

@@ -0,0 +1,58 @@
+import { jsx as l, jsxs as h } from "react/jsx-runtime";
+import { useTranslation as x } from "react-i18next";
+import { SpectrumLabel as S } from "../../styles.js";
+import { intersection as _ } from "../../../../lib/utils.js";
+import j from "../ColorLabels/ColorLabels.js";
+const n = ({
+  spectrums: c,
+  activeBand: e,
+  min: p,
+  max: d,
+  activeMin: s = 0,
+  activeMax: i = 0,
+  isCondensed: f
+}) => {
+  const { t: a } = x(), u = a("camera_filter.labels.captured_range", {
+    context: e ? "" : "no_filter",
+    filter: e
+  });
+  return /* @__PURE__ */ l(
+    "g",
+    {
+      role: "list",
+      "aria-label": u,
+      "aria-live": "polite",
+      "data-testid": "spectrum-labels",
+      children: c.map(({ name: r, upper: b, lower: L, colors: o }) => {
+        const m = b || d, t = L || p, g = e && _([t, m], [s, i]) === null;
+        return /* @__PURE__ */ h("g", { role: "listitem", "aria-hidden": g, children: [
+          /* @__PURE__ */ l(
+            S,
+            {
+              x: (m - t) / 2 + t,
+              y: "25%",
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              children: a(`camera_filter.labels.${r}`)
+            },
+            r
+          ),
+          o && /* @__PURE__ */ l(
+            j,
+            {
+              colors: o,
+              isBandSelected: !!e,
+              activeRange: [s, i],
+              isCondensed: f
+            }
+          )
+        ] }, r);
+      })
+    }
+  );
+};
+n.displayName = "Widgets.CameraFilter.SpectrumLabels";
+const F = n;
+export {
+  F as default
+};

package/dist/widgets/CameraFilter/data.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=[{band:"u",range:[338,395]},{range:[396,404]},{band:"g",range:[405,552]},{band:"r",range:[553,690]},{band:"i",range:[690,817]},{band:"z",range:[818,920]},{band:"y",range:[920,1010]}],r=[{offset:0,stopColor:"#e0e0e0"},{offset:.262,stopColor:"#dedde0"},{offset:.41,stopColor:"#dbd5e1"},{offset:.53,stopColor:"#d4c7e3"},{offset:.635,stopColor:"#cbb3e6"},{offset:.73,stopColor:"#bf9aeb"},{offset:.818,stopColor:"#b17af0"},{offset:.9,stopColor:"#a055f5"},{offset:.976,stopColor:"#8c2afc"},{offset:1,stopColor:"#861cff"}],l=[{offset:0,stopColor:"#861cff"},{offset:.253,stopColor:"blue"},{offset:.266,stopColor:"#001ee0"},{offset:.302,stopColor:"#006d91"},{offset:.334,stopColor:"#00ab53"},{offset:.361,stopColor:"#00d826"},{offset:.382,stopColor:"#00f40a"},{offset:.394,stopColor:"lime"},{offset:.409,stopColor:"#05fe00"},{offset:.427,stopColor:"#14fc01"},{offset:.447,stopColor:"#2df803"},{offset:.468,stopColor:"#50f406"},{offset:.49,stopColor:"#7cee0a"},{offset:.513,stopColor:"#b3e70e"},{offset:.536,stopColor:"#f2de14"},{offset:.54,stopColor:"#ffdd15"},{offset:.559,stopColor:"#fccb17"},{offset:.598,stopColor:"#f49f1e"},{offset:.615,stopColor:"#f18922"},{offset:.634,stopColor:"#f08220"},{offset:.66,stopColor:"#f0711c"},{offset:.69,stopColor:"#ef5415"},{offset:.723,stopColor:"#ed2d0b"},{offset:.755,stopColor:"#ec0000"}],n=[{offset:0,stopColor:"#ec0000"},{offset:.387,stopColor:"#ea0e0e"},{offset:.526,stopColor:"#e53737"},{offset:.625,stopColor:"#e15d5d"},{offset:.705,stopColor:"#dd7d7d"},{offset:.774,stopColor:"#da9898"},{offset:.835,stopColor:"#d8aeae"},{offset:.89,stopColor:"#d6bfbf"},{offset:.941,stopColor:"#d4cbcb"},{offset:.986,stopColor:"#d4d2d2"},{offset:1,stopColor:"#d4d4d4"}],t=[{name:"violet",color:"#861CFF",range:[380,450]},{name:"blue",color:"#0000FF",range:[450,495]},{name:"green",color:"#00FF00",range:[495,570]},{name:"yellow",color:"#FFDD15",range:[570,590]},{name:"orange",color:"#F18922",range:[590,620]},{name:"red",color:"#EC0000",range:[620,750]}],a=[{name:"ultraviolet",upper:400,stops:r},{name:"visible",upper:750,lower:400,stops:l,colors:t},{name:"infrared",lower:750,stops:n}],e=255,f=322,o=1084,p={condensed:{min:f,max:o,range:o-f},default:{min:e,max:o,range:o-e}};exports.colors=t;exports.filters=s;exports.rangeConfig=p;exports.spectrums=a;

package/dist/widgets/CameraFilter/data.js

@@ -0,0 +1,85 @@
+const n = [
+  { band: "u", range: [338, 395] },
+  { range: [396, 404] },
+  { band: "g", range: [405, 552] },
+  { band: "r", range: [553, 690] },
+  { band: "i", range: [690, 817] },
+  { band: "z", range: [818, 920] },
+  { band: "y", range: [920, 1010] }
+], s = [
+  { offset: 0, stopColor: "#e0e0e0" },
+  { offset: 0.262, stopColor: "#dedde0" },
+  { offset: 0.41, stopColor: "#dbd5e1" },
+  { offset: 0.53, stopColor: "#d4c7e3" },
+  { offset: 0.635, stopColor: "#cbb3e6" },
+  { offset: 0.73, stopColor: "#bf9aeb" },
+  { offset: 0.818, stopColor: "#b17af0" },
+  { offset: 0.9, stopColor: "#a055f5" },
+  { offset: 0.976, stopColor: "#8c2afc" },
+  { offset: 1, stopColor: "#861cff" }
+], t = [
+  { offset: 0, stopColor: "#861cff" },
+  { offset: 0.253, stopColor: "blue" },
+  { offset: 0.266, stopColor: "#001ee0" },
+  { offset: 0.302, stopColor: "#006d91" },
+  { offset: 0.334, stopColor: "#00ab53" },
+  { offset: 0.361, stopColor: "#00d826" },
+  { offset: 0.382, stopColor: "#00f40a" },
+  { offset: 0.394, stopColor: "lime" },
+  { offset: 0.409, stopColor: "#05fe00" },
+  { offset: 0.427, stopColor: "#14fc01" },
+  { offset: 0.447, stopColor: "#2df803" },
+  { offset: 0.468, stopColor: "#50f406" },
+  { offset: 0.49, stopColor: "#7cee0a" },
+  { offset: 0.513, stopColor: "#b3e70e" },
+  { offset: 0.536, stopColor: "#f2de14" },
+  { offset: 0.54, stopColor: "#ffdd15" },
+  { offset: 0.559, stopColor: "#fccb17" },
+  { offset: 0.598, stopColor: "#f49f1e" },
+  { offset: 0.615, stopColor: "#f18922" },
+  { offset: 0.634, stopColor: "#f08220" },
+  { offset: 0.66, stopColor: "#f0711c" },
+  { offset: 0.69, stopColor: "#ef5415" },
+  { offset: 0.723, stopColor: "#ed2d0b" },
+  { offset: 0.755, stopColor: "#ec0000" }
+], r = [
+  { offset: 0, stopColor: "#ec0000" },
+  { offset: 0.387, stopColor: "#ea0e0e" },
+  { offset: 0.526, stopColor: "#e53737" },
+  { offset: 0.625, stopColor: "#e15d5d" },
+  { offset: 0.705, stopColor: "#dd7d7d" },
+  { offset: 0.774, stopColor: "#da9898" },
+  { offset: 0.835, stopColor: "#d8aeae" },
+  { offset: 0.89, stopColor: "#d6bfbf" },
+  { offset: 0.941, stopColor: "#d4cbcb" },
+  { offset: 0.986, stopColor: "#d4d2d2" },
+  { offset: 1, stopColor: "#d4d4d4" }
+], l = [
+  { name: "violet", color: "#861CFF", range: [380, 450] },
+  { name: "blue", color: "#0000FF", range: [450, 495] },
+  { name: "green", color: "#00FF00", range: [495, 570] },
+  { name: "yellow", color: "#FFDD15", range: [570, 590] },
+  { name: "orange", color: "#F18922", range: [590, 620] },
+  { name: "red", color: "#EC0000", range: [620, 750] }
+], p = [
+  { name: "ultraviolet", upper: 400, stops: s },
+  { name: "visible", upper: 750, lower: 400, stops: t, colors: l },
+  { name: "infrared", lower: 750, stops: r }
+], e = 255, f = 322, o = 1084, a = {
+  condensed: {
+    min: f,
+    max: o,
+    range: o - f
+  },
+  default: {
+    min: e,
+    max: o,
+    range: o - e
+  }
+};
+export {
+  l as colors,
+  n as filters,
+  a as rangeConfig,
+  p as spectrums
+};

package/dist/widgets/CameraFilter/styles.cjs

@@ -0,0 +1,64 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("styled-components"),o=t=>t&&t.__esModule?t:{default:t},e=o(l),a=e.default.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  text-align: center;
+  position: relative;
+`,i=e.default.table`
+  border-collapse: collapse;
+  text-align: center;
+  ${({range:t,offset:n})=>l.css`
+    margin-left: ${n.toFixed(2)}%;
+    width: ${t.toFixed(2)}%;
+  `}
+`,s=e.default.tbody`
+  display: table-header-group;
+`,r=e.default.thead`
+  display: table-row-group;
+`,d=e.default.td`
+  line-height: 1.2;
+  font-size: 80%;
+`,c=e.default.span`
+  font-size: 80%;
+`,f=e.default.th`
+  font-size: 120%;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+
+  ${({band:t,$isCondensed:n})=>l.css`
+    border: ${t?"solid #b2b2b2":"none"};
+    border-width: ${n?"1px":"3px"};
+  `};
+`,u=e.default.div`
+  min-width: 20ch;
+  width: 50%;
+  max-width: 30ch;
+  margin-block-start: 1em;
+  justify-self: center;
+  text-align: left;
+`,g=e.default.label`
+  font-size: 0.75em;
+`,p=e.default.text`
+  font-size: 0.75em;
+`,m=e.default.tspan`
+  font-size: 0.75em;
+`,b=e.default.tspan`
+  font-size: 0.5em;
+`,h=e.default.tspan`
+  font-size: 0.4em;
+`,y=e.default.ul`
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.2;
+  font-size: 80%;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+`,F=e.default.li`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &:before {
+    content: "\200B";
+  }
+`;exports.ColorName=m;exports.ColorSpectrum=b;exports.ColorSpectrumUnit=h;exports.CondensedRange=F;exports.CondensedRangeRow=y;exports.FilterContainer=a;exports.FilterName=f;exports.FilterNames=r;exports.FilterRange=d;exports.FilterRanges=s;exports.FilterTable=i;exports.SelectContainer=u;exports.SelectLabel=g;exports.SpectrumLabel=p;exports.Wavelength=c;

package/dist/widgets/CameraFilter/styles.d.ts

@@ -1,22 +1,23 @@
+/// <reference types="react" />
 import { Band } from '../../types/astro';
-export declare const FilterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FilterTable: import("styled-components").StyledComponent<"table", any, {
+export declare const FilterContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const FilterTable: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {
     range: number;
     offset: number;
-}, never>;
-export declare const FilterRanges: import("styled-components").StyledComponent<"tbody", any, {}, never>;
-export declare const FilterNames: import("styled-components").StyledComponent<"thead", any, {}, never>;
-export declare const FilterRange: import("styled-components").StyledComponent<"td", any, {}, never>;
-export declare const Wavelength: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const FilterName: import("styled-components").StyledComponent<"th", any, {
+}>>;
+export declare const FilterRanges: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>;
+export declare const FilterNames: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>>;
+export declare const FilterRange: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>>;
+export declare const Wavelength: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const FilterName: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
     band?: Band | undefined;
-    isCondensed: boolean;
-}, never>;
-export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SelectLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const SpectrumLabel: import("styled-components").StyledComponent<"text", any, {}, never>;
-export declare const ColorName: import("styled-components").StyledComponent<"tspan", any, {}, never>;
-export declare const ColorSpectrum: import("styled-components").StyledComponent<"tspan", any, {}, never>;
-export declare const ColorSpectrumUnit: import("styled-components").StyledComponent<"tspan", any, {}, never>;
-export declare const CondensedRangeRow: import("styled-components").StyledComponent<"ul", any, {}, never>;
-export declare const CondensedRange: import("styled-components").StyledComponent<"li", any, {}, never>;
+    $isCondensed: boolean;
+}>>;
+export declare const SelectContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SelectLabel: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
+export declare const SpectrumLabel: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGTextElementAttributes<SVGTextElement>, never>>;
+export declare const ColorName: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGTSpanElement>, never>>;
+export declare const ColorSpectrum: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGTSpanElement>, never>>;
+export declare const ColorSpectrumUnit: import("styled-components").IStyledComponent<"web", Omit<import("react").SVGProps<SVGTSpanElement>, never>>;
+export declare const CondensedRangeRow: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>>;
+export declare const CondensedRange: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>;

package/dist/widgets/CameraFilter/styles.js

@@ -0,0 +1,82 @@
+import e, { css as o } from "styled-components";
+const s = e.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  text-align: center;
+  position: relative;
+`, l = e.table`
+  border-collapse: collapse;
+  text-align: center;
+  ${({ range: t, offset: n }) => o`
+    margin-left: ${n.toFixed(2)}%;
+    width: ${t.toFixed(2)}%;
+  `}
+`, a = e.tbody`
+  display: table-header-group;
+`, r = e.thead`
+  display: table-row-group;
+`, c = e.td`
+  line-height: 1.2;
+  font-size: 80%;
+`, d = e.span`
+  font-size: 80%;
+`, p = e.th`
+  font-size: 120%;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+
+  ${({ band: t, $isCondensed: n }) => o`
+    border: ${t ? "solid #b2b2b2" : "none"};
+    border-width: ${n ? "1px" : "3px"};
+  `};
+`, m = e.div`
+  min-width: 20ch;
+  width: 50%;
+  max-width: 30ch;
+  margin-block-start: 1em;
+  justify-self: center;
+  text-align: left;
+`, g = e.label`
+  font-size: 0.75em;
+`, f = e.text`
+  font-size: 0.75em;
+`, b = e.tspan`
+  font-size: 0.75em;
+`, h = e.tspan`
+  font-size: 0.5em;
+`, y = e.tspan`
+  font-size: 0.4em;
+`, x = e.ul`
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.2;
+  font-size: 80%;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+`, u = e.li`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &:before {
+    content: "\200B";
+  }
+`;
+export {
+  b as ColorName,
+  h as ColorSpectrum,
+  y as ColorSpectrumUnit,
+  u as CondensedRange,
+  x as CondensedRangeRow,
+  s as FilterContainer,
+  p as FilterName,
+  r as FilterNames,
+  c as FilterRange,
+  a as FilterRanges,
+  l as FilterTable,
+  m as SelectContainer,
+  g as SelectLabel,
+  f as SpectrumLabel,
+  d as Wavelength
+};

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

@@ -1,6 +1,5 @@
 import { FunctionComponent } from "react";
-import { Option } from "@rubin-epo/epo-react-lib/dist/types/select";
-import { ListboxOption } from "@rubin-epo/epo-react-lib/dist/types/select-listbox";
+import { Option, ListboxOption } from "@rubin-epo/epo-react-lib";
 export interface ImageFilter {
     label: string;
     defaultColor?: string;
@@ -27,7 +26,6 @@ interface ColorToolProps {
     selectionCallback: (selectedData: AstroObject) => void;
     data: AstroCategory[];
     selectedData: AstroObject;
-    title?: string;
     objectOptions?: Option[];
     colorOptions?: ListboxOption[];
     isDisabled?: boolean;

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

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

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

@@ -1,4 +1,4 @@
-import { ListboxOption } from "@rubin-epo/epo-react-lib/dist/types/select-listbox";
+import { ListboxOption } from "@rubin-epo/epo-react-lib";
 import { FunctionComponent } from "react";
 import { ImageFilter } from "../ColorTool";
 interface FilterControlProps {

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

@@ -0,0 +1,63 @@
+import { jsxs as B, Fragment as T, jsx as s } from "react/jsx-runtime";
+import I from "@rubin-epo/epo-react-lib/SelectListbox";
+import { getBrightnessValue as j } from "../utilities.js";
+import { useTranslation as S } from "react-i18next";
+import { FilterToggleButton as W, Slider as $ } from "../styles.js";
+const a = ({
+  filter: t,
+  colorOptions: d,
+  isDisabled: r,
+  onChangeFilterCallback: o,
+  buttonLabelledById: c,
+  selectLabelledById: m,
+  sliderLabelledById: h
+}) => {
+  const { t: p } = S(), { label: i, color: n = "", value: g, active: l, min: u, max: x } = t, b = () => o && o({ ...t, active: !l }), v = (e) => e && o && o({ ...t, color: e }), f = (e) => o && o({
+    ...t,
+    brightness: j(u, x, e),
+    value: e
+  }), y = p("colorTool.actions.select_filter");
+  return /* @__PURE__ */ B(T, { children: [
+    /* @__PURE__ */ s(
+      W,
+      {
+        disabled: r,
+        onClick: b,
+        $active: l,
+        "aria-labelledby": c,
+        children: i
+      }
+    ),
+    /* @__PURE__ */ s(
+      I,
+      {
+        isDisabled: r,
+        placeholder: y,
+        value: n,
+        options: d,
+        onChangeCallback: v,
+        width: "100%",
+        maxWidth: "100%",
+        labelledById: m
+      }
+    ),
+    /* @__PURE__ */ s(
+      $,
+      {
+        min: 1,
+        max: 100,
+        onChangeCallback: f,
+        isDisabled: !l,
+        labelledbyId: h,
+        value: g,
+        label: i,
+        color: n
+      }
+    )
+  ] });
+};
+a.displayName = "Widgets.ColorTool.FilterControls";
+const V = a;
+export {
+  V as default
+};

package/dist/widgets/ColorTool/FilterImage/FilterImage.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),u=require("react"),d=({width:g=600,height:p=600,className:f,image:l,color:c="transparent",brightness:m=1})=>{const i=u.useRef(null),r=new Image,v=(t,s,e,a)=>{t.fillStyle=s,t.fillRect(0,0,e,a)},C=(t,s)=>{var a;const e=(a=i.current)==null?void 0:a.getContext("2d");if(e){const S=CSS.supports&&CSS.supports("background-color",s)?s:"transparent",{width:n,height:o}=e.canvas;e.clearRect(0,0,n,o),e.globalCompositeOperation="multiply",r.onload=()=>{e==null||e.drawImage(r,0,0,n,o),v(e,S,n,o)},r.src=t}};return u.useEffect(()=>{C(l,c)},[c,l]),b.jsx("canvas",{ref:i,style:{filter:`brightness(${m}) contrast(1.3)`},role:"img",className:f,width:g,height:p})};d.displayName="Widgets.ColorTool.FilterImage";const h=d;exports.default=h;

package/dist/widgets/ColorTool/FilterImage/FilterImage.js

@@ -0,0 +1,41 @@
+import { jsx as v } from "react/jsx-runtime";
+import { useRef as I, useEffect as S } from "react";
+const p = ({
+  width: f = 600,
+  height: g = 600,
+  className: u,
+  image: l,
+  color: c = "transparent",
+  brightness: d = 1
+}) => {
+  const i = I(null), o = new Image(), m = (e, a, t, s) => {
+    e.fillStyle = a, e.fillRect(0, 0, t, s);
+  }, C = (e, a) => {
+    var s;
+    const t = (s = i.current) == null ? void 0 : s.getContext("2d");
+    if (t) {
+      const h = CSS.supports && CSS.supports("background-color", a) ? a : "transparent", { width: r, height: n } = t.canvas;
+      t.clearRect(0, 0, r, n), t.globalCompositeOperation = "multiply", o.onload = () => {
+        t == null || t.drawImage(o, 0, 0, r, n), m(t, h, r, n);
+      }, o.src = e;
+    }
+  };
+  return S(() => {
+    C(l, c);
+  }, [c, l]), /* @__PURE__ */ v(
+    "canvas",
+    {
+      ref: i,
+      style: { filter: `brightness(${d}) contrast(1.3)` },
+      role: "img",
+      className: u,
+      width: f,
+      height: g
+    }
+  );
+};
+p.displayName = "Widgets.ColorTool.FilterImage";
+const R = p;
+export {
+  R as default
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("../utilities.cjs"),i=require("../styles.cjs"),s=({filters:e})=>t.jsxs(i.ImageContainer,{children:[t.jsx(i.BackgroundImage,{alt:"",src:"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",$filtersActive:c.isFilterActive(e)}),e&&e.map(o=>{const{label:A,image:r,color:a,brightness:l,active:n}=o;return t.jsx(i.FilteredImage,{image:r,color:a,brightness:l,active:n},`filter-${A}`)})]});s.displayName="Widgets.ColorTool.ImageComposite";const m=s;exports.default=m;

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

@@ -0,0 +1,33 @@
+import { jsxs as l, jsx as A } from "react/jsx-runtime";
+import { isFilterActive as g } from "../utilities.js";
+import { ImageContainer as c, BackgroundImage as n, FilteredImage as p } from "../styles.js";
+const o = ({
+  filters: e
+}) => /* @__PURE__ */ l(c, { children: [
+  /* @__PURE__ */ A(
+    n,
+    {
+      alt: "",
+      src: "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=",
+      $filtersActive: g(e)
+    }
+  ),
+  e && e.map((t) => {
+    const { label: a, image: i, color: r, brightness: m, active: s } = t;
+    return /* @__PURE__ */ A(
+      p,
+      {
+        image: i,
+        color: r,
+        brightness: m,
+        active: s
+      },
+      `filter-${a}`
+    );
+  })
+] });
+o.displayName = "Widgets.ColorTool.ImageComposite";
+const f = o;
+export {
+  f as default
+};

package/dist/widgets/ColorTool/styles.cjs

@@ -0,0 +1,129 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),r=require("@rubin-epo/epo-react-lib/Button"),l=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./FilterImage/FilterImage.cjs"),o=e=>e&&e.__esModule?e:{default:e},t=o(i),a=o(r),s=o(l),c=t.default.section`
+  display: grid;
+  gap: var(--PADDING_SMALL, 20px);
+
+  ${({$isCondensed:e,$hideControls:n})=>e?i.css`
+          grid-template-areas:
+            "title"
+            "subtitle"
+            "image"
+            "caption"
+            "controls"
+            "reset";
+        `:i.css`
+          grid-template-areas:
+            "title title"
+            "subtitle subtitle"
+            ${n?"'image image'":"'controls image'"}
+            "reset reset"
+            "caption caption";
+        `}
+`;t.default.h2`
+  grid-area: title;
+  margin: 0;
+`;const u=t.default.dl`
+  grid-area: subtitle;
+  margin: 0;
+  font-size: 18px;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+
+  > dt,
+  dd {
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  > dt {
+    display: inline-block;
+  }
+
+  > dd {
+    display: inline;
+    margin-left: 1ch;
+
+    &::after {
+      content: "\\A";
+      white-space: pre;
+    }
+  }
+`,g=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;
+  align-items: center;
+`,f=t.default(s.default)`
+  padding: 0;
+  width: 100%;
+`,p=t.default.div`
+  position: relative;
+  aspect-ratio: 1 / 1;
+  grid-area: image;
+  background-color: rgba(0, 0, 0, 0.1);
+`,m=t.default.img`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: ${({$filtersActive:e})=>e?"block":"none"};
+  width: 100%;
+  height: 100%;
+`,b=t.default(d.default)`
+  user-select: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: screen;
+
+  ${({active:e})=>e?i.css`
+          visibility: visible;
+          opacity: 1;
+        `:i.css`
+          visibility: hidden;
+          opacity: 0;
+        `}
+`,h=t.default.div`
+  grid-column: span 3;
+`,x=t.default.div`
+  font-weight: var(--FONT_WEIGHT_BOLD, 600);
+`,v=t.default.footer`
+  grid-area: caption;
+`,_=t.default(a.default)`
+  grid-area: reset;
+  text-align: left;
+
+  span {
+    text-align: left;
+  }
+`,y=t.default(a.default)`
+  border-radius: 50%;
+  font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
+  font-size: 22px;
+  text-transform: lowercase;
+  display: flex;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+
+  ${({$active:e})=>e?i.css`
+          background-color: var(--turquoise85, #12726c);
+          &:not(:disabled):not([aria-disabled="true"]):hover {
+            outline: 1px solid var(--white, #fff);
+            outline-offset: -3px;
+          }
+        `:i.css`
+          background-color: #f7f7f7;
+          border-color: #6c6e6e;
+          color: #6c6e6e !important;
+          &:not(:disabled):not([aria-disabled="true"]):hover {
+            outline: 2px solid #6c6e6e;
+            outline-offset: -2px;
+          }
+        `}
+`;exports.BackgroundImage=m;exports.Caption=v;exports.ControlsContainer=g;exports.FilterToggleButton=y;exports.FilteredImage=b;exports.ImageContainer=p;exports.ResetButton=_;exports.SelectionContainer=h;exports.Slider=f;exports.Subtitle=u;exports.ToolsHeader=x;exports.WidgetContainer=c;