@rubin-epo/epo-widget-lib 0.9.8 → 0.9.10

package/dist/layout/Controls/styles.js

@@ -0,0 +1,75 @@
+"use client";
+import t from "styled-components";
+import { token as i } from "@rubin-epo/epo-react-lib/styles";
+const a = t.div`
+  --default-widget-padding: calc(var(--PADDING_SMALL, 20px) / 2);
+  --widget-gap: var(--widget-padding, var(--default-widget-padding));
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 100%;
+  gap: var(--widget-gap);
+  overflow-y: auto;
+
+  @container (min-width: ${i("BREAK_PHABLET_MIN")}) {
+    --default-widget-padding: var(--PADDING_SMALL, 20px);
+  }
+
+  @container (min-width: ${i("BREAK_LARGE_TABLET")}) {
+    height: 100%;
+    overflow-y: initial;
+  }
+`, o = t.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: var(--widget-gap);
+
+  @container (min-width: ${i("BREAK_LARGE_TABLET")}) {
+    flex-direction: row-reverse;
+  }
+`, d = t.div`
+  aspect-ratio: 1;
+  flex: 1 1 auto;
+  max-height: 100%;
+  max-width: 100%;
+  justify-self: center;
+
+  @container (min-width: ${i("BREAK_LARGE_TABLET")}) {
+    max-height: unset;
+    height: 100%;
+  }
+`, r = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--widget-gap);
+  flex: 0 1 100%;
+`, l = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--widget-gap);
+
+  @container (min-width: ${i("BREAK_LARGE_TABLET")}) {
+    flex-direction: row;
+  }
+`, c = t.div`
+  @container (min-width: ${i("BREAK_LARGE_TABLET")}) {
+    display: none;
+  }
+`, g = t.div`
+  display: none;
+  @container (min-width: ${i("BREAK_LARGE_TABLET")}) {
+    display: block;
+  }
+`;
+export {
+  l as Actions,
+  r as Controls,
+  o as InteractionRow,
+  g as LandscapeCaption,
+  c as PortraitCaption,
+  d as Widget,
+  a as WidgetLayout
+};

package/dist/lib/reimg.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(r,e){const c=function(){return r.indexOf("data:image/png")===0},i=function(t,o){var n=document.createElement("a");n.href=t,n.download=o,document.body.appendChild(n),n.click()};return{toBase64:function(){return r},toImg:function(){const t=document.createElement("img");return t.src=r,t},toCanvas:function(t){const o=document.createElement("canvas"),n=e==null?void 0:e.getBoundingClientRect();o.width=(n==null?void 0:n.width)||0,o.height=(n==null?void 0:n.height)||0;const a=o.getContext("2d");var u=this.toImg();u.onload=function(){a==null||a.drawImage(u,0,0),t(o)}},toPng:function(){if(c()){var t=document.createElement("img");return t.src=r,t}this.toCanvas(function(o){var n=document.createElement("img");return n.src=o.toDataURL(),n})},toJpeg:function(t){t=t||1,(o=>{this.toCanvas(function(n){var a=document.createElement("img");return a.src=n.toDataURL("image/jpeg",o),a})})(t)},downloadPng:function(t){if(t=t||"image.png",c()){i(r,t);return}this.toCanvas(function(o){i(o.toDataURL(),t)})}}}function m(r){const e=r.toDataURL();return g(e)}exports.fromCanvas=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(c,i){const r=function(){return c.indexOf("data:image/png")===0},a=function(t,n){const o=document.createElement("a");o.href=t,o.download=n,document.body.appendChild(o),o.click()};return{toBase64:function(){return c},toImg:function(){const t=document.createElement("img");return t.src=c,t},toCanvas:function(t){const n=document.createElement("canvas"),o=i==null?void 0:i.getBoundingClientRect();n.width=(o==null?void 0:o.width)||0,n.height=(o==null?void 0:o.height)||0;const e=n.getContext("2d"),u=this.toImg();u.onload=function(){e==null||e.drawImage(u,0,0),t(n)}},toPng:function(){if(r()){const t=document.createElement("img");return t.src=c,t}this.toCanvas(function(t){const n=document.createElement("img");return n.src=t.toDataURL(),n})},toJpeg:function(t){t=t||1,(n=>{this.toCanvas(function(o){const e=document.createElement("img");return e.src=o.toDataURL("image/jpeg",n),e})})(t)},downloadPng:function(t){if(t=t||"image.png",r()){a(c,t);return}this.toCanvas(function(n){a(n.toDataURL(),t)})}}}function g(c){const i=c.toDataURL();return s(i)}exports.fromCanvas=g;

package/dist/lib/reimg.d.ts

@@ -1,7 +1,7 @@
 declare function fromSvg(svgElement: SVGElement): {
-    [key: string]: Function;
+    [key: string]: (...args: any) => any;
 };
 declare function fromCanvas(canvasElement: HTMLCanvasElement): {
-    [key: string]: Function;
+    [key: string]: (...args: any) => any;
 };
 export { fromSvg, fromCanvas };

package/dist/lib/reimg.js

@@ -1,60 +1,59 @@
-function g(r, c) {
-  const i = function() {
-    return r.indexOf("data:image/png") === 0;
-  }, e = function(t, o) {
-    var n = document.createElement("a");
-    n.href = t, n.download = o, document.body.appendChild(n), n.click();
+function s(c, r) {
+  const e = function() {
+    return c.indexOf("data:image/png") === 0;
+  }, a = function(t, n) {
+    const o = document.createElement("a");
+    o.href = t, o.download = n, document.body.appendChild(o), o.click();
   };
   return {
     toBase64: function() {
-      return r;
+      return c;
     },
     toImg: function() {
       const t = document.createElement("img");
-      return t.src = r, t;
+      return t.src = c, t;
     },
     toCanvas: function(t) {
-      const o = document.createElement("canvas"), n = c == null ? void 0 : c.getBoundingClientRect();
-      o.width = (n == null ? void 0 : n.width) || 0, o.height = (n == null ? void 0 : n.height) || 0;
-      const a = o.getContext("2d");
-      var u = this.toImg();
+      const n = document.createElement("canvas"), o = r == null ? void 0 : r.getBoundingClientRect();
+      n.width = (o == null ? void 0 : o.width) || 0, n.height = (o == null ? void 0 : o.height) || 0;
+      const i = n.getContext("2d"), u = this.toImg();
       u.onload = function() {
-        a == null || a.drawImage(u, 0, 0), t(o);
+        i == null || i.drawImage(u, 0, 0), t(n);
       };
     },
     toPng: function() {
-      if (i()) {
-        var t = document.createElement("img");
-        return t.src = r, t;
+      if (e()) {
+        const t = document.createElement("img");
+        return t.src = c, t;
       }
-      this.toCanvas(function(o) {
-        var n = document.createElement("img");
-        return n.src = o.toDataURL(), n;
+      this.toCanvas(function(t) {
+        const n = document.createElement("img");
+        return n.src = t.toDataURL(), n;
       });
     },
     toJpeg: function(t) {
-      t = t || 1, ((o) => {
-        this.toCanvas(function(n) {
-          var a = document.createElement("img");
-          return a.src = n.toDataURL("image/jpeg", o), a;
+      t = t || 1, ((n) => {
+        this.toCanvas(function(o) {
+          const i = document.createElement("img");
+          return i.src = o.toDataURL("image/jpeg", n), i;
         });
       })(t);
     },
     downloadPng: function(t) {
-      if (t = t || "image.png", i()) {
-        e(r, t);
+      if (t = t || "image.png", e()) {
+        a(c, t);
         return;
       }
-      this.toCanvas(function(o) {
-        e(o.toDataURL(), t);
+      this.toCanvas(function(n) {
+        a(n.toDataURL(), t);
       });
     }
   };
 }
-function m(r) {
-  const c = r.toDataURL();
-  return g(c);
+function g(c) {
+  const r = c.toDataURL();
+  return s(r);
 }
 export {
-  m as fromCanvas
+  g as fromCanvas
 };

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),t=require("../data.cjs"),j=require("./SpectrumLabels/SpectrumLabels.cjs"),x=({min:n,max:u,range:g,isCondensed:p,activeFilter:s})=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMinYMin meet",viewBox:`${n} 0 ${g} 300`,"data-testid":"spectrum-display",children:[e.jsxs("defs",{children:[t.spectrums.map(({name:d,stops:r})=>e.jsx("linearGradient",{id:`${d}-gradient`,children:r.map(({offset:a,stopColor:h,id:o})=>e.jsx("stop",{offset:a,stopColor:h,id:o},`${a}-${h}`))},d)),e.jsxs("mask",{id:"spectrumMask",children:[e.jsx("rect",{width:"100%",height:"100",fill:"white",x:n}),s&&e.jsxs(e.Fragment,{children:[e.jsx("rect",{x:n,width:s.range[0]-n,height:"100%",fill:"black"}),e.jsx("rect",{x:s.range[1],width:u-s.range[1],height:"100%",fill:"black"})]})]})]}),e.jsx("g",{mask:"url(#spectrumMask)",role:"presentation",children:t.spectrums.map(({name:d,upper:r,lower:a})=>e.jsx("rect",{width:(r||u)-(a||n),height:"50%",fill:`url(#${d}-gradient)`,x:a||n,role:"presentation"},d))}),e.jsx("g",{children:t.spectrums.map(({name:d,upper:r})=>r&&e.jsx("line",{strokeWidth:2,strokeDasharray:"8 8",stroke:s&&!c.between(r,s.range[0],s.range[1])?"#000":"#fff",x1:r,x2:r,y1:0,y2:"50%"},d))}),e.jsx(j.default,{spectrums:t.spectrums,activeBand:s==null?void 0:s.band,min:n,max:u,activeMin:s==null?void 0:s.range[0],activeMax:s==null?void 0:s.range[1],isCondensed:p})]});x.displayName="Widgets.CameraFilter.SpectrumDisplay";const l=x;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),t=require("../data.cjs"),j=require("./SpectrumLabels/SpectrumLabels.cjs"),x=({min:n,max:u,range:g,isCondensed:p,activeFilter:s})=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMinYMin meet",viewBox:`${n} 0 ${g} 260`,"data-testid":"spectrum-display",children:[e.jsxs("defs",{children:[t.spectrums.map(({name:d,stops:r})=>e.jsx("linearGradient",{id:`${d}-gradient`,children:r.map(({offset:a,stopColor:h,id:o})=>e.jsx("stop",{offset:a,stopColor:h,id:o},`${a}-${h}`))},d)),e.jsxs("mask",{id:"spectrumMask",children:[e.jsx("rect",{width:"100%",height:"100",fill:"white",x:n}),s&&e.jsxs(e.Fragment,{children:[e.jsx("rect",{x:n,width:s.range[0]-n,height:"100%",fill:"black"}),e.jsx("rect",{x:s.range[1],width:u-s.range[1],height:"100%",fill:"black"})]})]})]}),e.jsx("g",{mask:"url(#spectrumMask)",role:"presentation",children:t.spectrums.map(({name:d,upper:r,lower:a})=>e.jsx("rect",{width:(r||u)-(a||n),height:"50%",fill:`url(#${d}-gradient)`,x:a||n,role:"presentation"},d))}),e.jsx("g",{children:t.spectrums.map(({name:d,upper:r})=>r&&e.jsx("line",{strokeWidth:2,strokeDasharray:"8 8",stroke:s&&!c.between(r,s.range[0],s.range[1])?"#000":"#fff",x1:r,x2:r,y1:0,y2:"50%"},d))}),e.jsx(j.default,{spectrums:t.spectrums,activeBand:s==null?void 0:s.band,min:n,max:u,activeMin:s==null?void 0:s.range[0],activeMax:s==null?void 0:s.range[1],isCondensed:p})]});x.displayName="Widgets.CameraFilter.SpectrumDisplay";const l=x;exports.default=l;

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

@@ -13,7 +13,7 @@ const o = ({
   {
     xmlns: "http://www.w3.org/2000/svg",
     preserveAspectRatio: "xMinYMin meet",
-    viewBox: `${n} 0 ${t} 300`,
+    viewBox: `${n} 0 ${t} 260`,
     "data-testid": "spectrum-display",
     children: [
       /* @__PURE__ */ p("defs", { children: [

package/dist/widgets/CameraFilter/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),a=n=>n&&n.__esModule?n:{default:n},e=a(i),l=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),o=n=>n&&n.__esModule?n:{default:n},e=o(i),a=e.default.div`
   container-type: inline-size;
   container-name: camera-filter;
 
@@ -6,14 +6,19 @@
   grid-template-columns: 1fr;
   grid-auto-rows: min-content;
   text-align: center;
+  padding-block: var(--PADDING_SMALL, 20px);
   position: relative;
-`,o=e.default.h3`
-  margin-block: 1em;
+`,l=e.default.h3`
+  margin: 0;
 `,r=e.default.table`
   border-collapse: collapse;
   text-align: center;
   margin-inline-start: var(--filter-table-margin-inline-start);
   width: var(--filter-table-width);
+
+  @container (min-width: ${t.token("BREAK_TABLET")}) {
+    margin-block-start: var(--PADDING_SMALL, 20px);
+  }
 `,s=e.default.tbody`
   display: table-header-group;
 `,d=e.default.thead`
@@ -29,67 +34,66 @@
   border: var(--filter-name-border);
   border-width: 1px;
 
-  @container camera-filter (min-width: ${t.token("BREAK_TABLET")}) {
+  @container (min-width: ${t.token("BREAK_TABLET")}) {
     border-width: 3px;
   }
 `,u=e.default.div`
   min-width: 20ch;
   width: 50%;
   max-width: 30ch;
-  margin-block: 1em;
   justify-self: center;
   text-align: left;
-`,g=e.default.label`
+`,p=e.default.label`
   font-size: 0.75em;
-`,p=e.default.text`
+`,g=e.default.text`
   font-size: 2em;
 
-  @container camera-filter (min-width: ${t.token("BREAK_MOBILE")}) {
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
     font-size: 1.25em;
   }
 
-  @container camera-filter (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
     font-size: 0.75em;
   }
 `,h=e.default.tspan`
   font-size: 2em;
 
-  @container camera-filter (min-width: ${t.token("BREAK_MOBILE")}) {
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
     font-size: 1.25em;
   }
 
-  @container camera-filter (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
     font-size: 0.75em;
   }
 `,b=e.default.tspan`
   font-size: 1.5em;
 
-  @container camera-filter (min-width: ${t.token("BREAK_MOBILE")}) {
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
     font-size: 1em;
   }
 
-  @container camera-filter (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
     font-size: 0.5em;
   }
-`,w=e.default.tspan`
+`,_=e.default.tspan`
   font-size: 1.3em;
 
-  @container camera-filter (min-width: ${t.token("BREAK_MOBILE")}) {
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
     font-size: 0.8em;
   }
 
-  @container camera-filter (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
     font-size: 0.4em;
   }
-`,R=e.default.ul`
+`,w=e.default.ul`
   display: flex;
   justify-content: space-between;
   line-height: 1.2;
   font-size: 80%;
-  margin: 0;
+  margin: var(--PADDING_SMALL, 20px) 0 0;
   padding: 0;
   list-style-type: none;
-`,_=e.default.li`
+`,A=e.default.li`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -97,4 +101,4 @@
   &:before {
     content: "\200B";
   }
-`;exports.ColorName=h;exports.ColorSpectrum=b;exports.ColorSpectrumUnit=w;exports.CondensedRange=_;exports.CondensedRangeRow=R;exports.FilterContainer=l;exports.FilterName=f;exports.FilterNames=d;exports.FilterRange=c;exports.FilterRanges=s;exports.FilterTable=r;exports.FilterTitle=o;exports.SelectContainer=u;exports.SelectLabel=g;exports.SpectrumLabel=p;exports.Wavelength=m;
+`;exports.ColorName=h;exports.ColorSpectrum=b;exports.ColorSpectrumUnit=_;exports.CondensedRange=A;exports.CondensedRangeRow=w;exports.FilterContainer=a;exports.FilterName=f;exports.FilterNames=d;exports.FilterRange=c;exports.FilterRanges=s;exports.FilterTable=r;exports.FilterTitle=l;exports.SelectContainer=u;exports.SelectLabel=p;exports.SpectrumLabel=g;exports.Wavelength=m;

package/dist/widgets/CameraFilter/styles.js

@@ -1,7 +1,7 @@
 "use client";
 import e from "styled-components";
 import { token as t } from "@rubin-epo/epo-react-lib/styles";
-const r = e.div`
+const o = e.div`
   container-type: inline-size;
   container-name: camera-filter;
 
@@ -9,17 +9,22 @@ const r = e.div`
   grid-template-columns: 1fr;
   grid-auto-rows: min-content;
   text-align: center;
+  padding-block: var(--PADDING_SMALL, 20px);
   position: relative;
-`, a = e.h3`
-  margin-block: 1em;
-`, o = e.table`
+`, r = e.h3`
+  margin: 0;
+`, a = e.table`
   border-collapse: collapse;
   text-align: center;
   margin-inline-start: var(--filter-table-margin-inline-start);
   width: var(--filter-table-width);
-`, l = e.tbody`
+
+  @container (min-width: ${t("BREAK_TABLET")}) {
+    margin-block-start: var(--PADDING_SMALL, 20px);
+  }
+`, s = e.tbody`
   display: table-header-group;
-`, s = e.thead`
+`, l = e.thead`
   display: table-row-group;
 `, c = e.td`
   line-height: 1.2;
@@ -32,56 +37,55 @@ const r = e.div`
   border: var(--filter-name-border);
   border-width: 1px;
 
-  @container camera-filter (min-width: ${t("BREAK_TABLET")}) {
+  @container (min-width: ${t("BREAK_TABLET")}) {
     border-width: 3px;
   }
-`, f = e.div`
+`, p = e.div`
   min-width: 20ch;
   width: 50%;
   max-width: 30ch;
-  margin-block: 1em;
   justify-self: center;
   text-align: left;
-`, h = e.label`
+`, f = e.label`
   font-size: 0.75em;
-`, p = e.text`
+`, h = e.text`
   font-size: 2em;
 
-  @container camera-filter (min-width: ${t("BREAK_MOBILE")}) {
+  @container (min-width: ${t("BREAK_MOBILE")}) {
     font-size: 1.25em;
   }
 
-  @container camera-filter (min-width: ${t("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t("BREAK_PHABLET_MIN")}) {
     font-size: 0.75em;
   }
 `, g = e.tspan`
   font-size: 2em;
 
-  @container camera-filter (min-width: ${t("BREAK_MOBILE")}) {
+  @container (min-width: ${t("BREAK_MOBILE")}) {
     font-size: 1.25em;
   }
 
-  @container camera-filter (min-width: ${t("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t("BREAK_PHABLET_MIN")}) {
     font-size: 0.75em;
   }
-`, w = e.tspan`
+`, A = e.tspan`
   font-size: 1.5em;
 
-  @container camera-filter (min-width: ${t("BREAK_MOBILE")}) {
+  @container (min-width: ${t("BREAK_MOBILE")}) {
     font-size: 1em;
   }
 
-  @container camera-filter (min-width: ${t("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t("BREAK_PHABLET_MIN")}) {
     font-size: 0.5em;
   }
-`, b = e.tspan`
+`, w = e.tspan`
   font-size: 1.3em;
 
-  @container camera-filter (min-width: ${t("BREAK_MOBILE")}) {
+  @container (min-width: ${t("BREAK_MOBILE")}) {
     font-size: 0.8em;
   }
 
-  @container camera-filter (min-width: ${t("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${t("BREAK_PHABLET_MIN")}) {
     font-size: 0.4em;
   }
 `, B = e.ul`
@@ -89,7 +93,7 @@ const r = e.div`
   justify-content: space-between;
   line-height: 1.2;
   font-size: 80%;
-  margin: 0;
+  margin: var(--PADDING_SMALL, 20px) 0 0;
   padding: 0;
   list-style-type: none;
 `, E = e.li`
@@ -103,19 +107,19 @@ const r = e.div`
 `;
 export {
   g as ColorName,
-  w as ColorSpectrum,
-  b as ColorSpectrumUnit,
+  A as ColorSpectrum,
+  w as ColorSpectrumUnit,
   E as CondensedRange,
   B as CondensedRangeRow,
-  r as FilterContainer,
+  o as FilterContainer,
   d as FilterName,
-  s as FilterNames,
+  l as FilterNames,
   c as FilterRange,
-  l as FilterRanges,
-  o as FilterTable,
-  a as FilterTitle,
-  f as SelectContainer,
-  h as SelectLabel,
-  p as SpectrumLabel,
+  s as FilterRanges,
+  a as FilterTable,
+  r as FilterTitle,
+  p as SelectContainer,
+  f as SelectLabel,
+  h as SpectrumLabel,
   m as Wavelength
 };

package/dist/widgets/ColorTool/Actions/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),m=require("react-i18next"),x=require("../../../atomic/Button/patterns/Reset.cjs"),b=require("./Export/index.cjs"),g=require("./styles.cjs"),c=require("../lib/utils.cjs"),p=n=>n.map(s=>{const{defaultValue:e,min:t,max:i}=s,r=e||1;return{...s,active:!1,color:"",brightness:c.getBrightnessValue(t,i,r),value:r}}),a=({actions:n,isDisabled:s,selectedData:e,selectionCallback:t,canvas:i})=>{const{t:r}=m.useTranslation(),{name:d,filters:f}=e,u=s||!c.areActionsActive(e);return l.jsx(g.Actions,{children:n.map(o=>{switch(o){case"reset":return l.jsx(x.default,{isDisabled:u,onResetCallback:()=>t&&t({...e,filters:p(f)})},o);case"export":return l.jsx(b.default,{isDisabled:u,canvas:i,filename:d,children:r("colorTool.actions.export")},o);case"save":return null;default:return null}})})};a.displayName="Widgets.ColorTool.Actions";const q=a;exports.default=q;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),f=require("react-i18next"),x=require("../../../atomic/Button/patterns/Reset.cjs"),g=require("./Export/index.cjs"),a=require("../lib/utils.cjs"),b=i=>i.map(t=>{const{defaultValue:e,min:s,max:o}=t,r=e||1;return{...t,active:!1,color:"",brightness:a.getBrightnessValue(s,o,r),value:r}}),c=({actions:i,isDisabled:t,selectedData:e,selectionCallback:s,canvas:o})=>{const{t:r}=f.useTranslation(),{name:d,filters:m}=e,u=t||!a.areActionsActive(e);return n.jsx(n.Fragment,{children:i.map(l=>{switch(l){case"reset":return n.jsx(x.default,{isDisabled:u,onResetCallback:()=>s&&s({...e,filters:b(m)})},l);case"export":return n.jsx(g.default,{isDisabled:u,canvas:o,filename:d,children:r("colorTool.actions.export")},l);case"save":return null;default:return null}})})};c.displayName="Widgets.ColorTool.Actions";const p=c;exports.default=p;

package/dist/widgets/ColorTool/Actions/index.js

@@ -1,49 +1,48 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { useTranslation as p } from "react-i18next";
-import f from "../../../atomic/Button/patterns/Reset.js";
-import d from "./Export/index.js";
-import { Actions as A } from "./styles.js";
-import { areActionsActive as x, getBrightnessValue as h } from "../lib/utils.js";
-const b = (r) => r.map((s) => {
-  const { defaultValue: t, min: e, max: n } = s, o = t || 1;
+import { jsx as l, Fragment as p } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import d from "../../../atomic/Button/patterns/Reset.js";
+import x from "./Export/index.js";
+import { areActionsActive as g, getBrightnessValue as h } from "../lib/utils.js";
+const A = (o) => o.map((t) => {
+  const { defaultValue: e, min: r, max: n } = t, s = e || 1;
   return {
-    ...s,
+    ...t,
     active: !1,
     color: "",
-    brightness: h(e, n, o),
-    value: o
+    brightness: h(r, n, s),
+    value: s
   };
 }), c = ({
-  actions: r,
-  isDisabled: s,
-  selectedData: t,
-  selectionCallback: e,
+  actions: o,
+  isDisabled: t,
+  selectedData: e,
+  selectionCallback: r,
   canvas: n
 }) => {
-  const { t: o } = p(), { name: m, filters: u } = t, a = s || !x(t);
-  return /* @__PURE__ */ l(A, { children: r.map((i) => {
+  const { t: s } = f(), { name: m, filters: u } = e, a = t || !g(e);
+  return /* @__PURE__ */ l(p, { children: o.map((i) => {
     switch (i) {
       case "reset":
         return /* @__PURE__ */ l(
-          f,
+          d,
           {
             isDisabled: a,
-            onResetCallback: () => e && e({
-              ...t,
-              filters: b(u)
+            onResetCallback: () => r && r({
+              ...e,
+              filters: A(u)
             })
           },
           i
         );
       case "export":
         return /* @__PURE__ */ l(
-          d,
+          x,
           {
             isDisabled: a,
             canvas: n,
             filename: m,
-            children: o("colorTool.actions.export")
+            children: s("colorTool.actions.export")
           },
           i
         );
@@ -55,7 +54,7 @@ const b = (r) => r.map((s) => {
   }) });
 };
 c.displayName = "Widgets.ColorTool.Actions";
-const j = c;
+const V = c;
 export {
-  j as default
+  V as default
 };

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

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