@rubin-epo/epo-widget-lib 1.0.0 → 1.0.2

package/dist/charts/styles.d.ts

@@ -197,7 +197,7 @@ export declare const BaseLine: import('styled-components').IStyledComponent<"web
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -679,7 +679,7 @@ export declare const Guide: import('styled-components').IStyledComponent<"web",
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -1161,7 +1161,7 @@ export declare const Tick: import('styled-components').IStyledComponent<"web", {
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -1643,7 +1643,7 @@ export declare const Bar: import('styled-components').IStyledComponent<"web", {
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -2125,7 +2125,7 @@ export declare const XLabel: import('styled-components').IStyledComponent<"web",
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -2607,7 +2607,7 @@ export declare const YLabel: import('styled-components').IStyledComponent<"web",
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;

package/dist/layout/AspectRatio/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),u=require("./styles.cjs"),t={square:1,portrait:parseFloat((9/16).toFixed(3)),landscape:parseFloat((16/9).toFixed(3))},s=({ratio:e,medScreenRatio:a=e,smallScreenRatio:o=e,children:r,className:i})=>{const l={"--aspect-large-ratio":t[e],"--aspect-med-ratio":t[a],"--aspect-small-ratio":t[o]};return c.jsx(u.AspectRatio,{style:l,className:i,children:r})};s.displayName="Layout.AspectRatio";exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),p=require("./styles.cjs"),t=({ratio:e,children:s,className:a})=>{const o=typeof e=="object"?e.portrait:e,c=typeof e=="object"?e.landscape:e;return i.jsx(p.AspectRatio,{style:{"--size-aspect-ratio-portrait":o,"--size-aspect-ratio-landscape":c},className:a,children:s})};t.displayName="Layout.AspectRatio";exports.default=t;

package/dist/layout/AspectRatio/index.d.ts

@@ -1,10 +1,8 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 
-type AspectRatio = "square" | "portrait" | "landscape";
+export type Ratios = Record<"landscape" | "portrait", number>;
 export interface AspectRatioProps {
-    ratio: AspectRatio;
-    medScreenRatio?: AspectRatio;
-    smallScreenRatio?: AspectRatio;
+    ratio: number | Ratios;
     className?: string;
 }
 /**

package/dist/layout/AspectRatio/index.js

@@ -1,24 +1,24 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { AspectRatio as c } from "./styles.js";
-const a = {
-  square: 1,
-  portrait: parseFloat((9 / 16).toFixed(3)),
-  landscape: parseFloat((16 / 9).toFixed(3))
-}, l = ({
+const i = ({
   ratio: t,
-  medScreenRatio: s = t,
-  smallScreenRatio: e = t,
-  children: o,
-  className: r
+  children: a,
+  className: e
 }) => {
-  const p = {
-    "--aspect-large-ratio": a[t],
-    "--aspect-med-ratio": a[s],
-    "--aspect-small-ratio": a[e]
-  };
-  return /* @__PURE__ */ i(c, { style: p, className: r, children: o });
+  const o = typeof t == "object" ? t.portrait : t, s = typeof t == "object" ? t.landscape : t;
+  return /* @__PURE__ */ p(
+    c,
+    {
+      style: {
+        "--size-aspect-ratio-portrait": o,
+        "--size-aspect-ratio-landscape": s
+      },
+      className: e,
+      children: a
+    }
+  );
 };
-l.displayName = "Layout.AspectRatio";
+i.displayName = "Layout.AspectRatio";
 export {
-  l as default
+  i as default
 };

package/dist/layout/AspectRatio/styles.cjs

@@ -1,20 +1,15 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),o=require("../../atomic/Loader/index.cjs"),r=t=>t&&t.__esModule?t:{default:t},a=r(i),s=a.default.div`
-  --aspect-ratio: var(--aspect-small-ratio, 1);
-
-  aspect-ratio: var(--aspect-ratio);
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),a=t=>t&&t.__esModule?t:{default:t},i=a(e),s=i.default.div`
+  aspect-ratio: var(--size-aspect-ratio);
   position: relative;
-  width: calc(var(--widget-max-height, 100vh) * var(--aspect-ratio));
+  width: calc(var(--widget-max-height, 100vh) * var(--size-aspect-ratio));
   max-height: var(--widget-max-height, 100vh);
   max-width: 100%;
 
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
-    --aspect-ratio: var(--aspect-med-ratio, 1);
+  @media (orientation: landscape) {
+    --size-aspect-ratio: var(--size-aspect-ratio-landscape, 1);
   }
-  @container (min-width: ${e.token("BREAK_DESKTOP_SMALL")}) {
-    --aspect-ratio: var(--aspect-large-ratio, 1);
+
+  @media (orientation: portrait) {
+    --size-aspect-ratio: var(--size-aspect-ratio-portrait, 1);
   }
-`;a.default(o.default)`
-  position: absolute;
-  top: 0;
-  left: 0;
 `;exports.AspectRatio=s;

package/dist/layout/AspectRatio/styles.d.ts

@@ -272,8 +272,3 @@ export declare const AspectRatio: import('styled-components').IStyledComponent<"
     onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
 }>;
-export declare const StackedLoader: import('styled-components').IStyledComponent<"web", {
-    className?: string | undefined;
-}> & import('react').FunctionComponent<{
-    className?: string | undefined;
-}>;

package/dist/layout/AspectRatio/styles.js

@@ -1,28 +1,20 @@
 "use client";
-import a from "styled-components";
-import { token as t } from "@rubin-epo/epo-react-lib/styles";
-import i from "../../atomic/Loader/index.js";
-const p = a.div`
-  --aspect-ratio: var(--aspect-small-ratio, 1);
-
-  aspect-ratio: var(--aspect-ratio);
+import t from "styled-components";
+const i = t.div`
+  aspect-ratio: var(--size-aspect-ratio);
   position: relative;
-  width: calc(var(--widget-max-height, 100vh) * var(--aspect-ratio));
+  width: calc(var(--widget-max-height, 100vh) * var(--size-aspect-ratio));
   max-height: var(--widget-max-height, 100vh);
   max-width: 100%;
 
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
-    --aspect-ratio: var(--aspect-med-ratio, 1);
+  @media (orientation: landscape) {
+    --size-aspect-ratio: var(--size-aspect-ratio-landscape, 1);
   }
-  @container (min-width: ${t("BREAK_DESKTOP_SMALL")}) {
-    --aspect-ratio: var(--aspect-large-ratio, 1);
+
+  @media (orientation: portrait) {
+    --size-aspect-ratio: var(--size-aspect-ratio-portrait, 1);
   }
 `;
-a(i)`
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
 export {
-  p as AspectRatio
+  i as AspectRatio
 };

package/dist/layout/Controls/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../AspectRatio/index.cjs"),r=require("./styles.cjs"),l=({widget:s,controls:d,actions:i,caption:t,controlsId:o,className:c,isLoading:a,isDisplayOnly:u})=>u?e.jsxs(n.default,{ratio:"square",children:[s,a&&e.jsx(r.StackedLoader,{})]}):e.jsx(n.default,{ratio:"landscape",medScreenRatio:"landscape",smallScreenRatio:"portrait",className:c,children:e.jsxs(r.WidgetLayout,{children:[e.jsxs(r.InteractionRow,{children:[e.jsxs(r.Widget,{children:[s,a&&e.jsx(r.StackedLoader,{})]}),t&&e.jsx(r.PortraitCaption,{children:t}),d&&e.jsx(r.Controls,{id:o,children:d})]}),i&&e.jsx(r.Actions,{children:i}),t&&e.jsx(r.LandscapeCaption,{children:t})]})});l.displayName="Layouts.WidgetControls";exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("../AspectRatio/index.cjs"),r=require("./styles.cjs"),o=({widget:s,ratio:a={landscape:16/9,portrait:9/16},controls:d,actions:i,caption:t,controlsId:u,className:c,isLoading:n,isDisplayOnly:j})=>j?e.jsxs(l.default,{ratio:1,children:[s,n&&e.jsx(r.StackedLoader,{})]}):e.jsx(l.default,{className:c,ratio:a,children:e.jsxs(r.WidgetLayout,{children:[e.jsxs(r.InteractionRow,{children:[e.jsxs(r.Widget,{children:[s,n&&e.jsx(r.StackedLoader,{})]}),t&&e.jsx(r.PortraitCaption,{children:t}),d&&e.jsx(r.Controls,{id:u,children:d})]}),i&&e.jsx(r.Actions,{children:i}),t&&e.jsx(r.LandscapeCaption,{children:t})]})});o.displayName="Layouts.WidgetControls";exports.default=o;

package/dist/layout/Controls/index.d.ts

@@ -1,8 +1,10 @@
 import { FunctionComponent, ReactNode } from 'react';
+import { Ratios } from '../AspectRatio';
 
 interface WidgetControlsProps {
     widget: ReactNode;
     controls: ReactNode;
+    ratio?: Ratios;
     controlsId?: string;
     actions?: ReactNode;
     caption?: ReactNode;

package/dist/layout/Controls/index.js

@@ -1,40 +1,32 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import n from "../AspectRatio/index.js";
-import { StackedLoader as l, WidgetLayout as m, InteractionRow as p, Widget as u, PortraitCaption as f, Controls as C, Actions as R, LandscapeCaption as W } from "./styles.js";
-const x = ({
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import a from "../AspectRatio/index.js";
+import { StackedLoader as l, WidgetLayout as m, InteractionRow as f, Widget as u, PortraitCaption as C, Controls as W, Actions as x, LandscapeCaption as y } from "./styles.js";
+const L = ({
   widget: i,
+  ratio: c = { landscape: 16 / 9, portrait: 9 / 16 },
   controls: o,
-  actions: a,
-  caption: e,
-  controlsId: c,
-  className: s,
-  isLoading: d,
-  isDisplayOnly: h
-}) => h ? /* @__PURE__ */ t(n, { ratio: "square", children: [
+  actions: d,
+  caption: t,
+  controlsId: s,
+  className: h,
+  isLoading: n,
+  isDisplayOnly: p
+}) => p ? /* @__PURE__ */ e(a, { ratio: 1, children: [
   i,
-  d && /* @__PURE__ */ r(l, {})
-] }) : /* @__PURE__ */ r(
-  n,
-  {
-    ratio: "landscape",
-    medScreenRatio: "landscape",
-    smallScreenRatio: "portrait",
-    className: s,
-    children: /* @__PURE__ */ t(m, { children: [
-      /* @__PURE__ */ t(p, { children: [
-        /* @__PURE__ */ t(u, { children: [
-          i,
-          d && /* @__PURE__ */ r(l, {})
-        ] }),
-        e && /* @__PURE__ */ r(f, { children: e }),
-        o && /* @__PURE__ */ r(C, { id: c, children: o })
-      ] }),
-      a && /* @__PURE__ */ r(R, { children: a }),
-      e && /* @__PURE__ */ r(W, { children: e })
-    ] })
-  }
-);
-x.displayName = "Layouts.WidgetControls";
+  n && /* @__PURE__ */ r(l, {})
+] }) : /* @__PURE__ */ r(a, { className: h, ratio: c, children: /* @__PURE__ */ e(m, { children: [
+  /* @__PURE__ */ e(f, { children: [
+    /* @__PURE__ */ e(u, { children: [
+      i,
+      n && /* @__PURE__ */ r(l, {})
+    ] }),
+    t && /* @__PURE__ */ r(C, { children: t }),
+    o && /* @__PURE__ */ r(W, { id: s, children: o })
+  ] }),
+  d && /* @__PURE__ */ r(x, { children: d }),
+  t && /* @__PURE__ */ r(y, { children: t })
+] }) });
+L.displayName = "Layouts.WidgetControls";
 export {
-  x as default
+  L as default
 };

package/dist/layout/Controls/styles.cjs

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),e=require("@rubin-epo/epo-react-lib/styles"),o=require("../../atomic/Loader/index.cjs"),n=i=>i&&i.__esModule?i:{default:i},t=n(a),d=t.default.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),a=require("@rubin-epo/epo-react-lib/styles"),d=require("../../atomic/Loader/index.cjs"),o=t=>t&&t.__esModule?t:{default:t},e=o(i),n=e.default.div`
   --default-widget-padding: calc(var(--PADDING_SMALL, 20px) / 2);
   --widget-gap: var(--widget-padding, var(--default-widget-padding));
 
@@ -6,59 +6,61 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: 100%;
+  height: 100%;
   gap: var(--widget-gap);
-  overflow-y: auto;
 
-  @container (min-width: ${e.token("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${a.token("BREAK_PHABLET_MIN")}) {
     --default-widget-padding: var(--PADDING_SMALL, 20px);
   }
 
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     height: 100%;
     overflow-y: initial;
   }
-`,l=t.default.div`
+`,l=e.default.div`
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1 1;
   gap: var(--widget-gap);
+  min-height: 0;
 
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     flex-direction: row-reverse;
   }
-`,r=t.default.div`
+`,r=e.default.div`
   aspect-ratio: 1;
-  flex: 1 1 auto;
+  flex: 1 0 auto;
   max-height: 100%;
   max-width: 100%;
   justify-self: center;
   position: relative;
 
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     max-height: unset;
     height: 100%;
   }
-`,s=t.default.form`
+`,s=e.default.form`
   display: flex;
   flex-direction: column;
   gap: var(--widget-gap);
   flex: 0 1 100%;
-`,c=t.default.div`
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-inline: 2px;
+`,c=e.default.div`
   display: flex;
   gap: var(--widget-gap);
-`,g=t.default.div`
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
+`,p=e.default.div`
+  @media (orientation: landscape) {
     display: none;
   }
-`,p=t.default.div`
-  display: none;
-  @container (min-width: ${e.token("BREAK_LARGE_TABLET")}) {
-    display: block;
+`,g=e.default.div`
+  @media (orientation: portrait) {
+    display: none;
   }
-`,f=t.default(o.default)`
+`,f=e.default(d.default)`
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
-`;exports.Actions=c;exports.Controls=s;exports.InteractionRow=l;exports.LandscapeCaption=p;exports.PortraitCaption=g;exports.StackedLoader=f;exports.Widget=r;exports.WidgetLayout=d;
+`;exports.Actions=c;exports.Controls=s;exports.InteractionRow=l;exports.LandscapeCaption=g;exports.PortraitCaption=p;exports.StackedLoader=f;exports.Widget=r;exports.WidgetLayout=n;

package/dist/layout/Controls/styles.js

@@ -1,8 +1,8 @@
 "use client";
 import i from "styled-components";
-import { token as t } from "@rubin-epo/epo-react-lib/styles";
-import e from "../../atomic/Loader/index.js";
-const d = i.div`
+import { token as e } from "@rubin-epo/epo-react-lib/styles";
+import t from "../../atomic/Loader/index.js";
+const n = i.div`
   --default-widget-padding: calc(var(--PADDING_SMALL, 20px) / 2);
   --widget-gap: var(--widget-padding, var(--default-widget-padding));
 
@@ -10,36 +10,36 @@ const d = i.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: 100%;
+  height: 100%;
   gap: var(--widget-gap);
-  overflow-y: auto;
 
-  @container (min-width: ${t("BREAK_PHABLET_MIN")}) {
+  @container (min-width: ${e("BREAK_PHABLET_MIN")}) {
     --default-widget-padding: var(--PADDING_SMALL, 20px);
   }
 
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     height: 100%;
     overflow-y: initial;
   }
 `, r = i.div`
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
+  flex: 1 1;
   gap: var(--widget-gap);
+  min-height: 0;
 
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     flex-direction: row-reverse;
   }
 `, l = i.div`
   aspect-ratio: 1;
-  flex: 1 1 auto;
+  flex: 1 0 auto;
   max-height: 100%;
   max-width: 100%;
   justify-self: center;
   position: relative;
 
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+  @media (orientation: landscape) {
     max-height: unset;
     height: 100%;
   }
@@ -48,31 +48,33 @@ const d = i.div`
   flex-direction: column;
   gap: var(--widget-gap);
   flex: 0 1 100%;
-`, c = i.div`
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-inline: 2px;
+`, g = i.div`
   display: flex;
   gap: var(--widget-gap);
-`, g = i.div`
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
+`, s = i.div`
+  @media (orientation: landscape) {
     display: none;
   }
-`, s = i.div`
-  display: none;
-  @container (min-width: ${t("BREAK_LARGE_TABLET")}) {
-    display: block;
+`, c = i.div`
+  @media (orientation: portrait) {
+    display: none;
   }
-`, f = i(e)`
+`, f = i(t)`
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
 `;
 export {
-  c as Actions,
+  g as Actions,
   p as Controls,
   r as InteractionRow,
-  s as LandscapeCaption,
-  g as PortraitCaption,
+  c as LandscapeCaption,
+  s as PortraitCaption,
   f as StackedLoader,
   l as Widget,
-  d as WidgetLayout
+  n as WidgetLayout
 };

package/dist/localeStrings/es/epo-widget-lib.json

@@ -52,6 +52,11 @@
     "messages": {
       "success": "¡Muy bien!",
       "failure": "Inténtalo de nuevo."
+    },
+    "selected_source": "Seleccionada {{type}}:",
+    "sources": {
+      "galaxy": "Galaxia",
+      "supernova": "Supernova"
     }
   },
   "camera_filter": {
@@ -66,5 +71,82 @@
       "visible": "Luz visible",
       "infrared": "Infrarrojo"
     }
+  },
+  "blinker": {
+    "controls": {
+      "backward": "Regresar",
+      "forward": "Adelantar",
+      "pause": "Pausar",
+      "play": "Reproducir"
+    }
+  },
+  "isochrone_plot": {
+    "controls": {
+      "age": {
+        "label": "Edad",
+        "textValue": "{{value}} giga-años"
+      },
+      "distance": {
+        "label": "Distancia",
+        "textValue": "{{value}} desplazamiento de magnitud"
+      }
+    },
+    "output": "{{age}} Ga {{distance}} al",
+    "output_screenreader": "{{age}} giga-años {{distance}} años luz, {{percent}} de estrellas están en la curva.",
+    "plot": {
+      "x_label": "Índice de Color",
+      "y_label": "Magnitud Aparente tipo G"
+    }
+  },
+  "light_curve": {
+    "curve": {
+      "controls": {
+        "gaussian_width": "Ancho de Curva",
+        "y_offset": "Desplazamiento Vertical (eje y)"
+      },
+      "description_above": "La distancia media de las observaciones es {{residual}}, tu punto máximo está por sobre la medición más brillante de {{brightest}}",
+      "description_below": "La distancia media de las observaciones es {{residual}}, tu punto máximo está debajo de la medición más brillante de {{brightest}}"
+    },
+    "deltaM15": {
+      "label": "Delta m 15:"
+    },
+    "magnitude_slider": {
+      "label": "Estimar la magnitud aparente",
+      "value_above": "La magnitud aparente es {{magnitude}}, {{distance}} más alta que el punto máximo de la curva de luz.",
+      "value_below": "La magnitud aparente es {{magnitude}}, {{distance}} más baja que el punto máximo de la curva de luz.",
+      "value_equal": "La magnitud aparente es {{magnitude}}, igual al punto máximo de la curva de luz."
+    },
+    "plot": {
+      "plot_label": "Magnitud de supernova antes y después de la magnitud máxima",
+      "point_label_after_one": "Magnitud Aparente: {{magnitude}} {{count}} día después del punto máximo",
+      "point_label_after_other": "Magnitud Aparente: {{magnitude}} {{count}} días después del punto máximo",
+      "point_label_before_one": "Magnitud Aparente: {{magnitude}} {{count}} día antes del punto máximo",
+      "point_label_before_other": "Magnitud Aparente: {{magnitude}} {{count}} días antes del punto máximo",
+      "point_label_peak": "Magnitud Aparente: {{magnitude}} en su punto máximo",
+      "tooltip": "Magnitud Aparente: {{magnitude}}",
+      "x_label": "Días",
+      "y_label": "Magnitud Aparente (m)"
+    }
+  },
+  "supernova_three_vector": {
+    "histogram": {
+      "bar_label_one": "{{binMin}} a {{binMax}} megaaños luz: {{count}} supernova",
+      "bar_label_other": "{{binMin}} a {{binMax}} megaaños luz: {{count}} supernovas",
+      "title": "Distancias de Supernovas",
+      "x_label": "Distancia [Mlyr]"
+    },
+    "skymap": {
+      "description": "$t(supernova_three_vector.skymap.supernova_count, {\"count\": {{supernovaCount}}, \"min\": {{min}}, \"max\": {{max}}}) $t(supernova_three_vector.skymap.user_supernova_count, {\"count\": {{userObjectCount}}})",
+      "supernova_count_one": "La proyección de mapa en el cielo muestra {{count}} supernova entre las distancias de {{min}} y {{max}} megaaños luz.",
+      "supernova_count_other": "La proyección de mapa en el cielo muestra {{count}} supernovas entre las distancias de {{min}} y {{max}} megaaños luz.",
+      "title": "Distribución de Supernovas",
+      "user_supernova_count_one": "{{count}} de tus supernovas es visible cerca de {{coords}}.",
+      "user_supernova_count_other": "{{count}} de tus supernovas se ve cerca de {{coords}}.",
+      "user_supernova_count_zero": "Ninguna de tus supernovas es visible."
+    },
+    "slider": {
+      "label": "Seleccionar rango visible",
+      "valueLabel": "{{value}} megaaños luz"
+    }
   }
 }

package/dist/widgets/CameraFilter/styles.d.ts

@@ -1,9 +1,7 @@
-import { default as AspectRatio } from '../../layout/AspectRatio';
-
+/// <reference types="react" />
+/// <reference types="react" />
 export declare const FilterWrapper: import('styled-components').IStyledComponent<"web", {
-    ratio: AspectRatio;
-    medScreenRatio?: AspectRatio | undefined;
-    smallScreenRatio?: AspectRatio | undefined;
+    ratio: number | import('../../layout/AspectRatio').Ratios;
     className?: string | undefined;
     children?: import('react').ReactNode;
 }> & import('react').FunctionComponent<import('react').PropsWithChildren<import('../../layout/AspectRatio').AspectRatioProps>>;
@@ -2950,7 +2948,7 @@ export declare const SpectrumLabel: import('styled-components').IStyledComponent
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -3432,7 +3430,7 @@ export declare const ColorName: import('styled-components').IStyledComponent<"we
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -3914,7 +3912,7 @@ export declare const ColorSpectrum: import('styled-components').IStyledComponent
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;
@@ -4396,7 +4394,7 @@ export declare const ColorSpectrumUnit: import('styled-components').IStyledCompo
     stroke?: string | undefined;
     strokeDasharray?: string | number | undefined;
     strokeDashoffset?: string | number | undefined;
-    strokeLinecap?: "inherit" | "square" | "butt" | "round" | undefined;
+    strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
     strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
     strokeMiterlimit?: string | number | undefined;
     strokeOpacity?: string | number | undefined;