@rubin-epo/epo-widget-lib 1.2.3 → 2.0.0

package/dist/ColorTool.js

@@ -3,7 +3,7 @@ import { jsx as e, jsxs as f, Fragment as L } from "react/jsx-runtime";
 import { useRef as _, createElement as A } from "react";
 import { useTranslation as D } from "react-i18next";
 import { getDataFiltersByName as E } from "./widgets/ColorTool/lib/utils.js";
-import { WidgetLayout as H, SelectionContainer as M, ControlsContainer as P, ToolsHeader as b, Title as $ } from "./widgets/ColorTool/styles.js";
+import { WidgetLayout as H, Title as M, ControlsContainer as P, ToolsHeader as b, SelectionContainer as $ } from "./widgets/ColorTool/styles.js";
 import q from "@rubin-epo/epo-react-lib/SelectListbox";
 import v from "./widgets/ColorTool/Actions/index.js";
 import z from "./layout/AspectRatio/index.js";
@@ -76,7 +76,7 @@ const J = ({
           height: d,
           selectedObjectName: i,
           images: u,
-          children: g && /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+          children: g && /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(
             q,
             {
               id: "astroObjectSelector",
@@ -124,7 +124,7 @@ const J = ({
           selectionCallback: l
         }
       ),
-      caption: i && g && /* @__PURE__ */ e($, { children: !I && /* @__PURE__ */ f(L, { children: [
+      caption: i && g && /* @__PURE__ */ e(M, { children: !I && /* @__PURE__ */ f(L, { children: [
         /* @__PURE__ */ e("dt", { children: r("colorTool.labels.object") }),
         /* @__PURE__ */ e("dd", { children: i })
       ] }) })

package/dist/IsochronePlot.js

@@ -14,7 +14,7 @@ import { mergeWithDefaults as A, middle as it } from "./lib/utils.js";
 import st from "./widgets/IsochronePlot/Controls/index.js";
 import s from "./widgets/IsochronePlot/defaults.js";
 import nt from "./widgets/IsochronePlot/A11Y/CurveFit.js";
-import { ageToGyrs as at, distanceToLyrs as lt } from "./widgets/IsochronePlot/helpers.js";
+import { distanceToLyrs as at, ageToGyrs as lt } from "./widgets/IsochronePlot/helpers.js";
 import { PlotWrapper as mt } from "./atomic/PlotWrapper/styles.js";
 const ct = (t) => t ? t < parseFloat(j("BREAK_PHABLET_MIN")) ? s.pointRadius.md : t < parseFloat(j("BREAK_LARGE_TABLET")) ? s.pointRadius.sm : s.pointRadius.lg : s.pointRadius.lg, E = (t, n, r = 2) => {
   if (r < 0) return "";
@@ -59,11 +59,11 @@ const ct = (t) => t ? t < parseFloat(j("BREAK_PHABLET_MIN")) ? s.pointRadius.md
     n,
     k
   ), w = ct(C), L = {
-    age: (o) => at(o).toLocaleString(v, {
+    age: (o) => lt(o).toLocaleString(v, {
       minimumFractionDigits: 3,
       maximumFractionDigits: 3
     }),
-    distance: (o) => lt(o).toLocaleString(v, {
+    distance: (o) => at(o).toLocaleString(v, {
       maximumFractionDigits: 0
     })
   }, D = {

package/dist/OrbitalSim.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),e=require("./node_modules/prop-types/index.cjs"),H=require("@react-three/fiber"),J=require("react-i18next"),K=require("./widgets/OrbitalSim/OrbitalDetails.cjs"),Q=require("./widgets/OrbitalSim/CameraController.cjs"),U=require("./widgets/OrbitalSim/Camera.cjs"),W=require("./widgets/OrbitalSim/Orbitals.cjs"),X=require("./widgets/OrbitalSim/Sun.cjs"),Y=require("./widgets/OrbitalSim/PlaybackSpeed.cjs"),$=require("./widgets/OrbitalSim/Controls/PlaybackControls.cjs"),q=require("./widgets/OrbitalSim/OrbitalSim.module.css.cjs");function h({neos:g,activeNeo:C,activeObs:O,selectionCallback:D,paused:n,pov:P,defaultZoom:u,potentialOrbits:m,observations:k,noDetails:T,detailsSet:V,detailsRows:L,refObjs:N,noLabels:R,noControls:z=!1}){const c={min:1157e-8,max:365.25,initial:11.574,step:1},[o,l]=a.useState(!n),[Z,_]=a.useState(null),[w,r]=a.useState(1),[E,S]=a.useState(0),[v,y]=a.useState(n?0:c.initial),[p,d]=a.useState(0),[i,f]=a.useState(0),[j,F]=a.useState(1),{t:x}=J.useTranslation();a.useEffect(()=>{i>0?(y(c.initial),r(1),d(0),f(-1)):i<0&&(d(0),l(!0),f(0))},[i]);const M=s=>{y(+s)},A=()=>{o||r(1),l(!o)},I=()=>{l(s=>!1),f(s=>s+1)},B=s=>{l(!1),r(1),S(b=>b+1)},G=s=>{l(!1),r(-1),S(b=>b+1)};return t.jsx(t.Fragment,{children:t.jsxs("div",{className:q.default.container,children:[!m&&!T&&t.jsx(K.default,{type:V,velocity:Z,rows:L}),!n&&t.jsx(Y.default,{elapsedTime:p,dayPerVizSec:v,speeds:c,sliderOnChangeCallback:M}),!z&&t.jsx($.default,{playing:o,handleStartStop:A,handleNext:B,handlePrevious:G,isDisabled:!1,handleReset:I}),t.jsxs(H.Canvas,{className:q.default["orbital-canvas"],children:[t.jsx(Q.default,{pov:P,reset:i}),t.jsx(U.default,{left:5e3,right:15e3,top:15e3,bottom:-15e3,near:.1,far:3e4,position:[0,0,8e3],defaultZoom:u||1}),t.jsx("ambientLight",{intensity:.9}),t.jsx(W.default,{activeVelocityCallback:_,defaultZoom:u||1,refObjs:N,neos:g,activeNeo:C,activeObs:O,playing:o,stepDirection:w,dayPerVizSec:v,frameOverride:E,potentialOrbits:m,observations:k,selectionCallback:D,elapsedTime:p,setElapsedTime:d,noLabels:R,reset:i,zoomLevel:j,setZoomLevel:F,t:x}),t.jsx(X.default,{zoomLevel:j,defaultZoom:u||1,t:x})]})]})})}h.propTypes={neos:e.default.array,activeNeo:e.default.object,activeObs:e.default.object,selectionCallback:e.default.func,paused:e.default.bool,pov:e.default.string,defaultZoom:e.default.number,potentialOrbits:e.default.bool,observations:e.default.array,noDetails:e.default.bool,noLabels:e.default.bool,detailsSet:e.default.string,detailsRows:e.default.array,refObjs:e.default.array,noControls:e.default.bool};exports.default=h;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./widgets/OrbitalSim/OrbitalSim.cjs"),t=require("./widgets/OrbitalSim/Context/index.cjs");exports.OrbitalSim=i.default;exports.OrbitalSimContext=t.OrbitalSimContext;exports.OrbitalSimProvider=t.OrbitalSimProvider;exports.useOrbitalSimContext=t.useOrbitalSimContext;

package/dist/OrbitalSim.d.ts

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

package/dist/OrbitalSim.js

@@ -1,147 +1,9 @@
 "use client";
-import { jsx as t, Fragment as K, jsxs as g } from "react/jsx-runtime";
-import { useState as o, useEffect as M } from "react";
-import e from "./node_modules/prop-types/index.js";
-import { Canvas as Q } from "@react-three/fiber";
-import { useTranslation as U } from "react-i18next";
-import W from "./widgets/OrbitalSim/OrbitalDetails.js";
-import X from "./widgets/OrbitalSim/CameraController.js";
-import Y from "./widgets/OrbitalSim/Camera.js";
-import _ from "./widgets/OrbitalSim/Orbitals.js";
-import $ from "./widgets/OrbitalSim/Sun.js";
-import ee from "./widgets/OrbitalSim/PlaybackSpeed.js";
-import te from "./widgets/OrbitalSim/Controls/PlaybackControls.js";
-import O from "./widgets/OrbitalSim/OrbitalSim.module.css.js";
-function oe({
-  neos: D,
-  activeNeo: P,
-  activeObs: j,
-  selectionCallback: k,
-  paused: n,
-  pov: x,
-  defaultZoom: c,
-  potentialOrbits: d,
-  observations: T,
-  noDetails: V,
-  detailsSet: L,
-  detailsRows: N,
-  refObjs: z,
-  noLabels: R,
-  noControls: Z = !1
-}) {
-  const m = { min: 1157e-8, max: 365.25, initial: 11.574, step: 1 }, [r, a] = o(!n), [w, E] = o(null), [F, l] = o(1), [A, y] = o(0), [v, u] = o(n ? 0 : m.initial), [S, f] = o(0), [i, p] = o(0), [h, q] = o(1), { t: C } = U();
-  M(() => {
-    i > 0 ? (u(m.initial), l(1), f(0), p(-1)) : i < 0 && (f(0), a(!0), p(0));
-  }, [i]);
-  const B = (s) => {
-    u(+s);
-  }, G = () => {
-    r || l(1), a(!r);
-  }, H = () => {
-    a((s) => !1), p((s) => s + 1);
-  }, I = (s) => {
-    a(!1), l(1), y((b) => b + 1);
-  }, J = (s) => {
-    a(!1), l(-1), y((b) => b + 1);
-  };
-  return /* @__PURE__ */ t(K, { children: /* @__PURE__ */ g("div", { className: O.container, children: [
-    !d && !V && /* @__PURE__ */ t(
-      W,
-      {
-        type: L,
-        velocity: w,
-        rows: N
-      }
-    ),
-    !n && /* @__PURE__ */ t(
-      ee,
-      {
-        elapsedTime: S,
-        dayPerVizSec: v,
-        speeds: m,
-        sliderOnChangeCallback: B
-      }
-    ),
-    !Z && /* @__PURE__ */ t(
-      te,
-      {
-        playing: r,
-        handleStartStop: G,
-        handleNext: I,
-        handlePrevious: J,
-        isDisabled: !1,
-        handleReset: H
-      }
-    ),
-    /* @__PURE__ */ g(Q, { className: O["orbital-canvas"], children: [
-      /* @__PURE__ */ t(X, { pov: x, reset: i }),
-      /* @__PURE__ */ t(
-        Y,
-        {
-          left: 5e3,
-          right: 15e3,
-          top: 15e3,
-          bottom: -15e3,
-          near: 0.1,
-          far: 3e4,
-          position: [0, 0, 8e3],
-          defaultZoom: c || 1
-        }
-      ),
-      /* @__PURE__ */ t("ambientLight", { intensity: 0.9 }),
-      /* @__PURE__ */ t(
-        _,
-        {
-          activeVelocityCallback: E,
-          defaultZoom: c || 1,
-          refObjs: z,
-          neos: D,
-          activeNeo: P,
-          activeObs: j,
-          playing: r,
-          stepDirection: F,
-          dayPerVizSec: v,
-          frameOverride: A,
-          potentialOrbits: d,
-          observations: T,
-          selectionCallback: k,
-          elapsedTime: S,
-          setElapsedTime: f,
-          noLabels: R,
-          reset: i,
-          zoomLevel: h,
-          setZoomLevel: q,
-          t: C
-        }
-      ),
-      /* @__PURE__ */ t(
-        $,
-        {
-          zoomLevel: h,
-          defaultZoom: c || 1,
-          t: C
-        }
-      )
-    ] })
-  ] }) });
-}
-oe.propTypes = {
-  neos: e.array,
-  activeNeo: e.object,
-  activeObs: e.object,
-  selectionCallback: e.func,
-  paused: e.bool,
-  pov: e.string,
-  defaultZoom: e.number,
-  potentialOrbits: e.bool,
-  observations: e.array,
-  noDetails: e.bool,
-  noLabels: e.bool,
-  detailsSet: e.string,
-  detailsRows: e.array,
-  refObjs: e.array,
-  noControls: e.bool
-};
+import { default as r } from "./widgets/OrbitalSim/OrbitalSim.js";
+import { OrbitalSimContext as o, OrbitalSimProvider as a, useOrbitalSimContext as l } from "./widgets/OrbitalSim/Context/index.js";
 export {
-  oe as default
+  r as OrbitalSim,
+  o as OrbitalSimContext,
+  a as OrbitalSimProvider,
+  l as useOrbitalSimContext
 };

package/dist/atomic/Blinker/Blinker.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("react"),N=require("../../lib/utils.cjs"),_=require("../../hooks/useInterval.cjs"),C=require("../ImageStack/index.cjs"),D=require("./Controls/Controls.cjs"),B=require("./styles.cjs"),g=({images:n=[],activeIndex:i=0,autoplay:j=!0,loop:q=!0,interval:p=200,blinkCallback:s,onClickCallback:l,loadedCallback:u,className:y,showControls:S=!0,children:v,extraControls:m})=>{const[c,d]=h.useState(j),[a,I]=h.useState(!1),r=n.length>1,x=(e=0)=>{const M=n.length-1;return N.getClampedArrayIndex(i+e,M)},f=()=>{if(r){const e=x(1);q===!1&&e===n.length-1&&o(),s&&s(e)}},o=()=>{d(!1)},P=()=>{d(e=>!e)},k=()=>{o(),f()},A=()=>{o(),s&&s(x(-1))};return _.default(f,r&&a&&c?p:null),t.jsxs(B.BlinkerContainer,{"data-testid":"blinker-container",onClick:e=>l&&l(e),className:y,children:[t.jsx(C.default,{loadCallback:()=>{I(!0),u&&u()},visible:i,images:n}),v,t.jsx(B.ControlsContainer,{children:r&&S&&t.jsxs(t.Fragment,{children:[t.jsx(D.default,{isDisabled:!a,playing:c,handleStartStop:P,handleNext:k,handlePrevious:A}),m]})})]})};g.displayName="Atomic.Blinker";const F=g;exports.default=F;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("react"),_=require("../../lib/utils.cjs"),k=require("../../hooks/useInterval.cjs"),C=require("../ImageStack/index.cjs"),D=require("./Controls/Controls.cjs"),g=require("./styles.cjs"),j=({images:n=[],activeIndex:i=0,autoplay:q=!0,loop:B=!0,interval:p=200,blinkCallback:s,onClickCallback:l,loadedCallback:u,className:y,showControls:S=!0,children:v,extraControls:m})=>{const[c,d]=h.useState(q),[a,I]=h.useState(!1),r=n.length>1,x=(e=0)=>{const N=n.length-1;return _.getClampedArrayIndex(i+e,N)},f=()=>{if(r){const e=x(1);B===!1&&e===n.length-1&&o(),s&&s(e)}},o=()=>{d(!1)},P=()=>{d(e=>!e)},A=()=>{o(),f()},M=()=>{o(),s&&s(x(-1))};return k.default(f,r&&a&&c?p:null),t.jsxs(g.BlinkerContainer,{"data-testid":"blinker-container",onClick:e=>l&&l(e),className:y,children:[t.jsx(C.default,{loadCallback:()=>{I(!0),u&&u()},visible:i,images:n}),v,t.jsx(g.ControlsContainer,{children:r&&S&&t.jsxs(t.Fragment,{children:[t.jsx(D.default,{isDisabled:!a,playing:c,handleStartStop:P,handleNext:A,handlePrevious:M}),m]})})]})};j.displayName="Atomic.Blinker";exports.default=j;

package/dist/atomic/Blinker/Blinker.js

@@ -1,69 +1,69 @@
 "use client";
-import { jsxs as u, jsx as s, Fragment as D } from "react/jsx-runtime";
+import { jsxs as u, jsx as s, Fragment as C } from "react/jsx-runtime";
 import { useState as h } from "react";
-import { getClampedArrayIndex as F } from "../../lib/utils.js";
-import L from "../../hooks/useInterval.js";
-import $ from "../ImageStack/index.js";
+import { getClampedArrayIndex as D } from "../../lib/utils.js";
+import F from "../../hooks/useInterval.js";
+import L from "../ImageStack/index.js";
 import q from "./Controls/Controls.js";
 import { BlinkerContainer as w, ControlsContainer as z } from "./styles.js";
-const x = ({
-  images: n = [],
+const E = ({
+  images: e = [],
   activeIndex: i = 0,
-  autoplay: B = !0,
-  loop: g = !0,
-  interval: y = 200,
-  blinkCallback: e,
+  autoplay: x = !0,
+  loop: B = !0,
+  interval: g = 200,
+  blinkCallback: n,
   onClickCallback: l,
   loadedCallback: a,
-  className: I,
-  showControls: S = !0,
-  children: k,
+  className: y,
+  showControls: I = !0,
+  children: S,
   extraControls: j
 }) => {
-  const [d, c] = h(B), [m, v] = h(!1), r = n.length > 1, f = (t = 0) => {
-    const C = n.length - 1;
-    return F(i + t, C);
+  const [d, m] = h(x), [c, k] = h(!1), r = e.length > 1, f = (t = 0) => {
+    const P = e.length - 1;
+    return D(i + t, P);
   }, p = () => {
     if (r) {
       const t = f(1);
-      g === !1 && t === n.length - 1 && o(), e && e(t);
+      B === !1 && t === e.length - 1 && o(), n && n(t);
     }
   }, o = () => {
-    c(!1);
+    m(!1);
+  }, v = () => {
+    m((t) => !t);
   }, A = () => {
-    c((t) => !t);
-  }, N = () => {
     o(), p();
-  }, P = () => {
-    o(), e && e(f(-1));
+  }, N = () => {
+    o(), n && n(f(-1));
   };
-  return L(p, r && m && d ? y : null), /* @__PURE__ */ u(
+  return F(p, r && c && d ? g : null), /* @__PURE__ */ u(
     w,
     {
       "data-testid": "blinker-container",
       onClick: (t) => l && l(t),
-      className: I,
+      className: y,
       children: [
         /* @__PURE__ */ s(
-          $,
+          L,
           {
             loadCallback: () => {
-              v(!0), a && a();
+              k(!0), a && a();
             },
             visible: i,
-            images: n
+            images: e
           }
         ),
-        k,
-        /* @__PURE__ */ s(z, { children: r && S && /* @__PURE__ */ u(D, { children: [
+        S,
+        /* @__PURE__ */ s(z, { children: r && I && /* @__PURE__ */ u(C, { children: [
           /* @__PURE__ */ s(
             q,
             {
-              isDisabled: !m,
+              isDisabled: !c,
               playing: d,
-              handleStartStop: A,
-              handleNext: N,
-              handlePrevious: P
+              handleStartStop: v,
+              handleNext: A,
+              handlePrevious: N
             }
           ),
           j
@@ -72,8 +72,7 @@ const x = ({
     }
   );
 };
-x.displayName = "Atomic.Blinker";
-const Q = x;
+E.displayName = "Atomic.Blinker";
 export {
-  Q as default
+  E as default
 };

package/dist/atomic/Blinker/Controls/styles.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ControlsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const BlinkerContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ControlsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/atomic/ElapsedTime/ElapsedTime.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react-i18next"),s=require("./styles.cjs"),c=({year:o,day:m,hour:p,minute:u,second:T,className:j})=>{const l={year:o,day:m,hour:p,minute:u,second:T},a=Object.keys(l).filter(e=>l[e]!==void 0).map(e=>({interval:e,time:l[e]})),x=a.reduce((e,i)=>{const{interval:r,time:n=0}=i;return`${e}${n}${r.charAt(0).toUpperCase()}`},"PT");return t.jsxs(s.ElapsedTimeContainer,{className:j,children:[t.jsx(s.Header,{id:"elapsedTimeHeader",children:t.jsx(d.Trans,{children:"elapsed_time.title"})}),t.jsx(s.Time,{dateTime:x,"aria-labelledby":"elapsedTimeHeader",children:a.map(e=>{const{interval:i,time:r=0}=e,n=`elapsed_time.step.${i}`;return t.jsxs(s.Interval,{children:[t.jsx(s.Number,{children:r}),t.jsx(s.Step,{children:t.jsx(d.Trans,{i18nKey:n,count:r})})]},i)})})]})};c.displayName="Atomic.ElapsedTime";const h=c;exports.default=h;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("react-i18next"),s=require("./styles.cjs"),c=({year:o,day:m,hour:u,minute:p,second:j,className:T})=>{const l={year:o,day:m,hour:u,minute:p,second:j},a=Object.keys(l).filter(e=>l[e]!==void 0).map(e=>({interval:e,time:l[e]})),x=a.reduce((e,i)=>{const{interval:r,time:n=0}=i;return`${e}${n}${r.charAt(0).toUpperCase()}`},"PT");return t.jsxs(s.ElapsedTimeContainer,{className:T,children:[t.jsx(s.Header,{id:"elapsedTimeHeader",children:t.jsx(d.Trans,{children:"elapsed_time.title"})}),t.jsx(s.Time,{dateTime:x,"aria-labelledby":"elapsedTimeHeader",children:a.map(e=>{const{interval:i,time:r=0}=e,n=`elapsed_time.step.${i}`;return t.jsxs(s.Interval,{children:[t.jsx(s.Number,{children:r}),t.jsx(s.Step,{children:t.jsx(d.Trans,{i18nKey:n,count:r})})]},i)})})]})};c.displayName="Atomic.ElapsedTime";exports.default=c;

package/dist/atomic/ElapsedTime/ElapsedTime.js

@@ -1,35 +1,34 @@
 "use client";
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { Trans as d } from "react-i18next";
-import { ElapsedTimeContainer as b, Header as f, Time as y, Interval as $, Number as E, Step as j } from "./styles.js";
-const m = ({
-  year: c,
-  day: p,
-  hour: o,
-  minute: T,
-  second: h,
-  className: u
+import { ElapsedTimeContainer as v, Header as b, Time as f, Interval as y, Number as $, Step as j } from "./styles.js";
+const x = ({
+  year: m,
+  day: c,
+  hour: p,
+  minute: o,
+  second: T,
+  className: h
 }) => {
-  const a = { year: c, day: p, hour: o, minute: T, second: h }, s = Object.keys(a).filter((e) => a[e] !== void 0).map((e) => ({
+  const a = { year: m, day: c, hour: p, minute: o, second: T }, n = Object.keys(a).filter((e) => a[e] !== void 0).map((e) => ({
     interval: e,
     time: a[e]
-  })), v = s.reduce((e, i) => {
+  })), u = n.reduce((e, i) => {
     const { interval: r, time: l = 0 } = i;
     return `${e}${l}${r.charAt(0).toUpperCase()}`;
   }, "PT");
-  return /* @__PURE__ */ n(b, { className: u, children: [
-    /* @__PURE__ */ t(f, { id: "elapsedTimeHeader", children: /* @__PURE__ */ t(d, { children: "elapsed_time.title" }) }),
-    /* @__PURE__ */ t(y, { dateTime: v, "aria-labelledby": "elapsedTimeHeader", children: s.map((e) => {
+  return /* @__PURE__ */ s(v, { className: h, children: [
+    /* @__PURE__ */ t(b, { id: "elapsedTimeHeader", children: /* @__PURE__ */ t(d, { children: "elapsed_time.title" }) }),
+    /* @__PURE__ */ t(f, { dateTime: u, "aria-labelledby": "elapsedTimeHeader", children: n.map((e) => {
       const { interval: i, time: r = 0 } = e, l = `elapsed_time.step.${i}`;
-      return /* @__PURE__ */ n($, { children: [
-        /* @__PURE__ */ t(E, { children: r }),
+      return /* @__PURE__ */ s(y, { children: [
+        /* @__PURE__ */ t($, { children: r }),
         /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(d, { i18nKey: l, count: r }) })
       ] }, i);
     }) })
   ] });
 };
-m.displayName = "Atomic.ElapsedTime";
-const C = m;
+x.displayName = "Atomic.ElapsedTime";
 export {
-  C as default
+  x as default
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ElapsedTimeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Header: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const Time: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, never>> & string;

package/dist/atomic/ImageStack/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),r=require("react"),E=require("lodash/after"),u=require("./styles.cjs"),q=e=>e&&e.__esModule?e:{default:e},x=q(E),g=({images:e,visible:a,describedById:h,mixBlendMode:y,loadCallback:i,className:p,width:S,height:k,showBackdrop:_=!0,showLoader:b=!0})=>{const n=r.useRef(null),[t,l]=r.useState(!0);r.useEffect(()=>{t||i&&i()},[t]);const d=r.useCallback(x.default(e.length,()=>{l(!1)}),[]);return!e||e.length===0?null:(t&&n.current&&Array.from(n.current.getElementsByTagName("img")).every(({complete:s})=>!!s)&&l(!1),c.jsxs(u.StackContainer,{ref:n,role:"img","aria-describedby":h,className:p,style:{"--image-stack-background":_&&"var(--neutral95, #1f2121)",aspectRatio:`${S||e[0].width} / ${k||e[0].height}`},children:[b&&t&&c.jsx(u.StackLoader,{isVisible:!0}),e.map(({url:f,width:m,height:s},o)=>{const j=Array.isArray(a)?a[o]:a===o;return c.jsx(u.StackedImage,{role:"presentation",src:f,width:m,height:s,onLoad:d,onError:d,style:{mixBlendMode:y},hidden:!j},o)})]}))};g.displayName="Atomic.ImageStack";const A=g;exports.default=A;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),r=require("react"),E=require("lodash/after"),i=require("./styles.cjs"),q=e=>e&&e.__esModule?e:{default:e},x=q(E),g=({images:e,visible:n,describedById:h,mixBlendMode:y,loadCallback:l,className:p,width:S,height:k,showBackdrop:_=!0,showLoader:b=!0})=>{const a=r.useRef(null),[t,c]=r.useState(!0);r.useEffect(()=>{t||l&&l()},[t]);const d=r.useCallback(x.default(e.length,()=>{c(!1)}),[]);return!e||e.length===0?null:(t&&a.current&&Array.from(a.current.getElementsByTagName("img")).every(({complete:s})=>!!s)&&c(!1),u.jsxs(i.StackContainer,{ref:a,role:"img","aria-describedby":h,className:p,style:{"--image-stack-background":_&&"var(--neutral95, #1f2121)",aspectRatio:`${S||e[0].width} / ${k||e[0].height}`},children:[b&&t&&u.jsx(i.StackLoader,{isVisible:!0}),e.map(({url:f,width:m,height:s},o)=>{const j=Array.isArray(n)?n[o]:n===o;return u.jsx(i.StackedImage,{role:"presentation",src:f,width:m,height:s,onLoad:d,onError:d,style:{mixBlendMode:y},hidden:!j},o)})]}))};g.displayName="Atomic.ImageStack";exports.default=g;

package/dist/atomic/ImageStack/index.js

@@ -1,21 +1,21 @@
 "use client";
-import { jsxs as A, jsx as f } from "react/jsx-runtime";
-import { useRef as C, useState as I, useEffect as b, useCallback as w } from "react";
+import { jsxs as E, jsx as f } from "react/jsx-runtime";
+import { useRef as A, useState as C, useEffect as b, useCallback as w } from "react";
 import x from "lodash/after";
-import { StackContainer as L, StackLoader as R, StackedImage as $ } from "./styles.js";
-const u = ({
+import { StackContainer as I, StackLoader as L, StackedImage as R } from "./styles.js";
+const j = ({
   images: e,
   visible: r,
-  describedById: d,
-  mixBlendMode: h,
+  describedById: u,
+  mixBlendMode: d,
   loadCallback: s,
-  className: g,
-  width: p,
-  height: y,
-  showBackdrop: k = !0,
-  showLoader: S = !0
+  className: h,
+  width: g,
+  height: p,
+  showBackdrop: y = !0,
+  showLoader: k = !0
 }) => {
-  const a = C(null), [t, i] = I(!0);
+  const a = A(null), [t, i] = C(!0);
   b(() => {
     t || s && s();
   }, [t]);
@@ -27,23 +27,23 @@ const u = ({
   );
   return !e || e.length === 0 ? null : (t && a.current && Array.from(
     a.current.getElementsByTagName("img")
-  ).every(({ complete: n }) => !!n) && i(!1), /* @__PURE__ */ A(
-    L,
+  ).every(({ complete: n }) => !!n) && i(!1), /* @__PURE__ */ E(
+    I,
     {
       ref: a,
       role: "img",
-      "aria-describedby": d,
-      className: g,
+      "aria-describedby": u,
+      className: h,
       style: {
-        "--image-stack-background": k && "var(--neutral95, #1f2121)",
-        aspectRatio: `${p || e[0].width} / ${y || e[0].height}`
+        "--image-stack-background": y && "var(--neutral95, #1f2121)",
+        aspectRatio: `${g || e[0].width} / ${p || e[0].height}`
       },
       children: [
-        S && t && /* @__PURE__ */ f(R, { isVisible: !0 }),
+        k && t && /* @__PURE__ */ f(L, { isVisible: !0 }),
         e.map(({ url: l, width: m, height: n }, o) => {
-          const E = Array.isArray(r) ? r[o] : r === o;
+          const S = Array.isArray(r) ? r[o] : r === o;
           return /* @__PURE__ */ f(
-            $,
+            R,
             {
               role: "presentation",
               src: l,
@@ -51,8 +51,8 @@ const u = ({
               height: n,
               onLoad: c,
               onError: c,
-              style: { mixBlendMode: h },
-              hidden: !E
+              style: { mixBlendMode: d },
+              hidden: !S
             },
             o
           );
@@ -61,8 +61,7 @@ const u = ({
     }
   ));
 };
-u.displayName = "Atomic.ImageStack";
-const T = u;
+j.displayName = "Atomic.ImageStack";
 export {
-  T as default
+  j as default
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const StackContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StackedImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const StackLoader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@rubin-epo/epo-react-lib/CircularLoader').CircularLoaderProps, never>> & string & Omit<import('react').FunctionComponent<import('@rubin-epo/epo-react-lib/CircularLoader').CircularLoaderProps>, keyof import('react').Component<any, {}, any>>;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const OffscreenLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const LoaderWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/atomic/PlaybackControl/PlaybackControl.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("@rubin-epo/epo-react-lib/IconComposer"),t=require("./styles.cjs"),i=e=>e&&e.__esModule?e:{default:e},a=i(r),n=({icon:e,label:s,handleClick:c,...l})=>o.jsxs(t.PlaybackButton,{...l,onClick:c,children:[o.jsx(t.IconContainer,{children:o.jsx(a.default,{icon:e,size:15})}),o.jsx("span",{children:s})]});n.displayName="Atomic.PlaybackControl";const u=n;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("@rubin-epo/epo-react-lib/IconComposer"),t=require("./styles.cjs"),i=e=>e&&e.__esModule?e:{default:e},a=i(r),n=({icon:e,label:s,handleClick:l,...c})=>o.jsxs(t.PlaybackButton,{...c,onClick:l,children:[o.jsx(t.IconContainer,{children:o.jsx(a.default,{icon:e,size:15})}),o.jsx(t.SpanLabel,{children:s})]});n.displayName="Atomic.PlaybackControl";exports.default=n;

package/dist/atomic/PlaybackControl/PlaybackControl.js

@@ -1,17 +1,16 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import l from "@rubin-epo/epo-react-lib/IconComposer";
-import { PlaybackButton as e, IconContainer as s } from "./styles.js";
-const n = ({
-  icon: r,
-  label: c,
-  handleClick: t,
-  ...i
-}) => /* @__PURE__ */ a(e, { ...i, onClick: t, children: [
-  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(l, { icon: r, size: 15 }) }),
-  /* @__PURE__ */ o("span", { children: c })
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import a from "@rubin-epo/epo-react-lib/IconComposer";
+import { PlaybackButton as e, IconContainer as l, SpanLabel as m } from "./styles.js";
+const s = ({
+  icon: n,
+  label: r,
+  handleClick: i,
+  ...c
+}) => /* @__PURE__ */ t(e, { ...c, onClick: i, children: [
+  /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(a, { icon: n, size: 15 }) }),
+  /* @__PURE__ */ o(m, { children: r })
 ] });
-n.displayName = "Atomic.PlaybackControl";
-const k = n;
+s.displayName = "Atomic.PlaybackControl";
 export {
-  k as default
+  s as default
 };

package/dist/atomic/PlaybackControl/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),r=t=>t&&t.__esModule?t:{default:t},e=r(n),o=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),a=e=>e&&e.__esModule?e:{default:e},t=a(n),o=t.default.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -7,11 +7,10 @@
   border-radius: 22px;
   background-color: var(--button-background-color);
   color: var(--neutral95, #1f2121);
-`,a=e.default.button`
+`,r=t.default.button`
   --button-color: var(--white, #fff);
   --button-background-color: var(--neutral15, #e6e6e6);
 
-  background: transparent;
   border: none;
   color: var(--button-color);
   cursor: pointer;
@@ -21,7 +20,7 @@
   gap: 0.75em;
   text-align: center;
   padding: 0;
-  margin: 0;
+  margin: 0px 10px 0px 10px;
 
   &:not(:disabled):not([aria-disabled="true"]):hover,
   &:not(:disabled):not([aria-disabled="true"]):focus-visible,
@@ -36,4 +35,8 @@
   &:not(:disabled):not([aria-disabled="true"]):focus {
     outline: none;
   }
-`;exports.IconContainer=o;exports.PlaybackButton=a;
+`,i=t.default.span`
+  background: rgba(0, 0, 0, .7);
+  padding: 3px 10px 3px 10px;
+  border-radius: 10px;
+`;exports.IconContainer=o;exports.PlaybackButton=r;exports.SpanLabel=i;

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

@@ -1,3 +1,6 @@
-/// <reference types="react" />
+/**
+ * todo: convert this to a CSS module
+ */
 export declare const IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const PlaybackButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const SpanLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;