@rubin-epo/epo-widget-lib 0.9.5 → 0.9.7

package/dist/widgets/LightCurvePlot/ScatterPlot/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("react"),G=require("react-i18next"),k=require("d3-array"),F=require("../../../charts/hooks/useAxis.cjs"),J=require("../../../charts/XAxis/index.cjs"),K=require("../../../charts/YAxis/index.cjs"),Q=require("../../../charts/Tooltip/index.cjs"),V=require("../../../charts/ClippingContainer/index.cjs"),X=require("../../../charts/Viewport/index.cjs"),s=require("../defaults.cjs"),Y=require("../Point/index.cjs"),p=require("./styles.cjs"),Z=(i,h,b)=>{const d={};return Object.keys(i).forEach(l=>{const a=l==="top"||l==="bottom"?b:h,c=`${l.charAt(0).toUpperCase()}${l.slice(1)}`;d[`padding${c}`]=`${i[l]/a*100}%`}),console.log({styles:d}),d},O=({data:i,activeAlertId:h,xMin:b,xMax:d,yMin:j=s.default.yMin,yMax:l=s.default.yMax,width:a=s.default.width,height:c=s.default.height,name:P,children:R,slider:q,className:W})=>{const{t:x,i18n:{language:C}}=G.useTranslation(),[L,S]=w.useState(),D=x("light_curve.plot.x_label"),M="xAxisLabel",T=x("light_curve.plot.y_label"),_="yAxisLabel",o=typeof L<"u"?i[L]:i.find(({id:n})=>n===h),f={top:10,right:10,bottom:25,left:40},y=[0+f.left,a-f.right],[A,z,r]=F.default({min:b||k.min(i,({x:n})=>n)||s.default.xMin,max:d||k.max(i,({x:n})=>n)||s.default.xMax,step:s.default.xStep,range:y}),m=r(A[0]),g=[0+f.top,c-f.bottom],[u,H,t]=F.default({min:j,max:l,step:s.default.yStep,range:g}),$=t(u[1]);return e.jsxs(p.PlotContainer,{className:W,children:[e.jsxs(p.Chart,{width:a,height:c,horizontalLabel:D,horizontalLabelId:M,verticalLabel:T,verticalLabelId:_,title:P,children:[e.jsx("rect",{x:r(0),y:t(u[0]),width:r(15)-r(0),height:$-t(u[0]),fill:"#F5F5F5"}),e.jsx(J.default,{ticks:z,y:$,labelledById:M,xDomain:A,xScale:r}),e.jsx(K.default,{ticks:H,x:m,labelledById:_,yDomain:u,yScale:t}),e.jsx(V.default,{x:m,y:t(u[0]),width:y[1]-y[0],height:g[1]-g[0],children:e.jsx("g",{role:"list","aria-label":x("light_curve.plot.plot_label")||void 0,children:i.map(({x:n,y:I,error:B,id:N},E)=>{const v=Math.round(n),U=v>0?"after":v===0?"peak":"before";return e.jsx(Y.default,{x:r(n),y:t(I),error:t(B)-t(0),onMouseOver:()=>S(E),onMouseOut:()=>S(void 0),description:x("light_curve.plot.point_label",{magnitude:I,count:Math.abs(v),context:U})||void 0},N)})})}),e.jsx(X.default,{x:m,y:t(u[0]),outerWidth:y[1]-y[0],outerHeight:g[1]-g[0],innerWidth:a,innerHeight:c,children:R}),e.jsx(Q.default,{x:o?r(o.x):void 0,y:o?t(o.y):void 0,visible:!!o,offset:6,children:x("light_curve.plot.tooltip",{magnitude:o==null?void 0:o.y.toLocaleString(C,{minimumFractionDigits:2,maximumFractionDigits:2})})})]}),q&&e.jsx(p.SliderOuterWrapper,{children:e.jsx(p.SliderInnerWrapper,{style:{...Z(f,a,c)},children:q})})]})};O.displayName="Widgets.LightCurve.ScatterPlot";const ee=O;exports.default=ee;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),w=require("react"),G=require("react-i18next"),k=require("d3-array"),F=require("../../../charts/hooks/useAxis.cjs"),J=require("../../../charts/XAxis/index.cjs"),K=require("../../../charts/YAxis/index.cjs"),Q=require("../../../charts/Tooltip/index.cjs"),V=require("../../../charts/ClippingContainer/index.cjs"),X=require("../../../charts/Viewport/index.cjs"),i=require("../defaults.cjs"),Y=require("../Point/index.cjs"),y=require("./styles.cjs"),Z=(o,b,g)=>{const h={};return Object.keys(o).forEach(n=>{const a=n==="top"||n==="bottom"?g:b,c=`${n.charAt(0).toUpperCase()}${n.slice(1)}`;h[`padding${c}`]=`${o[n]/a*100}%`}),h},O=({data:o,activeAlertId:b,xMin:g,xMax:h,yMin:m=i.default.yMin,yMax:n=i.default.yMax,width:a=i.default.width,height:c=i.default.height,name:P,children:R,slider:q,className:W})=>{const{t:d,i18n:{language:C}}=G.useTranslation(),[S,L]=w.useState(),D=d("light_curve.plot.x_label"),_="xAxisLabel",T=d("light_curve.plot.y_label"),M="yAxisLabel",s=typeof S<"u"?o[S]:o.find(({id:r})=>r===b),x={top:10,right:10,bottom:25,left:40},f=[0+x.left,a-x.right],[A,z,l]=F.default({min:g||k.min(o,({x:r})=>r)||i.default.xMin,max:h||k.max(o,({x:r})=>r)||i.default.xMax,step:i.default.xStep,range:f}),v=l(A[0]),p=[c-x.bottom,0+x.top],[u,H,t]=F.default({min:m,max:n,step:m<n?Math.abs(i.default.yStep):i.default.yStep,range:p}),$=t(u[0]);return e.jsxs(y.PlotContainer,{className:W,children:[e.jsxs(y.Chart,{width:a,height:c,horizontalLabel:D,horizontalLabelId:_,verticalLabel:T,verticalLabelId:M,title:P,children:[e.jsxs(V.default,{x:v,y:t(u[1]),width:f[1]-f[0],height:p[0]-p[1],children:[e.jsx("rect",{x:l(0),y:t(u[1]),width:l(15)-l(0),height:$-t(u[1]),fill:"#F5F5F5"}),e.jsx("g",{role:"list","aria-label":d("light_curve.plot.plot_label")||void 0,children:o.map(({x:r,y:I,error:B,id:N},E)=>{const j=Math.round(r),U=j>0?"after":j===0?"peak":"before";return e.jsx(Y.default,{x:l(r),y:t(I),error:t(B)-t(0),onMouseOver:()=>L(E),onMouseOut:()=>L(void 0),description:d("light_curve.plot.point_label",{magnitude:I,count:Math.abs(j),context:U})||void 0},N)})})]}),e.jsx(J.default,{ticks:z,y:$,labelledById:_,xDomain:A,xScale:l}),e.jsx(K.default,{ticks:H,x:v,labelledById:M,yDomain:u,yScale:t}),e.jsx(X.default,{x:v,y:t(u[0]),outerWidth:f[1]-f[0],outerHeight:p[1]-p[0],innerWidth:a,innerHeight:c,children:R}),e.jsx(Q.default,{x:s?l(s.x):void 0,y:s?t(s.y):void 0,visible:!!s,offset:6,children:d("light_curve.plot.tooltip",{magnitude:s==null?void 0:s.y.toLocaleString(C,{minimumFractionDigits:2,maximumFractionDigits:2})})})]}),q&&e.jsx(y.SliderOuterWrapper,{children:e.jsx(y.SliderInnerWrapper,{style:{...Z(x,a,c)},children:q})})]})};O.displayName="Widgets.LightCurve.ScatterPlot";const ee=O;exports.default=ee;

package/dist/widgets/LightCurvePlot/ScatterPlot/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as F, jsx as o } from "react/jsx-runtime";
+import { jsxs as L, jsx as o } from "react/jsx-runtime";
 import { useState as U } from "react";
 import { useTranslation as V } from "react-i18next";
 import { min as X, max as Y } from "d3-array";
@@ -9,50 +9,50 @@ import G from "../../../charts/YAxis/index.js";
 import J from "../../../charts/Tooltip/index.js";
 import K from "../../../charts/ClippingContainer/index.js";
 import Q from "../../../charts/Viewport/index.js";
-import n from "../defaults.js";
+import e from "../defaults.js";
 import Z from "../Point/index.js";
 import { PlotContainer as tt, Chart as ot, SliderOuterWrapper as et, SliderInnerWrapper as it } from "./styles.js";
-const rt = (e, h, f) => {
-  const p = {};
-  return Object.keys(e).forEach((l) => {
-    const a = l === "top" || l === "bottom" ? f : h, c = `${l.charAt(0).toUpperCase()}${l.slice(1)}`;
-    p[`padding${c}`] = `${e[l] / a * 100}%`;
-  }), console.log({ styles: p }), p;
+const rt = (i, f, g) => {
+  const h = {};
+  return Object.keys(i).forEach((r) => {
+    const a = r === "top" || r === "bottom" ? g : f, c = `${r.charAt(0).toUpperCase()}${r.slice(1)}`;
+    h[`padding${c}`] = `${i[r] / a * 100}%`;
+  }), h;
 }, W = ({
-  data: e,
-  activeAlertId: h,
-  xMin: f,
-  xMax: p,
-  yMin: v = n.yMin,
-  yMax: l = n.yMax,
-  width: a = n.width,
-  height: c = n.height,
+  data: i,
+  activeAlertId: f,
+  xMin: g,
+  xMax: h,
+  yMin: b = e.yMin,
+  yMax: r = e.yMax,
+  width: a = e.width,
+  height: c = e.height,
   name: D,
   children: O,
-  slider: L,
+  slider: S,
   className: R
 }) => {
   const {
-    t: d,
+    t: p,
     i18n: { language: T }
-  } = V(), [A, S] = U(), $ = d("light_curve.plot.x_label"), M = "xAxisLabel", j = d("light_curve.plot.y_label"), _ = "yAxisLabel", i = typeof A < "u" ? e[A] : e.find(({ id: r }) => r === h), x = {
+  } = V(), [A, _] = U(), $ = p("light_curve.plot.x_label"), M = "xAxisLabel", j = p("light_curve.plot.y_label"), I = "yAxisLabel", n = typeof A < "u" ? i[A] : i.find(({ id: l }) => l === f), d = {
     top: 10,
     right: 10,
     bottom: 25,
     left: 40
-  }, u = [0 + x.left, a - x.right], [I, z, s] = P({
-    min: f || X(e, ({ x: r }) => r) || n.xMin,
-    max: p || Y(e, ({ x: r }) => r) || n.xMax,
-    step: n.xStep,
+  }, x = [0 + d.left, a - d.right], [C, z, s] = P({
+    min: g || X(i, ({ x: l }) => l) || e.xMin,
+    max: h || Y(i, ({ x: l }) => l) || e.xMax,
+    step: e.xStep,
+    range: x
+  }), y = s(C[0]), u = [c - d.bottom, 0 + d.top], [m, H, t] = P({
+    min: b,
+    max: r,
+    step: b < r ? Math.abs(e.yStep) : e.yStep,
     range: u
-  }), y = s(I[0]), g = [0 + x.top, c - x.bottom], [m, H, t] = P({
-    min: v,
-    max: l,
-    step: n.yStep,
-    range: g
-  }), C = t(m[1]);
-  return /* @__PURE__ */ F(tt, { className: R, children: [
-    /* @__PURE__ */ F(
+  }), k = t(m[0]);
+  return /* @__PURE__ */ L(tt, { className: R, children: [
+    /* @__PURE__ */ L(
       ot,
       {
         width: a,
@@ -60,26 +60,63 @@ const rt = (e, h, f) => {
         horizontalLabel: $,
         horizontalLabelId: M,
         verticalLabel: j,
-        verticalLabelId: _,
+        verticalLabelId: I,
         title: D,
         children: [
-          /* @__PURE__ */ o(
-            "rect",
+          /* @__PURE__ */ L(
+            K,
             {
-              x: s(0),
-              y: t(m[0]),
-              width: s(15) - s(0),
-              height: C - t(m[0]),
-              fill: "#F5F5F5"
+              x: y,
+              y: t(m[1]),
+              width: x[1] - x[0],
+              height: u[0] - u[1],
+              children: [
+                /* @__PURE__ */ o(
+                  "rect",
+                  {
+                    x: s(0),
+                    y: t(m[1]),
+                    width: s(15) - s(0),
+                    height: k - t(m[1]),
+                    fill: "#F5F5F5"
+                  }
+                ),
+                /* @__PURE__ */ o(
+                  "g",
+                  {
+                    role: "list",
+                    "aria-label": p("light_curve.plot.plot_label") || void 0,
+                    children: i.map(({ x: l, y: F, error: B, id: N }, w) => {
+                      const v = Math.round(l), E = v > 0 ? "after" : v === 0 ? "peak" : "before";
+                      return /* @__PURE__ */ o(
+                        Z,
+                        {
+                          x: s(l),
+                          y: t(F),
+                          error: t(B) - t(0),
+                          onMouseOver: () => _(w),
+                          onMouseOut: () => _(void 0),
+                          description: p("light_curve.plot.point_label", {
+                            magnitude: F,
+                            count: Math.abs(v),
+                            context: E
+                          }) || void 0
+                        },
+                        N
+                      );
+                    })
+                  }
+                )
+              ]
             }
           ),
           /* @__PURE__ */ o(
             q,
             {
               ticks: z,
-              y: C,
+              y: k,
               labelledById: M,
-              xDomain: I,
+              xDomain: C,
               xScale: s
             }
           ),
@@ -88,53 +125,18 @@ const rt = (e, h, f) => {
             {
               ticks: H,
               x: y,
-              labelledById: _,
+              labelledById: I,
               yDomain: m,
               yScale: t
             }
           ),
-          /* @__PURE__ */ o(
-            K,
-            {
-              x: y,
-              y: t(m[0]),
-              width: u[1] - u[0],
-              height: g[1] - g[0],
-              children: /* @__PURE__ */ o(
-                "g",
-                {
-                  role: "list",
-                  "aria-label": d("light_curve.plot.plot_label") || void 0,
-                  children: e.map(({ x: r, y: k, error: B, id: N }, w) => {
-                    const b = Math.round(r), E = b > 0 ? "after" : b === 0 ? "peak" : "before";
-                    return /* @__PURE__ */ o(
-                      Z,
-                      {
-                        x: s(r),
-                        y: t(k),
-                        error: t(B) - t(0),
-                        onMouseOver: () => S(w),
-                        onMouseOut: () => S(void 0),
-                        description: d("light_curve.plot.point_label", {
-                          magnitude: k,
-                          count: Math.abs(b),
-                          context: E
-                        }) || void 0
-                      },
-                      N
-                    );
-                  })
-                }
-              )
-            }
-          ),
           /* @__PURE__ */ o(
             Q,
             {
               x: y,
               y: t(m[0]),
-              outerWidth: u[1] - u[0],
-              outerHeight: g[1] - g[0],
+              outerWidth: x[1] - x[0],
+              outerHeight: u[1] - u[0],
               innerWidth: a,
               innerHeight: c,
               children: O
@@ -143,12 +145,12 @@ const rt = (e, h, f) => {
           /* @__PURE__ */ o(
             J,
             {
-              x: i ? s(i.x) : void 0,
-              y: i ? t(i.y) : void 0,
-              visible: !!i,
+              x: n ? s(n.x) : void 0,
+              y: n ? t(n.y) : void 0,
+              visible: !!n,
               offset: 6,
-              children: d("light_curve.plot.tooltip", {
-                magnitude: i == null ? void 0 : i.y.toLocaleString(T, {
+              children: p("light_curve.plot.tooltip", {
+                magnitude: n == null ? void 0 : n.y.toLocaleString(T, {
                   minimumFractionDigits: 2,
                   maximumFractionDigits: 2
                 })
@@ -158,17 +160,17 @@ const rt = (e, h, f) => {
         ]
       }
     ),
-    L && /* @__PURE__ */ o(et, { children: /* @__PURE__ */ o(
+    S && /* @__PURE__ */ o(et, { children: /* @__PURE__ */ o(
       it,
       {
-        style: { ...rt(x, a, c) },
-        children: L
+        style: { ...rt(d, a, c) },
+        children: S
       }
     ) })
   ] });
 };
 W.displayName = "Widgets.LightCurve.ScatterPlot";
-const yt = W;
+const bt = W;
 export {
-  yt as default
+  bt as default
 };

package/dist/widgets/LightCurvePlot/defaults.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xMin:-10,xMax:50,xStep:10,yStep:.5,yMin:14,yMax:20,width:600,height:600,gaussianMin:-4,gaussianMax:4,gaussianStep:.01,gaussianWidth:-2,yOffsetMin:-50,yOffsetMax:50,yOffsetStep:.1,yOffset:-2},t=e;exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={xMin:-10,xMax:50,xStep:10,yStep:-.5,yMin:20,yMax:14,width:600,height:600,gaussianMin:-4,gaussianMax:4,gaussianStep:.01,gaussianWidth:-2,yOffsetMin:-50,yOffsetMax:50,yOffsetStep:.1,yOffset:-2},t=e;exports.default=t;

package/dist/widgets/LightCurvePlot/defaults.js

@@ -2,9 +2,9 @@ const s = {
   xMin: -10,
   xMax: 50,
   xStep: 10,
-  yStep: 0.5,
-  yMin: 14,
-  yMax: 20,
+  yStep: -0.5,
+  yMin: 20,
+  yMax: 14,
   width: 600,
   height: 600,
   gaussianMin: -4,

package/dist/widgets/SourceSelector/SourceSelector.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),B=require("react-i18next"),L=require("@rubin-epo/epo-react-lib/IconComposer"),u=require("./styles.cjs"),T=require("./PointSelector/index.cjs"),W=require("./Message/Message.cjs"),y=s=>s&&s.__esModule?s:{default:s},E=y(L),M=({width:s=600,height:i=600,selectedSource:r=[],sources:h,alerts:t=[],activeAlertIndex:a=0,alertChangeCallback:b,selectionCallback:d,blinkConfig:j,isDisplayOnly:c=!1,className:k})=>{const[x,C]=l.useState(!1),[_,g]=l.useState(),[q,n]=l.useState(!1),{t:f}=B.useTranslation(),S="sourceSelectorWidget",p=o=>{x&&!c&&(o?r.includes(o)||(d&&d(r.concat(o)),g(e.jsxs(e.Fragment,{children:[e.jsx(E.default,{icon:"checkmark"}),f("source_selector.messages.success")]})),n(!0)):(g(f("source_selector.messages.failure")),n(!0)))},I=()=>{n(!1)},m=t[a].date-t[0].date,V=Math.round(m),v=Math.round(24/m%24)||0,A=c?[t[a].image]:t.map(({image:o})=>o);return e.jsxs(u.SourceSelectorContainer,{width:s,height:i,className:k,children:[!c&&e.jsx(W.default,{onMessageChangeCallback:I,isVisible:q,forIds:[S],children:_}),e.jsxs(u.BackgroundBlinker,{images:A,activeIndex:a,blinkCallback:b,loadedCallback:()=>C(!0),...j,children:[t.length>0&&!c&&e.jsx(u.ElapsedDisplay,{day:V,hour:v}),e.jsx(T.default,{id:S,onSelectCallback:p,width:s,height:i,sources:h,selectedSource:r})]})]})};M.displayName="Widgets.SourceSelector";const F=M;exports.default=F;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),y=require("react-i18next"),A=require("@rubin-epo/epo-react-lib/IconComposer"),B=require("../../styles/svg.cjs"),S=require("./styles.cjs"),L=require("./PointSelector/index.cjs"),R=require("./Message/Message.cjs"),T=s=>s&&s.__esModule?s:{default:s},W=T(A),M=({width:s=600,height:u=600,selectedSource:r=[],sources:h,alerts:t=[],activeAlertIndex:a=0,alertChangeCallback:b,selectionCallback:i,blinkConfig:j,isDisplayOnly:c=!1,className:k})=>{const[x,C]=l.useState(!1),[_,d]=l.useState(),[q,n]=l.useState(!1),{t:g}=y.useTranslation(),f="sourceSelectorWidget",p=o=>{x&&!c&&(o?r.includes(o)||(i&&i(r.concat(o)),d(e.jsxs(e.Fragment,{children:[e.jsx(W.default,{icon:"checkmark"}),g("source_selector.messages.success")]})),n(!0)):(d(g("source_selector.messages.failure")),n(!0)))},I=()=>{n(!1)},m=t[a].date-t[0].date,v=Math.round(m),V=Math.round(24/m%24)||0,$=c?[t[a].image]:t.map(({image:o})=>o);return e.jsxs(B.Container,{style:{aspectRatio:`${s} / ${u}`},className:k,children:[!c&&e.jsx(R.default,{onMessageChangeCallback:I,isVisible:q,forIds:[f],children:_}),e.jsxs(S.BackgroundBlinker,{images:$,activeIndex:a,blinkCallback:b,loadedCallback:()=>C(!0),...j,children:[t.length>0&&!c&&e.jsx(S.ElapsedDisplay,{day:v,hour:V}),e.jsx(L.default,{id:f,onSelectCallback:p,width:s,height:u,sources:h,selectedSource:r})]})]})};M.displayName="Widgets.SourceSelector";const E=M;exports.default=E;

package/dist/widgets/SourceSelector/SourceSelector.js

@@ -1,16 +1,17 @@
 "use client";
-import { jsxs as n, jsx as r, Fragment as _ } from "react/jsx-runtime";
-import { useState as l } from "react";
-import { useTranslation as E } from "react-i18next";
-import F from "@rubin-epo/epo-react-lib/IconComposer";
-import { SourceSelectorContainer as N, BackgroundBlinker as P, ElapsedDisplay as T } from "./styles.js";
-import $ from "./PointSelector/index.js";
-import q from "./Message/Message.js";
+import { jsxs as n, jsx as t, Fragment as W } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { useTranslation as _ } from "react-i18next";
+import E from "@rubin-epo/epo-react-lib/IconComposer";
+import { Container as F } from "../../styles/svg.js";
+import { BackgroundBlinker as N, ElapsedDisplay as P } from "./styles.js";
+import R from "./PointSelector/index.js";
+import T from "./Message/Message.js";
 const h = ({
-  width: i = 600,
+  width: l = 600,
   height: d = 600,
-  selectedSource: t = [],
-  sources: p,
+  selectedSource: r = [],
+  sources: S,
   alerts: e = [],
   activeAlertIndex: c = 0,
   alertChangeCallback: k,
@@ -19,51 +20,58 @@ const h = ({
   isDisplayOnly: o = !1,
   className: M
 }) => {
-  const [b, V] = l(!1), [j, u] = l(), [x, a] = l(!1), { t: f } = E(), g = "sourceSelectorWidget", A = (s) => {
-    b && !o && (s ? t.includes(s) || (m && m(t.concat(s)), u(
-      /* @__PURE__ */ n(_, { children: [
-        /* @__PURE__ */ r(F, { icon: "checkmark" }),
+  const [b, V] = i(!1), [$, u] = i(), [j, a] = i(!1), { t: f } = _(), g = "sourceSelectorWidget", x = (s) => {
+    b && !o && (s ? r.includes(s) || (m && m(r.concat(s)), u(
+      /* @__PURE__ */ n(W, { children: [
+        /* @__PURE__ */ t(E, { icon: "checkmark" }),
         f("source_selector.messages.success")
       ] })
     ), a(!0)) : (u(f("source_selector.messages.failure")), a(!0)));
-  }, B = () => {
+  }, A = () => {
     a(!1);
-  }, S = e[c].date - e[0].date, I = Math.round(S), L = Math.round(24 / S % 24) || 0, W = o ? [e[c].image] : e.map(({ image: s }) => s);
-  return /* @__PURE__ */ n(N, { width: i, height: d, className: M, children: [
-    !o && /* @__PURE__ */ r(
-      q,
-      {
-        onMessageChangeCallback: B,
-        isVisible: x,
-        forIds: [g],
-        children: j
-      }
-    ),
-    /* @__PURE__ */ n(
-      P,
-      {
-        images: W,
-        activeIndex: c,
-        blinkCallback: k,
-        loadedCallback: () => V(!0),
-        ...C,
-        children: [
-          e.length > 0 && !o && /* @__PURE__ */ r(T, { day: I, hour: L }),
-          /* @__PURE__ */ r(
-            $,
-            {
-              id: g,
-              onSelectCallback: A,
-              width: i,
-              height: d,
-              sources: p,
-              selectedSource: t
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  }, p = e[c].date - e[0].date, B = Math.round(p), I = Math.round(24 / p % 24) || 0, L = o ? [e[c].image] : e.map(({ image: s }) => s);
+  return /* @__PURE__ */ n(
+    F,
+    {
+      style: { aspectRatio: `${l} / ${d}` },
+      className: M,
+      children: [
+        !o && /* @__PURE__ */ t(
+          T,
+          {
+            onMessageChangeCallback: A,
+            isVisible: j,
+            forIds: [g],
+            children: $
+          }
+        ),
+        /* @__PURE__ */ n(
+          N,
+          {
+            images: L,
+            activeIndex: c,
+            blinkCallback: k,
+            loadedCallback: () => V(!0),
+            ...C,
+            children: [
+              e.length > 0 && !o && /* @__PURE__ */ t(P, { day: B, hour: I }),
+              /* @__PURE__ */ t(
+                R,
+                {
+                  id: g,
+                  onSelectCallback: x,
+                  width: l,
+                  height: d,
+                  sources: S,
+                  selectedSource: r
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 h.displayName = "Widgets.SourceSelector";
 const X = h;

package/dist/widgets/SourceSelector/styles.cjs

@@ -1,20 +1,14 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("styled-components"),r=require("../../styles/svg.cjs"),a=require("../../atomic/Blinker/Blinker.cjs"),l=require("../../atomic/ElapsedTime/ElapsedTime.cjs"),i=e=>e&&e.__esModule?e:{default:e},t=i(s),n=t.default(r.Container)`
-  ${({width:e,height:o})=>s.css`
-    aspect-ratio: ${e} / ${o};
-    max-width: ${e}px;
-    max-height: ${o}px;
-  `}
-`,u=t.default.svg`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),l=require("../../atomic/Blinker/Blinker.cjs"),s=require("../../atomic/ElapsedTime/ElapsedTime.cjs"),i=t=>t&&t.__esModule?t:{default:t},e=i(o),a=e.default.svg`
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
-`,c=t.default(a.default)`
+`,r=e.default(l.default)`
   position: absolute;
   width: 100%;
   height: 100%;
-`,d=t.default(l.default)`
+`,u=e.default(s.default)`
   position: absolute;
   right: var(--PADDING_SMALL, 20px);
   bottom: var(--PADDING_SMALL, 20px);
-`;exports.BackgroundBlinker=c;exports.ElapsedDisplay=d;exports.SVG=u;exports.SourceSelectorContainer=n;
+`;exports.BackgroundBlinker=r;exports.ElapsedDisplay=u;exports.SVG=a;

package/dist/widgets/SourceSelector/styles.js

@@ -1,31 +1,23 @@
 "use client";
-import o, { css as i } from "styled-components";
-import { Container as e } from "../../styles/svg.js";
-import s from "../../atomic/Blinker/Blinker.js";
-import p from "../../atomic/ElapsedTime/ElapsedTime.js";
-const c = o(e)`
-  ${({ width: t, height: r }) => i`
-    aspect-ratio: ${t} / ${r};
-    max-width: ${t}px;
-    max-height: ${r}px;
-  `}
-`, u = o.svg`
+import o from "styled-components";
+import t from "../../atomic/Blinker/Blinker.js";
+import i from "../../atomic/ElapsedTime/ElapsedTime.js";
+const p = o.svg`
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
-`, x = o(s)`
+`, l = o(t)`
   position: absolute;
   width: 100%;
   height: 100%;
-`, d = o(p)`
+`, n = o(i)`
   position: absolute;
   right: var(--PADDING_SMALL, 20px);
   bottom: var(--PADDING_SMALL, 20px);
 `;
 export {
-  x as BackgroundBlinker,
-  d as ElapsedDisplay,
-  u as SVG,
-  c as SourceSelectorContainer
+  l as BackgroundBlinker,
+  n as ElapsedDisplay,
+  p as SVG
 };

package/package.json

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