@rubin-epo/epo-widget-lib 0.8.1 → 0.9.1

package/dist/Charts.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./charts/Base/index.cjs"),i=require("./charts/XAxis/index.cjs"),t=require("./charts/YAxis/index.cjs"),n=require("./charts/Guidelines/index.cjs"),r=require("./charts/Points/index.cjs"),u=require("./charts/Tooltip/index.cjs"),d=require("./charts/ClippingContainer/index.cjs"),o=require("./charts/Bars/index.cjs");exports.Base=e.default;exports.XAxis=i.default;exports.YAxis=t.default;exports.Guidelines=n.default;exports.Points=r.default;exports.Tooltip=u.default;exports.ClippingContainer=d.default;exports.Bars=o.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./charts/Base/index.cjs"),i=require("./charts/XAxis/index.cjs"),t=require("./charts/YAxis/index.cjs"),n=require("./charts/Guidelines/index.cjs"),r=require("./charts/Points/index.cjs"),u=require("./charts/Tooltip/index.cjs"),d=require("./charts/ClippingContainer/index.cjs"),o=require("./charts/Bars/index.cjs"),s=require("./charts/Viewport/index.cjs"),l=require("./charts/ForeignObject/index.cjs");exports.Base=e.default;exports.XAxis=i.default;exports.YAxis=t.default;exports.Guidelines=n.default;exports.Points=r.default;exports.Tooltip=u.default;exports.ClippingContainer=d.default;exports.Bars=o.default;exports.Viewport=s.default;exports.ForeignObject=l.default;

package/dist/Charts.js

@@ -1,18 +1,22 @@
-import { default as a } from "./charts/Base/index.js";
-import { default as r } from "./charts/XAxis/index.js";
+import { default as t } from "./charts/Base/index.js";
+import { default as a } from "./charts/XAxis/index.js";
 import { default as s } from "./charts/YAxis/index.js";
-import { default as p } from "./charts/Guidelines/index.js";
+import { default as l } from "./charts/Guidelines/index.js";
 import { default as d } from "./charts/Points/index.js";
 import { default as u } from "./charts/Tooltip/index.js";
 import { default as n } from "./charts/ClippingContainer/index.js";
-import { default as B } from "./charts/Bars/index.js";
+import { default as A } from "./charts/Bars/index.js";
+import { default as C } from "./charts/Viewport/index.js";
+import { default as c } from "./charts/ForeignObject/index.js";
 export {
-  B as Bars,
-  a as Base,
+  A as Bars,
+  t as Base,
   n as ClippingContainer,
-  p as Guidelines,
+  c as ForeignObject,
+  l as Guidelines,
   d as Points,
   u as Tooltip,
-  r as XAxis,
+  C as Viewport,
+  a as XAxis,
   s as YAxis
 };

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

package/dist/ColorTool.js

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

package/dist/LightCurvePlot.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./widgets/LightCurvePlot/PlotWithoutCurve/index.cjs"),t=require("./widgets/LightCurvePlot/PlotWithCurve/index.cjs");exports.ObservationsPlot=e.default;exports.ObservationsPlotWithCurve=t.default;

package/dist/LightCurvePlot.d.ts

@@ -0,0 +1 @@
+export * from './widgets/LightCurvePlot/index'

package/dist/LightCurvePlot.js

@@ -0,0 +1,6 @@
+import { default as e } from "./widgets/LightCurvePlot/PlotWithoutCurve/index.js";
+import { default as a } from "./widgets/LightCurvePlot/PlotWithCurve/index.js";
+export {
+  e as ObservationsPlot,
+  a as ObservationsPlotWithCurve
+};

package/dist/SourceSelector.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./widgets/SourceSelector/PointSelector/index.cjs"),t=require("./widgets/SourceSelector/SelectionList/index.cjs"),r=require("./widgets/SourceSelector/SourceSelector.cjs"),u=require("./widgets/SourceSelector/Message/Message.cjs");exports.PointSelector=e.default;exports.SelectionList=t.default;exports.default=r.default;exports.Message=u.default;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./widgets/SourceSelector/SourceSelector.cjs"),t=require("./widgets/SourceSelector/PointSelector/index.cjs"),r=require("./widgets/SourceSelector/SelectionList/index.cjs"),u=require("./widgets/SourceSelector/Message/Message.cjs");exports.default=e.default;exports.PointSelector=t.default;exports.SelectionList=r.default;exports.Message=u.default;

package/dist/SourceSelector.d.ts

@@ -1 +1,3 @@
 export * from './widgets/SourceSelector/index'
+import _default from './widgets/SourceSelector/index'
+export default _default

package/dist/SourceSelector.js

@@ -1,10 +1,10 @@
-import { default as o } from "./widgets/SourceSelector/PointSelector/index.js";
-import { default as a } from "./widgets/SourceSelector/SelectionList/index.js";
-import { default as l } from "./widgets/SourceSelector/SourceSelector.js";
-import { default as d } from "./widgets/SourceSelector/Message/Message.js";
+import o from "./widgets/SourceSelector/SourceSelector.js";
+import { default as a } from "./widgets/SourceSelector/PointSelector/index.js";
+import { default as l } from "./widgets/SourceSelector/SelectionList/index.js";
+import { default as m } from "./widgets/SourceSelector/Message/Message.js";
 export {
-  d as Message,
-  o as PointSelector,
-  a as SelectionList,
-  l as default
+  m as Message,
+  a as PointSelector,
+  l as SelectionList,
+  o as default
 };

package/dist/SupernovaThreeVector.js

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

package/dist/atomic/Button/patterns/Reset.js

@@ -2,28 +2,28 @@
 import { jsx as s } from "react/jsx-runtime";
 import { useTranslation as r } from "react-i18next";
 import c from "@rubin-epo/epo-react-lib/Button";
-const o = ({
-  isDisabled: e,
+const e = ({
+  isDisabled: o,
   onResetCallback: t,
-  className: n
+  className: i
 }) => {
-  const { t: i } = r();
+  const { t: n } = r();
   return /* @__PURE__ */ s(
     c,
     {
       style: { "--button-text-align": "left" },
-      disabled: e,
+      disabled: o,
       icon: "RotateLeftWithCenter",
       iconSize: "2em",
       onClick: () => t && t(),
-      className: n,
+      className: i,
       isBlock: !0,
-      children: i("colorTool.actions.reset")
+      children: n("colorTool.actions.reset")
     }
   );
 };
-o.displayName = "Atomic.Button.Reset";
-const a = o;
+e.displayName = "Atomic.Button.Reset";
+const a = e;
 export {
   a as default
 };

package/dist/atomic/LiveRegion/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),s=require("./styles.cjs"),e=({id:i,children:t})=>r.jsx(s.OffscreenLabel,{"aria-live":"polite",id:i,children:t});e.displayName="Atomic.LiveRegion";exports.default=e;

package/dist/atomic/LiveRegion/index.d.ts

@@ -0,0 +1,5 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+declare const LiveRegion: FunctionComponent<PropsWithChildren<{
+    id: string;
+}>>;
+export default LiveRegion;

package/dist/atomic/LiveRegion/index.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { OffscreenLabel as r } from "./styles.js";
+const t = ({
+  id: e,
+  children: i
+}) => /* @__PURE__ */ o(r, { "aria-live": "polite", id: e, children: i });
+t.displayName = "Atomic.LiveRegion";
+export {
+  t as default
+};

package/dist/charts/Base/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("./styles.cjs"),o=({width:r=900,height:t=300,minX:n=0,minY:l=0,verticalLabel:i,verticalLabelId:u,horizontalLabel:a,horizontalLabelId:c,children:d,className:x})=>e.jsxs(s.ChartContainer,{children:[i&&e.jsx(s.VerticalLabel,{id:u,children:i}),e.jsx(s.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`${n} ${l} ${r} ${t}`,className:x,style:{"--aspect-ratio":`${r} / ${t}`,"--min-width":`${r}px`},role:"group",children:d}),a&&e.jsx(s.HorizontalLabel,{id:c,children:a})]});o.displayName="Charts.Base";const p=o;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("./styles.cjs"),u=({width:r=900,height:i=300,xMin:c=0,yMin:l=0,verticalLabel:t,verticalLabelId:a,horizontalLabel:n,horizontalLabelId:d,title:o,children:x,className:j})=>e.jsxs(s.ChartContainer,{children:[o&&e.jsx(s.Title,{children:o}),t&&e.jsx(s.VerticalLabel,{id:a,"aria-hidden":!!a,children:t}),e.jsx(s.SVG,{preserveAspectRatio:"xMidYMid meet",viewBox:`${c} ${l} ${r} ${i}`,className:j,style:{"--aspect-ratio":`${r} / ${i}`,"--min-width":`${r}px`},role:"group",children:x}),n&&e.jsx(s.HorizontalLabel,{id:d,"aria-hidden":!!d,children:n})]});u.displayName="Charts.Base";const p=u;exports.default=p;

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

@@ -1,10 +1,8 @@
 import { FunctionComponent, PropsWithChildren } from "react";
-export interface BaseChartProps {
-    width?: number;
-    height?: number;
-    minX?: number;
-    minY?: number;
+import { Bounds } from "../types";
+export interface BaseChartProps extends Partial<Bounds> {
     className?: string;
+    title?: string;
     verticalLabel?: string;
     verticalLabelId?: string;
     horizontalLabel?: string;

package/dist/charts/Base/index.js

@@ -1,36 +1,52 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { ChartContainer as $, VerticalLabel as x, SVG as B, HorizontalLabel as C } from "./styles.js";
-const i = ({
-  width: e = 900,
-  height: s = 300,
-  minX: o = 0,
-  minY: n = 0,
-  verticalLabel: t,
-  verticalLabelId: p,
-  horizontalLabel: a,
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import { ChartContainer as h, Title as l, VerticalLabel as B, SVG as C, HorizontalLabel as f } from "./styles.js";
+const o = ({
+  width: r = 900,
+  height: i = 300,
+  xMin: p = 0,
+  yMin: c = 0,
+  verticalLabel: s,
+  verticalLabelId: a,
+  horizontalLabel: t,
   horizontalLabelId: d,
-  children: c,
-  className: l
-}) => /* @__PURE__ */ m($, { children: [
-  t && /* @__PURE__ */ r(x, { id: p, children: t }),
-  /* @__PURE__ */ r(
+  title: n,
+  children: m,
+  className: $
+}) => /* @__PURE__ */ x(h, { children: [
+  n && /* @__PURE__ */ e(l, { children: n }),
+  s && /* @__PURE__ */ e(
     B,
+    {
+      id: a,
+      "aria-hidden": !!a,
+      children: s
+    }
+  ),
+  /* @__PURE__ */ e(
+    C,
     {
       preserveAspectRatio: "xMidYMid meet",
-      viewBox: `${o} ${n} ${e} ${s}`,
-      className: l,
+      viewBox: `${p} ${c} ${r} ${i}`,
+      className: $,
       style: {
-        "--aspect-ratio": `${e} / ${s}`,
-        "--min-width": `${e}px`
+        "--aspect-ratio": `${r} / ${i}`,
+        "--min-width": `${r}px`
       },
       role: "group",
-      children: c
+      children: m
     }
   ),
-  a && /* @__PURE__ */ r(C, { id: d, children: a })
+  t && /* @__PURE__ */ e(
+    f,
+    {
+      id: d,
+      "aria-hidden": !!d,
+      children: t
+    }
+  )
 ] });
-i.displayName = "Charts.Base";
-const h = i;
+o.displayName = "Charts.Base";
+const y = o;
 export {
-  h as default
+  y as default
 };

package/dist/charts/Base/styles.cjs

@@ -1,25 +1,36 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),l=e=>e&&e.__esModule?e:{default:e},t=l(a),r=t.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),l=t=>t&&t.__esModule?t:{default:t},e=l(a),r=e.default.div`
+  --label-gutter: 2em;
+
   display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-template-rows: 1fr min-content;
+  grid-template-columns: var(--label-gutter) 1fr;
+  grid-template-rows: auto 1fr var(--label-gutter);
   grid-template-areas:
+    "title title"
     "vertical-label chart"
     ". horizontal-label";
-`,i=t.default.span`
+  padding-inline-end: calc(var(--label-gutter) / 2);
+`,i=e.default.span`
   font-size: 80%;
   grid-area: horizontal-label;
   place-self: center;
   align-self: center;
-`,n=t.default.span`
+`,n=e.default.span`
   font-size: 80%;
   grid-area: vertical-label;
   place-self: center;
   align-self: center;
   writing-mode: vertical-rl;
   transform: rotate(180deg);
-`,o=t.default.svg`
+`,o=e.default.svg`
   grid-area: chart;
   height: 100%;
   max-width: 100%;
   aspect-ratio: var(--aspect-ratio);
-`;exports.ChartContainer=r;exports.HorizontalLabel=i;exports.SVG=o;exports.VerticalLabel=n;
+`,c=e.default.h3`
+  display: flex;
+  align-items: center;
+  grid-area: title;
+  height: var(--label-gutter);
+  padding-inline: calc(var(--label-gutter) / 2);
+  margin: 0;
+`;exports.ChartContainer=r;exports.HorizontalLabel=i;exports.SVG=o;exports.Title=c;exports.VerticalLabel=n;