@onepercentio/one-ui 0.1.2

package/dist/components/InfinityScroll/InfinityScroll.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keys = exports.shouldIncrementPage = void 0;
+const react_1 = __importStar(require("react"));
+const InfinityScroll_module_scss_1 = __importDefault(require("./InfinityScroll.module.scss"));
+function shouldIncrementPage(howMuchTheParentScrolled, prevSectionPosition, currSectionPosition, nextSectionPosition) {
+    if (howMuchTheParentScrolled === nextSectionPosition)
+        return 1;
+    else if (howMuchTheParentScrolled === prevSectionPosition)
+        return -1;
+    else
+        return 0;
+}
+exports.shouldIncrementPage = shouldIncrementPage;
+function keys(currPage) {
+    return [currPage % 3, (currPage + 1) % 3, (currPage + 2) % 3]
+        .map((a) => `step_${a}`)
+        .reverse();
+}
+exports.keys = keys;
+/**
+ * Manages a set of divs that allows the effect of inifinite scrolling between pages
+ **/
+function InfinityScroll({ items, pageSize, initialPage = 0, pageClass, className = "", }, ref) {
+    const [currPage, setCurrPage] = (0, react_1.useState)({
+        page: initialPage,
+        offset: 0,
+    });
+    const parentDiv = ref;
+    const prevDiv = (0, react_1.useRef)(null);
+    const currDiv = (0, react_1.useRef)(null);
+    const nextDiv = (0, react_1.useRef)(null);
+    const isCountTheSameOrLowerThanPage = items.length <= pageSize;
+    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"
+            ? Object.assign(Object.assign({}, i), { key: index }) : i);
+    }
+    (0, react_1.useEffect)(() => {
+        if (isCountTheSameOrLowerThanPage)
+            return;
+        const viewportWidth = parentDiv.current.clientWidth;
+        const centerScroll = parentDiv.current.scrollWidth / 2;
+        parentDiv.current.scrollTo({
+            left: centerScroll - viewportWidth / 2,
+        });
+    }, [isCountTheSameOrLowerThanPage, currPage.page, currPage.offset]);
+    const [beforeKey, currKey, afterKey] = keys(currPage.page);
+    return (react_1.default.createElement("div", { ref: ref, className: `${InfinityScroll_module_scss_1.default.container} ${className}`, "data-testid": "infinity-parent", onScroll: !isCountTheSameOrLowerThanPage
+            ? () => {
+                const pageToIncrement = shouldIncrementPage(parentDiv.current.scrollLeft, prevDiv.current.offsetLeft, currDiv.current.offsetLeft, nextDiv.current.offsetLeft);
+                if (pageToIncrement) {
+                    setCurrPage((prev) => {
+                        let nextPage = prev.page + pageToIncrement;
+                        if (nextPage < 0) {
+                            nextPage = Math.ceil(items.length / pageSize) - 1;
+                        }
+                        let offset = prev.offset;
+                        let nextIndex = nextPage * pageSize + offset;
+                        if (nextIndex > items.length) {
+                            offset = nextIndex - items.length;
+                            nextPage = 0;
+                        }
+                        return {
+                            page: nextPage,
+                            offset,
+                        };
+                    });
+                }
+            }
+            : undefined },
+        !isCountTheSameOrLowerThanPage && (react_1.default.createElement("div", { key: beforeKey, className: pageClass, "data-testid": "infinity-prev", ref: prevDiv }, getItems(currPage.page - 1, currPage.offset))),
+        react_1.default.createElement("div", { key: currKey, className: pageClass, "data-testid": "infinity-curr", ref: currDiv }, getItems(currPage.page, currPage.offset)),
+        !isCountTheSameOrLowerThanPage && (react_1.default.createElement("div", { key: afterKey, className: pageClass, "data-testid": "infinity-next", ref: nextDiv }, getItems(currPage.page + 1, currPage.offset)))));
+}
+exports.default = (0, react_1.forwardRef)(InfinityScroll);
+//# sourceMappingURL=InfinityScroll.js.map

package/dist/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/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/components/InfinityScroll/InfinityScroll.stories.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+declare const _default: {
+    component: React.ForwardRefExoticComponent<{
+        items: (string | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[];
+        pageSize: number;
+        initialPage?: number | undefined;
+        pageClass?: string | undefined;
+        className?: string | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        items: (string | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[];
+        pageSize: number;
+        initialPage?: number | undefined;
+        pageClass?: string | undefined;
+        className?: string | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const BugFixScrollWith4Items: () => JSX.Element;

package/dist/components/InfinityScroll/InfinityScroll.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BugFixScrollWith4Items = exports.InitialImplementation = void 0;
+const react_1 = __importStar(require("react"));
+const InfinityScroll_1 = __importDefault(require("./InfinityScroll"));
+exports.default = {
+    component: InfinityScroll_1.default,
+    title: "Infinity Scroll",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(InfinityScroll_1.default, Object.assign({ ref: (0, react_1.createRef)() }, args)));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    items: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d"].map(String),
+    pageSize: 3,
+};
+const BugFixScrollWith4Items = () => {
+    function H1(txt) {
+        return (react_1.default.createElement("h1", { style: {
+                backgroundColor: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`,
+                minHeight: "450px",
+                display: "inline-block",
+                width: "33%",
+            } }, txt));
+    }
+    return (react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: ["1", "2", "3", "4"].map(H1), pageSize: 3, initialPage: 1 }));
+};
+exports.BugFixScrollWith4Items = BugFixScrollWith4Items;
+//# sourceMappingURL=InfinityScroll.stories.js.map

package/dist/components/InfinityScroll/InfinityScroll.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfinityScroll.stories.js","sourceRoot":"","sources":["../../../src/components/InfinityScroll/InfinityScroll.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyC;AACzC,sEAA8C;AAE9C,kBAAe;IACb,SAAS,EAAE,wBAAc;IACzB,KAAK,EAAE,iBAAiB;CACzB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,wBAAc,kBAAC,GAAG,EAAE,IAAA,iBAAS,GAAE,IAAM,IAAI,EAAI,CAC/C,CAAC;AAFW,QAAA,qBAAqB,yBAEhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAC1E,MAAM,CACP;IACD,QAAQ,EAAE,CAAC;CAC4C,CAAC;AAEnD,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,SAAS,EAAE,CAAC,GAAW;QACrB,OAAO,CACL,sCACE,KAAK,EAAE;gBACL,eAAe,EAAE,OAAO,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,KACzC,IAAI,CAAC,MAAM,EAAE,GAAG,GAClB,KAAK,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG;gBAC3B,SAAS,EAAE,OAAO;gBAClB,OAAO,EAAE,cAAc;gBACvB,KAAK,EAAE,KAAK;aACb,IAEA,GAAG,CACD,CACN,CAAC;IACJ,CAAC;IACD,OAAO,CACL,8BAAC,wBAAc,IACb,GAAG,EAAE,IAAA,iBAAS,GAAE,EAChB,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EACnC,QAAQ,EAAE,CAAC,EACX,WAAW,EAAE,CAAC,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,sBAAsB,0BAyBjC"}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/InfinityScroll/InfinityScroll.test.js

@@ -0,0 +1,185 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const InfinityScroll_1 = __importStar(require("./InfinityScroll"));
+const react_3 = require("@testing-library/react");
+HTMLElement.prototype.scrollTo = jest.fn();
+Object.defineProperty(HTMLElement.prototype, "offsetLeft", {
+    set: function (val) {
+        this._offsetLeft = val;
+    },
+    get: function () {
+        return this._offsetLeft;
+    },
+});
+const elements = [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+];
+it("Should be able to decide when to emulate the page recycling", () => {
+    const wrapper = (0, react_2.render)(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: elements, pageSize: 3 }));
+    expect(wrapper.container.textContent).toEqual("def123456");
+});
+it.each([
+    [0, "234123412"],
+    [1, "123412341"],
+])("Should be able to show uneved number of items", (initialPage, expectation) => {
+    const elements = ["1", "2", "3", "4"];
+    const wrapper = (0, react_2.render)(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: elements, pageSize: 3, initialPage: initialPage }));
+    expect(wrapper.container.textContent).toEqual(expectation);
+});
+it.each([
+    [200, 0, 100, 200, 1],
+    [0, 0, 100, 200, -1],
+    [100, 0, 100, 200, 0], // This happens when the change on page is executed
+])("Should be able to decide when to go to another page", (howMuchTheParentScrolled, prevSectionPosition, currSectionPosition, nextSectionPosition, expectationForPageIncrease) => {
+    expect((0, InfinityScroll_1.shouldIncrementPage)(howMuchTheParentScrolled, prevSectionPosition, currSectionPosition, nextSectionPosition)).toEqual(expectationForPageIncrease);
+});
+it("Should not infinitize if the number of items can be displayed on single section", () => {
+    const elements = ["1", "2", "3"];
+    const { container } = (0, react_2.render)(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: elements, pageSize: 3, initialPage: 1 }));
+    expect(container.textContent).toEqual("123");
+});
+describe("BugFixing", () => {
+    it("Should be able to infinitize after single page", () => {
+        const event = new Event("scroll");
+        event.initEvent("scroll", true, true);
+        const elements = ["1", "2", "3"];
+        const moreElements = ["1", "2", "3", "4"];
+        const { rerender, container, getByTestId } = (0, react_2.render)(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: elements, pageSize: 3 }));
+        expect(container.textContent).toEqual("123");
+        rerender(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: moreElements, pageSize: 3 }));
+        expect(container.textContent).toEqual("234123412");
+        const parent = getByTestId("infinity-parent");
+        const prev = getByTestId("infinity-prev");
+        const curr = getByTestId("infinity-curr");
+        const next = getByTestId("infinity-next");
+        prev.offsetLeft = 0;
+        curr.offsetLeft = 100;
+        next.offsetLeft = 200;
+        parent.scrollLeft = 200;
+        (0, react_3.act)(() => {
+            parent.dispatchEvent(event);
+        });
+        expect(container.textContent).toEqual("123412341");
+    });
+    it("Should request next pages correctly", () => {
+        const event = new Event("scroll");
+        event.initEvent("scroll", true, true);
+        const elements = ["1", "2", "3", "4"];
+        const { getByTestId, container } = (0, react_2.render)(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: elements, pageSize: 3, initialPage: 1 }));
+        expect(container.textContent).toEqual("123412341");
+        const parent = getByTestId("infinity-parent");
+        parent.scrollLeft = 200;
+        function goToNextPage() {
+            const prev = getByTestId("infinity-prev");
+            const curr = getByTestId("infinity-curr");
+            const next = getByTestId("infinity-next");
+            prev.offsetLeft = 0;
+            curr.offsetLeft = 100;
+            next.offsetLeft = 200;
+            parent.dispatchEvent(event);
+        }
+        (0, react_3.act)(() => {
+            goToNextPage();
+        });
+        expect(container.textContent).toEqual("412341234");
+        (0, react_3.act)(() => {
+            goToNextPage();
+        });
+        expect(container.textContent).toEqual("341234123");
+        (0, react_3.act)(() => {
+            goToNextPage();
+        });
+        expect(container.textContent).toEqual("234123412");
+        (0, react_3.act)(() => {
+            goToNextPage();
+        });
+        expect(container.textContent).toEqual("123412341");
+        (0, react_3.act)(() => {
+            goToNextPage();
+        });
+        expect(container.textContent).toEqual("412341234");
+        (0, react_3.act)(() => {
+            goToNextPage();
+        });
+        expect(container.textContent).toEqual("341234123");
+    });
+    it("Should request prev pages correctly", () => {
+        const event = new Event("scroll");
+        event.initEvent("scroll", true, true);
+        const elements = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
+        const { getByTestId, container } = (0, react_2.render)(react_1.default.createElement(InfinityScroll_1.default, { ref: (0, react_1.createRef)(), items: elements, pageSize: 3, initialPage: 1 }));
+        expect(container.textContent).toEqual("123456789");
+        const parent = getByTestId("infinity-parent");
+        parent.scrollLeft = 0;
+        function goToPrevPage() {
+            const prev = getByTestId("infinity-prev");
+            const curr = getByTestId("infinity-curr");
+            const next = getByTestId("infinity-next");
+            prev.offsetLeft = 0;
+            curr.offsetLeft = 100;
+            next.offsetLeft = 200;
+            parent.dispatchEvent(event);
+        }
+        (0, react_3.act)(() => {
+            goToPrevPage();
+        });
+        expect(container.textContent).toEqual("789123456");
+        (0, react_3.act)(() => {
+            goToPrevPage();
+        });
+        expect(container.textContent).toEqual("456789123");
+        (0, react_3.act)(() => {
+            goToPrevPage();
+        });
+        expect(container.textContent).toEqual("123456789");
+        (0, react_3.act)(() => {
+            goToPrevPage();
+        });
+        expect(container.textContent).toEqual("789123456");
+    });
+});
+describe("Optimization", () => {
+    it("Should slide the keys definitions to reuse divs", () => {
+        expect((0, InfinityScroll_1.keys)(0)).toEqual([2, 1, 0].map((a) => `step_${a}`));
+        expect((0, InfinityScroll_1.keys)(1)).toEqual([0, 2, 1].map((a) => `step_${a}`));
+        expect((0, InfinityScroll_1.keys)(2)).toEqual([1, 0, 2].map((a) => `step_${a}`));
+        expect((0, InfinityScroll_1.keys)(3)).toEqual([2, 1, 0].map((a) => `step_${a}`));
+        expect((0, InfinityScroll_1.keys)(4)).toEqual([0, 2, 1].map((a) => `step_${a}`));
+    });
+});
+//# sourceMappingURL=InfinityScroll.test.js.map

package/dist/components/InfinityScroll/InfinityScroll.test.js.map

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

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

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

package/dist/components/InfinityScroll/index.js

@@ -0,0 +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 InfinityScroll_1 = require("./InfinityScroll");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(InfinityScroll_1).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InfinityScroll/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mDAA2C;AAAlC,0HAAA,OAAO,OAAA"}

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

@@ -0,0 +1,26 @@
+import React, { DetailedHTMLProps } from "react";
+export declare type InputProps = {
+    error?: string;
+    hideError?: "onfocus";
+    placeholder?: string;
+    disclaimer?: string;
+    icon?: {
+        onClick?: () => void;
+    } & DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, any>;
+    Icon?: React.ReactElement;
+} & Omit<React.HTMLProps<HTMLInputElement>, 'ref'>;
+export declare enum InputTestIds {
+    DISCLAIMER = "disclaimer",
+    ERROR = "error"
+}
+declare const _default: React.ForwardRefExoticComponent<{
+    error?: string | undefined;
+    hideError?: "onfocus" | undefined;
+    placeholder?: string | undefined;
+    disclaimer?: string | undefined;
+    icon?: ({
+        onClick?: (() => void) | undefined;
+    } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+    Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+} & Omit<React.HTMLProps<HTMLInputElement>, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/dist/components/Input/Input.js

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.InputTestIds = void 0;
+const react_1 = __importStar(require("react"));
+const Text_1 = __importDefault(require("../Text"));
+const Input_module_scss_1 = __importDefault(require("./Input.module.scss"));
+/**
+ * A transparent input with some prebuilt states common to the application
+ **/
+function Input(_a, ref) {
+    var { error, placeholder = " ", hideError, icon, Icon, autoFocus, disclaimer } = _a, otherProps = __rest(_a, ["error", "placeholder", "hideError", "icon", "Icon", "autoFocus", "disclaimer"]);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current, []);
+    const shouldShowError = (0, react_1.useMemo)(() => {
+        if (hideError === "onfocus")
+            return !focused;
+        return !!error;
+    }, [focused, error, hideError]);
+    (0, react_1.useEffect)(() => {
+        if (autoFocus) {
+            const t = setTimeout(() => {
+                inputRef.current.focus();
+            }, 500);
+            return () => clearTimeout(t);
+        }
+    }, [autoFocus]);
+    return (react_1.default.createElement("div", { className: `${Input_module_scss_1.default.inputContainer} ${false ? Input_module_scss_1.default.withIcon : ""}` },
+        react_1.default.createElement("input", Object.assign({ ref: inputRef, placeholder: placeholder }, otherProps, { onFocus: (e) => {
+                setFocused(true);
+                if (otherProps.onFocus)
+                    otherProps.onFocus(e);
+            }, onBlur: (e) => {
+                setFocused(false);
+                if (otherProps.onBlur)
+                    otherProps.onBlur(e);
+            } })),
+        react_1.default.createElement("div", { className: Input_module_scss_1.default.border }),
+        error && shouldShowError ? (react_1.default.createElement(Text_1.default, { title: error, "data-testid": InputTestIds.ERROR, className: Input_module_scss_1.default.caption, type: "error" }, error)) : disclaimer ? (react_1.default.createElement(Text_1.default, { title: disclaimer, type: "caption", className: Input_module_scss_1.default.caption, "data-testid": InputTestIds.DISCLAIMER }, disclaimer)) : null,
+        Icon && react_1.default.createElement("div", { className: Input_module_scss_1.default.icon }, Icon),
+        icon && react_1.default.createElement("img", Object.assign({ className: Input_module_scss_1.default.icon }, icon))));
+}
+var InputTestIds;
+(function (InputTestIds) {
+    InputTestIds["DISCLAIMER"] = "disclaimer";
+    InputTestIds["ERROR"] = "error";
+})(InputTestIds = exports.InputTestIds || (exports.InputTestIds = {}));
+exports.default = (0, react_1.forwardRef)(Input);
+//# sourceMappingURL=Input.js.map

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

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

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

@@ -0,0 +1,68 @@
+@import "../../assets/styles/index.scss";
+
+.inputContainer {
+  position: relative;
+  .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,
+  .input {
+    border: none;
+    background-color: transparent;
+    width: 100%;
+    font-size: 22px;
+    line-height: 33px;
+    font-family: $mainFontFamily;
+    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/components/Input/Input.stories.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { InputProps } from "./Input";
+declare const _default: {
+    component: React.ForwardRefExoticComponent<{
+        error?: string | undefined;
+        hideError?: "onfocus" | undefined;
+        placeholder?: string | undefined;
+        disclaimer?: string | undefined;
+        icon?: ({
+            onClick?: (() => void) | undefined;
+        } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+        Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    } & Omit<React.HTMLProps<HTMLInputElement>, "ref"> & React.RefAttributes<any>>;
+    title: string;
+};
+export default _default;
+export declare const Primary: {
+    (args: InputProps): JSX.Element;
+    args: InputProps;
+};