@rubin-epo/epo-widget-lib 0.9.10 → 0.9.12

package/dist/CameraFilter.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),v=require("@rubin-epo/epo-react-lib/SelectListbox"),y=require("@rubin-epo/epo-react-lib/styles"),S=require("react-i18next"),C=require("use-resize-observer"),r=require("./widgets/CameraFilter/data.cjs"),l=require("./widgets/CameraFilter/styles.cjs"),R=require("./layout/AspectRatio/index.cjs"),L=require("./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.cjs"),M=require("./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs"),x=i=>i&&i.__esModule?i:{default:i},O=x(v),T=x(C),h=()=>{const{t:i}=S.useTranslation(),{ref:j,width:m=1}=T.default(),[o,p]=q.useState(null),{BREAK_TABLET:b}=y.tokens,s=m<parseInt(b),{[s?"condensed":"default"]:{min:c,max:g,range:n}}=r.rangeConfig,d=r.filters[0].range[0],u=r.filters[r.filters.length-1].range[1]-d,f=r.filters.filter(({band:t})=>t),F=[{value:"none",label:i("camera_filter.labels.option",{context:"none"})}].concat(f.map(({band:t})=>({value:t,label:i("camera_filter.labels.option",{band:t})}))),_=r.filters.find(({band:t})=>t===o);return e.jsx(R.default,{ratio:"landscape",children:e.jsxs(l.FilterContainer,{ref:j,children:[e.jsx(l.FilterTitle,{children:i("camera_filter.title")}),s&&e.jsx(L.default,{filters:f,min:c,spectrumRange:n}),e.jsxs(l.FilterTable,{style:{"--filter-table-margin-inline-start":`${((d-c)/n*100).toFixed(2)}%`,"--filter-table-width":`${(u/n*100).toFixed(2)}%`},"data-testid":"expanded-filters",children:[e.jsx("colgroup",{children:r.filters.map(({range:t})=>e.jsx("col",{style:{width:`${(t[1]-t[0])/u*100}%`}},t.join("")))}),e.jsx(l.FilterNames,{children:e.jsx("tr",{children:r.filters.map(({band:t},a)=>e.jsx(l.FilterName,{id:`${t}-name`,style:{"--filter-name-border":t?"solid #b2b2b2":"none"},scope:"col","aria-hidden":!t,children:t},a))})}),!s&&e.jsx(l.FilterRanges,{children:e.jsx("tr",{children:r.filters.map(({band:t,range:a})=>e.jsx(l.FilterRange,{"aria-hidden":!t,children:t&&e.jsxs(e.Fragment,{children:[a.join("–"),e.jsx("br",{}),e.jsx(l.Wavelength,{children:"nm"})]})},a.join()))})})]}),e.jsx(M.default,{min:c,max:g,range:n,isCondensed:s,activeFilter:_}),e.jsxs(l.SelectContainer,{children:[e.jsx(l.SelectLabel,{id:"filterSelectLabel",children:i("camera_filter.labels.select")}),e.jsx(O.default,{options:F,value:o,onChangeCallback:t=>p(t),width:"100%",maxWidth:"100%",labelledById:"filterSelectLabel"})]})]})})};h.displayName="Widgets.CameraFilter";exports.default=h;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),v=require("@rubin-epo/epo-react-lib/SelectListbox"),S=require("@rubin-epo/epo-react-lib/styles"),y=require("react-i18next"),R=require("use-resize-observer"),r=require("./widgets/CameraFilter/data.cjs"),l=require("./widgets/CameraFilter/styles.cjs"),C=require("./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.cjs"),L=require("./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs"),x=i=>i&&i.__esModule?i:{default:i},M=x(v),O=x(R),m=()=>{const{t:i}=y.useTranslation(),{ref:h,width:j=1}=O.default(),[o,p]=q.useState(null),{BREAK_TABLET:b}=S.tokens,s=j<parseInt(b),{[s?"condensed":"default"]:{min:c,max:g,range:n}}=r.rangeConfig,d=r.filters[0].range[0],u=r.filters[r.filters.length-1].range[1]-d,f=r.filters.filter(({band:t})=>t),F=[{value:"none",label:i("camera_filter.labels.option",{context:"none"})}].concat(f.map(({band:t})=>({value:t,label:i("camera_filter.labels.option",{band:t})}))),_=r.filters.find(({band:t})=>t===o);return e.jsx(l.FilterWrapper,{ratio:"landscape",smallScreenRatio:"square",children:e.jsxs(l.FilterContainer,{ref:h,children:[e.jsx(l.FilterTitle,{children:i("camera_filter.title")}),s&&e.jsx(C.default,{filters:f,min:c,spectrumRange:n}),e.jsxs(l.FilterTable,{style:{"--filter-table-margin-inline-start":`${((d-c)/n*100).toFixed(2)}%`,"--filter-table-width":`${(u/n*100).toFixed(2)}%`},"data-testid":"expanded-filters",children:[e.jsx("colgroup",{children:r.filters.map(({range:t})=>e.jsx("col",{style:{width:`${(t[1]-t[0])/u*100}%`}},t.join("")))}),e.jsx(l.FilterNames,{children:e.jsx("tr",{children:r.filters.map(({band:t},a)=>e.jsx(l.FilterName,{id:`${t}-name`,style:{"--filter-name-border":t?"solid #b2b2b2":"none"},scope:"col","aria-hidden":!t,children:t},a))})}),!s&&e.jsx(l.FilterRanges,{children:e.jsx("tr",{children:r.filters.map(({band:t,range:a})=>e.jsx(l.FilterRange,{"aria-hidden":!t,children:t&&e.jsxs(e.Fragment,{children:[a.join("–"),e.jsx("br",{}),e.jsx(l.Wavelength,{children:"nm"})]})},a.join()))})})]}),e.jsx(L.default,{min:c,max:g,range:n,isCondensed:s,activeFilter:_}),e.jsxs(l.SelectContainer,{children:[e.jsx(l.SelectLabel,{id:"filterSelectLabel",children:i("camera_filter.labels.select")}),e.jsx(M.default,{options:F,value:o,onChangeCallback:t=>p(t),width:"100%",maxWidth:"100%",labelledById:"filterSelectLabel"})]})]})})};m.displayName="Widgets.CameraFilter";exports.default=m;

package/dist/CameraFilter.js

@@ -2,16 +2,15 @@
 import { jsx as t, jsxs as o, Fragment as C } from "react/jsx-runtime";
 import { useState as v } from "react";
 import R from "@rubin-epo/epo-react-lib/SelectListbox";
-import { tokens as y } from "@rubin-epo/epo-react-lib/styles";
-import { useTranslation as S } from "react-i18next";
+import { tokens as S } from "@rubin-epo/epo-react-lib/styles";
+import { useTranslation as y } from "react-i18next";
 import j from "use-resize-observer";
 import { filters as i, rangeConfig as B } from "./widgets/CameraFilter/data.js";
-import { FilterContainer as L, FilterTitle as T, FilterTable as _, FilterNames as w, FilterName as A, FilterRanges as O, FilterRange as $, Wavelength as M, SelectContainer as N, SelectLabel as W } from "./widgets/CameraFilter/styles.js";
-import k from "./layout/AspectRatio/index.js";
+import { FilterWrapper as L, FilterContainer as T, FilterTitle as _, FilterTable as w, FilterNames as O, FilterName as W, FilterRanges as $, FilterRange as A, Wavelength as M, SelectContainer as N, SelectLabel as k } from "./widgets/CameraFilter/styles.js";
 import E from "./widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.js";
 import I from "./widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.js";
-const z = () => {
-  const { t: r } = S(), { ref: p, width: h = 1 } = j(), [c, F] = v(null), { BREAK_TABLET: b } = y, l = h < parseInt(b), {
+const q = () => {
+  const { t: r } = y(), { ref: p, width: h = 1 } = j(), [c, F] = v(null), { BREAK_TABLET: b } = S, l = h < parseInt(b), {
     [l ? "condensed" : "default"]: { min: s, max: g, range: n }
   } = B, d = i[0].range[0], m = i[i.length - 1].range[1] - d, f = i.filter(({ band: e }) => e), u = [{
     value: "none",
@@ -22,8 +21,8 @@ const z = () => {
       label: r("camera_filter.labels.option", { band: e })
     }))
   ), x = i.find(({ band: e }) => e === c);
-  return /* @__PURE__ */ t(k, { ratio: "landscape", children: /* @__PURE__ */ o(L, { ref: p, children: [
-    /* @__PURE__ */ t(T, { children: r("camera_filter.title") }),
+  return /* @__PURE__ */ t(L, { ratio: "landscape", smallScreenRatio: "square", children: /* @__PURE__ */ o(T, { ref: p, children: [
+    /* @__PURE__ */ t(_, { children: r("camera_filter.title") }),
     l && /* @__PURE__ */ t(
       E,
       {
@@ -33,7 +32,7 @@ const z = () => {
       }
     ),
     /* @__PURE__ */ o(
-      _,
+      w,
       {
         style: {
           "--filter-table-margin-inline-start": `${((d - s) / n * 100).toFixed(2)}%`,
@@ -50,8 +49,8 @@ const z = () => {
             },
             e.join("")
           )) }),
-          /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e }, a) => /* @__PURE__ */ t(
-            A,
+          /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e }, a) => /* @__PURE__ */ t(
+            W,
             {
               id: `${e}-name`,
               style: {
@@ -63,7 +62,7 @@ const z = () => {
             },
             a
           )) }) }),
-          !l && /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e, range: a }) => /* @__PURE__ */ t($, { "aria-hidden": !e, children: e && /* @__PURE__ */ o(C, { children: [
+          !l && /* @__PURE__ */ t($, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e, range: a }) => /* @__PURE__ */ t(A, { "aria-hidden": !e, children: e && /* @__PURE__ */ o(C, { children: [
             a.join("–"),
             /* @__PURE__ */ t("br", {}),
             /* @__PURE__ */ t(M, { children: "nm" })
@@ -82,7 +81,7 @@ const z = () => {
       }
     ),
     /* @__PURE__ */ o(N, { children: [
-      /* @__PURE__ */ t(W, { id: "filterSelectLabel", children: r("camera_filter.labels.select") }),
+      /* @__PURE__ */ t(k, { id: "filterSelectLabel", children: r("camera_filter.labels.select") }),
       /* @__PURE__ */ t(
         R,
         {
@@ -97,7 +96,7 @@ const z = () => {
     ] })
   ] }) });
 };
-z.displayName = "Widgets.CameraFilter";
+q.displayName = "Widgets.CameraFilter";
 export {
-  z as default
+  q as default
 };

package/dist/FilterTool.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),m=require("@rubin-epo/epo-react-lib/SelectListbox"),_=require("@rubin-epo/epo-react-lib/ColorSwatch"),r=require("./widgets/FilterTool/styles.cjs"),d=e=>e&&e.__esModule?e:{default:e},b=d(m),C=d(_),j=({selectedColor:e="none",selectionCallback:f,isDisabled:c=!1,id:h,labelledById:u})=>{const{t:l}=i.useTranslation(),t={violet:"#861cff",blue:"#0019ff",green:"#6bd853",yellow:"#ffdd15",orange:"#f18922",red:"#ec1c24",none:"transparent"},p={violet:"M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",blue:"M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",green:"M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",yellow:"M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",orange:"M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",red:"M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"},n={violet:[[1426.5,547.9],[1353.2,550.6],[1377.9,530.1],[1372.3,498.5]],blue:[[1431.5,496.4],[1358.6,504.1],[1381.8,482],[1374.1,450.9]],green:[[1437.9,443.4],[1366.1,458.4],[1387,434.1],[1376.2,403.9]],yellow:[[1438.9,389.7],[1368,408.2],[1387.6,382.8],[1375.4,353.3]],orange:[[1443.7,340.3],[1373.9,362.8],[1392.1,336.4],[1378.2,307.5]],red:[[1441.9,290],[1372.4,313.2],[1390.3,286.6],[1376.1,257.9]]},g=Object.keys(t).map(s=>({value:s,label:l(`filterTool.colors.${s}`),icon:o.jsx(C.default,{color:s,size:"small"})})),x=s=>e!==s&&e!=="none",y=l("filterTool.selectLabel"),a=e==="none";return o.jsxs(r.Wrapper,{ratio:"landscape",children:[o.jsxs(r.PrismSVG,{version:"1.1",viewBox:"0 0 1551.6 736.7","aria-labelledby":u,children:[o.jsxs("defs",{children:[o.jsxs("linearGradient",{id:"no-arrow-red",children:[o.jsx("stop",{offset:"0%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-orange",children:[o.jsx("stop",{offset:"0%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-yellow",children:[o.jsx("stop",{offset:"0%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-green",children:[o.jsx("stop",{offset:"0%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-blue",children:[o.jsx("stop",{offset:"0%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-violet",children:[o.jsx("stop",{offset:"0%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),o.jsxs("radialGradient",{id:"gradient_1_",cx:"718.4264",cy:"-294.6529",r:"417.8",fx:"638.9412",fy:"-303.5418",gradientTransform:"matrix(1 0 0 1 0 534)",gradientUnits:"userSpaceOnUse",children:[o.jsx("stop",{offset:"0.12",style:{stopColor:"#FFFFFF"}}),o.jsx("stop",{offset:"1",style:{stopColor:"#000000"}})]}),o.jsxs("g",{children:[o.jsx(r.WhiteLine,{id:"white_ray",x1:"108.2",y1:"463.3",x2:"546.1",y2:"312.5"}),o.jsx(r.WhiteLine,{id:"white_light_arrow_line",x1:"376.8",y1:"327.9",x2:"430",y2:"309.6"}),o.jsx("polygon",{id:"white_light_arrow",points:"420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",fill:"#ffffff"}),o.jsx("text",{transform:"matrix(0.9446 -0.3282 0.3282 0.9446 152.0965 417.697)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.whiteLight"})})]}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 598.2964 606.0872)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.prism"})}),o.jsx("polygon",{id:"gradient",points:"653.2,127 867.4,498 438.9,498",fill:"url(#gradient_1_)",style:{opacity:.3}})]}),o.jsx(r.PrismOutline,{id:"outline",points:"653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "}),o.jsx("g",{role:"list",id:"rays_out","aria-label":l("filterTool.light_out"),children:Object.keys(p).map(s=>o.jsx(r.Ray,{id:`${s}_ray`,style:{"--ray-fill":x(s)?`url(#no-arrow-${s})`:t[s]},d:p[s],role:"listitem","aria-label":l(`filterTool.colors.${s}`)},s))}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 1206.5464 164.1372)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.filter"})}),o.jsx(r.Filter,{id:"filter",x1:"1255.6",y1:"235.7",x2:"1193.1",y2:"550.3",stroke:t[e],fill:"#ffffff","aria-label":l(`filterTool.colors.${e}`)})]}),o.jsxs("g",{role:"list",id:"rays_filtered","aria-label":l("filterTool.light_filtered"),children:[Object.keys(n).map(s=>o.jsx(r.Arrow,{id:`${s}_arrow`,style:{"--arrow-opacity":x(s)&&0,"--arrow-fill":t[s]},points:n[s].map(w=>w.join(",")).join(" "),role:a?"listitem":"presentation","aria-label":a?l(`filterTool.colors.${s}`):void 0},s)),!a&&o.jsx("text",{role:"listitem",x:n[e][3][0],y:n[e][3][1],fill:"#ffffff",dy:"-25",children:o.jsx(i.Trans,{i18nKey:`filterTool.colors.${e}`})})]})]}),o.jsx(r.SelectContainer,{children:o.jsx(b.default,{options:g,isDisabled:c,value:e,onChangeCallback:s=>f&&f(s||"none"),placeholder:y,maxWidth:"100%",width:"200px",id:h})})]})};j.displayName="Widgets.FilterTool";exports.default=j;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react-i18next"),m=require("@rubin-epo/epo-react-lib/SelectListbox"),_=require("@rubin-epo/epo-react-lib/ColorSwatch"),r=require("./widgets/FilterTool/styles.cjs"),d=e=>e&&e.__esModule?e:{default:e},b=d(m),C=d(_),j=({selectedColor:e="none",selectionCallback:f,isDisabled:c=!1,id:h,labelledById:u})=>{const{t:l}=i.useTranslation(),t={violet:"#861cff",blue:"#006da8",green:"#6bd853",yellow:"#ffdd15",orange:"#f18922",red:"#ec1c24",none:"transparent"},p={violet:"M546.1,312.5l212.8,1.9h0.4l0.5,0.2L1396,522.8c6.9,2.3,10.7,9.7,8.5,16.7s-9.7,10.7-16.7,8.5l0,0l-0.4-0.1L757.8,320.4l0.9,0.2L546.1,312.5z",blue:"M546.1,312.4l206.5-4.4h0.4l0.4,0.1l641.1,164c7,1.8,11.2,8.9,9.4,15.9c-1.8,7-8.9,11.2-15.9,9.4l-0.4-0.1L751.8,313.8l0.8,0.1L546.1,312.4z",green:"M547.8,312l200.6-10.6h0.3l0.4,0.1l644.8,120.3c7,1.4,11.5,8.2,10.1,15.2c-1.4,6.9-8,11.4-14.9,10.2l-0.4-0.1L747.8,307.4l0.7,0.1L547.8,312z",yellow:"M546.1,312.5l205.8-17.3h0.3h0.4l640.4,75.3c7.1,0.8,12.2,7.2,11.3,14.3c-0.8,7.1-7.2,12.2-14.3,11.3l-0.4-0.1l-637.9-94.5h0.6L546.1,312.5z",orange:"M546.1,311l189.3-21.8h0.2h0.3l656.5,33.3c7,0.4,12.4,6.3,12,13.3s-6.3,12.4-13.3,12h-0.4l-655.2-52.9h0.5L546.1,311z",red:"M546.1,311L730,283.9h0.1h0.2l661.4-9.9c6.9-0.1,12.6,5.4,12.7,12.3s-5.4,12.6-12.3,12.7h-0.4l-661.4-9.8h0.4L546.1,311z"},n={violet:[[1426.5,547.9],[1353.2,550.6],[1377.9,530.1],[1372.3,498.5]],blue:[[1431.5,496.4],[1358.6,504.1],[1381.8,482],[1374.1,450.9]],green:[[1437.9,443.4],[1366.1,458.4],[1387,434.1],[1376.2,403.9]],yellow:[[1438.9,389.7],[1368,408.2],[1387.6,382.8],[1375.4,353.3]],orange:[[1443.7,340.3],[1373.9,362.8],[1392.1,336.4],[1378.2,307.5]],red:[[1441.9,290],[1372.4,313.2],[1390.3,286.6],[1376.1,257.9]]},g=Object.keys(t).map(s=>({value:s,label:l(`filterTool.colors.${s}`),icon:o.jsx(C.default,{color:s,size:"small"})})),x=s=>e!==s&&e!=="none",y=l("filterTool.selectLabel"),a=e==="none";return o.jsxs(r.Wrapper,{ratio:"landscape",children:[o.jsxs(r.PrismSVG,{version:"1.1",viewBox:"0 0 1551.6 736.7","aria-labelledby":u,children:[o.jsxs("defs",{children:[o.jsxs("linearGradient",{id:"no-arrow-red",children:[o.jsx("stop",{offset:"0%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:t.red}),o.jsx("stop",{offset:"81%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-orange",children:[o.jsx("stop",{offset:"0%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:t.orange}),o.jsx("stop",{offset:"80%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-yellow",children:[o.jsx("stop",{offset:"0%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:t.yellow}),o.jsx("stop",{offset:"79%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-green",children:[o.jsx("stop",{offset:"0%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:t.green}),o.jsx("stop",{offset:"78%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-blue",children:[o.jsx("stop",{offset:"0%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:t.blue}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]}),o.jsxs("linearGradient",{id:"no-arrow-violet",children:[o.jsx("stop",{offset:"0%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:t.violet}),o.jsx("stop",{offset:"77%",stopColor:"transparent"}),o.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),o.jsxs("radialGradient",{id:"gradient_1_",cx:"718.4264",cy:"-294.6529",r:"417.8",fx:"638.9412",fy:"-303.5418",gradientTransform:"matrix(1 0 0 1 0 534)",gradientUnits:"userSpaceOnUse",children:[o.jsx("stop",{offset:"0.12",style:{stopColor:"#FFFFFF"}}),o.jsx("stop",{offset:"1",style:{stopColor:"#000000"}})]}),o.jsxs("g",{children:[o.jsx(r.WhiteLine,{id:"white_ray",x1:"108.2",y1:"463.3",x2:"546.1",y2:"312.5"}),o.jsx(r.WhiteLine,{id:"white_light_arrow_line",x1:"376.8",y1:"327.9",x2:"430",y2:"309.6"}),o.jsx("polygon",{id:"white_light_arrow",points:"420.7,325.4 428.1,310.3 413,302.9 422.5,299.7 437.6,307 430.2,322.1",fill:"#ffffff"}),o.jsx("text",{transform:"matrix(0.9446 -0.3282 0.3282 0.9446 152.0965 417.697)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.whiteLight"})})]}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 598.2964 606.0872)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.prism"})}),o.jsx("polygon",{id:"gradient",points:"653.2,127 867.4,498 438.9,498",fill:"url(#gradient_1_)",style:{opacity:.3}})]}),o.jsx(r.PrismOutline,{id:"outline",points:"653.2,127 760.3,312.5 867.4,498 653.2,498 438.9,498 546.1,312.5 "}),o.jsx("g",{role:"list",id:"rays_out","aria-label":l("filterTool.light_out"),children:Object.keys(p).map(s=>o.jsx(r.Ray,{id:`${s}_ray`,style:{"--ray-fill":x(s)?`url(#no-arrow-${s})`:t[s]},d:p[s],role:"listitem","aria-label":l(`filterTool.colors.${s}`)},s))}),o.jsxs("g",{children:[o.jsx("text",{transform:"matrix(1 0 0 1 1206.5464 164.1372)",fill:"#ffffff",children:o.jsx(i.Trans,{i18nKey:"filterTool.filter"})}),o.jsx(r.Filter,{id:"filter",x1:"1255.6",y1:"235.7",x2:"1193.1",y2:"550.3",stroke:t[e],fill:"#ffffff","aria-label":l(`filterTool.colors.${e}`)})]}),o.jsxs("g",{role:"list",id:"rays_filtered","aria-label":l("filterTool.light_filtered"),children:[Object.keys(n).map(s=>o.jsx(r.Arrow,{id:`${s}_arrow`,style:{"--arrow-opacity":x(s)&&0,"--arrow-fill":t[s]},points:n[s].map(w=>w.join(",")).join(" "),role:a?"listitem":"presentation","aria-label":a?l(`filterTool.colors.${s}`):void 0},s)),!a&&o.jsx("text",{role:"listitem",x:n[e][3][0],y:n[e][3][1],fill:"#ffffff",dy:"-25",children:o.jsx(i.Trans,{i18nKey:`filterTool.colors.${e}`})})]})]}),o.jsx(r.SelectContainer,{children:o.jsx(b.default,{options:g,isDisabled:c,value:e,onChangeCallback:s=>f&&f(s||"none"),placeholder:y,maxWidth:"100%",width:"200px",id:h})})]})};j.displayName="Widgets.FilterTool";exports.default=j;

package/dist/FilterTool.js

@@ -13,7 +13,7 @@ const j = ({
 }) => {
   const { t: i } = C(), r = {
     violet: "#861cff",
-    blue: "#0019ff",
+    blue: "#006da8",
     green: "#6bd853",
     yellow: "#ffdd15",
     orange: "#f18922",

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
 };

package/dist/atomic/Loader/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),s=require("@rubin-epo/epo-react-lib/CircularLoader"),u=require("./styles.cjs"),a=e=>e&&e.__esModule?e:{default:e},o=a(s),t=({className:e})=>r.jsx(u.LoaderWrapper,{className:e,children:r.jsx(o.default,{isVisible:!0})});t.displayName="Widgets.Loader";exports.default=t;

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

@@ -0,0 +1,6 @@
+import { FunctionComponent } from "react";
+type Props = {
+    className?: string;
+};
+declare const Loader: FunctionComponent<Props>;
+export default Loader;