@onepercentio/one-ui 0.1.2

package/dist/components/PixelatedScan/PixelatedScan.js

@@ -0,0 +1,101 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const PixelatedScan_module_scss_1 = __importDefault(require("./PixelatedScan.module.scss"));
+const chroma_js_1 = __importDefault(require("chroma-js"));
+const AnimDuration = Number(PixelatedScan_module_scss_1.default.animationDuration);
+/**
+ * This effect scans up and down on the div with a following pixelated trail
+ **/
+function PixelatedScan({ squaresByLine, color, className = "", }) {
+    const iteration = (0, react_1.useRef)(0);
+    const tableRef = (0, react_1.useRef)(null);
+    const [config, setConfig] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const squareSize = tableRef.current.clientWidth / squaresByLine;
+        const howMuchLines = tableRef.current.clientHeight / squareSize;
+        setConfig({
+            squareSize,
+            howMuchLines,
+        });
+    }, []);
+    const rowsDef = (0, react_1.useMemo)(() => {
+        return new Array(Math.ceil((config === null || config === void 0 ? void 0 : config.howMuchLines) || 0)).fill(undefined);
+    }, [config]);
+    const lineDef = (0, react_1.useMemo)(() => {
+        return new Array(squaresByLine).fill(undefined);
+    }, [config]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: `${PixelatedScan_module_scss_1.default.grid} ${PixelatedScan_module_scss_1.default.iterate} ${className}`, ref: tableRef },
+            rowsDef.map((_, iRow, _rows) => (react_1.default.createElement(GridRow, { key: `${iRow}`, squares: lineDef, size: config.squareSize, baseColor: color, lineCount: config.howMuchLines, lineIndex: iRow, onFinish: iRow === _rows.length - 6
+                    ? () => {
+                        tableRef.current.classList.remove(PixelatedScan_module_scss_1.default.iterate);
+                        iteration.current += 1;
+                        if (iteration.current % 2 === 1)
+                            tableRef.current.classList.add(PixelatedScan_module_scss_1.default.inverse);
+                        else
+                            tableRef.current.classList.remove(PixelatedScan_module_scss_1.default.inverse);
+                        setTimeout(() => {
+                            tableRef.current.classList.add(PixelatedScan_module_scss_1.default.iterate);
+                        }, 100);
+                    }
+                    : undefined }))),
+            react_1.default.createElement("div", { className: PixelatedScan_module_scss_1.default.guide }))));
+}
+exports.default = PixelatedScan;
+function GridRow({ onFinish, squares, size, baseColor, lineCount, lineIndex, }) {
+    const ref = (0, react_1.useRef)(null);
+    const gridItemsRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        function updateColor() {
+            gridItemsRefs.current.forEach((i) => i === null || i === void 0 ? void 0 : i.updateColor());
+        }
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("animationend", updateColor);
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("animationend", updateColor);
+        };
+    }, []);
+    return (react_1.default.createElement("div", { className: PixelatedScan_module_scss_1.default.gridAnimate, onAnimationEnd: onFinish, style: {
+            animationDelay: `${(AnimDuration / lineCount) * (lineIndex - 1)}ms`,
+        } }, squares.map((_, i) => (react_1.default.createElement(GridItem, { ref: (refNode) => (gridItemsRefs.current[i] = refNode), key: i, size: size, baseColor: baseColor })))));
+}
+function _GridItem({ size, baseColor = "#ff0", }, externalRef) {
+    const ref = (0, react_1.useRef)(null);
+    function calculateNewRandomColorStrength() {
+        const color = chroma_js_1.default.hex(baseColor).alpha(1 - Math.random() * 0.3);
+        return color;
+    }
+    const [randomColorStrength, setRandomColorStrength] = (0, react_1.useState)(calculateNewRandomColorStrength);
+    (0, react_1.useImperativeHandle)(externalRef, () => ({
+        updateColor: () => {
+            setRandomColorStrength(calculateNewRandomColorStrength());
+        },
+    }), []);
+    return (react_1.default.createElement("div", { ref: ref, className: PixelatedScan_module_scss_1.default.gridItem, style: Object.assign({ width: size, height: size }, { "--pixel-color": randomColorStrength.hex() }) }));
+}
+const GridItem = (0, react_1.forwardRef)(_GridItem);
+//# sourceMappingURL=PixelatedScan.js.map

package/dist/components/PixelatedScan/PixelatedScan.js.map

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

package/dist/components/PixelatedScan/PixelatedScan.module.scss

@@ -0,0 +1,86 @@
+@import "../../assets/styles/index.scss";
+
+$animationDurationMs: 2000;
+
+@value animationDuration #{$animationDurationMs};
+
+$animationDuration: #{$animationDurationMs}ms;
+
+.guide {
+  width: 100%;
+  position: absolute;
+  animation-duration: $animationDuration;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  min-height: 10px;
+  top: 0;
+  &::after {
+    content: " ";
+    width: 100%;
+    height: 10px;
+    background: $pixelatedGuideBackground;
+  }
+}
+
+.grid {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  overflow: hidden;
+  > * {
+    display: flex;
+    opacity: 0;
+    &.guide {
+      opacity: 1;
+    }
+  }
+  &.inverse {
+    transform: rotateX(180deg);
+  }
+}
+
+.gridItem {
+  background-color: var(--pixel-color);
+}
+
+.gridAnimate {
+  animation-duration: #{$animationDurationMs}ms;
+}
+
+.iterate {
+  .guide {
+    animation-name: upAndDown;
+  }
+  .gridAnimate {
+    animation-name: onAndOff;
+    will-change: opacity;
+  }
+}
+
+@keyframes onAndOff {
+  0% {
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes upAndDown {
+  0% {
+    height: 0%;
+  }
+  100% {
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,15 @@
+import PixelatedScan from "./PixelatedScan";
+declare const _default: {
+    component: typeof PixelatedScan;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        squaresByLine: number;
+        color: string;
+        className?: string | undefined;
+    }>;
+};
+export declare const PreciseImplementation: (args: any) => JSX.Element;

package/dist/components/PixelatedScan/PixelatedScan.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreciseImplementation = exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const PixelatedScan_1 = __importDefault(require("./PixelatedScan"));
+exports.default = {
+    component: PixelatedScan_1.default,
+    title: "Pixelated Scan",
+};
+const InitialImplementation = (args) => (react_1.default.createElement("div", { style: {
+        position: "relative",
+        backgroundColor: "red",
+        height: "441px",
+        width: "300px",
+    } },
+    react_1.default.createElement(PixelatedScan_1.default, Object.assign({}, args))));
+exports.InitialImplementation = InitialImplementation;
+const PreciseImplementation = (args) => (react_1.default.createElement("div", { style: { display: "flex" } },
+    react_1.default.createElement("div", { style: {
+            position: "relative",
+            backgroundColor: "red",
+            height: "500px",
+            width: "250px",
+        } },
+        react_1.default.createElement(PixelatedScan_1.default, Object.assign({ squaresByLine: 10 }, args))),
+    react_1.default.createElement("div", { style: {
+            position: "relative",
+            backgroundColor: "red",
+            height: "1000px",
+            width: "250px",
+        } },
+        react_1.default.createElement(PixelatedScan_1.default, Object.assign({ squaresByLine: 10 }, args)))));
+exports.PreciseImplementation = PreciseImplementation;
+exports.InitialImplementation.args = {
+    squaresByLine: 10,
+};
+//# sourceMappingURL=PixelatedScan.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PixelatedScan.stories.js","sourceRoot":"","sources":["../../../src/components/PixelatedScan/PixelatedScan.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,oEAA4C;AAE5C,kBAAe;IACb,SAAS,EAAE,uBAAa;IACxB,KAAK,EAAE,gBAAgB;CACxB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,uCACE,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,KAAK;QACtB,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO;KACf;IAED,8BAAC,uBAAa,oBAAK,IAAI,EAAI,CACvB,CACP,CAAC;AAXW,QAAA,qBAAqB,yBAWhC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC7B,uCACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,OAAO;YACf,KAAK,EAAE,OAAO;SACf;QAED,8BAAC,uBAAa,kBAAC,aAAa,EAAE,EAAE,IAAM,IAAI,EAAI,CAC1C;IACN,uCACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,QAAQ;YAChB,KAAK,EAAE,OAAO;SACf;QAED,8BAAC,uBAAa,kBAAC,aAAa,EAAE,EAAE,IAAM,IAAI,EAAI,CAC1C,CACF,CACP,CAAC;AAvBW,QAAA,qBAAqB,yBAuBhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,aAAa,EAAE,EAAE;CACqC,CAAC"}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PixelatedScan/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iDAA0C;AAAjC,yHAAA,OAAO,OAAA"}

package/dist/components/ProgressTexts/ProgressTexts.d.ts

@@ -0,0 +1,22 @@
+import React, { MouseEvent } from "react";
+declare type Step = {
+    type: "wait" | "final";
+    title?: string;
+    description?: string | React.ReactElement;
+    action?: {
+        label: string;
+        onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+/**
+ * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
+ **/
+export default function ProgressTexts({ steps, currentStep, spacingOnEachStep, }: {
+    /**
+     * Starts at 0
+     */
+    currentStep: number;
+    steps: Step[];
+    spacingOnEachStep?: boolean;
+}): JSX.Element;
+export {};

package/dist/components/ProgressTexts/ProgressTexts.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Spacing_1 = __importDefault(require("../Spacing"));
+const ProgressTexts_module_scss_1 = __importDefault(require("./ProgressTexts.module.scss"));
+const Button_1 = __importDefault(require("../Button"));
+/**
+ * Displays new texts as they are pushed into the steps property allowing for a nice progress follow experience
+ **/
+function ProgressTexts({ steps, currentStep, spacingOnEachStep = true, }) {
+    const _currentStep = steps[currentStep];
+    return (react_1.default.createElement(react_1.default.Fragment, null, steps.map((s, i) => {
+        function whichClassToUse(step, stepType, currentStep, currentStepType) {
+            const classes = [ProgressTexts_module_scss_1.default.container];
+            // Decides the color
+            if (stepType !== "final")
+                classes.push(step < currentStep ? ProgressTexts_module_scss_1.default.disabled : ProgressTexts_module_scss_1.default.loading);
+            // Decides if should be visible or not
+            classes.push(currentStep !== step && currentStepType === "final"
+                ? ProgressTexts_module_scss_1.default.hidden
+                : "");
+            return classes.join(" ");
+        }
+        return i <= currentStep ? (react_1.default.createElement("div", { key: String(i), ref: (a) => {
+                if (a)
+                    a.style.maxHeight = `${a.scrollHeight}px`;
+            }, className: whichClassToUse(i, s.type, currentStep, _currentStep.type) },
+            s.title && react_1.default.createElement("h1", null, s.title),
+            s.description && react_1.default.createElement("p", null, s.description),
+            s.action && (react_1.default.createElement(Button_1.default, { onClick: s.action.onClick }, s.action.label)),
+            spacingOnEachStep !== false ? react_1.default.createElement(Spacing_1.default, { size: "large" }) : null)) : null;
+    })));
+}
+exports.default = ProgressTexts;
+//# sourceMappingURL=ProgressTexts.js.map

package/dist/components/ProgressTexts/ProgressTexts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressTexts.js","sourceRoot":"","sources":["../../../src/components/ProgressTexts/ProgressTexts.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0C;AAC1C,yDAAiC;AAEjC,4FAAiD;AACjD,uDAA+B;AAY/B;;IAEI;AACJ,SAAwB,aAAa,CAAC,EACpC,KAAK,EACL,WAAW,EACX,iBAAiB,GAAG,IAAI,GAQzB;IACC,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IACxC,OAAO,CACL,8DACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClB,SAAS,eAAe,CACtB,IAAY,EACZ,QAAsB,EACtB,WAAmB,EACnB,eAA6B;YAE7B,MAAM,OAAO,GAAG,CAAC,mCAAM,CAAC,SAAS,CAAC,CAAC;YAEnC,oBAAoB;YACpB,IAAI,QAAQ,KAAK,OAAO;gBACtB,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,mCAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,mCAAM,CAAC,OAAO,CAAC,CAAC;YAEtE,sCAAsC;YACtC,OAAO,CAAC,IAAI,CACV,WAAW,KAAK,IAAI,IAAI,eAAe,KAAK,OAAO;gBACjD,CAAC,CAAC,mCAAM,CAAC,MAAM;gBACf,CAAC,CAAC,EAAE,CACP,CAAC;YAEF,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CACxB,uCACE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EACd,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE;gBACT,IAAI,CAAC;oBAAE,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,YAAY,IAAI,CAAC;YACnD,CAAC,EACD,SAAS,EAAE,eAAe,CACxB,CAAC,EACD,CAAC,CAAC,IAAI,EACN,WAAW,EACX,YAAY,CAAC,IAAI,CAClB;YAEA,CAAC,CAAC,KAAK,IAAI,0CAAK,CAAC,CAAC,KAAK,CAAM;YAC7B,CAAC,CAAC,WAAW,IAAI,yCAAI,CAAC,CAAC,WAAW,CAAK;YACvC,CAAC,CAAC,MAAM,IAAI,CACX,8BAAC,gBAAM,IAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,IAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAU,CAC7D;YACA,iBAAiB,KAAK,KAAK,CAAC,CAAC,CAAC,8BAAC,iBAAO,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAC1D,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AA7DD,gCA6DC"}

package/dist/components/ProgressTexts/ProgressTexts.module.scss

@@ -0,0 +1,37 @@
+@import "../../assets/styles/index.scss";
+
+.container {
+  font-family: Manrope;
+  transition: max-height $slow;
+  overflow: hidden;
+  max-height: 0px;
+  * {
+    text-align: left;
+  }
+  button {
+    text-align: center;
+  }
+  h1 {
+    font-weight: bold;
+    font-size: 34px;
+    line-height: 41px;
+    color: $spaceBlue !important;
+  }
+  p {
+    font-family: Roboto;
+    font-size: 22px;
+    line-height: 33px;
+  }
+}
+
+.hidden {
+  max-height: 0px !important;
+}
+
+.loading * {
+  color: $spaceBlue !important;
+}
+
+.disabled * {
+  color: $mediumGray !important;
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import C from "./ProgressTexts";
+declare const _default: {
+    component: typeof C;
+    title: string;
+};
+export default _default;
+export declare function ExemploCompleto(): JSX.Element;
+export declare const Primary: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        currentStep: number;
+        steps: {
+            type: "wait" | "final";
+            title?: string | undefined;
+            description?: string | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+            action?: {
+                label: string;
+                onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            } | undefined;
+        }[];
+        spacingOnEachStep?: boolean | undefined;
+    }>;
+};

package/dist/components/ProgressTexts/ProgressTexts.stories.js

@@ -0,0 +1,86 @@
+"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.Primary = exports.ExemploCompleto = void 0;
+const react_1 = __importStar(require("react"));
+const ProgressTexts_1 = __importDefault(require("./ProgressTexts"));
+exports.default = {
+    component: ProgressTexts_1.default,
+    title: "Drawer de etapas",
+};
+function ExemploCompleto() {
+    const [currStep, setCurrStep] = (0, react_1.useState)(0);
+    const etapas = [
+        {
+            title: "Essa é a primeira etapa (type: wait)",
+            type: "wait",
+        },
+        {
+            title: "Essa é a segunda etapa (type: wait) com descricao",
+            description: "Descricao de exemplo",
+            type: "wait",
+        },
+        {
+            title: "Essa é uma terceira etapa (type: wait) com uma ação",
+            description: "Descricao de exemplo",
+            action: {
+                label: "Clique em mim",
+                onClick: () => alert("Quem mandou??? xD"),
+            },
+            type: "wait",
+        },
+        {
+            title: "Essa é uma ultima etapa (type: final)",
+            description: "que vai sobrepor todas as outras",
+            action: {
+                label: "Clique em mim",
+                onClick: () => alert("Denovo??? xD"),
+            },
+            type: "final",
+        },
+    ];
+    (0, react_1.useEffect)(() => {
+        setInterval(() => {
+            setCurrStep((p) => (p < 3 ? p + 1 : 0));
+        }, 3000);
+    }, []);
+    return react_1.default.createElement(ProgressTexts_1.default, { steps: etapas, currentStep: currStep });
+}
+exports.ExemploCompleto = ExemploCompleto;
+const Primary = (args) => react_1.default.createElement(ProgressTexts_1.default, Object.assign({}, args));
+exports.Primary = Primary;
+exports.Primary.args = {
+    currentStep: 0,
+    steps: [
+        {
+            title: "Titulo 1",
+            type: "final",
+        },
+        {
+            title: "Titulo 2",
+            type: "final",
+        },
+    ],
+};
+//# sourceMappingURL=ProgressTexts.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressTexts.stories.js","sourceRoot":"","sources":["../../../src/components/ProgressTexts/ProgressTexts.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmE;AACnE,oEAAgC;AAEhC,kBAAe;IACb,SAAS,EAAE,uBAAC;IACZ,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEF,SAAgB,eAAe;IAC7B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAsC;QAChD;YACE,KAAK,EAAE,sCAAsC;YAC7C,IAAI,EAAE,MAAM;SACb;QACD;YACE,KAAK,EAAE,mDAAmD;YAC1D,WAAW,EAAE,sBAAsB;YACnC,IAAI,EAAE,MAAM;SACb;QACD;YACE,KAAK,EAAE,qDAAqD;YAC5D,WAAW,EAAE,sBAAsB;YACnC,MAAM,EAAE;gBACN,KAAK,EAAE,eAAe;gBACtB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC;aAC1C;YACD,IAAI,EAAE,MAAM;SACb;QACD;YACE,KAAK,EAAE,uCAAuC;YAC9C,WAAW,EAAE,kCAAkC;YAC/C,MAAM,EAAE;gBACN,KAAK,EAAE,eAAe;gBACtB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;aACrC;YACD,IAAI,EAAE,OAAO;SACd;KACF,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,WAAW,CAAC,GAAG,EAAE;YACf,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,8BAAC,uBAAC,IAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,GAAI,CAAC;AACrD,CAAC;AAtCD,0CAsCC;AAEM,MAAM,OAAO,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,8BAAC,uBAAC,oBAAK,IAAI,EAAI,CAAC;AAAzC,QAAA,OAAO,WAAkC;AACtD,eAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,CAAC;IACd,KAAK,EAAE;QACL;YACE,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,OAAO;SACd;QACD;YACE,KAAK,EAAE,UAAU;YACjB,IAAI,EAAE,OAAO;SACd;KACF;CACmC,CAAC"}

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

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

package/dist/components/ProgressTexts/ProgressTexts.test.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const ProgressTexts_1 = __importDefault(require("./ProgressTexts"));
+const ProgressTexts_module_scss_1 = __importDefault(require("./ProgressTexts.module.scss"));
+const CURRENT_STEPS = [
+    {
+        title: "First",
+        type: "wait",
+    },
+    {
+        title: "Second",
+        type: "wait",
+    },
+    {
+        title: "Final",
+        type: "final",
+    },
+];
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(ProgressTexts_1.default, Object.assign({}, props)));
+}
+it("Should at least render :)", () => {
+    renderScreen({ steps: CURRENT_STEPS, currentStep: 0 });
+});
+it("Lodash get works fine with undefined objects", () => {
+    expect(require("lodash").get(undefined, "someprop", "default")).toEqual("default");
+});
+it("Should display the previous steps as gray", () => {
+    const w = renderScreen({ steps: CURRENT_STEPS, currentStep: 1 });
+    const firstText = w.getByText("First");
+    const secondtext = w.getByText("Second");
+    expect(firstText.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.disabled);
+    expect(secondtext.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.loading);
+});
+it("When a new progress of type final is pushed, it should remove the previous elements", () => {
+    const w = renderScreen({ steps: CURRENT_STEPS, currentStep: 2 });
+    const firstText = w.getByText("First");
+    const secondtext = w.getByText("Second");
+    const finalText = w.getByText("Final");
+    expect(firstText.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.disabled);
+    expect(firstText.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.hidden);
+    expect(secondtext.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.disabled);
+    expect(secondtext.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.hidden);
+    expect(finalText.parentElement.classList).toContain(ProgressTexts_module_scss_1.default.container);
+});
+it.todo("Should animate loading indication under the text to indicate progress");
+//# sourceMappingURL=ProgressTexts.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressTexts.test.js","sourceRoot":"","sources":["../../../src/components/ProgressTexts/ProgressTexts.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,oEAAwC;AACxC,4FAAiD;AAEjD,MAAM,aAAa,GAAG;IACpB;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,MAAM;KACb;IACD;QACE,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,MAAM;KACb;IACD;QACE,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO;KACd;CACiD,CAAC;AAErD,SAAS,YAAY,CAAC,KAA6C;IACjE,OAAO,IAAA,cAAM,EAAC,8BAAC,uBAAS,oBAAK,KAAK,EAAI,CAAC,CAAC;AAC1C,CAAC;AAED,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACnC,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC;AACzD,CAAC,CAAC,CAAC;AACH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;IACtD,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;AACpF,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,2CAA2C,EAAE,GAAG,EAAE;IACnD,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,CAAC,SAAS,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,QAAQ,CAAC,CAAC;IACtE,MAAM,CAAC,UAAU,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,OAAO,CAAC,CAAC;AACxE,CAAC,CAAC,CAAC;AACH,EAAE,CAAC,qFAAqF,EAAE,GAAG,EAAE;IAC7F,MAAM,CAAC,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,MAAM,CAAC,SAAS,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,QAAQ,CAAC,CAAC;IACtE,MAAM,CAAC,SAAS,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,MAAM,CAAC,CAAC;IAEpE,MAAM,CAAC,UAAU,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,QAAQ,CAAC,CAAC;IACvE,MAAM,CAAC,UAAU,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,MAAM,CAAC,CAAC;IAErE,MAAM,CAAC,SAAS,CAAC,aAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,mCAAM,CAAC,SAAS,CAAC,CAAC;AACzE,CAAC,CAAC,CAAC;AACH,EAAE,CAAC,IAAI,CACL,uEAAuE,CACxE,CAAC"}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ProgressTexts/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iDAA0C;AAAjC,yHAAA,OAAO,OAAA"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from "react";
+import Input from "../Input";
+export declare type SelectItem = {
+    label: string;
+    value: string;
+};
+/**
+ * A dropdown select
+ **/
+declare function Select<I extends SelectItem>({ items, selected, label, onClick, loading, ...otherProps }: {
+    loading?: boolean;
+    items: Readonly<I[]>;
+    onClick: (i: I) => void;
+} & ({
+    selected?: I["value"];
+    label: string;
+} | {
+    selected: I["value"];
+    label?: string;
+}) & Omit<ComponentProps<typeof Input>, "selected" | "onClick">): JSX.Element;
+declare const _default: typeof Select;
+export default _default;