@onepercentio/one-ui 0.29.0 → 0.29.1

package/dist-ts/components/Header/Header.module.scss

@@ -0,0 +1,119 @@
+@import "../../assets/styles/index.scss";
+
+.header {
+  position: sticky;
+  top: 0px;
+  width: 100%;
+  background-color: $headerFillBackgroundColor;
+  display: flex;
+  padding: 32px;
+  align-items: center;
+  font-family: $mainFontFamily;
+  z-index: 100;
+}
+
+.logo {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+}
+
+.option {
+  font-size: 18px;
+  line-height: 22px;
+  margin-right: 28px;
+  color: $headerTextColor;
+}
+
+.logoDivider {
+  margin: -32px 32px;
+  width: 1px;
+  background-color: $headerBackgroundColor;
+}
+
+.profile {
+  background-color: $headerBrightColor;
+  height: 36px;
+  width: 36px;
+  border-radius: 18px;
+  line-height: 36px;
+  text-align: center;
+}
+
+.profile,
+.profileName {
+  margin-right: 8px;
+}
+
+.profileName {
+  color: $headerBrightColor;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+}
+.headerOptions {
+  right: 0px;
+  width: fit-content;
+  margin-top: 18px;
+  z-index: 1000;
+  > * {
+    cursor: pointer;
+    backdrop-filter: var(--header-submenu-backdrop, initial);
+    padding: 12px 32px;
+    margin-bottom: 8px;
+    margin-left: 4px;
+    margin-right: 4px;
+    text-align: left;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+.indicator {
+  @include iteractibleElement();
+  transition: transform $fast;
+  transform: rotateX(0deg);
+
+  &.open {
+    transform: rotateX(180deg);
+  }
+
+  display: none;
+  @media screen and (max-width: 640px) {
+    display: initial;
+  }
+  &.withMoreOptions {
+    display: initial;
+  }
+}
+
+.desktopOnly {
+  @media screen and (max-width: 640px) {
+    display: none;
+  }
+}
+
+.mobileOnly {
+  @media screen and (min-width: 640px) {
+    display: none;
+  }
+}
+
+.options-right {
+  .logo {
+    margin-right: auto;
+  }
+  .sectionDivider {
+    margin-left: initial;
+  }
+}
+
+.options-left {
+  .sectionDivider {
+    margin-left: auto;
+  }
+}

package/dist-ts/components/Header/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Header';

package/dist-ts/components/Header/index.js

@@ -0,0 +1,2 @@
+export { default } from './Header';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/dist-ts/components/HeaderCloseBtn/HeaderCloseBtn.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A simple close button implemented with pure HTML and CSS
+ **/
+export default function HeaderButton({ mode, hidden, onClick, }: {
+    mode: "back" | "close";
+    hidden: boolean;
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist-ts/components/HeaderCloseBtn/HeaderCloseBtn.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Styles from "./HeaderCloseBtn.module.scss";
+/**
+ * A simple close button implemented with pure HTML and CSS
+ **/
+export default function HeaderButton({ mode, hidden, onClick, }) {
+    return (_jsxs("div", { "data-testid": "header-control-back", className: `${Styles.headerButton} ${Styles[mode]} ${hidden ? Styles.pointOfNoReturn : ""}`, onClick: onClick, children: [_jsx("div", {}), _jsx("div", {})] }));
+}
+//# sourceMappingURL=HeaderCloseBtn.js.map

package/dist-ts/components/HeaderCloseBtn/HeaderCloseBtn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCloseBtn.js","sourceRoot":"","sources":["../../../src/components/HeaderCloseBtn/HeaderCloseBtn.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;IAEI;AACJ,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,IAAI,EACJ,MAAM,EACN,OAAO,GAKR;IACC,OAAO,CACL,8BACc,qBAAqB,EACjC,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,IAC/C,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,EACpC,EAAE,EACF,OAAO,EAAE,OAAO,aAEhB,eAAO,EACP,eAAO,IACH,CACP,CAAC;AACJ,CAAC"}

package/dist-ts/components/HeaderCloseBtn/HeaderCloseBtn.module.scss

@@ -0,0 +1,44 @@
+@import "../../assets/styles/index.scss";
+
+.headerButton {
+  width: 22px;
+  height: 22px;
+  position: relative;
+  opacity: 1;
+  @include iteractibleElement();
+  transition: opacity $fast, transform $fast;
+  &.pointOfNoReturn {
+    opacity: 0;
+  }
+  div {
+    transition: width $fast, top $fast, left $fast;
+    position: absolute;
+    height: 3px;
+    border-radius: 1.5px;
+    width: 22px;
+    background-color: $digitalBlue;
+    transform-origin: 1.5px 1.5px;
+    &:nth-child(1) {
+      transform: rotateZ(45deg);
+    }
+    &:nth-child(2) {
+      transform: rotateZ(-45deg);
+    }
+  }
+  &.back div {
+    width: 12.5px;
+    top: 5.5px;
+    left: 0px;
+  }
+  &.close div {
+    width: 22px;
+    &:nth-child(1) {
+      top: 0px;
+      left: 0px;
+    }
+    &:nth-child(2) {
+      top: 13px;
+      left: 0px;
+    }
+  }
+}

package/dist-ts/components/HeaderCloseBtn/index.d.ts

@@ -0,0 +1 @@
+export { default } from './HeaderCloseBtn';

package/dist-ts/components/HeaderCloseBtn/index.js

@@ -0,0 +1,2 @@
+export { default } from './HeaderCloseBtn';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/HeaderCloseBtn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/HeaderCloseBtn/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist-ts/components/InfinityScroll/InfinityScroll.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export declare function shouldIncrementPage(howMuchTheParentScrolled: number, prevSectionPosition: number, nextSectionPosition: number): -1 | 0 | 1;
+export declare function keys(currPage: number): string[];
+export declare function getItemsFactory<T extends any>(pageSize: number, items: T[], isCountTheSameOrLowerThanPage: boolean): (page: number, offset: number, _pageSize?: number) => T[];
+/**
+ * Manages a set of divs that allows the effect of inifinite scrolling between elements
+ **/
+declare const InfinityScroll: React.ForwardRefExoticComponent<{
+    items: (React.ReactElement | string)[];
+    pageSize: number;
+    initialPage?: number | undefined;
+    pageClass?: string | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default InfinityScroll;
+export declare enum InfinityDataTestId {
+    PREV_PAGE = "infinity-prev",
+    CURR_PAGE = "infinity-curr",
+    NEXT_PAGE = "infinity-next",
+    ROOT = "infinity-parent"
+}

package/dist-ts/components/InfinityScroll/InfinityScroll.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRef, forwardRef, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import Styles from "./InfinityScroll.module.scss";
+export function shouldIncrementPage(howMuchTheParentScrolled, prevSectionPosition, nextSectionPosition) {
+    if (howMuchTheParentScrolled === nextSectionPosition)
+        return 1;
+    else if (howMuchTheParentScrolled === prevSectionPosition)
+        return -1;
+    else
+        return 0;
+}
+export function keys(currPage) {
+    return [currPage % 3, (currPage + 1) % 3, (currPage + 2) % 3]
+        .map((a) => `step_${a}`)
+        .reverse();
+}
+export function getItemsFactory(pageSize, items, isCountTheSameOrLowerThanPage) {
+    return function getItems(page, offset, _pageSize = pageSize) {
+        let from = page * _pageSize + offset;
+        if (from < 0)
+            from = items.length + from;
+        if (from > items.length)
+            from = from - items.length;
+        const to = from + _pageSize;
+        const slicedItems = items.slice(from, to);
+        if (slicedItems.length < _pageSize && !isCountTheSameOrLowerThanPage) {
+            slicedItems.push(...getItems(0, 0, _pageSize - slicedItems.length));
+        }
+        return slicedItems.map((i, index) => typeof i === "object"
+            ? {
+                ...i,
+                key: index,
+            }
+            : i);
+    };
+}
+function _InfinityScroll({ items, pageSize, initialPage = 0, pageClass, className = "", }, ref) {
+    const [currPage, setCurrPage] = useState({
+        page: initialPage,
+        offset: 0,
+    });
+    const parentDiv = useMemo(() => {
+        return ref || createRef();
+    }, [ref]);
+    const prevDiv = useRef(null);
+    const currDiv = useRef(null);
+    const nextDiv = useRef(null);
+    const isCountTheSameOrLowerThanPage = items.length <= pageSize;
+    const getItems = useMemo(() => getItemsFactory(pageSize, items, isCountTheSameOrLowerThanPage), [pageSize, items, isCountTheSameOrLowerThanPage]);
+    useLayoutEffect(() => {
+        if (isCountTheSameOrLowerThanPage || window.PRERENDER)
+            return;
+        const viewportWidth = parentDiv.current.clientWidth;
+        const centerScroll = parentDiv.current.scrollWidth / 2;
+        parentDiv.current.scrollTo({
+            left: centerScroll - viewportWidth / 2,
+        });
+    }, [isCountTheSameOrLowerThanPage, currPage.page, currPage.offset, items]);
+    const [beforeKey, currKey, afterKey] = keys(currPage.page);
+    return (_jsxs("div", { ref: parentDiv, className: `${Styles.container} ${className}`, "data-testid": InfinityDataTestId.ROOT, onScroll: !isCountTheSameOrLowerThanPage
+            ? () => {
+                const pageToIncrement = shouldIncrementPage(Math.round(parentDiv.current.scrollLeft), prevDiv.current.offsetLeft, nextDiv.current.offsetLeft);
+                if (pageToIncrement) {
+                    setCurrPage((prev) => {
+                        let nextPage = prev.page + pageToIncrement;
+                        let offset = prev.offset;
+                        if (nextPage < 0) {
+                            nextPage = Math.round(items.length / pageSize) - 1;
+                            const finalIndex = (nextPage + 1) * pageSize + offset;
+                            const maxIndex = items.length;
+                            const remainingItems = maxIndex + offset - finalIndex;
+                            offset += remainingItems;
+                            if (offset === -(items.length - 1))
+                                offset = 1;
+                        }
+                        let nextIndex = nextPage * pageSize + offset;
+                        if (nextIndex > items.length) {
+                            offset = nextIndex - items.length;
+                            nextPage = 0;
+                        }
+                        return {
+                            page: nextPage,
+                            offset,
+                        };
+                    });
+                }
+            }
+            : undefined, children: [!isCountTheSameOrLowerThanPage && (_jsx("div", { className: pageClass, "data-testid": InfinityDataTestId.PREV_PAGE, ref: prevDiv, children: getItems(currPage.page - 1, currPage.offset) }, beforeKey)), _jsx("div", { className: pageClass, "data-testid": InfinityDataTestId.CURR_PAGE, ref: currDiv, children: getItems(currPage.page, currPage.offset) }, currKey), !isCountTheSameOrLowerThanPage && (_jsx("div", { className: pageClass, "data-testid": InfinityDataTestId.NEXT_PAGE, ref: nextDiv, children: getItems(currPage.page + 1, currPage.offset) }, afterKey))] }));
+}
+/**
+ * Manages a set of divs that allows the effect of inifinite scrolling between elements
+ **/
+const InfinityScroll = forwardRef(_InfinityScroll);
+export default InfinityScroll;
+export var InfinityDataTestId;
+(function (InfinityDataTestId) {
+    InfinityDataTestId["PREV_PAGE"] = "infinity-prev";
+    InfinityDataTestId["CURR_PAGE"] = "infinity-curr";
+    InfinityDataTestId["NEXT_PAGE"] = "infinity-next";
+    InfinityDataTestId["ROOT"] = "infinity-parent";
+})(InfinityDataTestId || (InfinityDataTestId = {}));
+//# sourceMappingURL=InfinityScroll.js.map

package/dist-ts/components/InfinityScroll/InfinityScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfinityScroll.js","sourceRoot":"","sources":["../../../src/components/InfinityScroll/InfinityScroll.tsx"],"names":[],"mappings":"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"}

package/dist-ts/components/InfinityScroll/InfinityScroll.module.scss

@@ -0,0 +1,30 @@
+.container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  overflow: auto;
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+  > * {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  > :first-child {
+    // background-color: green;
+  }
+  > :nth-child(2) {
+    // background-color: yellow;
+  }
+  > :nth-child(3) {
+    // background-color: blue;
+  }
+}

package/dist-ts/components/InfinityScroll/index.d.ts

@@ -0,0 +1 @@
+export { default } from './InfinityScroll';

package/dist-ts/components/InfinityScroll/index.js

@@ -0,0 +1,2 @@
+export { default } from './InfinityScroll';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/InfinityScroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InfinityScroll/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist-ts/components/Input/Input.d.ts

@@ -0,0 +1,43 @@
+import React, { ChangeEventHandler, DetailedHTMLProps, ReactElement } from "react";
+export type InputProps = {
+    decoration?: React.ReactElement | null;
+    error?: string | ReactElement;
+    hideError?: "onfocus";
+    placeholder?: string;
+    disclaimer?: string | ReactElement;
+    multiline?: number;
+    border?: boolean;
+    icon?: {
+        onClick?: () => void;
+    } & DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, any>;
+    Icon?: React.ReactElement;
+    onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref">;
+    value?: string;
+    'data-testid'?: string;
+} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange" | 'value'>;
+export declare enum InputTestIds {
+    DISCLAIMER = "disclaimer",
+    ERROR = "error"
+}
+/**
+ * A transparent input with some prebuilt states common to the application
+ **/
+declare const Input: React.ForwardRefExoticComponent<{
+    decoration?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null | undefined;
+    error?: string | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    hideError?: "onfocus" | undefined;
+    placeholder?: string | undefined;
+    disclaimer?: string | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    multiline?: number | undefined;
+    border?: boolean | undefined;
+    icon?: ({
+        onClick?: (() => void) | undefined;
+    } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+    Icon?: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    containerProps?: Omit<React.HTMLProps<HTMLDivElement>, "ref"> | undefined;
+    value?: string | undefined;
+    'data-testid'?: string | undefined;
+} & Omit<React.HTMLProps<HTMLInputElement | HTMLTextAreaElement>, "ref" | "onChange" | "value"> & React.RefAttributes<any>>;
+export default Input;

package/dist-ts/components/Input/Input.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { useOneUIConfig } from "../../context/OneUIProvider";
+import Text from "../Text";
+import Styles from "./Input.module.scss";
+function _Input({ error, placeholder = " ", hideError, icon, Icon, autoFocus, disclaimer, multiline, decoration = null, border: propBorder, containerProps, className: localClassName, ...otherProps }, ref) {
+    const className = useOneUIConfig("component.input.className");
+    const globalBorder = useOneUIConfig("component.input.border");
+    const [focused, setFocused] = useState(false);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => inputRef.current, []);
+    const shouldShowError = useMemo(() => {
+        if (hideError === "onfocus")
+            return !focused;
+        return !!error;
+    }, [focused, error, hideError]);
+    useEffect(() => {
+        if (autoFocus) {
+            const t = setTimeout(() => {
+                inputRef.current.focus();
+            }, 500);
+            return () => clearTimeout(t);
+        }
+    }, [autoFocus]);
+    const Component = multiline ? "textarea" : "input";
+    const withBorder = useMemo(() => {
+        if (propBorder !== undefined)
+            return propBorder;
+        return globalBorder;
+    }, [propBorder, globalBorder]);
+    return (_jsxs("div", { className: `${Styles.inputContainer} ${false ? Styles.withIcon : ""} ${className} ${localClassName}`, ...containerProps, children: [decoration, _jsx(Component, { ref: inputRef, placeholder: placeholder, rows: multiline, ...otherProps, onFocus: (e) => {
+                    setFocused(true);
+                    if (otherProps.onFocus)
+                        otherProps.onFocus(e);
+                }, onBlur: (e) => {
+                    setFocused(false);
+                    if (otherProps.onBlur)
+                        otherProps.onBlur(e);
+                } }), withBorder && _jsx("div", { className: Styles.border }), error && shouldShowError ? (_jsx(Text, { title: typeof error === "string" ? error : "", "data-testid": InputTestIds.ERROR, className: Styles.caption, type: "error", children: error })) : disclaimer ? (_jsx(Text, { title: typeof disclaimer === "string" ? disclaimer : "", type: "caption", className: Styles.caption, "data-testid": InputTestIds.DISCLAIMER, children: disclaimer })) : null, Icon && _jsx("div", { className: Styles.icon, children: Icon }), icon && _jsx("img", { className: Styles.icon, ...icon })] }));
+}
+export var InputTestIds;
+(function (InputTestIds) {
+    InputTestIds["DISCLAIMER"] = "disclaimer";
+    InputTestIds["ERROR"] = "error";
+})(InputTestIds || (InputTestIds = {}));
+/**
+ * A transparent input with some prebuilt states common to the application
+ **/
+const Input = forwardRef(_Input);
+export default Input;
+//# sourceMappingURL=Input.js.map

package/dist-ts/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAc,EAIZ,UAAU,EAEV,SAAS,EACT,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAsBzC,SAAS,MAAM,CACb,EACE,KAAK,EACL,WAAW,GAAG,GAAG,EACjB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,MAAM,EAAE,UAAU,EAClB,cAAc,EACd,SAAS,EAAE,cAAc,EACzB,GAAG,UAAU,EACF,EACb,GAAsB;IAEtB,MAAM,SAAS,GAAG,cAAc,CAAC,2BAA2B,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,cAAc,CAAC,wBAAwB,CAAC,CAAC;IAC9D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAM,CAAyC,IAAI,CAAC,CAAC;IACtE,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACrD,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,SAAS,KAAK,SAAS;YAAE,OAAO,CAAC,OAAO,CAAC;QAC7C,OAAO,CAAC,CAAC,KAAK,CAAC;IACjB,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxB,QAAQ,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;YAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,UAAU,KAAK,SAAS;YAAE,OAAO,UAAU,CAAC;QAChD,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC;IAC/B,OAAO,CACL,eACE,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc,IACjC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC5B,IAAI,SAAS,IAAI,cAAc,EAAE,KAC7B,cAAc,aAEjB,UAAU,EACX,KAAC,SAAS,IACR,GAAG,EAAE,QAAe,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,SAAS,KACX,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,UAAU,CAAC,IAAI,CAAC,CAAC;oBACjB,IAAI,UAAU,CAAC,OAAO;wBAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAChD,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;oBACZ,UAAU,CAAC,KAAK,CAAC,CAAC;oBAClB,IAAI,UAAU,CAAC,MAAM;wBAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAC9C,CAAC,GACD,EACD,UAAU,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI,EAC/C,KAAK,IAAI,eAAe,CAAC,CAAC,CAAC,CAC1B,KAAC,IAAI,IACH,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,iBAChC,YAAY,CAAC,KAAK,EAC/B,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,IAAI,EAAC,OAAO,YAEX,KAAK,GACD,CACR,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IACH,KAAK,EAAE,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvD,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,OAAO,iBACZ,YAAY,CAAC,UAAU,YAEnC,UAAU,GACN,CACR,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,IAAI,GAAO,EACjD,IAAI,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,KAAM,IAAI,GAAI,IAC9C,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,yCAAyB,CAAA;IACzB,+BAAe,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAED;;IAEI;AACJ,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC"}

package/dist-ts/components/Input/Input.module.scss

@@ -0,0 +1,71 @@
+@import "../../assets/styles/index.scss";
+
+.inputContainer {
+  position: relative;
+  display: flex;
+  font-size: 22px;
+  line-height: 33px;
+  .icon {
+    position: absolute;
+    top: 1.5px;
+    right: 1.5px;
+    min-height: 30px;
+    min-width: 30px;
+    cursor: pointer;
+    user-select: none;
+    &img {
+      height: 30px;
+      width: 30px;
+    }
+  }
+  &.withIcon {
+    padding-right: 33px;
+  }
+  input,
+  textarea {
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: $mainFontFamily;
+    color: var(--input-text-color, $spaceBlue);
+    margin-bottom: 18px;
+    outline: none;
+    &:placeholder-shown ~ .border {
+      animation-iteration-count: infinite;
+      animation-duration: $verySlow;
+      animation-name: pulse;
+      animation-delay: $slow;
+    }
+  }
+  & .border {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 18px;
+    height: 1px;
+    background-color: $spaceBlue;
+    opacity: 0;
+  }
+  .caption {
+    position: absolute;
+    bottom: 0px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

package/dist-ts/components/Input/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Input';

package/dist-ts/components/Input/index.js

@@ -0,0 +1,2 @@
+export { default } from './Input';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist-ts/components/InstantCounter/InstantCounter.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { FormatNumberOptions } from "react-intl";
+/**
+ * Increments the numbers from 0 to the provided value
+ **/
+declare const InstantCounter: React.ForwardRefExoticComponent<{
+    from?: number | undefined;
+    to: number;
+    framesPerSecond?: number | undefined;
+    durationInSeconds: number;
+    formatOptions?: FormatNumberOptions | undefined;
+    autoStart?: boolean | undefined;
+} & React.RefAttributes<{
+    start: () => void;
+}>>;
+export default InstantCounter;

package/dist-ts/components/InstantCounter/InstantCounter.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { useIntl } from "react-intl";
+function _InstantCounter({ from = 0, to, framesPerSecond = 30, durationInSeconds, formatOptions = {}, autoStart = true, }, ref) {
+    const [started, setStarted] = useState(autoStart);
+    const initialValue = useRef(from);
+    const spanRef = useRef(null);
+    const { formatNumber } = useIntl();
+    useImperativeHandle(ref, () => ({
+        start: () => setStarted(true),
+    }), []);
+    useEffect(() => {
+        if (started) {
+            const incrementBy = (to - initialValue.current) / (framesPerSecond * durationInSeconds);
+            spanRef.current.innerHTML = formatNumber(initialValue.current, formatOptions);
+            const intervalId = setInterval(() => {
+                initialValue.current += incrementBy;
+                spanRef.current.innerHTML = formatNumber(initialValue.current, formatOptions);
+                if (Math.round(initialValue.current) === Math.round(to)) {
+                    clearInterval(intervalId);
+                }
+            }, 1000 / framesPerSecond);
+            return () => {
+                clearInterval(intervalId);
+            };
+        }
+    }, [started, to]);
+    return (_jsx(_Fragment, { children: _jsx("span", { ref: spanRef }) }));
+}
+/**
+ * Increments the numbers from 0 to the provided value
+ **/
+const InstantCounter = forwardRef(_InstantCounter);
+export default InstantCounter;
+//# sourceMappingURL=InstantCounter.js.map

package/dist-ts/components/InstantCounter/InstantCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InstantCounter.js","sourceRoot":"","sources":["../../../src/components/InstantCounter/InstantCounter.tsx"],"names":[],"mappings":";AAAA,OAAc,EAEZ,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAuB,OAAO,EAAE,MAAM,YAAY,CAAC;AAE1D,SAAS,eAAe,CACtB,EACE,IAAI,GAAG,CAAC,EACR,EAAE,EACF,eAAe,GAAG,EAAE,EACpB,iBAAiB,EACjB,aAAa,GAAG,EAAE,EAClB,SAAS,GAAG,IAAI,GAQjB,EACD,GAAwC;IAExC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,MAAM,CAAS,IAAI,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC9C,MAAM,EAAE,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;IAEnC,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC;KAC9B,CAAC,EACF,EAAE,CACH,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,WAAW,GACf,CAAC,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,GAAG,iBAAiB,CAAC,CAAC;YACtE,OAAO,CAAC,OAAQ,CAAC,SAAS,GAAG,YAAY,CACvC,YAAY,CAAC,OAAQ,EACrB,aAAa,CACd,CAAC;YAEF,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;gBAClC,YAAY,CAAC,OAAQ,IAAI,WAAW,CAAC;gBACrC,OAAO,CAAC,OAAQ,CAAC,SAAS,GAAG,YAAY,CACvC,YAAY,CAAC,OAAQ,EACrB,aAAa,CACd,CAAC;gBACF,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;oBACxD,aAAa,CAAC,UAAU,CAAC,CAAC;gBAC5B,CAAC;YACH,CAAC,EAAE,IAAI,GAAG,eAAe,CAAC,CAAC;YAC3B,OAAO,GAAG,EAAE;gBACV,aAAa,CAAC,UAAU,CAAC,CAAC;YAC5B,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;IAClB,OAAO,CACL,4BACE,eAAM,GAAG,EAAE,OAAO,GAAI,GACrB,CACJ,CAAC;AACJ,CAAC;AAED;;IAEI;AACJ,MAAM,cAAc,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AACnD,eAAe,cAAc,CAAC"}

package/dist-ts/components/InstantCounter/index.d.ts

@@ -0,0 +1 @@
+export { default } from './InstantCounter';

package/dist-ts/components/InstantCounter/index.js

@@ -0,0 +1,2 @@
+export { default } from './InstantCounter';
+//# sourceMappingURL=index.js.map

package/dist-ts/components/InstantCounter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InstantCounter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/dist-ts/components/LavaLamp/LavaLamp.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from "react";
+type LavaLampProps = {
+    /**
+     * Required for defining the dimensions the lava lamp should have
+     */
+    className: string;
+};
+/**
+ * A peaceful component simulating an interactive lavalamp
+ **/
+export default function LavaLamp({ className, children, }: PropsWithChildren<LavaLampProps>): import("react/jsx-runtime").JSX.Element;
+export {};