@rubin-epo/epo-widget-lib 0.2.1 → 0.4.1

package/dist/SourceSelector.js

@@ -0,0 +1,97 @@
+import { jsxs as C, jsx as t, Fragment as _ } from "react/jsx-runtime";
+import { useState as r, useEffect as D } from "react";
+import { useTranslation as F } from "react-i18next";
+import G from "@rubin-epo/epo-react-lib/IconComposer";
+import { SourceSelectorContainer as N, BackgroundBlinker as P, ElapsedDisplay as R, SVG as T } from "./widgets/SourceSelector/styles.js";
+import { getLinearScale as M } from "./widgets/SourceSelector/utilities.js";
+import Y from "./widgets/SourceSelector/Message/Message.js";
+import q from "./widgets/SourceSelector/Points/Points.js";
+const z = ({
+  width: a = 600,
+  height: c = 600,
+  selectedSource: b = [],
+  sources: u,
+  alerts: n,
+  images: x,
+  selectionCallback: m,
+  blinkConfig: y,
+  color: A,
+  isDisplayOnly: d = !1
+}) => {
+  const [l, B] = r(b), [V, v] = r(!1), [E, g] = r(), [I, f] = r(!1), [S, L] = r(null), { t: p } = F(), h = "sourceSelectorWidget";
+  D(() => {
+    m && m(l);
+  }, [l]);
+  const k = (o, i, e) => o.filter((s) => s.id === i && s.type === e), $ = (o) => {
+    if (V && !d) {
+      const { target: i } = o, { id: e, type: s } = i.dataset;
+      if (e && s) {
+        if (!(k(l, e, s).length > 0)) {
+          const j = k(u, e, s);
+          B((W) => W.concat(j)), g(
+            /* @__PURE__ */ C(_, { children: [
+              /* @__PURE__ */ t(G, { icon: "checkmark" }),
+              p("source_selector.messages.success")
+            ] })
+          ), f(!0);
+        }
+      } else
+        g(p("source_selector.messages.failure")), f(!0);
+    }
+  };
+  return /* @__PURE__ */ C(N, { width: a, height: c, children: [
+    !d && /* @__PURE__ */ t(
+      Y,
+      {
+        onMessageChangeCallback: () => {
+          f(!1);
+        },
+        isVisible: I,
+        forIds: [h],
+        children: E
+      }
+    ),
+    /* @__PURE__ */ t(
+      P,
+      {
+        images: x,
+        blinkCallback: (o) => {
+          if (n && n.length > 1) {
+            const e = n[o].date - n[0].date;
+            L({
+              day: Math.round(e),
+              hour: Math.round(24 / e % 24) || 0
+            });
+          }
+        },
+        loadedCallback: () => v(!0),
+        ...y
+      }
+    ),
+    S && /* @__PURE__ */ t(R, { ...S }),
+    /* @__PURE__ */ t(
+      T,
+      {
+        preserveAspectRatio: "xMidYMid meet",
+        viewBox: `0 0 ${a} ${c}`,
+        onClick: $,
+        id: h,
+        $isDisplayOnly: d,
+        children: /* @__PURE__ */ t(
+          q,
+          {
+            xScale: M([0, a], [0, a]),
+            yScale: M([0, c], [c, 0]),
+            color: A,
+            sources: u,
+            selectedSource: l
+          }
+        )
+      }
+    )
+  ] });
+};
+z.displayName = "Widgets.SourceSelector";
+export {
+  z as default
+};

package/dist/atomic/Blinker/Blinker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("react"),R=require("@rubin-epo/epo-react-lib/styles"),$=require("../../hooks/useInterval.cjs"),b=require("use-resize-observer"),u=require("./styles.cjs"),m=require("../../lib/utils.cjs"),P=e=>e&&e.__esModule?e:{default:e},z=P(b),v=({images:e=[],activeIndex:h=0,autoplay:p=!0,loop:_=!0,interval:g=200,blinkCallback:c,loadedCallback:d,className:q})=>{const{ref:y,width:S=1}=z.default(),[a,f]=n.useState(p),[s,x]=n.useState(h),[r,j]=n.useState(!1),{BREAK_MOBILE:C}=R.tokens,o=e.length>1,B=S<parseInt(C);n.useEffect(()=>{c&&c(s)},[s]),n.useEffect(()=>{r&&d&&d()},[r]);const I=(t=0)=>{const O=e.length-1;return m.getClampedArrayIndex(s+t,O)},k=()=>{if(o){const t=I(1);_===!1&&t===e.length-1&&l(),x(t)}},l=()=>{f(!1)},A=()=>{f(t=>!t)},E=()=>{l(),k()},M=()=>{l(),x(I(-1))};return $.default(k,o&&r&&a?g:null),i.jsxs(u.BlinkerContainer,{className:q,ref:y,children:[i.jsx(u.BlinkerImages,{loadedCallback:()=>j(!0),images:e,activeIndex:s,$isCondensed:B}),o&&i.jsx(u.BlinkerControls,{isDisabled:!r,playing:a,handleStartStop:A,handleNext:E,handlePrevious:M,$isCondensed:B})]})};v.displayName="Atomic.Blinker";const D=v;exports.default=D;

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from "react";
-import { Image } from "@rubin-epo/epo-react-lib/dist/types/image";
+import { ImageShape } from "@rubin-epo/epo-react-lib";
 export interface BlinkerProps {
-    images: Image[];
+    images: ImageShape[];
     activeIndex?: number;
     autoplay?: boolean;
     loop?: boolean;

package/dist/atomic/Blinker/Blinker.js

@@ -0,0 +1,68 @@
+import { jsxs as O, jsx as x } from "react/jsx-runtime";
+import { useState as i, useEffect as B } from "react";
+import { tokens as P } from "@rubin-epo/epo-react-lib/styles";
+import R from "../../hooks/useInterval.js";
+import w from "use-resize-observer";
+import { BlinkerContainer as z, BlinkerImages as D, BlinkerControls as K } from "./styles.js";
+import { getClampedArrayIndex as M } from "../../lib/utils.js";
+const I = ({
+  images: t = [],
+  activeIndex: k = 0,
+  autoplay: h = !0,
+  loop: v = !0,
+  interval: g = 200,
+  blinkCallback: l,
+  loadedCallback: d,
+  className: C
+}) => {
+  const { ref: y, width: A = 1 } = w(), [c, a] = i(h), [n, f] = i(k), [s, E] = i(!1), { BREAK_MOBILE: S } = P, o = t.length > 1, m = A < parseInt(S);
+  B(() => {
+    l && l(n);
+  }, [n]), B(() => {
+    s && d && d();
+  }, [s]);
+  const p = (e = 0) => {
+    const N = t.length - 1;
+    return M(n + e, N);
+  }, u = () => {
+    if (o) {
+      const e = p(1);
+      v === !1 && e === t.length - 1 && r(), f(e);
+    }
+  }, r = () => {
+    a(!1);
+  }, $ = () => {
+    a((e) => !e);
+  }, j = () => {
+    r(), u();
+  }, L = () => {
+    r(), f(p(-1));
+  };
+  return R(u, o && s && c ? g : null), /* @__PURE__ */ O(z, { className: C, ref: y, children: [
+    /* @__PURE__ */ x(
+      D,
+      {
+        loadedCallback: () => E(!0),
+        images: t,
+        activeIndex: n,
+        $isCondensed: m
+      }
+    ),
+    o && /* @__PURE__ */ x(
+      K,
+      {
+        isDisabled: !s,
+        playing: c,
+        handleStartStop: $,
+        handleNext: j,
+        handlePrevious: L,
+        $isCondensed: m
+      }
+    )
+  ] });
+};
+I.displayName = "Atomic.Blinker";
+const Q = I;
+export {
+  Q as default
+};

package/dist/atomic/Blinker/Controls/Controls.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),c=require("react-i18next"),l=require("../../PlaybackControl/PlaybackControl.cjs"),u=require("./styles.cjs"),o=({playing:a,handleStartStop:n,handleNext:s,handlePrevious:i,className:d,isDisabled:r})=>{const{t:e}=c.useTranslation();return t.jsxs(u.ControlsContainer,{"data-testid":"blinker-controls",className:d,children:[t.jsx(l.default,{"data-testid":"blinker-backward",icon:"Backward",label:e("blinker.controls.backward"),handleClick:i,disabled:r}),t.jsx(l.default,{"data-testid":"blinker-start-stop",icon:a?"Pause":"Play",label:e(a?"blinker.controls.pause":"blinker.controls.play"),handleClick:n,disabled:r}),t.jsx(l.default,{"data-testid":"blinker-forward",icon:"Forward",label:e("blinker.controls.forward"),handleClick:s,disabled:r})]})};o.displayName="Atomic.Blinker.Controls";const b=o;exports.default=b;

package/dist/atomic/Blinker/Controls/Controls.js

@@ -0,0 +1,58 @@
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useTranslation as k } from "react-i18next";
+import l from "../../PlaybackControl/PlaybackControl.js";
+import { ControlsContainer as b } from "./styles.js";
+const n = ({
+  playing: a,
+  handleStartStop: e,
+  handleNext: i,
+  handlePrevious: s,
+  className: d,
+  isDisabled: o
+}) => {
+  const { t: r } = k();
+  return /* @__PURE__ */ c(
+    b,
+    {
+      "data-testid": "blinker-controls",
+      className: d,
+      children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            "data-testid": "blinker-backward",
+            icon: "Backward",
+            label: r("blinker.controls.backward"),
+            handleClick: s,
+            disabled: o
+          }
+        ),
+        /* @__PURE__ */ t(
+          l,
+          {
+            "data-testid": "blinker-start-stop",
+            icon: a ? "Pause" : "Play",
+            label: r(a ? "blinker.controls.pause" : "blinker.controls.play"),
+            handleClick: e,
+            disabled: o
+          }
+        ),
+        /* @__PURE__ */ t(
+          l,
+          {
+            "data-testid": "blinker-forward",
+            icon: "Forward",
+            label: r("blinker.controls.forward"),
+            handleClick: i,
+            disabled: o
+          }
+        )
+      ]
+    }
+  );
+};
+n.displayName = "Atomic.Blinker.Controls";
+const w = n;
+export {
+  w as default
+};

package/dist/atomic/Blinker/Controls/styles.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),n=t=>t&&t.__esModule?t:{default:t},r=n(e),i=r.default.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+  gap: 0.5em;
+  color: var(--white, #fff);
+  align-items: center;
+  justify-items: center;
+  width: fit-content;
+  font-size: 0.75em;
+  text-align: center;
+  z-index: 1;
+`;exports.ControlsContainer=i;

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

@@ -1 +1,2 @@
-export declare const ControlsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const ControlsContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/dist/atomic/Blinker/Controls/styles.js

@@ -0,0 +1,17 @@
+import t from "styled-components";
+const i = t.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+  gap: 0.5em;
+  color: var(--white, #fff);
+  align-items: center;
+  justify-items: center;
+  width: fit-content;
+  font-size: 0.75em;
+  text-align: center;
+  z-index: 1;
+`;
+export {
+  i as ControlsContainer
+};

package/dist/atomic/Blinker/Image/Image.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),n=require("./styles.cjs"),e=({image:t,active:r,loadCallback:l})=>{const{url:s,altText:a}=t;return i.jsx(n.BlinkerImage,{alt:a,src:s,onLoad:l,$active:r})};e.displayName="Atomic.Blinker.Image";const o=e;exports.default=o;

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

@@ -1,7 +1,7 @@
-import { Image } from "@rubin-epo/epo-react-lib/dist/types/image";
+import { ImageShape } from "@rubin-epo/epo-react-lib";
 import { FunctionComponent } from "react";
 interface ImageProps {
-    image: Image;
+    image: ImageShape;
     active: boolean;
     loadCallback: () => void;
 }

package/dist/atomic/Blinker/Image/Image.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "react/jsx-runtime";
+import { BlinkerImage as l } from "./styles.js";
+const e = ({
+  image: a,
+  active: r,
+  loadCallback: t
+}) => {
+  const { url: m, altText: o } = a;
+  return /* @__PURE__ */ i(
+    l,
+    {
+      alt: o,
+      src: m,
+      onLoad: t,
+      $active: r
+    }
+  );
+};
+e.displayName = "Atomic.Blinker.Image";
+const c = e;
+export {
+  c as default
+};

package/dist/atomic/Blinker/Image/styles.cjs

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),s=e=>e&&e.__esModule?e:{default:e},i=s(t),n=i.default.img`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  -ms-user-drag: none;
+  user-drag: none;
+
+  ${({$active:e})=>e?t.css`
+          visibility: visible;
+        `:t.css`
+          visibility: hidden;
+        `}
+`;exports.BlinkerImage=n;

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

@@ -1,3 +1,4 @@
-export declare const BlinkerImage: import("styled-components").StyledComponent<"img", any, {
-    active: boolean;
-}, never>;
+/// <reference types="react" />
+export declare const BlinkerImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    $active: boolean;
+}>>;

package/dist/atomic/Blinker/Image/styles.js

@@ -0,0 +1,26 @@
+import o, { css as e } from "styled-components";
+const r = o.img`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  -ms-user-drag: none;
+  user-drag: none;
+
+  ${({ $active: i }) => i ? e`
+          visibility: visible;
+        ` : e`
+          visibility: hidden;
+        `}
+`;
+export {
+  r as BlinkerImage
+};

package/dist/atomic/Blinker/Images/Images.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),i=require("react"),j=require("@rubin-epo/epo-react-lib/CircularLoader"),o=require("./styles.cjs"),I=require("../Image/Image.cjs"),q=e=>e&&e.__esModule?e:{default:e},x=q(j),u=({images:e=[],activeIndex:c,className:l,loadedCallback:n})=>{const[r,d]=i.useState(0),[t,g]=i.useState(!0),f=()=>{d(s=>s+1)};return i.useEffect(()=>{g(r!==e.length),t||n&&n()},[r,t]),a.jsxs(o.BlinkContainer,{"data-testid":"blinker-images",className:l,children:[!r&&a.jsx(x.default,{isVisible:t}),a.jsx(o.LoadingContainer,{$isLoading:t,children:e.map((s,m)=>{const{url:L}=s,_=c===m;return a.jsx(I.default,{image:s,active:_,loadCallback:f},L)})})]})};u.displayName="Atomic.Blinker.Images";const b=u;exports.default=b;

package/dist/atomic/Blinker/Images/Images.js

@@ -0,0 +1,37 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useState as a, useEffect as L } from "react";
+import I from "@rubin-epo/epo-react-lib/CircularLoader";
+import { BlinkContainer as k, LoadingContainer as h } from "./styles.js";
+import x from "../Image/Image.js";
+const n = ({
+  images: r = [],
+  activeIndex: m,
+  className: c,
+  loadedCallback: s
+}) => {
+  const [i, d] = a(0), [e, l] = a(!0), g = () => {
+    d((t) => t + 1);
+  };
+  return L(() => {
+    l(i !== r.length), e || s && s();
+  }, [i, e]), /* @__PURE__ */ u(k, { "data-testid": "blinker-images", className: c, children: [
+    !i && /* @__PURE__ */ o(I, { isVisible: e }),
+    /* @__PURE__ */ o(h, { $isLoading: e, children: r.map((t, f) => {
+      const { url: p } = t;
+      return /* @__PURE__ */ o(
+        x,
+        {
+          image: t,
+          active: m === f,
+          loadCallback: g
+        },
+        p
+      );
+    }) })
+  ] });
+};
+n.displayName = "Atomic.Blinker.Images";
+const y = n;
+export {
+  y as default
+};

package/dist/atomic/Blinker/Images/styles.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},n=i(e),o=n.default.div`
+  background-color: var(--neutral95, #1f2121);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`,a=n.default.div`
+  transition: opacity ease var(--DURATION_SLOW, 0.4s);
+
+  ${({$isLoading:t})=>t?e.css`
+          opacity: 0;
+        `:e.css`
+          opacity: 1;
+        `}
+`;exports.BlinkContainer=o;exports.LoadingContainer=a;

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

@@ -1,4 +1,5 @@
-export declare const BlinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {
-    isLoading: boolean;
-}, never>;
+/// <reference types="react" />
+export declare const BlinkContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const LoadingContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isLoading: boolean;
+}>>;

package/dist/atomic/Blinker/Images/styles.js

@@ -0,0 +1,20 @@
+import i, { css as t } from "styled-components";
+const e = i.div`
+  background-color: var(--neutral95, #1f2121);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`, a = i.div`
+  transition: opacity ease var(--DURATION_SLOW, 0.4s);
+
+  ${({ $isLoading: n }) => n ? t`
+          opacity: 0;
+        ` : t`
+          opacity: 1;
+        `}
+`;
+export {
+  e as BlinkContainer,
+  a as LoadingContainer
+};

package/dist/atomic/Blinker/_mocks/index.d.ts

@@ -0,0 +1,2 @@
+import { ImageShape } from "@rubin-epo/epo-react-lib";
+export declare const mockImages: ImageShape[];

package/dist/atomic/Blinker/styles.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),s=require("./Controls/Controls.cjs"),i=require("./Images/Images.cjs"),o=t=>t&&t.__esModule?t:{default:t},r=o(e),n=r.default.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr min-content;
+  justify-items: center;
+  position: relative;
+  height: 100%;
+`,l=r.default(s.default)`
+  grid-row: 2;
+
+  ${({$isCondensed:t})=>t?e.css`
+          margin-block-start: var(--PADDING_SMALL, 20px);
+        `:e.css`
+          margin-block-end: var(--PADDING_SMALL, 20px);
+        `}
+`,a=r.default(i.default)`
+  aspect-ratio: 1;
+  width: 100%;
+
+  ${({$isCondensed:t})=>t?e.css`
+          grid-row: 1;
+        `:e.css`
+          position: absolute;
+          grid-row: span 2;
+        `};
+`;exports.BlinkerContainer=n;exports.BlinkerControls=l;exports.BlinkerImages=a;

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

@@ -1,10 +1,8 @@
 /// <reference types="react" />
-export declare const BlinkerContainer: import("styled-components").StyledComponent<"div", any, {
-    isCondensed: boolean;
-}, never>;
-export declare const BlinkerControls: import("styled-components").StyledComponent<import("react").FunctionComponent<import("./Controls/Controls").ControlsProps>, any, {
-    isCondensed: boolean;
-}, never>;
-export declare const BlinkerImages: import("styled-components").StyledComponent<import("react").FunctionComponent<import("./Images/Images").ImagesProps>, any, {
-    isCondensed: boolean;
-}, never>;
+export declare const BlinkerContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const BlinkerControls: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("./Controls/Controls").ControlsProps, {
+    $isCondensed: boolean;
+}>>;
+export declare const BlinkerImages: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("./Images/Images").ImagesProps, {
+    $isCondensed: boolean;
+}>>;

package/dist/atomic/Blinker/styles.js

@@ -0,0 +1,34 @@
+import o, { css as r } from "styled-components";
+import i from "./Controls/Controls.js";
+import e from "./Images/Images.js";
+const m = o.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr min-content;
+  justify-items: center;
+  position: relative;
+  height: 100%;
+`, l = o(i)`
+  grid-row: 2;
+
+  ${({ $isCondensed: t }) => t ? r`
+          margin-block-start: var(--PADDING_SMALL, 20px);
+        ` : r`
+          margin-block-end: var(--PADDING_SMALL, 20px);
+        `}
+`, p = o(e)`
+  aspect-ratio: 1;
+  width: 100%;
+
+  ${({ $isCondensed: t }) => t ? r`
+          grid-row: 1;
+        ` : r`
+          position: absolute;
+          grid-row: span 2;
+        `};
+`;
+export {
+  m as BlinkerContainer,
+  l as BlinkerControls,
+  p as BlinkerImages
+};

package/dist/atomic/ElapsedTime/ElapsedTime.cjs

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

package/dist/atomic/ElapsedTime/ElapsedTime.js

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

package/dist/atomic/ElapsedTime/styles.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},e=i(r),a=e.default.div`
+  background-color: var(--neutral20, #dce0e3);
+  border-radius: 5px;
+  color: var(--neutral95, "#1F2121");
+  display: grid;
+  grid-template-areas: "header" "time";
+  font-size: 0.75em;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+  min-width: 70px;
+  max-width: fit-content;
+`,n=e.default.h2`
+  border-bottom: 1px solid var(--neutral95, "#1F2121");
+  font-weight: inherit;
+  font-size: 1em;
+  line-height: 1;
+  grid-area: header;
+  text-align: center;
+  margin: 0;
+  padding: 0.5em 0.75em;
+`,d=e.default.time`
+  grid-area: time;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+  grid-auto-columns: 1fr;
+`,o=e.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.25em 0.5em;
+  line-height: 1.6;
+
+  &:not(:first-of-type) {
+    border-left: 1px solid var(--neutral95, "#1F2121");
+  }
+`,l=e.default.span`
+  font-size: 1.167em;
+`,s=e.default.span`
+  font-size: 0.6em;
+`;exports.ElapsedTimeContainer=a;exports.Header=n;exports.Interval=o;exports.Number=l;exports.Step=s;exports.Time=d;

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

@@ -1,6 +1,7 @@
-export declare const ElapsedTimeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Header: import("styled-components").StyledComponent<"h2", any, {}, never>;
-export declare const Time: import("styled-components").StyledComponent<"time", any, {}, never>;
-export declare const Interval: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Number: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Step: import("styled-components").StyledComponent<"span", any, {}, never>;
+/// <reference types="react" />
+export declare const ElapsedTimeContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Header: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>;
+export declare const Time: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement>, never>>;
+export declare const Interval: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Number: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const Step: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;