@rubin-epo/epo-widget-lib 0.6.4 → 0.6.5

package/dist/CameraFilter.cjs

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

package/dist/CameraFilter.js

@@ -9,8 +9,10 @@ import { FilterContainer as L, FilterTable as _, FilterNames as O, FilterName as
 import $ from "./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.js";
 import k from "./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.js";
 const E = () => {
-  const { t: n } = j(), { ref: p, width: h = 1 } = y(), [c, g] = v(null), { BREAK_TABLET: u } = S, r = h < parseInt(u), {
-    [r ? "condensed" : "default"]: { min: s, max: F, range: l }
+  const { t: n } = j(), { ref: p, width: h = 1 } = y(), [s, g] = v(
+    ""
+  ), { BREAK_TABLET: F } = S, r = h < parseInt(F), {
+    [r ? "condensed" : "default"]: { min: c, max: u, range: l }
   } = B, d = i[0].range[0], m = i[i.length - 1].range[1] - d, f = i.filter(({ band: e }) => e), x = [{
     value: "none",
     label: n("camera_filter.labels.option", { context: "none" })
@@ -19,14 +21,14 @@ const E = () => {
       value: e,
       label: n("camera_filter.labels.option", { band: e })
     }))
-  ), C = i.find(({ band: e }) => e === c);
+  ), C = s ? i.find(({ band: e }) => e === s) : void 0;
   return /* @__PURE__ */ o(L, { ref: p, children: [
     /* @__PURE__ */ t("h1", { children: n("camera_filter.title") }),
     r && /* @__PURE__ */ t(
       $,
       {
         filters: f,
-        min: s,
+        min: c,
         spectrumRange: l
       }
     ),
@@ -35,7 +37,7 @@ const E = () => {
       {
         "aria-hidden": r,
         range: m / l * 100,
-        offset: (d - s) / l * 100,
+        offset: (d - c) / l * 100,
         "data-testid": "expanded-filters",
         children: [
           /* @__PURE__ */ t("colgroup", { children: i.map(({ range: e }) => /* @__PURE__ */ t(
@@ -70,8 +72,8 @@ const E = () => {
     /* @__PURE__ */ t(
       k,
       {
-        min: s,
-        max: F,
+        min: c,
+        max: u,
         range: l,
         isCondensed: r,
         activeFilter: C
@@ -83,7 +85,7 @@ const E = () => {
         R,
         {
           options: x,
-          value: c,
+          value: s,
           onChangeCallback: (e) => g(e),
           width: "100%",
           maxWidth: "100%",

package/dist/ColorTool.cjs

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

package/dist/ColorTool.js

@@ -54,7 +54,7 @@ const J = ({
       filters: _
     });
   }, N = (t) => {
-    if (t !== null)
+    if (t)
       return r && r({
         name: t,
         filters: A(g, t)

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

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

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

@@ -1,4 +1,4 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
 import B from "@rubin-epo/epo-react-lib/SelectListbox";
 import { getBrightnessValue as C } from "../utilities.js";
 import { useTranslation as I } from "react-i18next";
@@ -12,25 +12,25 @@ const a = ({
   selectLabelledById: h,
   sliderLabelledById: p
 }) => {
-  const { t: b } = I(), { label: i, color: n = "", value: x, active: l, min: g, max: u } = t, y = () => e && e({ ...t, active: !l }), f = (o) => o && e && e({ ...t, color: o }), v = (o) => e && e({
+  const { t: b } = I(), { label: i, color: n = "", value: x, active: s, min: g, max: u } = t, y = () => e && e({ ...t, active: !s }), f = (o) => o && e && e({ ...t, color: o }), v = (o) => e && e({
     ...t,
     brightness: C(g, u, o),
     value: o
   }), T = b("colorTool.actions.select_filter");
   return /* @__PURE__ */ d(j, { disabled: r, children: [
     /* @__PURE__ */ d(L, { children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ l(
         S,
         {
-          checked: l,
+          checked: s,
           type: "checkbox",
           onChange: y,
           "aria-describedby": m
         }
       ),
-      /* @__PURE__ */ s(W, { as: "span", children: i })
+      /* @__PURE__ */ l(W, { as: "span", children: i })
     ] }),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ l(
       B,
       {
         placeholder: T,
@@ -39,16 +39,17 @@ const a = ({
         onChangeCallback: f,
         width: "100%",
         maxWidth: "100%",
-        labelledById: h
+        labelledById: h,
+        isDisabled: !s || r
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ l(
       w,
       {
         min: 1,
         max: 100,
         onChangeCallback: v,
-        isDisabled: !l || r,
+        isDisabled: !s || r,
         labelledbyId: p,
         value: x,
         label: i,

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

@@ -856,7 +856,7 @@ export declare const FilterToggle: import("styled-components").IStyledComponent<
     default?: boolean | undefined;
     wrap?: string | undefined;
     open?: boolean | undefined;
-    icon?: "Account" | "ArrowUpFromBracket" | "Backward" | "BackwardStep" | "Calendar" | "Cancel" | "CaretDown" | "CheckeredFlag" | "Checkmark" | "CheckmarkCircle" | "CircularLoader" | "Chevron" | "ChevronLeftElongated" | "ChevronRightElongated" | "ChevronThin" | "Close" | "CloseCircle" | "Cloud" | "Doc" | "Email" | "Expand" | "Eye" | "Facebook" | "FloppyDisk" | "Forward" | "ForwardStep" | "Globe" | "Google" | "Hamburger" | "Info" | "Instagram" | "Lightbulb" | "LinkedIn" | "LockClosed" | "LockOpen" | "LogOut" | "Mail" | "Minus" | "Page" | "Pause" | "Phone" | "Pin" | "Play" | "Plus" | "QuestionCircle" | "RotateLeft" | "RotateLeftWithCenter" | "Search" | "ShareCopyUrl" | "ShareEmail" | "ShareFacebook" | "ShareToggle" | "ShareTwitter" | "Team" | "Temp" | "Thumbtack" | "Time" | "Timer" | "Twitter" | "User" | "UserInverted" | "Video" | "YouTube" | "Pdf" | "Word" | undefined;
+    icon?: "Account" | "ArrowUpFromBracket" | "Backward" | "BackwardStep" | "Calendar" | "Cancel" | "CaretDown" | "CheckeredFlag" | "Checkmark" | "CheckmarkCircle" | "CircularLoader" | "Chevron" | "ChevronLeftElongated" | "ChevronRightElongated" | "ChevronThin" | "Close" | "CloseCircle" | "Cloud" | "Doc" | "Email" | "Expand" | "Eye" | "Facebook" | "FloppyDisk" | "Forward" | "ForwardStep" | "Globe" | "Google" | "Hamburger" | "Info" | "InfoCircle" | "Instagram" | "Lightbulb" | "LinkedIn" | "LockClosed" | "LockOpen" | "LogOut" | "Mail" | "Minus" | "Page" | "Pause" | "Phone" | "Pin" | "Play" | "Plus" | "QuestionCircle" | "RotateLeft" | "RotateLeftWithCenter" | "Search" | "ShareCopyUrl" | "ShareEmail" | "ShareFacebook" | "ShareToggle" | "ShareTwitter" | "Team" | "Temp" | "Thumbtack" | "Time" | "Timer" | "Twitter" | "User" | "UserInverted" | "Video" | "YouTube" | "Pdf" | "Word" | undefined;
     multiple?: boolean | undefined;
     disabled?: boolean | undefined;
     height?: string | number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "react-i18next": "^12.2.0"
   },
   "dependencies": {
-    "@rubin-epo/epo-react-lib": "^2.0.9",
+    "@rubin-epo/epo-react-lib": "^2.0.11",
     "lodash": "^4.17.21",
     "styled-components": "^6.1.1",
     "use-resize-observer": "^9.1.0"