@rubin-epo/epo-widget-lib 0.9.12 → 0.10.0-beta.1

package/dist/IsochronePlot.cjs

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

package/dist/IsochronePlot.d.ts

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

package/dist/IsochronePlot.js

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

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),i=require("react-i18next"),l=require("@rubin-epo/epo-react-lib/Button"),r=t=>t&&t.__esModule?t:{default:t},c=r(l),o=({isDisabled:t,onResetCallback:e,className:n})=>{const{t:s}=i.useTranslation();return u.jsx(c.default,{style:{"--button-text-align":"left"},disabled:t,icon:"RotateLeftWithCenter",iconSize:"2em",onClick:()=>e&&e(),className:n,isBlock:!0,children:s("colorTool.actions.reset")})};o.displayName="Atomic.Button.Reset";const a=o;exports.default=a;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),i=require("react-i18next"),l=require("@rubin-epo/epo-react-lib/Button"),r=t=>t&&t.__esModule?t:{default:t},c=r(l),o=({isDisabled:t,onResetCallback:e,className:n})=>{const{t:u}=i.useTranslation();return s.jsx(c.default,{style:{"--button-text-align":"left"},disabled:t,icon:"RotateLeftWithCenter",iconSize:"2em",onClick:()=>e&&e(),className:n,isBlock:!0,children:u("colorTool.actions.reset")})};o.displayName="Atomic.Button.Reset";exports.default=o;

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

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

package/dist/atomic/ControlLabel/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),c=require("react"),o=({label:r,input:t,labelBy:l})=>{const e=c.useId(),s=l?{id:e}:{htmlFor:e};return n.jsxs("label",{...s,children:[r,t&&t(e)]})};o.displayName="Atomic.ControlLabel";exports.default=o;

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

@@ -0,0 +1,8 @@
+import { FunctionComponent, ReactNode } from "react";
+type Props = {
+    label: ReactNode;
+    input: (id: string) => ReactNode;
+    labelBy?: boolean;
+};
+declare const ControlLabel: FunctionComponent<Props>;
+export default ControlLabel;

package/dist/atomic/ControlLabel/index.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsxs as e } from "react/jsx-runtime";
+import { useId as s } from "react";
+const n = ({ label: t, input: r, labelBy: l }) => {
+  const o = s();
+  return /* @__PURE__ */ e("label", { ...l ? { id: o } : { htmlFor: o }, children: [
+    t,
+    r && r(o)
+  ] });
+};
+n.displayName = "Atomic.ControlLabel";
+export {
+  n as default
+};

package/dist/atomic/PlotWrapper/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./styles.cjs");e.PlotWrapper.displayName="Atomic.PlotWrapper";exports.default=e.PlotWrapper;

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

@@ -0,0 +1,2 @@
+import { PlotWrapper } from "./styles";
+export default PlotWrapper;

package/dist/atomic/PlotWrapper/index.js

@@ -0,0 +1,5 @@
+import { PlotWrapper as p } from "./styles.js";
+p.displayName = "Atomic.PlotWrapper";
+export {
+  p as default
+};

package/dist/atomic/PlotWrapper/styles.cjs

@@ -0,0 +1,16 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),l=require("@rubin-epo/epo-react-lib/styles"),o=e=>e&&e.__esModule?e:{default:e},r=o(t),i=r.default.div`
+  --label-height: 2em;
+
+  aspect-ratio: 1;
+  color: var(--neutral95, #1f2121);
+  background-color: var(--white, #fff);
+  border: 1px solid var(--turquoise55, #009fa1);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+
+  @container (min-width: ${l.token("BREAK_LARGE_TABLET")}) {
+    --label-height: 3em;
+  }
+`;exports.PlotWrapper=i;

package/dist/atomic/PlotWrapper/styles.d.ts

@@ -0,0 +1,272 @@
+export declare const PlotWrapper: import("styled-components").IStyledComponent<"web", {
+    ref?: import("react").LegacyRef<HTMLDivElement> | 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?: "inherit" | (boolean | "true" | "false") | 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 | "time" | "step" | "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<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+}>;

package/dist/atomic/PlotWrapper/styles.js

@@ -0,0 +1,22 @@
+"use client";
+import e from "styled-components";
+import { token as t } from "@rubin-epo/epo-react-lib/styles";
+const i = e.div`
+  --label-height: 2em;
+
+  aspect-ratio: 1;
+  color: var(--neutral95, #1f2121);
+  background-color: var(--white, #fff);
+  border: 1px solid var(--turquoise55, #009fa1);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+
+  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+    --label-height: 3em;
+  }
+`;
+export {
+  i as PlotWrapper
+};