@rubin-epo/epo-widget-lib 1.0.0-beta.2 → 1.0.1

package/dist/CameraFilter.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),v=require("@rubin-epo/epo-react-lib/SelectListbox"),S=require("@rubin-epo/epo-react-lib/styles"),y=require("react-i18next"),R=require("use-resize-observer"),r=require("./widgets/CameraFilter/data.cjs"),l=require("./widgets/CameraFilter/styles.cjs"),C=require("./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.cjs"),L=require("./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs"),x=i=>i&&i.__esModule?i:{default:i},M=x(v),O=x(R),m=()=>{const{t:i}=y.useTranslation(),{ref:h,width:j=1}=O.default(),[o,p]=q.useState(null),{BREAK_TABLET:b}=S.tokens,s=j<parseInt(b),{[s?"condensed":"default"]:{min:c,max:g,range:n}}=r.rangeConfig,d=r.filters[0].range[0],u=r.filters[r.filters.length-1].range[1]-d,f=r.filters.filter(({band:t})=>t),F=[{value:"none",label:i("camera_filter.labels.option",{context:"none"})}].concat(f.map(({band:t})=>({value:t,label:i("camera_filter.labels.option",{band:t})}))),_=r.filters.find(({band:t})=>t===o);return e.jsx(l.FilterWrapper,{ratio:"landscape",smallScreenRatio:"square",children:e.jsxs(l.FilterContainer,{ref:h,children:[e.jsx(l.FilterTitle,{children:i("camera_filter.title")}),s&&e.jsx(C.default,{filters:f,min:c,spectrumRange:n}),e.jsxs(l.FilterTable,{style:{"--filter-table-margin-inline-start":`${((d-c)/n*100).toFixed(2)}%`,"--filter-table-width":`${(u/n*100).toFixed(2)}%`},"data-testid":"expanded-filters",children:[e.jsx("colgroup",{children:r.filters.map(({range:t})=>e.jsx("col",{style:{width:`${(t[1]-t[0])/u*100}%`}},t.join("")))}),e.jsx(l.FilterNames,{children:e.jsx("tr",{children:r.filters.map(({band:t},a)=>e.jsx(l.FilterName,{id:`${t}-name`,style:{"--filter-name-border":t?"solid #b2b2b2":"none"},scope:"col","aria-hidden":!t,children:t},a))})}),!s&&e.jsx(l.FilterRanges,{children:e.jsx("tr",{children:r.filters.map(({band:t,range:a})=>e.jsx(l.FilterRange,{"aria-hidden":!t,children:t&&e.jsxs(e.Fragment,{children:[a.join("–"),e.jsx("br",{}),e.jsx(l.Wavelength,{children:"nm"})]})},a.join()))})})]}),e.jsx(L.default,{min:c,max:g,range:n,isCondensed:s,activeFilter:_}),e.jsxs(l.SelectContainer,{children:[e.jsx(l.SelectLabel,{id:"filterSelectLabel",children:i("camera_filter.labels.select")}),e.jsx(M.default,{options:F,value:o,onChangeCallback:t=>p(t),width:"100%",maxWidth:"100%",labelledById:"filterSelectLabel"})]})]})})};m.displayName="Widgets.CameraFilter";exports.default=m;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("react"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),y=require("@rubin-epo/epo-react-lib/styles"),S=require("react-i18next"),C=require("use-resize-observer"),r=require("./widgets/CameraFilter/data.cjs"),l=require("./widgets/CameraFilter/styles.cjs"),R=require("./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.cjs"),L=require("./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs"),x=i=>i&&i.__esModule?i:{default:i},M=x(q),O=x(C),h=()=>{const{t:i}=S.useTranslation(),{ref:j,width:m=1}=O.default(),[c,p]=v.useState(null),{BREAK_TABLET:b}=y.tokens,s=m<parseInt(b),{[s?"condensed":"default"]:{min:o,max:g,range:n}}=r.rangeConfig,d=r.filters[0].range[0],u=r.filters[r.filters.length-1].range[1]-d,f=r.filters.filter(({band:t})=>t),F=[{value:"none",label:i("camera_filter.labels.option",{context:"none"})}].concat(f.map(({band:t})=>({value:t,label:i("camera_filter.labels.option",{band:t})}))),_=r.filters.find(({band:t})=>t===c);return e.jsx(l.FilterWrapper,{ratio:5/4,children:e.jsxs(l.FilterContainer,{ref:j,children:[e.jsx(l.FilterTitle,{children:i("camera_filter.title")}),s&&e.jsx(R.default,{filters:f,min:o,spectrumRange:n}),e.jsxs(l.FilterTable,{style:{"--filter-table-margin-inline-start":`${((d-o)/n*100).toFixed(2)}%`,"--filter-table-width":`${(u/n*100).toFixed(2)}%`},"data-testid":"expanded-filters",children:[e.jsx("colgroup",{children:r.filters.map(({range:t})=>e.jsx("col",{style:{width:`${(t[1]-t[0])/u*100}%`}},t.join("")))}),e.jsx(l.FilterNames,{children:e.jsx("tr",{children:r.filters.map(({band:t},a)=>e.jsx(l.FilterName,{id:`${t}-name`,style:{"--filter-name-border":t?"solid #b2b2b2":"none"},scope:"col","aria-hidden":!t,children:t},a))})}),!s&&e.jsx(l.FilterRanges,{children:e.jsx("tr",{children:r.filters.map(({band:t,range:a})=>e.jsx(l.FilterRange,{"aria-hidden":!t,children:t&&e.jsxs(e.Fragment,{children:[a.join("–"),e.jsx("br",{}),e.jsx(l.Wavelength,{children:"nm"})]})},a.join()))})})]}),e.jsx(L.default,{min:o,max:g,range:n,isCondensed:s,activeFilter:_}),e.jsxs(l.SelectContainer,{children:[e.jsx(l.SelectLabel,{id:"filterSelectLabel",children:i("camera_filter.labels.select")}),e.jsx(M.default,{options:F,value:c,onChangeCallback:t=>p(t),width:"100%",maxWidth:"100%",labelledById:"filterSelectLabel"})]})]})})};h.displayName="Widgets.CameraFilter";exports.default=h;

package/dist/CameraFilter.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as t, jsxs as o, Fragment as C } from "react/jsx-runtime";
 import { useState as v } from "react";
-import R from "@rubin-epo/epo-react-lib/SelectListbox";
-import { tokens as S } from "@rubin-epo/epo-react-lib/styles";
-import { useTranslation as y } from "react-i18next";
+import y from "@rubin-epo/epo-react-lib/SelectListbox";
+import { tokens as R } from "@rubin-epo/epo-react-lib/styles";
+import { useTranslation as S } from "react-i18next";
 import j from "use-resize-observer";
 import { filters as i, rangeConfig as B } from "./widgets/CameraFilter/data.js";
 import { FilterWrapper as L, FilterContainer as T, FilterTitle as _, FilterTable as w, FilterNames as O, FilterName as W, FilterRanges as $, FilterRange as A, Wavelength as M, SelectContainer as N, SelectLabel as k } from "./widgets/CameraFilter/styles.js";
 import E from "./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.js";
 import I from "./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.js";
-const q = () => {
-  const { t: r } = y(), { ref: p, width: h = 1 } = j(), [c, F] = v(null), { BREAK_TABLET: b } = S, l = h < parseInt(b), {
+const z = () => {
+  const { t: r } = S(), { ref: p, width: h = 1 } = j(), [c, F] = v(null), { BREAK_TABLET: b } = R, l = h < parseInt(b), {
     [l ? "condensed" : "default"]: { min: s, max: g, range: n }
   } = B, d = i[0].range[0], m = i[i.length - 1].range[1] - d, f = i.filter(({ band: e }) => e), u = [{
     value: "none",
@@ -21,7 +21,7 @@ const q = () => {
       label: r("camera_filter.labels.option", { band: e })
     }))
   ), x = i.find(({ band: e }) => e === c);
-  return /* @__PURE__ */ t(L, { ratio: "landscape", smallScreenRatio: "square", children: /* @__PURE__ */ o(T, { ref: p, children: [
+  return /* @__PURE__ */ t(L, { ratio: 5 / 4, children: /* @__PURE__ */ o(T, { ref: p, children: [
     /* @__PURE__ */ t(_, { children: r("camera_filter.title") }),
     l && /* @__PURE__ */ t(
       E,
@@ -83,7 +83,7 @@ const q = () => {
     /* @__PURE__ */ o(N, { children: [
       /* @__PURE__ */ t(k, { id: "filterSelectLabel", children: r("camera_filter.labels.select") }),
       /* @__PURE__ */ t(
-        R,
+        y,
         {
           options: u,
           value: c,
@@ -96,7 +96,7 @@ const q = () => {
     ] })
   ] }) });
 };
-q.displayName = "Widgets.CameraFilter";
+z.displayName = "Widgets.CameraFilter";
 export {
-  q as default
+  z as default
 };

package/dist/ColorTool.cjs

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

package/dist/ColorTool.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as e, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { useRef as _, createElement as A } from "react";
-import { useTranslation as q } from "react-i18next";
-import { getDataFiltersByName as D } from "./widgets/ColorTool/lib/utils.js";
-import { WidgetLayout as E, SelectionContainer as H, ControlsContainer as M, ToolsHeader as b, Title as P } from "./widgets/ColorTool/styles.js";
-import $ from "@rubin-epo/epo-react-lib/SelectListbox";
+import { useTranslation as D } from "react-i18next";
+import { getDataFiltersByName as E } from "./widgets/ColorTool/lib/utils.js";
+import { WidgetLayout as H, SelectionContainer as M, ControlsContainer as P, ToolsHeader as b, Title as $ } from "./widgets/ColorTool/styles.js";
+import q from "@rubin-epo/epo-react-lib/SelectListbox";
 import v from "./widgets/ColorTool/Actions/index.js";
 import z from "./layout/AspectRatio/index.js";
 import T from "./widgets/ColorTool/ImageComposite/ImageComposite.js";
@@ -30,12 +30,12 @@ const J = ({
     width: 600,
     height: 600,
     hideSubtitle: !1
-  }, a = _(null), { t: r } = q(), { filters: o, name: i } = n, { actions: B, width: c, height: d, hideSubtitle: I } = {
+  }, a = _(null), { t: r } = D(), { filters: o, name: i } = n, { actions: B, width: c, height: d, hideSubtitle: I } = {
     ...x,
     ...w
   }, u = o.map(({ image: t }) => ({ url: t, width: c, height: d }));
   if (S)
-    return /* @__PURE__ */ e(z, { ratio: "square", children: /* @__PURE__ */ e(
+    return /* @__PURE__ */ e(z, { ratio: 1, children: /* @__PURE__ */ e(
       T,
       {
         ref: a,
@@ -60,12 +60,13 @@ const J = ({
     if (t)
       return l && l({
         name: t,
-        filters: D(p, t)
+        filters: E(p, t)
       });
   }, g = p.length > 1, R = r("colorTool.actions.select_an_object");
   return /* @__PURE__ */ e(
-    E,
+    H,
     {
+      ratio: { landscape: 3 / 2, portrait: 9 / 16 },
       widget: /* @__PURE__ */ e(
         T,
         {
@@ -75,8 +76,8 @@ const J = ({
           height: d,
           selectedObjectName: i,
           images: u,
-          children: g && /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(
-            $,
+          children: g && /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+            q,
             {
               id: "astroObjectSelector",
               placeholder: R,
@@ -90,7 +91,7 @@ const J = ({
           ) })
         }
       ),
-      controls: /* @__PURE__ */ f(M, { children: [
+      controls: /* @__PURE__ */ f(P, { children: [
         o && /* @__PURE__ */ f(L, { children: [
           /* @__PURE__ */ e(b, { id: "filterLabel", children: r("colorTool.labels.filter") }),
           /* @__PURE__ */ e(b, { id: "colorLabel", children: r("colorTool.labels.color") }),
@@ -123,7 +124,7 @@ const J = ({
           selectionCallback: l
         }
       ),
-      caption: i && g && /* @__PURE__ */ e(P, { children: !I && /* @__PURE__ */ f(L, { children: [
+      caption: i && g && /* @__PURE__ */ e($, { children: !I && /* @__PURE__ */ f(L, { children: [
         /* @__PURE__ */ e("dt", { children: r("colorTool.labels.object") }),
         /* @__PURE__ */ e("dd", { children: i })
       ] }) })

package/dist/FilterTool.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),m=require("@rubin-epo/epo-react-lib/SelectListbox"),_=require("@rubin-epo/epo-react-lib/ColorSwatch"),r=require("./widgets/FilterTool/styles.cjs"),d=e=>e&&e.__esModule?e:{default:e},b=d(m),C=d(_),c=({selectedColor:e="none",selectionCallback:f,isDisabled:j=!1,id:h,labelledById:u})=>{const{t:l}=i.useTranslation(),t={violet:"#861cff",blue:"#006da8",green:"#6bd853",yellow:"#ffdd15",orange:"#f18922",red:"#ec1c24",none:"transparent"},p={violet:"M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",blue:"M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",green:"M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",yellow:"M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",orange:"M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",red:"M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"},n={violet:[[1426.5,547.9],[1353.2,550.6],[1377.9,530.1],[1372.3,498.5]],blue:[[1431.5,496.4],[1358.6,504.1],[1381.8,482],[1374.1,450.9]],green:[[1437.9,443.4],[1366.1,458.4],[1387,434.1],[1376.2,403.9]],yellow:[[1438.9,389.7],[1368,408.2],[1387.6,382.8],[1375.4,353.3]],orange:[[1443.7,340.3],[1373.9,362.8],[1392.1,336.4],[1378.2,307.5]],red:[[1441.9,290],[1372.4,313.2],[1390.3,286.6],[1376.1,257.9]]},g=Object.keys(t).map(s=>({value:s,label:l(`filterTool.colors.${s}`),icon:o.jsx(C.default,{color:s,size:"small"})})),x=s=>e!==s&&e!=="none",y=l("filterTool.selectLabel"),a=e==="none";return o.jsxs(r.Wrapper,{ratio:"landscape",children:[o.jsxs(r.PrismSVG,{version:"1.1",viewBox:"0 0 1551.6 736.7","aria-labelledby":u,children:[o.jsxs("defs",{children:[o.jsxs("linearGradient",{id:"no-arrow-red",children:[o.jsx("stop",{offset:"0%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-orange",children:[o.jsx("stop",{offset:"0%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-yellow",children:[o.jsx("stop",{offset:"0%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-green",children:[o.jsx("stop",{offset:"0%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-blue",children:[o.jsx("stop",{offset:"0%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-violet",children:[o.jsx("stop",{offset:"0%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),o.jsxs("radialGradient",{id:"gradient_1_",cx:"718.4264",cy:"-294.6529",r:"417.8",fx:"638.9412",fy:"-303.5418",gradientTransform:"matrix(1 0 0 1 0 534)",gradientUnits:"userSpaceOnUse",children:[o.jsx("stop",{offset:"0.12",style:{stopColor:"#FFFFFF"}}),o.jsx("stop",{offset:"1",style:{stopColor:"#000000"}})]}),o.jsxs("g",{children:[o.jsx(r.WhiteLine,{id:"white_ray",x1:"108.2",y1:"463.3",x2:"546.1",y2:"312.5"}),o.jsx(r.WhiteLine,{id:"white_light_arrow_line",x1:"376.8",y1:"327.9",x2:"430",y2:"309.6"}),o.jsx("polygon",{id:"white_light_arrow",points:"420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",fill:"#ffffff"}),o.jsx("text",{transform:"matrix(0.9446 -0.3282 0.3282 0.9446 370 342.5)",textAnchor:"end",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.whiteLight"})})]}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 598.2964 606.0872)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.prism"})}),o.jsx("polygon",{id:"gradient",points:"653.2,127 867.4,498 438.9,498",fill:"url(#gradient_1_)",style:{opacity:.3}})]}),o.jsx(r.PrismOutline,{id:"outline",points:"653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "}),o.jsx("g",{role:"list",id:"rays_out","aria-label":l("filterTool.light_out"),children:Object.keys(p).map(s=>o.jsx(r.Ray,{id:`${s}_ray`,style:{"--ray-fill":x(s)?`url(#no-arrow-${s})`:t[s]},d:p[s],role:"listitem","aria-label":l(`filterTool.colors.${s}`)},s))}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 1206.5464 164.1372)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.filter"})}),o.jsx(r.Filter,{id:"filter",x1:"1255.6",y1:"235.7",x2:"1193.1",y2:"550.3",stroke:t[e],fill:"#ffffff","aria-label":l(`filterTool.colors.${e}`)})]}),o.jsxs("g",{role:"list",id:"rays_filtered","aria-label":l("filterTool.light_filtered"),children:[Object.keys(n).map(s=>o.jsx(r.Arrow,{id:`${s}_arrow`,style:{"--arrow-opacity":x(s)&&0,"--arrow-fill":t[s]},points:n[s].map(w=>w.join(",")).join(" "),role:a?"listitem":"presentation","aria-label":a?l(`filterTool.colors.${s}`):void 0},s)),!a&&o.jsx("text",{role:"listitem",x:n[e][3][0],y:n[e][3][1],fill:"#ffffff",dy:"-25",children:o.jsx(i.Trans,{i18nKey:`filterTool.colors.${e}`})})]})]}),o.jsx(r.SelectContainer,{children:o.jsx(b.default,{options:g,isDisabled:j,value:e,onChangeCallback:s=>f&&f(s||"none"),placeholder:y,maxWidth:"100%",width:"200px",id:h})})]})};c.displayName="Widgets.FilterTool";exports.default=c;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),m=require("@rubin-epo/epo-react-lib/SelectListbox"),_=require("@rubin-epo/epo-react-lib/ColorSwatch"),r=require("./widgets/FilterTool/styles.cjs"),d=e=>e&&e.__esModule?e:{default:e},b=d(m),C=d(_),j=({selectedColor:e="none",selectionCallback:f,isDisabled:c=!1,id:h,labelledById:u})=>{const{t:l}=i.useTranslation(),t={violet:"#861cff",blue:"#006da8",green:"#6bd853",yellow:"#ffdd15",orange:"#f18922",red:"#ec1c24",none:"transparent"},p={violet:"M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",blue:"M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",green:"M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",yellow:"M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",orange:"M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",red:"M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"},n={violet:[[1426.5,547.9],[1353.2,550.6],[1377.9,530.1],[1372.3,498.5]],blue:[[1431.5,496.4],[1358.6,504.1],[1381.8,482],[1374.1,450.9]],green:[[1437.9,443.4],[1366.1,458.4],[1387,434.1],[1376.2,403.9]],yellow:[[1438.9,389.7],[1368,408.2],[1387.6,382.8],[1375.4,353.3]],orange:[[1443.7,340.3],[1373.9,362.8],[1392.1,336.4],[1378.2,307.5]],red:[[1441.9,290],[1372.4,313.2],[1390.3,286.6],[1376.1,257.9]]},g=Object.keys(t).map(s=>({value:s,label:l(`filterTool.colors.${s}`),icon:o.jsx(C.default,{color:s,size:"small"})})),x=s=>e!==s&&e!=="none",y=l("filterTool.selectLabel"),a=e==="none";return o.jsxs(r.Wrapper,{ratio:3/2,children:[o.jsxs(r.PrismSVG,{version:"1.1",viewBox:"0 0 1551.6 736.7","aria-labelledby":u,children:[o.jsxs("defs",{children:[o.jsxs("linearGradient",{id:"no-arrow-red",children:[o.jsx("stop",{offset:"0%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-orange",children:[o.jsx("stop",{offset:"0%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-yellow",children:[o.jsx("stop",{offset:"0%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-green",children:[o.jsx("stop",{offset:"0%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-blue",children:[o.jsx("stop",{offset:"0%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-violet",children:[o.jsx("stop",{offset:"0%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),o.jsxs("radialGradient",{id:"gradient_1_",cx:"718.4264",cy:"-294.6529",r:"417.8",fx:"638.9412",fy:"-303.5418",gradientTransform:"matrix(1 0 0 1 0 534)",gradientUnits:"userSpaceOnUse",children:[o.jsx("stop",{offset:"0.12",style:{stopColor:"#FFFFFF"}}),o.jsx("stop",{offset:"1",style:{stopColor:"#000000"}})]}),o.jsxs("g",{children:[o.jsx(r.WhiteLine,{id:"white_ray",x1:"108.2",y1:"463.3",x2:"546.1",y2:"312.5"}),o.jsx(r.WhiteLine,{id:"white_light_arrow_line",x1:"376.8",y1:"327.9",x2:"430",y2:"309.6"}),o.jsx("polygon",{id:"white_light_arrow",points:"420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",fill:"#ffffff"}),o.jsx("text",{transform:"matrix(0.9446 -0.3282 0.3282 0.9446 370 342.5)",textAnchor:"end",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.whiteLight"})})]}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 598.2964 606.0872)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.prism"})}),o.jsx("polygon",{id:"gradient",points:"653.2,127 867.4,498 438.9,498",fill:"url(#gradient_1_)",style:{opacity:.3}})]}),o.jsx(r.PrismOutline,{id:"outline",points:"653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "}),o.jsx("g",{role:"list",id:"rays_out","aria-label":l("filterTool.light_out"),children:Object.keys(p).map(s=>o.jsx(r.Ray,{id:`${s}_ray`,style:{"--ray-fill":x(s)?`url(#no-arrow-${s})`:t[s]},d:p[s],role:"listitem","aria-label":l(`filterTool.colors.${s}`)},s))}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 1206.5464 164.1372)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.filter"})}),o.jsx(r.Filter,{id:"filter",x1:"1255.6",y1:"235.7",x2:"1193.1",y2:"550.3",stroke:t[e],fill:"#ffffff","aria-label":l(`filterTool.colors.${e}`)})]}),o.jsxs("g",{role:"list",id:"rays_filtered","aria-label":l("filterTool.light_filtered"),children:[Object.keys(n).map(s=>o.jsx(r.Arrow,{id:`${s}_arrow`,style:{"--arrow-opacity":x(s)&&0,"--arrow-fill":t[s]},points:n[s].map(w=>w.join(",")).join(" "),role:a?"listitem":"presentation","aria-label":a?l(`filterTool.colors.${s}`):void 0},s)),!a&&o.jsx("text",{role:"listitem",x:n[e][3][0],y:n[e][3][1],fill:"#ffffff",dy:"-25",children:o.jsx(i.Trans,{i18nKey:`filterTool.colors.${e}`})})]})]}),o.jsx(r.SelectContainer,{children:o.jsx(b.default,{options:g,isDisabled:c,value:e,onChangeCallback:s=>f&&f(s||"none"),placeholder:y,maxWidth:"100%",width:"200px",id:h})})]})};j.displayName="Widgets.FilterTool";exports.default=j;

package/dist/FilterTool.js

@@ -68,7 +68,7 @@ const j = ({
     label: i(`filterTool.colors.${t}`),
     icon: /* @__PURE__ */ o(u, { color: t, size: "small" })
   })), d = (t) => e !== t && e !== "none", w = i("filterTool.selectLabel"), f = e === "none";
-  return /* @__PURE__ */ l(L, { ratio: "landscape", children: [
+  return /* @__PURE__ */ l(L, { ratio: 3 / 2, children: [
     /* @__PURE__ */ l(
       T,
       {

package/dist/IsochronePlot.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),y=require("react"),Q=require("react-i18next"),U=require("use-resize-observer"),X=require("lodash/round"),F=require("@rubin-epo/epo-react-lib/styles"),Y=require("./layout/Controls/index.cjs"),Z=require("./charts/ScatterPlot/index.cjs"),ee=require("./atomic/Button/patterns/Reset.cjs");require("./atomic/PlotWrapper/index.cjs");const te=require("./charts/Readout/index.cjs"),se=require("./charts/PathFromPoints/index.cjs"),u=require("./lib/utils.cjs"),ie=require("./lib/helpers.cjs"),re=require("./widgets/IsochronePlot/Controls/index.cjs"),i=require("./widgets/IsochronePlot/defaults.cjs"),ne=require("./widgets/IsochronePlot/A11Y/CurveFit.cjs"),oe=require("./atomic/PlotWrapper/styles.cjs"),W=e=>e&&e.__esModule?e:{default:e},ae=W(U),le=W(X),ue=e=>e?e<parseFloat(F.token("BREAK_PHABLET_MIN"))?i.default.pointRadius.md:e<parseFloat(F.token("BREAK_LARGE_TABLET"))?i.default.pointRadius.sm:i.default.pointRadius.lg:i.default.pointRadius.lg,ce=({data:e,value:D,ageLibrary:I,isDisplayOnly:M=!1,isLoading:P,xAxis:k,yAxis:T,name:$,onChangeCallback:c})=>{const{ref:B,width:E}=ae.default(),{t:d,i18n:{language:x}}=Q.useTranslation(),[K,O]=y.useState(!0),h=y.useId(),n=!P&&!K,w={top:0,right:0,bottom:20,left:20},{width:f,height:g}=i.default,{ages:q={}}=I,s=Object.keys(q).sort((r,l)=>parseFloat(r)-parseFloat(l)).map(parseFloat),z=u.mergeWithDefaults(k,{...i.default.xAxis,label:d("isochrone_plot.plot.x_label")}),_=u.mergeWithDefaults(T,{...i.default.yAxis,label:d("isochrone_plot.plot.y_label")}),o={age:{min:s.length>0?Math.min(...s):0,max:s.length>0?Math.max(...s):0,step:le.default(s[1]-s[0],1)||.5,marks:s},distance:{min:0,max:_.min+1,step:.05}},b={age:s.length>0?u.middle(s):0,distance:(o.distance.max-o.distance.min)/2+o.distance.min},{age:a,distance:p}=u.mergeWithDefaults(D,b),H=ue(E),R={age:a.toLocaleString(x,{minimumFractionDigits:1}),distance:ie.parsecsToLightyears(Math.pow(10,p/5+1)).toLocaleString(x,{maximumFractionDigits:0})},S=t.jsx(oe.PlotWrapper,{ref:B,children:t.jsx(Z.default,{renderer:"canvas",title:$,onLoadedCallback:()=>O(!1),data:{label:"Star Cluster",points:e.map(r=>({...r,radius:H,stroke:"rgba(18,114,108,0.5)",fill:"rgba(18,114,108,0.25)"}))},plotChildren:({Data:r,xScale:l,yScale:m,yStart:V,yEnd:j,xStart:v,xEnd:C,yDomain:G})=>{const A=(q[a.toFixed(1)]||[]).map(({x:N,y:J})=>({x:l(N),y:m(J)}))||[],L=m(p+G[1]);return t.jsxs(t.Fragment,{children:[r,a&&t.jsx(se.default,{points:A,svgProps:{strokeWidth:2,transform:`translate(0,${L})`}}),n&&t.jsx(te.default,{viewport:{x:v,y:j,outerHeight:V-j,outerWidth:C-v,innerWidth:f,innerHeight:g},position:"center right",forIds:h,forScreenreaders:t.jsx(ne.default,{points:e,value:R,isochrone:A,offset:L,xScale:l,yScale:m,width:f,height:g}),children:d("isochrone_plot.output",{...R})})]})},width:f,height:g,xAxis:z,yAxis:_,margins:w})});return t.jsx(Y.default,{widget:S,controls:t.jsx(re.default,{isDisabled:!n,value:{age:a,distance:p},configs:o,onChangeCallback:c}),actions:t.jsx(ee.default,{isDisabled:!n,onResetCallback:()=>{c&&c(b)}}),isLoading:!n,isDisplayOnly:M,controlsId:h})};exports.default=ce;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),y=require("react"),Q=require("react-i18next"),U=require("use-resize-observer"),X=require("lodash/round"),F=require("@rubin-epo/epo-react-lib/styles"),Y=require("./layout/Controls/index.cjs"),Z=require("./charts/ScatterPlot/index.cjs"),ee=require("./atomic/Button/patterns/Reset.cjs");require("./atomic/PlotWrapper/index.cjs");const te=require("./charts/Readout/index.cjs"),se=require("./charts/PathFromPoints/index.cjs"),u=require("./lib/utils.cjs"),ie=require("./lib/helpers.cjs"),re=require("./widgets/IsochronePlot/Controls/index.cjs"),i=require("./widgets/IsochronePlot/defaults.cjs"),ne=require("./widgets/IsochronePlot/A11Y/CurveFit.cjs"),oe=require("./atomic/PlotWrapper/styles.cjs"),W=e=>e&&e.__esModule?e:{default:e},ae=W(U),le=W(X),ue=e=>e?e<parseFloat(F.token("BREAK_PHABLET_MIN"))?i.default.pointRadius.md:e<parseFloat(F.token("BREAK_LARGE_TABLET"))?i.default.pointRadius.sm:i.default.pointRadius.lg:i.default.pointRadius.lg,ce=({data:e,value:D,ageLibrary:I,isDisplayOnly:M=!1,isLoading:P,xAxis:k,yAxis:T,name:$,onChangeCallback:c})=>{const{ref:B,width:E}=ae.default(),{t:d,i18n:{language:x}}=Q.useTranslation(),[K,O]=y.useState(!0),h=y.useId(),n=!P&&!K,w={top:0,right:0,bottom:20,left:20},{width:f,height:g}=i.default,{ages:q={}}=I,s=Object.keys(q).sort((r,l)=>parseFloat(r)-parseFloat(l)).map(parseFloat),z=u.mergeWithDefaults(k,{...i.default.xAxis,label:d("isochrone_plot.plot.x_label")}),_=u.mergeWithDefaults(T,{...i.default.yAxis,label:d("isochrone_plot.plot.y_label")}),o={age:{min:s.length>0?Math.min(...s):0,max:s.length>0?Math.max(...s):0,step:le.default(s[1]-s[0],1)||.5,marks:s},distance:{min:0,max:_.min+1,step:.05}},b={age:s.length>0?u.middle(s):0,distance:(o.distance.max-o.distance.min)/2+o.distance.min},{age:a,distance:p}=u.mergeWithDefaults(D,b),H=ue(E),R={age:a.toLocaleString(x,{minimumFractionDigits:1}),distance:ie.parsecsToLightyears(Math.pow(10,p/5+1)).toLocaleString(x,{maximumFractionDigits:0})},S=t.jsx(oe.PlotWrapper,{ref:B,children:t.jsx(Z.default,{renderer:"canvas",title:$,onLoadedCallback:()=>O(!1),data:{label:"Star Cluster",points:e.map(r=>({...r,radius:H,stroke:"rgba(18,114,108,0.5)",fill:"rgba(18,114,108,0.25)"}))},plotChildren:({Data:r,xScale:l,yScale:m,yStart:V,yEnd:j,xStart:v,xEnd:C,yDomain:G})=>{const A=(q[a.toFixed(1)]||[]).map(({x:N,y:J})=>({x:l(N),y:m(J)}))||[],L=m(p+G[1]);return t.jsxs(t.Fragment,{children:[r,a&&t.jsx(se.default,{points:A,svgProps:{strokeWidth:2,transform:`translate(0,${L})`}}),n&&t.jsx(te.default,{viewport:{x:v,y:j,outerHeight:V-j,outerWidth:C-v,innerWidth:f,innerHeight:g},position:"center right",forIds:h,forScreenreaders:t.jsx(ne.default,{points:e,value:R,isochrone:A,offset:L,xScale:l,yScale:m,width:f,height:g}),children:d("isochrone_plot.output",{...R})})]})},width:f,height:g,xAxis:z,yAxis:_,margins:w})});return t.jsx(Y.default,{ratio:{portrait:2/3,landscape:3/2},widget:S,controls:t.jsx(re.default,{isDisabled:!n,value:{age:a,distance:p},configs:o,onChangeCallback:c}),actions:t.jsx(ee.default,{isDisabled:!n,onResetCallback:()=>{c&&c(b)}}),isLoading:!n,isDisplayOnly:M,controlsId:h})};exports.default=ce;

package/dist/IsochronePlot.js

@@ -143,6 +143,7 @@ const pt = (r) => r ? r < parseFloat(W("BREAK_PHABLET_MIN")) ? e.pointRadius.md
   return /* @__PURE__ */ o(
     tt,
     {
+      ratio: { portrait: 2 / 3, landscape: 3 / 2 },
       widget: z,
       controls: /* @__PURE__ */ o(
         at,

package/dist/SupernovaThreeVector.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),D=require("react-i18next"),l=require("d3-array"),E=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),N=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),r=require("./widgets/SupernovaThreeVector/styles.cjs"),P=n=>n&&n.__esModule?n:{default:n},U=P(E),R=({histogramData:n,userData:k,binnedImages:I,step:u=100})=>{const{t:x}=D.useTranslation(),h=q.useId(),i={top:30,bottom:30,left:50,right:0},o=600,y=o/1.6,L=[i.left,o-i.right],V=[y-i.bottom,i.top],g=6,p=7,v=n.map(({value:e})=>e),b=0,$=l.max(v)||Math.max(...v),m=n.map(({bin:e})=>e),c=l.min(m)||0,a=l.max(m)||Math.max(...m),j=l.nice(c,a,g),S=l.nice(b,$||b,p),f=d.getLinearScale(j,L),A=d.getLinearScale(S,V),[s,M]=q.useState([c,a]),_=15,H=`calc(${i.left/o*100}% - ${_}px)`,w=`calc(${(1-f(a)/o)*100}% - ${_}px)`,C=n.map(({bin:e})=>d.between(e,s[0],s[1])),T=k.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),B=n.reduce((e,{value:O},z)=>C[z]?e+O:e,0);return t.jsxs(r.ThreeVectorContainer,{ratio:"landscape",smallScreenRatio:"portrait",children:[t.jsxs(r.ThreeVectorLayout,{children:[t.jsxs(r.HistogramContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.histogram.title")}),t.jsx(r.Histogram,{data:n,activeRange:s,xDomain:j,yDomain:S,xScale:f,yScale:A,yTicks:p,xTicks:g,step:u,margin:i,width:o,height:y})]}),t.jsx(r.SliderContainer,{style:{paddingInlineStart:H,paddingInlineEnd:w},children:t.jsx(U.default,{min:c,max:a,step:u,value:s,ariaValuetext:({valueNow:e})=>x("supernova_three_vector.slider.valueLabel",{value:e}),color:"var(--turquoise85,#12726D)",minLabel:`${c} Mlyr`,maxLabel:`${a} Mlyr`,onChangeCallback:e=>Array.isArray(e)&&M(e)})}),t.jsxs(r.SkymapContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.skymap.title")}),t.jsx(r.Skymap,{objects:T,images:I,describedById:h,visibleImages:C})]}),t.jsx(r.ResetButton,{onResetCallback:()=>M([c,a])})]}),t.jsx(N.default,{id:h,objects:T,min:s[0],max:s[1]+u,supernovaCount:B})]})};R.displayName="Widgets.SupernovaThreeVector";exports.default=R;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),q=require("react"),D=require("react-i18next"),l=require("d3-array"),E=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./lib/utils.cjs"),N=require("./widgets/SupernovaThreeVector/LiveLabel/index.cjs"),r=require("./widgets/SupernovaThreeVector/styles.cjs"),P=n=>n&&n.__esModule?n:{default:n},U=P(E),R=({histogramData:n,userData:k,binnedImages:I,step:u=100})=>{const{t:x}=D.useTranslation(),h=q.useId(),i={top:30,bottom:30,left:50,right:0},o=600,y=o/1.6,L=[i.left,o-i.right],V=[y-i.bottom,i.top],g=6,p=7,v=n.map(({value:e})=>e),b=0,$=l.max(v)||Math.max(...v),m=n.map(({bin:e})=>e),c=l.min(m)||0,a=l.max(m)||Math.max(...m),j=l.nice(c,a,g),f=l.nice(b,$||b,p),S=d.getLinearScale(j,L),A=d.getLinearScale(f,V),[s,M]=q.useState([c,a]),_=15,H=`calc(${i.left/o*100}% - ${_}px)`,w=`calc(${(1-S(a)/o)*100}% - ${_}px)`,C=n.map(({bin:e})=>d.between(e,s[0],s[1])),T=k.filter(({distance:e})=>d.between(e,s[0],s[1]+u)),B=n.reduce((e,{value:O},z)=>C[z]?e+O:e,0);return t.jsxs(r.ThreeVectorContainer,{ratio:{landscape:3/2,portrait:9/16},children:[t.jsxs(r.ThreeVectorLayout,{children:[t.jsxs(r.HistogramContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.histogram.title")}),t.jsx(r.Histogram,{data:n,activeRange:s,xDomain:j,yDomain:f,xScale:S,yScale:A,yTicks:p,xTicks:g,step:u,margin:i,width:o,height:y})]}),t.jsx(r.SliderContainer,{style:{paddingInlineStart:H,paddingInlineEnd:w},children:t.jsx(U.default,{min:c,max:a,step:u,value:s,ariaValuetext:({valueNow:e})=>x("supernova_three_vector.slider.valueLabel",{value:e}),color:"var(--turquoise85,#12726D)",minLabel:`${c} Mlyr`,maxLabel:`${a} Mlyr`,onChangeCallback:e=>Array.isArray(e)&&M(e)})}),t.jsxs(r.SkymapContainer,{children:[t.jsx(r.ChartTitle,{children:x("supernova_three_vector.skymap.title")}),t.jsx(r.Skymap,{objects:T,images:I,describedById:h,visibleImages:C})]}),t.jsx(r.ResetButton,{onResetCallback:()=>M([c,a])})]}),t.jsx(N.default,{id:h,objects:T,min:s[0],max:s[1]+u,supernovaCount:B})]})};R.displayName="Widgets.SupernovaThreeVector";exports.default=R;

package/dist/SupernovaThreeVector.js

@@ -2,9 +2,9 @@
 import { jsxs as l, jsx as n } from "react/jsx-runtime";
 import { useId as N, useState as U } from "react";
 import { useTranslation as W } from "react-i18next";
-import { max as R, min as D, nice as T } from "d3-array";
+import { max as T, min as D, nice as k } from "d3-array";
 import F from "@rubin-epo/epo-react-lib/HorizontalSlider";
-import { getLinearScale as k, between as V } from "./lib/utils.js";
+import { getLinearScale as R, between as V } from "./lib/utils.js";
 import G from "./widgets/SupernovaThreeVector/LiveLabel/index.js";
 import { ThreeVectorContainer as J, ThreeVectorLayout as K, HistogramContainer as P, ChartTitle as I, Histogram as Q, SliderContainer as X, SkymapContainer as Y, Skymap as Z, ResetButton as ee } from "./widgets/SupernovaThreeVector/styles.js";
 const te = ({
@@ -18,12 +18,12 @@ const te = ({
     bottom: 30,
     left: 50,
     right: 0
-  }, a = 600, u = a / 1.6, j = [r.left, a - r.right], A = [u - r.bottom, r.top], h = 6, x = 7, y = i.map(({ value: e }) => e), f = 0, B = R(y) || Math.max(...y), d = i.map(({ bin: e }) => e), s = D(d) || 0, o = R(d) || Math.max(...d), g = T(s, o, h), v = T(f, B || f, x), b = k(g, j), H = k(v, A), [t, S] = U([s, o]), M = 15, w = `calc(${r.left / a * 100}% - ${M}px)`, O = `calc(${(1 - b(o) / a) * 100}% - ${M}px)`, C = i.map(
+  }, a = 600, u = a / 1.6, j = [r.left, a - r.right], A = [u - r.bottom, r.top], h = 6, x = 7, y = i.map(({ value: e }) => e), f = 0, B = T(y) || Math.max(...y), d = i.map(({ bin: e }) => e), s = D(d) || 0, o = T(d) || Math.max(...d), g = k(s, o, h), v = k(f, B || f, x), b = R(g, j), H = R(v, A), [t, S] = U([s, o]), M = 15, w = `calc(${r.left / a * 100}% - ${M}px)`, O = `calc(${(1 - b(o) / a) * 100}% - ${M}px)`, C = i.map(
     ({ bin: e }) => V(e, t[0], t[1])
   ), L = _.filter(
     ({ distance: e }) => V(e, t[0], t[1] + c)
   ), q = i.reduce((e, { value: z }, E) => C[E] ? e + z : e, 0);
-  return /* @__PURE__ */ l(J, { ratio: "landscape", smallScreenRatio: "portrait", children: [
+  return /* @__PURE__ */ l(J, { ratio: { landscape: 3 / 2, portrait: 9 / 16 }, children: [
     /* @__PURE__ */ l(K, { children: [
       /* @__PURE__ */ l(P, { children: [
         /* @__PURE__ */ n(I, { children: m("supernova_three_vector.histogram.title") }),

package/dist/charts/Base/styles.d.ts

@@ -1285,7 +1285,7 @@ export declare const SVG: import('styled-components').IStyledComponent<"web", {
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;

package/dist/charts/ScatterPlot/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),J=require("react"),K=require("../XAxis/index.cjs"),Q=require("../YAxis/index.cjs"),$=require("../Guidelines/index.cjs"),U=require("../Points/index.cjs"),V=require("../Tooltip/index.cjs"),X=require("../ClippingContainer/index.cjs"),R=require("../hooks/useAxis.cjs"),Y=require("./styles.cjs"),H=require("../defaults.cjs"),Z=require("../canvas/Points/index.cjs"),w=require("../../lib/utils.cjs"),A={svg:U.default,canvas:Z.default},M=({data:C,className:D,xAxis:l,yAxis:c,width:d,height:u,title:T,activePointId:p,margins:z,tooltip:a,onLoadedCallback:B,renderer:E="svg",plotChildren:y})=>{const[q,h]=J.useState(),{label:O,points:x}=C,o={...H.default.margins,...z},e=typeof q<"u"?x[q]:x.find(({id:v})=>v===p),f=[0+o.left,d-o.right],b=[u-o.bottom,0+o.top],[i,j,t]=R.default({...l,range:f}),[r,S,s]=R.default({...c,range:b}),m=s(r[0]),g=t(i[0]),I=s(r[1]),_=t(i[1]),k="x-axis-label",L="y-axis-label",N=Math.abs(f[1]-f[0]),W=Math.abs(b[1]-b[0]),F=A[E],P=n.jsx(F,{data:x,onHoverCallback:a?v=>h(v):void 0,onHoverOutCallback:a?()=>h(void 0):void 0,width:d,height:u,xScale:t,yScale:s,label:O,onLoadedCallback:B}),G={Data:P,xScale:t,yScale:s,yStart:m,yEnd:I,xStart:g,xEnd:_,yDomain:r,xDomain:i};return n.jsxs(Y.Chart,{verticalLabel:c.label,verticalLabelId:L,horizontalLabel:l.label,horizontalLabelId:k,className:D,width:d,height:u,title:T,children:[n.jsx(Q.default,{ticks:S,x:g,labelledById:L,yDomain:r,yScale:s}),n.jsxs(X.default,{x:g,y:I,width:N,height:W,children:[l.guidelines&&n.jsx($.default,{guides:j.length,direction:"vertical",xDomain:i,yDomain:r,xScale:t,yScale:s}),c.guidelines&&n.jsx($.default,{guides:S.length,xDomain:i,yDomain:r,xScale:t,yScale:s}),y?y(G):P]}),n.jsx(K.default,{ticks:j,y:m,labelledById:k,xDomain:i,xScale:t}),a&&!w.isSafari()&&n.jsxs(V.default,{x:e?t(e.x):void 0,y:e?s(e.y):void 0,visible:!!e,offset:H.default.pointRadius,children:[e&&typeof a=="function"&&a(e),e&&typeof a=="string"&&a]})]})};M.displayName="Charts.ScatterPlot";exports.default=M;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),J=require("react"),K=require("../XAxis/index.cjs"),Q=require("../YAxis/index.cjs"),$=require("../Guidelines/index.cjs"),U=require("../Points/index.cjs"),V=require("../Tooltip/index.cjs"),X=require("../ClippingContainer/index.cjs"),R=require("../hooks/useAxis.cjs"),Y=require("./styles.cjs"),H=require("../defaults.cjs"),Z=require("../canvas/Points/index.cjs"),w={svg:U.default,canvas:Z.default},M=({data:C,className:D,xAxis:l,yAxis:c,width:d,height:u,title:T,activePointId:p,margins:z,tooltip:a,onLoadedCallback:B,renderer:E="svg",plotChildren:y})=>{const[q,h]=J.useState(),{label:O,points:x}=C,o={...H.default.margins,...z},e=typeof q<"u"?x[q]:x.find(({id:v})=>v===p),f=[0+o.left,d-o.right],b=[u-o.bottom,0+o.top],[r,j,t]=R.default({...l,range:f}),[i,m,s]=R.default({...c,range:b}),S=s(i[0]),g=t(r[0]),I=s(i[1]),_=t(r[1]),k="x-axis-label",L="y-axis-label",N=Math.abs(f[1]-f[0]),W=Math.abs(b[1]-b[0]),F=w[E],P=n.jsx(F,{data:x,onHoverCallback:a?v=>h(v):void 0,onHoverOutCallback:a?()=>h(void 0):void 0,width:d,height:u,xScale:t,yScale:s,label:O,onLoadedCallback:B}),G={Data:P,xScale:t,yScale:s,yStart:S,yEnd:I,xStart:g,xEnd:_,yDomain:i,xDomain:r};return n.jsxs(Y.Chart,{verticalLabel:c.label,verticalLabelId:L,horizontalLabel:l.label,horizontalLabelId:k,className:D,width:d,height:u,title:T,children:[n.jsx(Q.default,{ticks:m,x:g,labelledById:L,yDomain:i,yScale:s}),n.jsxs(X.default,{x:g,y:I,width:N,height:W,children:[l.guidelines&&n.jsx($.default,{guides:j.length,direction:"vertical",xDomain:r,yDomain:i,xScale:t,yScale:s}),c.guidelines&&n.jsx($.default,{guides:m.length,xDomain:r,yDomain:i,xScale:t,yScale:s}),y?y(G):P]}),n.jsx(K.default,{ticks:j,y:S,labelledById:k,xDomain:r,xScale:t}),a&&n.jsxs(V.default,{x:e?t(e.x):void 0,y:e?s(e.y):void 0,visible:!!e,offset:H.default.pointRadius,children:[e&&typeof a=="function"&&a(e),e&&typeof a=="string"&&a]})]})};M.displayName="Charts.ScatterPlot";exports.default=M;

package/dist/charts/ScatterPlot/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { jsxs as u, jsx as i } from "react/jsx-runtime";
 import { useState as F } from "react";
 import J from "../XAxis/index.js";
 import K from "../YAxis/index.js";
@@ -11,11 +11,10 @@ import D from "../hooks/useAxis.js";
 import { Chart as Z } from "./styles.js";
 import T from "../defaults.js";
 import _ from "../canvas/Points/index.js";
-import { isSafari as $ } from "../../lib/utils.js";
-const w = {
+const $ = {
   svg: Q,
   canvas: _
-}, tt = ({
+}, w = ({
   data: j,
   className: z,
   xAxis: l,
@@ -30,29 +29,29 @@ const w = {
   renderer: G = "svg",
   plotChildren: x
 }) => {
-  const [y, h] = F(), { label: N, points: f } = j, r = { ...T.margins, ...M }, t = typeof y < "u" ? f[y] : f.find(({ id: v }) => v === E), b = [0 + r.left, d - r.right], g = [m - r.bottom, 0 + r.top], [a, S, o] = D({ ...l, range: b }), [i, I, e] = D({ ...c, range: g }), P = e(i[0]), p = o(a[0]), k = e(i[1]), O = o(a[1]), C = "x-axis-label", L = "y-axis-label", W = Math.abs(b[1] - b[0]), X = Math.abs(g[1] - g[0]), Y = w[G], H = /* @__PURE__ */ s(
+  const [y, h] = F(), { label: N, points: f } = j, r = { ...T.margins, ...M }, t = typeof y < "u" ? f[y] : f.find(({ id: p }) => p === E), b = [0 + r.left, d - r.right], g = [m - r.bottom, 0 + r.top], [s, I, e] = D({ ...l, range: b }), [a, P, o] = D({ ...c, range: g }), S = o(a[0]), v = e(s[0]), k = o(a[1]), O = e(s[1]), C = "x-axis-label", L = "y-axis-label", W = Math.abs(b[1] - b[0]), X = Math.abs(g[1] - g[0]), Y = $[G], H = /* @__PURE__ */ i(
     Y,
     {
       data: f,
-      onHoverCallback: n ? (v) => h(v) : void 0,
+      onHoverCallback: n ? (p) => h(p) : void 0,
       onHoverOutCallback: n ? () => h(void 0) : void 0,
       width: d,
       height: m,
-      xScale: o,
-      yScale: e,
+      xScale: e,
+      yScale: o,
       label: N,
       onLoadedCallback: A
     }
   ), q = {
     Data: H,
-    xScale: o,
-    yScale: e,
-    yStart: P,
+    xScale: e,
+    yScale: o,
+    yStart: S,
     yEnd: k,
-    xStart: p,
+    xStart: v,
     xEnd: O,
-    yDomain: i,
-    xDomain: a
+    yDomain: a,
+    xDomain: s
   };
   return /* @__PURE__ */ u(
     Z,
@@ -66,64 +65,64 @@ const w = {
       height: m,
       title: B,
       children: [
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ i(
           K,
           {
-            ticks: I,
-            x: p,
+            ticks: P,
+            x: v,
             labelledById: L,
-            yDomain: i,
-            yScale: e
+            yDomain: a,
+            yScale: o
           }
         ),
         /* @__PURE__ */ u(
           V,
           {
-            x: p,
+            x: v,
             y: k,
             width: W,
             height: X,
             children: [
-              l.guidelines && /* @__PURE__ */ s(
+              l.guidelines && /* @__PURE__ */ i(
                 R,
                 {
-                  guides: S.length,
+                  guides: I.length,
                   direction: "vertical",
-                  xDomain: a,
-                  yDomain: i,
-                  xScale: o,
-                  yScale: e
+                  xDomain: s,
+                  yDomain: a,
+                  xScale: e,
+                  yScale: o
                 }
               ),
-              c.guidelines && /* @__PURE__ */ s(
+              c.guidelines && /* @__PURE__ */ i(
                 R,
                 {
-                  guides: I.length,
-                  xDomain: a,
-                  yDomain: i,
-                  xScale: o,
-                  yScale: e
+                  guides: P.length,
+                  xDomain: s,
+                  yDomain: a,
+                  xScale: e,
+                  yScale: o
                 }
               ),
               x ? x(q) : H
             ]
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ i(
           J,
           {
-            ticks: S,
-            y: P,
+            ticks: I,
+            y: S,
             labelledById: C,
-            xDomain: a,
-            xScale: o
+            xDomain: s,
+            xScale: e
           }
         ),
-        n && !$() && /* @__PURE__ */ u(
+        n && /* @__PURE__ */ u(
           U,
           {
-            x: t ? o(t.x) : void 0,
-            y: t ? e(t.y) : void 0,
+            x: t ? e(t.x) : void 0,
+            y: t ? o(t.y) : void 0,
             visible: !!t,
             offset: T.pointRadius,
             children: [
@@ -136,7 +135,7 @@ const w = {
     }
   );
 };
-tt.displayName = "Charts.ScatterPlot";
+w.displayName = "Charts.ScatterPlot";
 export {
-  tt as default
+  w as default
 };

package/dist/charts/styles.d.ts

@@ -197,7 +197,7 @@ export declare const BaseLine: import('styled-components').IStyledComponent<"web
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -679,7 +679,7 @@ export declare const Guide: import('styled-components').IStyledComponent<"web",
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -1161,7 +1161,7 @@ export declare const Tick: import('styled-components').IStyledComponent<"web", {
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -1643,7 +1643,7 @@ export declare const Bar: import('styled-components').IStyledComponent<"web", {
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -2125,7 +2125,7 @@ export declare const XLabel: import('styled-components').IStyledComponent<"web",
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -2607,7 +2607,7 @@ export declare const YLabel: import('styled-components').IStyledComponent<"web",
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;

package/dist/layout/AspectRatio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),u=require("./styles.cjs"),t={square:1,portrait:parseFloat((9/16).toFixed(3)),landscape:parseFloat((16/9).toFixed(3))},s=({ratio:e,medScreenRatio:a=e,smallScreenRatio:o=e,children:r,className:i})=>{const l={"--aspect-large-ratio":t[e],"--aspect-med-ratio":t[a],"--aspect-small-ratio":t[o]};return c.jsx(u.AspectRatio,{style:l,className:i,children:r})};s.displayName="Layout.AspectRatio";exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),p=require("./styles.cjs"),t=({ratio:e,children:s,className:a})=>{const o=typeof e=="object"?e.portrait:e,c=typeof e=="object"?e.landscape:e;return i.jsx(p.AspectRatio,{style:{"--size-aspect-ratio-portrait":o,"--size-aspect-ratio-landscape":c},className:a,children:s})};t.displayName="Layout.AspectRatio";exports.default=t;

package/dist/layout/AspectRatio/index.d.ts

@@ -1,10 +1,8 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 
-type AspectRatio = "square" | "portrait" | "landscape";
+export type Ratios = Record<"landscape" | "portrait", number>;
 export interface AspectRatioProps {
-    ratio: AspectRatio;
-    medScreenRatio?: AspectRatio;
-    smallScreenRatio?: AspectRatio;
+    ratio: number | Ratios;
     className?: string;
 }
 /**

package/dist/layout/AspectRatio/index.js

@@ -1,24 +1,24 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { AspectRatio as c } from "./styles.js";
-const a = {
-  square: 1,
-  portrait: parseFloat((9 / 16).toFixed(3)),
-  landscape: parseFloat((16 / 9).toFixed(3))
-}, l = ({
+const i = ({
   ratio: t,
-  medScreenRatio: s = t,
-  smallScreenRatio: e = t,
-  children: o,
-  className: r
+  children: a,
+  className: e
 }) => {
-  const p = {
-    "--aspect-large-ratio": a[t],
-    "--aspect-med-ratio": a[s],
-    "--aspect-small-ratio": a[e]
-  };
-  return /* @__PURE__ */ i(c, { style: p, className: r, children: o });
+  const o = typeof t == "object" ? t.portrait : t, s = typeof t == "object" ? t.landscape : t;
+  return /* @__PURE__ */ p(
+    c,
+    {
+      style: {
+        "--size-aspect-ratio-portrait": o,
+        "--size-aspect-ratio-landscape": s
+      },
+      className: e,
+      children: a
+    }
+  );
 };
-l.displayName = "Layout.AspectRatio";
+i.displayName = "Layout.AspectRatio";
 export {
-  l as default
+  i as default
 };

package/dist/layout/AspectRatio/styles.cjs

@@ -1,20 +1,15 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),o=require("../../atomic/Loader/index.cjs"),r=t=>t&&t.__esModule?t:{default:t},a=r(i),s=a.default.div`
-  --aspect-ratio: var(--aspect-small-ratio, 1);
-
-  aspect-ratio: var(--aspect-ratio);
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),a=t=>t&&t.__esModule?t:{default:t},i=a(e),s=i.default.div`
+  aspect-ratio: var(--size-aspect-ratio);
   position: relative;
-  width: calc(var(--widget-max-height, 100vh) * var(--aspect-ratio));
+  width: calc(var(--widget-max-height, 100vh) * var(--size-aspect-ratio));
   max-height: var(--widget-max-height, 100vh);
   max-width: 100%;
 
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
-    --aspect-ratio: var(--aspect-med-ratio, 1);
+  @media (orientation: landscape) {
+    --size-aspect-ratio: var(--size-aspect-ratio-landscape, 1);
   }
-  @container (min-width: ${e.token("BREAK_DESKTOP_SMALL")}) {
-    --aspect-ratio: var(--aspect-large-ratio, 1);
+
+  @media (orientation: portrait) {
+    --size-aspect-ratio: var(--size-aspect-ratio-portrait, 1);
   }
-`;a.default(o.default)`
-  position: absolute;
-  top: 0;
-  left: 0;
 `;exports.AspectRatio=s;