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

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

package/dist/charts/Base/styles.cjs

@@ -1,28 +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: var(--label-gutter) 1fr;
-  grid-template-rows: 1fr var(--label-gutter);
+  grid-template-rows: auto 1fr var(--label-gutter);
   grid-template-areas:
+    "title title"
     "vertical-label chart"
     ". horizontal-label";
-  padding-inline-end: var(--label-gutter);
-`,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;

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

@@ -1296,3 +1296,275 @@ export declare const SVG: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<SVGSVGElement> | undefined;
     key?: import("react").Key | null | undefined;
 }>;
+export declare const Title: import("styled-components").IStyledComponent<"web", {
+    ref?: import("react").LegacyRef<HTMLHeadingElement> | undefined;
+    key?: import("react").Key | null | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    children?: import("react").ReactNode;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "step" | "time" | "true" | "false" | "page" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLHeadingElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLHeadingElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLHeadingElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLHeadingElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLHeadingElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLHeadingElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLHeadingElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLHeadingElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLHeadingElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLHeadingElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLHeadingElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLHeadingElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLHeadingElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLHeadingElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLHeadingElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLHeadingElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLHeadingElement> | undefined;
+}>;

package/dist/charts/Base/styles.js

@@ -1,21 +1,22 @@
 "use client";
 import e from "styled-components";
-const t = e.div`
+const a = e.div`
   --label-gutter: 2em;
 
   display: grid;
   grid-template-columns: var(--label-gutter) 1fr;
-  grid-template-rows: 1fr var(--label-gutter);
+  grid-template-rows: auto 1fr var(--label-gutter);
   grid-template-areas:
+    "title title"
     "vertical-label chart"
     ". horizontal-label";
-  padding-inline-end: var(--label-gutter);
-`, r = e.span`
+  padding-inline-end: calc(var(--label-gutter) / 2);
+`, l = e.span`
   font-size: 80%;
   grid-area: horizontal-label;
   place-self: center;
   align-self: center;
-`, l = e.span`
+`, r = e.span`
   font-size: 80%;
   grid-area: vertical-label;
   place-self: center;
@@ -27,10 +28,18 @@ const t = e.div`
   height: 100%;
   max-width: 100%;
   aspect-ratio: var(--aspect-ratio);
+`, n = e.h3`
+  display: flex;
+  align-items: center;
+  grid-area: title;
+  height: var(--label-gutter);
+  padding-inline: calc(var(--label-gutter) / 2);
+  margin: 0;
 `;
 export {
-  t as ChartContainer,
-  r as HorizontalLabel,
+  a as ChartContainer,
+  l as HorizontalLabel,
   i as SVG,
-  l as VerticalLabel
+  n as Title,
+  r as VerticalLabel
 };

package/dist/charts/Tooltip/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),b=require("../ForeignObject/index.cjs"),u=require("./styles.cjs"),w=(t,e)=>t.includes("left")?`calc(0% + ${e}px)`:t.includes("right")?`calc(-100% - ${e}px)`:(t.includes("center"),"-50%"),y=(t,e)=>t.includes("top")?`calc(0% + ${e}px)`:t.includes("bottom")?`calc(-100% - ${e}px)`:(t.includes("center"),"-50%"),O=t=>{let e="0",n="0",r="0",s="0",l="0deg";return t.includes("center")&&(e="50%",n="50%",r="-50%",s="-50%"),t.includes("top")&&(n="0",s="-100%",l="180deg"),t.includes("right")&&(e="100%",r="-25%",l="-90deg"),t.includes("left")&&(e="0",r="-75%",l="90deg"),t.includes("bottom")&&(n="100%",s="0"),{left:e,top:n,transform:`translate(${r}, ${s}) rotate(${l})`}},a=({x:t,y:e,visible:n=!0,offset:r=5,origin:s="center bottom",children:l,className:d})=>{const f="center center",c=[...s.split(" "),...f.split(" ")].slice(0,2).join(" "),o=6,p=w(c,o+r),$=y(c,o+r),x=c.includes("center")&&c.split(" ").filter(h=>h!=="center").length===1,m=O(c);return i.jsx(b.default,{children:typeof t=="number"&&typeof e=="number"&&i.jsxs(u.Tooltip,{className:d,style:{transform:`translate(calc(${p} + ${t}px), calc(${$} + ${e}px))`},hidden:!n,children:[l,x&&i.jsx(u.Arrow,{style:{"--arrow-size":`${o}px`,...m}})]})})};a.displayName="Charts.Tooltip";const g=a;exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),u=require("./styles.cjs"),b=(t,e)=>t.includes("left")?`calc(0% + ${e}px)`:t.includes("right")?`calc(-100% - ${e}px)`:(t.includes("center"),"-50%"),w=(t,e)=>t.includes("top")?`calc(0% + ${e}px)`:t.includes("bottom")?`calc(-100% - ${e}px)`:(t.includes("center"),"-50%"),y=t=>{let e="0",n="0",r="0",l="0",s="0deg";return t.includes("center")&&(e="50%",n="50%",r="-50%",l="-50%"),t.includes("top")&&(n="0",l="-100%",s="180deg"),t.includes("right")&&(e="100%",r="-25%",s="-90deg"),t.includes("left")&&(e="0",r="-75%",s="90deg"),t.includes("bottom")&&(n="100%",l="0"),{left:e,top:n,transform:`translate(${r}, ${l}) rotate(${s})`}},a=({x:t,y:e,visible:n=!0,offset:r=5,origin:l="center bottom",children:s,className:d})=>{const f="center center",c=[...l.split(" "),...f.split(" ")].slice(0,2).join(" "),o=6,p=b(c,o+r),$=w(c,o+r),x=c.includes("center")&&c.split(" ").filter(h=>h!=="center").length===1,m=y(c);return i.jsx(u.TooltipContainer,{children:typeof t=="number"&&typeof e=="number"&&i.jsxs(u.Tooltip,{className:d,style:{transform:`translate(calc(${p} + ${t}px), calc(${$} + ${e}px))`},hidden:!n,children:[s,x&&i.jsx(u.Arrow,{style:{"--arrow-size":`${o}px`,...m}})]})})};a.displayName="Charts.Tooltip";const O=a;exports.default=O;

package/dist/charts/Tooltip/index.js

@@ -1,12 +1,11 @@
 import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import w from "../ForeignObject/index.js";
-import { Tooltip as O, Arrow as b } from "./styles.js";
-const g = (t, e) => t.includes("left") ? `calc(0% + ${e}px)` : t.includes("right") ? `calc(-100% - ${e}px)` : (t.includes("center"), "-50%"), y = (t, e) => t.includes("top") ? `calc(0% + ${e}px)` : t.includes("bottom") ? `calc(-100% - ${e}px)` : (t.includes("center"), "-50%"), T = (t) => {
-  let e = "0", n = "0", r = "0", l = "0", c = "0deg";
-  return t.includes("center") && (e = "50%", n = "50%", r = "-50%", l = "-50%"), t.includes("top") && (n = "0", l = "-100%", c = "180deg"), t.includes("right") && (e = "100%", r = "-25%", c = "-90deg"), t.includes("left") && (e = "0", r = "-75%", c = "90deg"), t.includes("bottom") && (n = "100%", l = "0"), {
+import { TooltipContainer as w, Tooltip as O, Arrow as T } from "./styles.js";
+const b = (t, e) => t.includes("left") ? `calc(0% + ${e}px)` : t.includes("right") ? `calc(-100% - ${e}px)` : (t.includes("center"), "-50%"), y = (t, e) => t.includes("top") ? `calc(0% + ${e}px)` : t.includes("bottom") ? `calc(-100% - ${e}px)` : (t.includes("center"), "-50%"), g = (t) => {
+  let e = "0", n = "0", r = "0", l = "0", s = "0deg";
+  return t.includes("center") && (e = "50%", n = "50%", r = "-50%", l = "-50%"), t.includes("top") && (n = "0", l = "-100%", s = "180deg"), t.includes("right") && (e = "100%", r = "-25%", s = "-90deg"), t.includes("left") && (e = "0", r = "-75%", s = "90deg"), t.includes("bottom") && (n = "100%", l = "0"), {
     left: e,
     top: n,
-    transform: `translate(${r}, ${l}) rotate(${c})`
+    transform: `translate(${r}, ${l}) rotate(${s})`
   };
 }, a = ({
   x: t,
@@ -14,10 +13,10 @@ const g = (t, e) => t.includes("left") ? `calc(0% + ${e}px)` : t.includes("right
   visible: n = !0,
   offset: r = 5,
   origin: l = "center bottom",
-  children: c,
+  children: s,
   className: u
 }) => {
-  const f = "center center", s = [...l.split(" "), ...f.split(" ")].slice(0, 2).join(" "), o = 6, p = g(s, o + r), d = y(s, o + r), m = s.includes("center") && s.split(" ").filter((x) => x !== "center").length === 1, $ = T(s);
+  const f = "center center", c = [...l.split(" "), ...f.split(" ")].slice(0, 2).join(" "), o = 6, p = b(c, o + r), d = y(c, o + r), $ = c.includes("center") && c.split(" ").filter((x) => x !== "center").length === 1, m = g(c);
   return /* @__PURE__ */ i(w, { children: typeof t == "number" && typeof e == "number" && /* @__PURE__ */ h(
     O,
     {
@@ -27,13 +26,13 @@ const g = (t, e) => t.includes("left") ? `calc(0% + ${e}px)` : t.includes("right
       },
       hidden: !n,
       children: [
-        c,
-        m && /* @__PURE__ */ i(
-          b,
+        s,
+        $ && /* @__PURE__ */ i(
+          T,
           {
             style: {
               "--arrow-size": `${o}px`,
-              ...$
+              ...m
             }
           }
         )
@@ -42,7 +41,7 @@ const g = (t, e) => t.includes("left") ? `calc(0% + ${e}px)` : t.includes("right
   ) });
 };
 a.displayName = "Charts.Tooltip";
-const X = a;
+const C = a;
 export {
-  X as default
+  C as default
 };

package/dist/charts/Tooltip/styles.cjs

@@ -1,4 +1,6 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=t=>t&&t.__esModule?t:{default:t},e=r(o),i=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=require("../ForeignObject/index.cjs"),i=t=>t&&t.__esModule?t:{default:t},e=i(o),d=e.default(r.default)`
+  overflow: visible;
+`,l=e.default.div`
   background-color: #dce0e3;
   border-radius: 4px;
   font-size: 0.5em;
@@ -6,7 +8,7 @@
   padding: 2px 4px;
   text-align: center;
   position: absolute;
-`,d=e.default.div`
+`,n=e.default.div`
   width: 0;
   height: 0;
   border-left: var(--arrow-width, 6px) solid transparent;
@@ -16,4 +18,4 @@
 
   position: absolute;
   left: 0;
-`;exports.Arrow=d;exports.Tooltip=i;
+`;exports.Arrow=n;exports.Tooltip=l;exports.TooltipContainer=d;

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

@@ -1,3 +1,10 @@
+/// <reference types="react" />
+export declare const TooltipContainer: import("styled-components").IStyledComponent<"web", {
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+}> & import("react").FunctionComponent<import("react").PropsWithChildren<{
+    className?: string | undefined;
+}>>;
 export declare const Tooltip: import("styled-components").IStyledComponent<"web", {
     ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;