@rubin-epo/epo-widget-lib 0.9.11-beta.1 → 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/Blinker/Blinker.cjs

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

package/dist/atomic/Blinker/Blinker.js

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

package/dist/atomic/Blinker/styles.cjs

@@ -1,10 +1,25 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),n=require("./Controls/Controls.cjs"),l=t=>t&&t.__esModule?t:{default:t},e=l(o),i=e.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),n=require("./Controls/Controls.cjs"),o=require("@rubin-epo/epo-react-lib/styles"),r=t=>t&&t.__esModule?t:{default:t},e=r(i),l=e.default.div`
   aspect-ratio: 1;
+  container-type: inline-size;
   display: flex;
   justify-content: center;
   position: relative;
   height: 100%;
-`,r=e.default(n.default)`
+`,s=e.default(n.default)``,a=e.default.div`
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  justify-items: end;
+  align-items: center;
   position: absolute;
-  bottom: var(--PADDING_SMALL, 20px);
-`;exports.BlinkerContainer=i;exports.BlinkerControls=r;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  gap: var(--widget-padding, var(--PADDING_SMALL));
+  padding: var(--widget-padding, var(--PADDING_SMALL));
+
+  @container (min-width: ${o.token("BREAK_PHABLET_MIN")}) {
+    justify-items: center;
+  }
+`;exports.BlinkerContainer=l;exports.BlinkerControls=s;exports.ControlsContainer=a;

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

@@ -279,3 +279,275 @@ export declare const BlinkerControls: import("styled-components").IStyledCompone
     className?: string | undefined;
     isDisabled?: boolean | undefined;
 }> & import("react").FunctionComponent<import("./Controls/Controls").ControlsProps>;
+export declare const ControlsContainer: 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/Blinker/styles.js

@@ -1,17 +1,34 @@
 "use client";
 import t from "styled-components";
-import o from "./Controls/Controls.js";
-const n = t.div`
+import i from "./Controls/Controls.js";
+import { token as o } from "@rubin-epo/epo-react-lib/styles";
+const s = t.div`
   aspect-ratio: 1;
+  container-type: inline-size;
   display: flex;
   justify-content: center;
   position: relative;
   height: 100%;
-`, r = t(o)`
+`, a = t(i)``, d = t.div`
+  box-sizing: border-box;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr auto;
+  justify-items: end;
+  align-items: center;
   position: absolute;
-  bottom: var(--PADDING_SMALL, 20px);
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  gap: var(--widget-padding, var(--PADDING_SMALL));
+  padding: var(--widget-padding, var(--PADDING_SMALL));
+
+  @container (min-width: ${o("BREAK_PHABLET_MIN")}) {
+    justify-items: center;
+  }
 `;
 export {
-  n as BlinkerContainer,
-  r as BlinkerControls
+  s as BlinkerContainer,
+  a as BlinkerControls,
+  d as ControlsContainer
 };