@onepercentio/one-ui 0.2.0 → 0.2.1

package/dist/components/Collapsable/Collapsable.js

@@ -1,129 +1,129 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsableInterface = void 0;
-const FadeIn_1 = __importDefault(require("../FadeIn"));
-const react_1 = __importStar(require("react"));
-const Collapsable_module_scss_1 = __importDefault(require("./Collapsable.module.scss"));
-const AnchoredTooltip_1 = require("../AnchoredTooltip/AnchoredTooltip");
-/**
- * Wrapps some content on a collapsable header
- **/
-function Collapsable(_a) {
-    var { children, title, className, onToggleOpen, open, id, mode = "block", contentClassName, onContentClick } = _a, props = __rest(_a, ["children", "title", "className", "onToggleOpen", "open", "id", "mode", "contentClassName", "onContentClick"]);
-    const contentRef = (0, react_1.useRef)(null);
-    const toggleRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const el = contentRef.current;
-        if (open) {
-            el.style.height = el.scrollHeight + "px";
-            el.parentElement.style.position = "relative";
-            if (mode === "float")
-                (0, AnchoredTooltip_1.updateTooltipPosition)(el, toggleRef.current, true);
-            const onTransitionEnd = () => {
-                el.style.height = "auto";
-            };
-            el.addEventListener("transitionend", onTransitionEnd);
-            el.addEventListener("transitionend", () => el.removeEventListener("transitionend", onTransitionEnd));
-            return () => {
-                el.removeEventListener("transitionend", onTransitionEnd);
-            };
-        }
-        else {
-            el.style.height = el.clientHeight + "px";
-            setTimeout(() => {
-                el.style.height = 0 + "px";
-            }, 100);
-            const onTransitionEnd = () => {
-                el.parentElement.style.position = "initial";
-                el.removeEventListener("transitionend", onTransitionEnd);
-            };
-            el.addEventListener("transitionend", onTransitionEnd);
-            return () => {
-                el.removeEventListener("transitionend", onTransitionEnd);
-            };
-        }
-    }, [open]);
-    return (react_1.default.createElement("div", { "data-testid": props["data-testid"], className: `${Collapsable_module_scss_1.default.container} ${open ? Collapsable_module_scss_1.default.open : Collapsable_module_scss_1.default.closed} ${className}` },
-        react_1.default.createElement("div", { onClick: () => onToggleOpen(!open), id: _collapsableId("header", id) }, title),
-        react_1.default.createElement("div", { ref: toggleRef }),
-        react_1.default.createElement("div", { ref: contentRef, className: `${Collapsable_module_scss_1.default.content} ${Collapsable_module_scss_1.default[mode] || ""} ${contentClassName}`, id: _collapsableId("content", id), onClick: onContentClick },
-            react_1.default.createElement(FadeIn_1.default, null, open ? children : null))));
-}
-exports.default = Collapsable;
-function _collapsableId(type, id) {
-    return id ? `collapsable_${type}_${id}` : undefined;
-}
-class _CollapsableInterface {
-    constructor(id) {
-        this._id = id;
-    }
-    _getElements() {
-        return {
-            header: document.getElementById(_collapsableId("header", this._id)),
-            content: document.getElementById(_collapsableId("content", this._id)),
-        };
-    }
-    open(onOpened) {
-        const { header, content } = this._getElements();
-        if (((content === null || content === void 0 ? void 0 : content.clientHeight) || 0) === 0) {
-            header.click();
-            content.addEventListener("transitionend", function _handler() {
-                content.removeEventListener("transitionend", _handler);
-                onOpened();
-            });
-        }
-        else {
-            onOpened();
-        }
-    }
-    getElement(type) {
-        return document.getElementById(_collapsableId(type, this._id));
-    }
-}
-/**
- * A helper function for interacting with collapsables without a reference
- * @param id
- * @returns
- */
-function CollapsableInterface(id) {
-    return new _CollapsableInterface(id);
-}
-exports.CollapsableInterface = CollapsableInterface;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsableInterface = void 0;
+const FadeIn_1 = __importDefault(require("../FadeIn"));
+const react_1 = __importStar(require("react"));
+const Collapsable_module_scss_1 = __importDefault(require("./Collapsable.module.scss"));
+const AnchoredTooltip_1 = require("../AnchoredTooltip/AnchoredTooltip");
+/**
+ * Wrapps some content on a collapsable header
+ **/
+function Collapsable(_a) {
+    var { children, title, className, onToggleOpen, open, id, mode = "block", contentClassName, onContentClick } = _a, props = __rest(_a, ["children", "title", "className", "onToggleOpen", "open", "id", "mode", "contentClassName", "onContentClick"]);
+    const contentRef = (0, react_1.useRef)(null);
+    const toggleRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const el = contentRef.current;
+        if (open) {
+            el.style.height = el.scrollHeight + "px";
+            el.parentElement.style.position = "relative";
+            if (mode === "float")
+                (0, AnchoredTooltip_1.updateTooltipPosition)(el, toggleRef.current, true);
+            const onTransitionEnd = () => {
+                el.style.height = "auto";
+            };
+            el.addEventListener("transitionend", onTransitionEnd);
+            el.addEventListener("transitionend", () => el.removeEventListener("transitionend", onTransitionEnd));
+            return () => {
+                el.removeEventListener("transitionend", onTransitionEnd);
+            };
+        }
+        else {
+            el.style.height = el.clientHeight + "px";
+            setTimeout(() => {
+                el.style.height = 0 + "px";
+            }, 100);
+            const onTransitionEnd = () => {
+                el.parentElement.style.position = "initial";
+                el.removeEventListener("transitionend", onTransitionEnd);
+            };
+            el.addEventListener("transitionend", onTransitionEnd);
+            return () => {
+                el.removeEventListener("transitionend", onTransitionEnd);
+            };
+        }
+    }, [open]);
+    return (react_1.default.createElement("div", { "data-testid": props["data-testid"], className: `${Collapsable_module_scss_1.default.container} ${open ? Collapsable_module_scss_1.default.open : Collapsable_module_scss_1.default.closed} ${className}` },
+        react_1.default.createElement("div", { onClick: () => onToggleOpen(!open), id: _collapsableId("header", id) }, title),
+        react_1.default.createElement("div", { ref: toggleRef }),
+        react_1.default.createElement("div", { ref: contentRef, className: `${Collapsable_module_scss_1.default.content} ${Collapsable_module_scss_1.default[mode] || ""} ${contentClassName}`, id: _collapsableId("content", id), onClick: onContentClick },
+            react_1.default.createElement(FadeIn_1.default, null, open ? children : null))));
+}
+exports.default = Collapsable;
+function _collapsableId(type, id) {
+    return id ? `collapsable_${type}_${id}` : undefined;
+}
+class _CollapsableInterface {
+    constructor(id) {
+        this._id = id;
+    }
+    _getElements() {
+        return {
+            header: document.getElementById(_collapsableId("header", this._id)),
+            content: document.getElementById(_collapsableId("content", this._id)),
+        };
+    }
+    open(onOpened) {
+        const { header, content } = this._getElements();
+        if (((content === null || content === void 0 ? void 0 : content.clientHeight) || 0) === 0) {
+            header.click();
+            content.addEventListener("transitionend", function _handler() {
+                content.removeEventListener("transitionend", _handler);
+                onOpened();
+            });
+        }
+        else {
+            onOpened();
+        }
+    }
+    getElement(type) {
+        return document.getElementById(_collapsableId(type, this._id));
+    }
+}
+/**
+ * A helper function for interacting with collapsables without a reference
+ * @param id
+ * @returns
+ */
+function CollapsableInterface(id) {
+    return new _CollapsableInterface(id);
+}
+exports.CollapsableInterface = CollapsableInterface;
 //# sourceMappingURL=Collapsable.js.map

package/dist/components/Collapsable/Collapsable.stories.d.ts

@@ -1,39 +1,39 @@
-import React from "react";
-import Collapsable from "./Collapsable";
-declare const _default: {
-    component: typeof Collapsable;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        title: React.ReactNode;
-        className?: string | undefined;
-        contentClassName?: string | undefined;
-        onToggleOpen: (isOpen: boolean) => void;
-        open: boolean;
-        id?: string | undefined;
-        mode?: "block" | "float" | undefined;
-        "data-testid"?: string | undefined;
-        onContentClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
-    } & {
-        children?: React.ReactNode;
-    }>;
-};
-export declare const FloatingContent: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        title: React.ReactNode;
-        className?: string | undefined;
-        contentClassName?: string | undefined;
-        onToggleOpen: (isOpen: boolean) => void;
-        open: boolean;
-        id?: string | undefined;
-        mode?: "block" | "float" | undefined;
-        "data-testid"?: string | undefined;
-        onContentClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
-    } & {
-        children?: React.ReactNode;
-    }>;
-};
+import React from "react";
+import Collapsable from "./Collapsable";
+declare const _default: {
+    component: typeof Collapsable;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        title: React.ReactNode;
+        className?: string | undefined;
+        contentClassName?: string | undefined;
+        onToggleOpen: (isOpen: boolean) => void;
+        open: boolean;
+        id?: string | undefined;
+        mode?: "block" | "float" | undefined;
+        "data-testid"?: string | undefined;
+        onContentClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    } & {
+        children?: React.ReactNode;
+    }>;
+};
+export declare const FloatingContent: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        title: React.ReactNode;
+        className?: string | undefined;
+        contentClassName?: string | undefined;
+        onToggleOpen: (isOpen: boolean) => void;
+        open: boolean;
+        id?: string | undefined;
+        mode?: "block" | "float" | undefined;
+        "data-testid"?: string | undefined;
+        onContentClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    } & {
+        children?: React.ReactNode;
+    }>;
+};

package/dist/components/Collapsable/Collapsable.stories.js

@@ -1,28 +1,28 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingContent = exports.InitialImplementation = void 0;
-const react_1 = __importDefault(require("react"));
-const Collapsable_1 = __importDefault(require("./Collapsable"));
-exports.default = {
-    component: Collapsable_1.default,
-    title: "Collapsable",
-};
-const InitialImplementation = (args) => (react_1.default.createElement("div", { style: { backgroundColor: "lightgreen" } },
-    react_1.default.createElement(Collapsable_1.default, Object.assign({}, args))));
-exports.InitialImplementation = InitialImplementation;
-exports.InitialImplementation.args = {
-    title: "Example title",
-    children: (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("h1", null, "H1"),
-        react_1.default.createElement("h2", null, "H2"),
-        react_1.default.createElement("h3", null, "H3"),
-        react_1.default.createElement("h4", null, "H4"))),
-};
-const FloatingContent = (args) => (react_1.default.createElement("div", { style: { backgroundColor: "lightgreen" } },
-    react_1.default.createElement(Collapsable_1.default, Object.assign({}, args))));
-exports.FloatingContent = FloatingContent;
-exports.FloatingContent.args = Object.assign(Object.assign({}, exports.InitialImplementation.args), { mode: "float", open: true });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingContent = exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const Collapsable_1 = __importDefault(require("./Collapsable"));
+exports.default = {
+    component: Collapsable_1.default,
+    title: "Collapsable",
+};
+const InitialImplementation = (args) => (react_1.default.createElement("div", { style: { backgroundColor: "lightgreen" } },
+    react_1.default.createElement(Collapsable_1.default, Object.assign({}, args))));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    title: "Example title",
+    children: (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("h1", null, "H1"),
+        react_1.default.createElement("h2", null, "H2"),
+        react_1.default.createElement("h3", null, "H3"),
+        react_1.default.createElement("h4", null, "H4"))),
+};
+const FloatingContent = (args) => (react_1.default.createElement("div", { style: { backgroundColor: "lightgreen" } },
+    react_1.default.createElement(Collapsable_1.default, Object.assign({}, args))));
+exports.FloatingContent = FloatingContent;
+exports.FloatingContent.args = Object.assign(Object.assign({}, exports.InitialImplementation.args), { mode: "float", open: true });
 //# sourceMappingURL=Collapsable.stories.js.map

package/dist/components/Collapsable/index.d.ts

@@ -1 +1 @@
-export { default } from './Collapsable';
+export { default } from './Collapsable';

package/dist/components/Collapsable/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Collapsable_1 = require("./Collapsable");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Collapsable_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Collapsable_1 = require("./Collapsable");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Collapsable_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/Countdown/Countdown.d.ts

@@ -1,13 +1,13 @@
-export declare type TimeObject = {
-    hours: number;
-    minutes: number;
-    seconds: number;
-};
-export declare function calculateTimeFromTimespan(timespan: number): TimeObject;
-/**
- * You five it some time, and a countdown is shown
- **/
-export default function Countdown({ timeRemaining, onFinish, }: {
-    timeRemaining: number;
-    onFinish?: () => void;
-}): JSX.Element;
+export declare type TimeObject = {
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+export declare function calculateTimeFromTimespan(timespan: number): TimeObject;
+/**
+ * You five it some time, and a countdown is shown
+ **/
+export default function Countdown({ timeRemaining, onFinish, }: {
+    timeRemaining: number;
+    onFinish?: () => void;
+}): JSX.Element;

package/dist/components/Countdown/Countdown.js

@@ -1,80 +1,80 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateTimeFromTimespan = void 0;
-const react_1 = __importStar(require("react"));
-function calculateTimeFromTimespan(timespan) {
-    const seconds = Math.floor(timespan / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    return {
-        hours,
-        minutes: minutes % 60,
-        seconds: seconds % 60,
-    };
-}
-exports.calculateTimeFromTimespan = calculateTimeFromTimespan;
-const IntegerFormatter = new Intl.NumberFormat(undefined, {
-    minimumIntegerDigits: 2,
-});
-/**
- * You five it some time, and a countdown is shown
- **/
-function Countdown({ timeRemaining, onFinish, }) {
-    const [t, setT] = (0, react_1.useState)(() => calculateTimeFromTimespan(timeRemaining));
-    (0, react_1.useEffect)(() => {
-        const cl = setInterval(() => {
-            setT((prev) => {
-                let nextSecond = prev.seconds - 1;
-                let nextMinute = prev.minutes;
-                let nextHour = prev.hours;
-                if (nextSecond < 0) {
-                    nextSecond = 59;
-                    nextMinute -= 1;
-                    if (nextMinute < 0) {
-                        nextMinute = 59;
-                        nextHour -= 1;
-                    }
-                }
-                if (nextHour === 0 && nextMinute === 0 && nextSecond === 0) {
-                    if (onFinish)
-                        onFinish();
-                    clearInterval(cl);
-                }
-                return {
-                    seconds: nextSecond,
-                    minutes: nextMinute,
-                    hours: nextHour,
-                };
-            });
-        }, 1000);
-        return () => {
-            clearInterval(cl);
-        };
-    }, [timeRemaining]);
-    return (react_1.default.createElement("span", null, `${IntegerFormatter.format(t.hours)}:${IntegerFormatter.format(t.minutes)}:${IntegerFormatter.format(t.seconds)}`));
-}
-exports.default = Countdown;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateTimeFromTimespan = void 0;
+const react_1 = __importStar(require("react"));
+function calculateTimeFromTimespan(timespan) {
+    const seconds = Math.floor(timespan / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    return {
+        hours,
+        minutes: minutes % 60,
+        seconds: seconds % 60,
+    };
+}
+exports.calculateTimeFromTimespan = calculateTimeFromTimespan;
+const IntegerFormatter = new Intl.NumberFormat(undefined, {
+    minimumIntegerDigits: 2,
+});
+/**
+ * You five it some time, and a countdown is shown
+ **/
+function Countdown({ timeRemaining, onFinish, }) {
+    const [t, setT] = (0, react_1.useState)(() => calculateTimeFromTimespan(timeRemaining));
+    (0, react_1.useEffect)(() => {
+        const cl = setInterval(() => {
+            setT((prev) => {
+                let nextSecond = prev.seconds - 1;
+                let nextMinute = prev.minutes;
+                let nextHour = prev.hours;
+                if (nextSecond < 0) {
+                    nextSecond = 59;
+                    nextMinute -= 1;
+                    if (nextMinute < 0) {
+                        nextMinute = 59;
+                        nextHour -= 1;
+                    }
+                }
+                if (nextHour === 0 && nextMinute === 0 && nextSecond === 0) {
+                    if (onFinish)
+                        onFinish();
+                    clearInterval(cl);
+                }
+                return {
+                    seconds: nextSecond,
+                    minutes: nextMinute,
+                    hours: nextHour,
+                };
+            });
+        }, 1000);
+        return () => {
+            clearInterval(cl);
+        };
+    }, [timeRemaining]);
+    return (react_1.default.createElement("span", null, `${IntegerFormatter.format(t.hours)}:${IntegerFormatter.format(t.minutes)}:${IntegerFormatter.format(t.seconds)}`));
+}
+exports.default = Countdown;
 //# sourceMappingURL=Countdown.js.map

package/dist/components/Countdown/Countdown.stories.d.ts

@@ -1,14 +1,14 @@
-import Countdown from "./Countdown";
-declare const _default: {
-    component: typeof Countdown;
-    title: string;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        timeRemaining: number;
-        onFinish?: (() => void) | undefined;
-    }>;
-};
-export declare const SynergyTextAndCountdown: (args: any) => JSX.Element[];
+import Countdown from "./Countdown";
+declare const _default: {
+    component: typeof Countdown;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        timeRemaining: number;
+        onFinish?: (() => void) | undefined;
+    }>;
+};
+export declare const SynergyTextAndCountdown: (args: any) => JSX.Element[];