@onepercentio/one-ui 0.1.2

package/dist/components/Input/Input.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const Input_1 = __importDefault(require("./Input"));
+exports.default = {
+    component: Input_1.default,
+    title: "Input simples",
+};
+const Primary = (args) => react_1.default.createElement(Input_1.default, Object.assign({}, args));
+exports.Primary = Primary;
+exports.Primary.args = {
+    disclaimer: "Some disclaimer info",
+    error: "Some error that only shows when unfocused",
+    autoFocus: true,
+    hideError: "onfocus",
+};
+//# sourceMappingURL=Input.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,oDAAwC;AAExC,kBAAe;IACb,SAAS,EAAE,eAAC;IACZ,KAAK,EAAE,eAAe;CACvB,CAAC;AAEK,MAAM,OAAO,GAAG,CAAC,IAAgB,EAAE,EAAE,CAAC,8BAAC,eAAC,oBAAK,IAAI,EAAI,CAAC;AAAhD,QAAA,OAAO,WAAyC;AAE7D,eAAO,CAAC,IAAI,GAAG;IACb,UAAU,EAAE,sBAAsB;IAClC,KAAK,EAAE,2CAA2C;IAClD,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,SAAS;CACP,CAAC"}

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

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

package/dist/components/Input/Input.test.js

@@ -0,0 +1,54 @@
+"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 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Input_1 = __importStar(require("./Input"));
+it("Should at least render :)", () => {
+    (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
+});
+it("Should be able to show errors based on prop", () => {
+    const w = (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
+    expect(w.queryByTestId(Input_1.InputTestIds.ERROR)).toBeNull();
+    w.rerender(react_1.default.createElement(Input_1.default, { error: "Some obnoxious error" }));
+    expect(w.getByTestId(Input_1.InputTestIds.ERROR).textContent).toEqual("Some obnoxious error");
+});
+describe("Disclaimer", () => {
+    it("Should not show disclaimer if not provided", () => {
+        const { queryByTestId } = (0, react_2.render)(react_1.default.createElement(Input_1.default, null));
+        const disclaimerEl = queryByTestId(Input_1.InputTestIds.DISCLAIMER);
+        expect(disclaimerEl).toBeNull();
+    });
+    it("Should show the disclaimer when there is no error", () => {
+        const exampleDisclaimer = "DISCLAIMER";
+        const exampleError = "ERROR";
+        const { getByTestId, queryByTestId, rerender } = (0, react_2.render)(react_1.default.createElement(Input_1.default, { disclaimer: exampleDisclaimer }));
+        getByTestId(Input_1.InputTestIds.DISCLAIMER);
+        expect(queryByTestId(Input_1.InputTestIds.ERROR)).toBeNull();
+        rerender(react_1.default.createElement(Input_1.default, { disclaimer: exampleDisclaimer, error: exampleError }));
+        getByTestId(Input_1.InputTestIds.ERROR);
+        expect(queryByTestId(Input_1.InputTestIds.DISCLAIMER)).toBeNull();
+    });
+});
+//# sourceMappingURL=Input.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.test.js","sourceRoot":"","sources":["../../../src/components/Input/Input.test.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,iDAAkD;AAElD,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACnC,IAAA,cAAM,EAAC,8BAAC,eAAS,OAAG,CAAC,CAAC;AACxB,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;IACrD,MAAM,CAAC,GAAG,IAAA,cAAM,EAAC,8BAAC,eAAS,OAAG,CAAC,CAAC;IAChC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACvD,CAAC,CAAC,QAAQ,CAAC,8BAAC,eAAS,IAAC,KAAK,EAAC,sBAAsB,GAAG,CAAC,CAAC;IACvD,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,CAAC,OAAO,CAC3D,sBAAsB,CACvB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,4CAA4C,EAAE,GAAG,EAAE;QACpD,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,eAAS,OAAG,CAAC,CAAC;QAChD,MAAM,YAAY,GAAG,aAAa,CAAC,oBAAY,CAAC,UAAU,CAAC,CAAC;QAC5D,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE,CAAC;IAClC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,mDAAmD,EAAE,GAAG,EAAE;QAC3D,MAAM,iBAAiB,GAAG,YAAY,CAAC;QACvC,MAAM,YAAY,GAAG,OAAO,CAAC;QAC7B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAA,cAAM,EACrD,8BAAC,eAAS,IAAC,UAAU,EAAE,iBAAiB,GAAI,CAC7C,CAAC;QACF,WAAW,CAAC,oBAAY,CAAC,UAAU,CAAC,CAAC;QACrC,MAAM,CAAC,aAAa,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;QAErD,QAAQ,CAAC,8BAAC,eAAS,IAAC,UAAU,EAAE,iBAAiB,EAAE,KAAK,EAAE,YAAY,GAAI,CAAC,CAAC;QAC5E,WAAW,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,CAAC,aAAa,CAAC,oBAAY,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAAkC;AAAzB,iHAAA,OAAO,OAAA"}

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A simple loader
+ **/
+export default function Loader({ className }: {
+    className?: string;
+}): JSX.Element;

package/dist/components/Loader/Loader.js

@@ -0,0 +1,18 @@
+"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 Loader_module_scss_1 = __importDefault(require("./Loader.module.scss"));
+/**
+ * A simple loader
+ **/
+function Loader({ className = "" }) {
+    return (react_1.default.createElement("span", { className: `${Loader_module_scss_1.default.indicator} ${className}` },
+        react_1.default.createElement("span", null),
+        react_1.default.createElement("span", null),
+        react_1.default.createElement("span", null)));
+}
+exports.default = Loader;
+//# sourceMappingURL=Loader.js.map

package/dist/components/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,8EAA0C;AAE1C;;IAEI;AACJ,SAAwB,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,EAA0B;IACvE,OAAO,CACL,wCAAM,SAAS,EAAE,GAAG,4BAAM,CAAC,SAAS,IAAI,SAAS,EAAE;QACjD,2CAAQ;QACR,2CAAQ;QACR,2CAAQ,CACH,CACR,CAAC;AACJ,CAAC;AARD,yBAQC"}

package/dist/components/Loader/Loader.module.scss

@@ -0,0 +1,40 @@
+@import "../../assets/styles/variables.scss";
+
+.indicator {
+  white-space: nowrap;
+  font-size: 14px;
+  & span {
+    display: inline-block;
+    width: 0.75em;
+    height: 0.75em;
+    border-radius: 0.375em;
+    margin-left: 4px;
+    background-color: $digitalBlue;
+    animation-name: transparentToOpaque;
+    animation-duration: $normal;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-out;
+    &:nth-child(1) {
+      margin-left: initial;
+      animation-delay: 0;
+    }
+    &:nth-child(2) {
+      animation-delay: $veryFast;
+    }
+    &:nth-child(3) {
+      animation-delay: $fast;
+    }
+  }
+}
+
+@keyframes transparentToOpaque {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

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

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

package/dist/components/Loader/Loader.stories.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const Loader_1 = __importDefault(require("./Loader"));
+exports.default = {
+    component: Loader_1.default,
+    title: "Loader"
+};
+const InitialImplementation = (args) => react_1.default.createElement(Loader_1.default, Object.assign({}, args));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {};
+//# sourceMappingURL=Loader.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.stories.js","sourceRoot":"","sources":["../../../src/components/Loader/Loader.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sDAA8B;AAE9B,kBAAe;IACX,SAAS,EAAE,gBAAM;IACjB,KAAK,EAAE,QAAQ;CAClB,CAAA;AAEM,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,8BAAC,gBAAM,oBAAK,IAAI,EAAG,CAAC;AAA3D,QAAA,qBAAqB,yBAAsC;AACxE,6BAAqB,CAAC,IAAI,GAAG,EAAkD,CAAA"}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Loader/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mCAAmC;AAA1B,kHAAA,OAAO,OAAA"}

package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.d.ts

@@ -0,0 +1,6 @@
+/**
+ * . .. ... . .. ...
+ **/
+export default function LoaderDotsIndicator({ dotsCount, }: {
+    dotsCount?: number;
+}): JSX.Element;

package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.js

@@ -0,0 +1,38 @@
+"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"));
+/**
+ * . .. ... . .. ...
+ **/
+function LoaderDotsIndicator({ dotsCount = 3, }) {
+    const [text, setText] = (0, react_1.useState)(".");
+    (0, react_1.useEffect)(() => {
+        const fullText = new Array(dotsCount).fill(".").join("");
+        const intervalId = setInterval(() => {
+            setText((a) => (a === fullText ? "." : a + "."));
+        }, 250);
+        return () => clearInterval(intervalId);
+    }, [dotsCount]);
+    return react_1.default.createElement(react_1.default.Fragment, null, text);
+}
+exports.default = LoaderDotsIndicator;
+//# sourceMappingURL=LoaderDotsIndicator.js.map

package/dist/components/LoaderDotsIndicator/LoaderDotsIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderDotsIndicator.js","sourceRoot":"","sources":["../../../src/components/LoaderDotsIndicator/LoaderDotsIndicator.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AAEnD;;IAEI;AACJ,SAAwB,mBAAmB,CAAC,EAC1C,SAAS,GAAG,CAAC,GAGd;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,CAAC,CAAC;IACtC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACnD,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,8DAAG,IAAI,CAAI,CAAC;AACrB,CAAC;AAhBD,sCAgBC"}

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

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

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

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

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

package/dist/components/MainGrid/MainGrid.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<{
+    leftContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    rightContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+} & React.RefAttributes<{
+    setOrientation: (orientation: "forward" | "backward") => void;
+}>>;
+export default _default;

package/dist/components/MainGrid/MainGrid.js

@@ -0,0 +1,52 @@
+"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 UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const MainGrid_module_scss_1 = __importDefault(require("./MainGrid.module.scss"));
+/**
+ * This layout provides 3 parts to compose screens
+ **/
+function MainGrid({ children, leftContent, rightContent, }, ref) {
+    const refs = [
+        (0, react_1.useRef)(null),
+        (0, react_1.useRef)(null),
+        (0, react_1.useRef)(null),
+    ];
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setOrientation: (orientation) => {
+            refs.forEach((r) => { var _a; return (_a = r.current) === null || _a === void 0 ? void 0 : _a.setOrientation(orientation); });
+        },
+    }), []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: MainGrid_module_scss_1.default.container },
+            react_1.default.createElement("div", { className: leftContent ? MainGrid_module_scss_1.default.content : "" },
+                react_1.default.createElement(UncontrolledTransition_1.default, { className: MainGrid_module_scss_1.default.section, ref: refs[0] }, leftContent)),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(UncontrolledTransition_1.default, { className: MainGrid_module_scss_1.default.section, ref: refs[1] }, children)),
+            react_1.default.createElement("div", { className: rightContent ? MainGrid_module_scss_1.default.content : "" },
+                react_1.default.createElement(UncontrolledTransition_1.default, { className: MainGrid_module_scss_1.default.section, ref: refs[2] }, rightContent)))));
+}
+exports.default = (0, react_1.forwardRef)(MainGrid);
+//# sourceMappingURL=MainGrid.js.map

package/dist/components/MainGrid/MainGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainGrid.js","sourceRoot":"","sources":["../../../src/components/MainGrid/MainGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,uFAA+D;AAC/D,kFAA4C;AAE5C;;IAEI;AACJ,SAAS,QAAQ,CACf,EACE,QAAQ,EACR,WAAW,EACX,YAAY,GAKb,EACD,GAA4D;IAE5D,MAAM,IAAI,GAAG;QACX,IAAA,cAAM,EAA4C,IAAI,CAAC;QACvD,IAAA,cAAM,EAA4C,IAAI,CAAC;QACvD,IAAA,cAAM,EAA4C,IAAI,CAAC;KACxD,CAAC;IAEF,IAAA,2BAAmB,EACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,CAAC,WAAW,EAAE,EAAE;YAC9B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,OAAO,0CAAE,cAAc,CAAC,WAAW,CAAC,CAAA,EAAA,CAAC,CAAC;QAC9D,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL;QACE,uCAAK,SAAS,EAAE,8BAAM,CAAC,SAAS;YAC9B,uCAAK,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,8BAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAC/C,8BAAC,gCAAsB,IAAC,SAAS,EAAE,8BAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,IAC5D,WAAW,CACW,CACrB;YACN;gBACE,8BAAC,gCAAsB,IAAC,SAAS,EAAE,8BAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,IAC5D,QAAQ,CACc,CACrB;YACN,uCAAK,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,8BAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAChD,8BAAC,gCAAsB,IAAC,SAAS,EAAE,8BAAM,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,IAC5D,YAAY,CACU,CACrB,CACF,CACL,CACJ,CAAC;AACJ,CAAC;AAED,kBAAe,IAAA,kBAAU,EAAC,QAAQ,CAAC,CAAC"}

package/dist/components/MainGrid/MainGrid.module.scss

@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  // TODO: Priorize reducing width of empty elements insteas of the main container
+  > :nth-child(1),
+  > :nth-child(3) {
+    flex: 1;
+    max-width: 250px;
+    min-width: 150px;
+  }
+
+  .content {
+    min-width: 250px;
+  }
+
+  > :nth-child(2) {
+    flex: 1;
+    max-width: 1200px;
+  }
+}
+
+.section {
+  align-items: flex-start;
+  min-height: initial;
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare const _default: {
+    component: React.ForwardRefExoticComponent<{
+        leftContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        rightContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        children: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    } & React.RefAttributes<{
+        setOrientation: (orientation: "forward" | "backward") => void;
+    }>>;
+    title: string;
+};
+export default _default;
+export declare const ExemploTransicao: () => JSX.Element;

package/dist/components/MainGrid/MainGrid.stories.js

@@ -0,0 +1,66 @@
+"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.ExemploTransicao = void 0;
+const react_1 = __importStar(require("react"));
+const MainGrid_1 = __importDefault(require("./MainGrid"));
+exports.default = {
+    component: MainGrid_1.default,
+    title: "Main grid",
+};
+const ExemploTransicao = () => {
+    const [counter, setCounter] = (0, react_1.useState)(20);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("keydown", ({ key }) => {
+            if (key === "ArrowRight")
+                setCounter((a) => a + 1);
+            else if (key === "ArrowLeft") {
+                ref.current.setOrientation("backward");
+                setCounter((a) => a - 1);
+            }
+        });
+    }, []);
+    const tenth = Math.floor(counter / 5);
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "lightblue",
+            display: "flex",
+            alignItems: "stretch",
+            justifyContent: "center",
+            flexDirection: "column",
+        } },
+        react_1.default.createElement("h1", { style: { textAlign: "center" }, key: counter },
+            counter,
+            " Press any key to increment the counter and change state"),
+        react_1.default.createElement(MainGrid_1.default, { ref: ref, leftContent: tenth % 2 === 0 ? (react_1.default.createElement("h1", { style: { backgroundColor: "lightsalmon" }, key: tenth },
+                tenth,
+                " This shows only on multiples of 10")) : undefined, rightContent: Math.random() > 0.05 ? (react_1.default.createElement("h1", { style: { backgroundColor: "lightskyblue" }, key: tenth },
+                tenth,
+                " And me??? I come and go in a chaotic manner")) : undefined },
+            react_1.default.createElement("h1", { style: { textAlign: "center", backgroundColor: "lightyellow" }, key: String(tenth) },
+                tenth,
+                " This increments on multiples of 5"))));
+};
+exports.ExemploTransicao = ExemploTransicao;
+//# sourceMappingURL=MainGrid.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MainGrid.stories.js","sourceRoot":"","sources":["../../../src/components/MainGrid/MainGrid.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuE;AACvE,0DAAkC;AAElC,kBAAe;IACb,SAAS,EAAE,kBAAQ;IACnB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEK,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,GAAG,GAAG,IAAA,cAAM,EAA8B,IAAI,CAAC,CAAC;IAEtD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;YAC7C,IAAI,GAAG,KAAK,YAAY;gBAAE,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;iBAC9C,IAAI,GAAG,KAAK,WAAW,EAAE;gBAC5B,GAAG,CAAC,OAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;gBACxC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;IAEtC,OAAO,CACL,uCACE,KAAK,EAAE;YACL,eAAe,EAAE,WAAW;YAC5B,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,SAAS;YACrB,cAAc,EAAE,QAAQ;YACxB,aAAa,EAAE,QAAQ;SACxB;QAED,sCAAI,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,OAAO;YAC7C,OAAO;uEACL;QACL,8BAAC,kBAAQ,IACP,GAAG,EAAE,GAAG,EACR,WAAW,EACT,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAChB,sCAAI,KAAK,EAAE,EAAC,eAAe,EAAE,aAAa,EAAC,EAAE,GAAG,EAAE,KAAK;gBAAG,KAAK;sDAAyC,CACzG,CAAC,CAAC,CAAC,SAAS,EAEf,YAAY,EACV,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAE,CAAC,CAAC,CACtB,sCAAI,KAAK,EAAE,EAAC,eAAe,EAAE,cAAc,EAAC,EAAE,GAAG,EAAE,KAAK;gBAAG,KAAK;+DAAkD,CACnH,CAAC,CAAC,CAAC,SAAS;YAGf,sCACE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,aAAa,EAAE,EAC9D,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC;gBAEjB,KAAK;qDACH,CACI,CACP,CACP,CAAC;AACJ,CAAC,CAAC;AAnDW,QAAA,gBAAgB,oBAmD3B"}

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

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

package/dist/components/MainGrid/MainGrid.test.js

@@ -0,0 +1,18 @@
+"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 MainGrid_1 = __importDefault(require("./MainGrid"));
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(MainGrid_1.default, Object.assign({}, props)));
+}
+it('Should at least render :)', () => {
+    renderScreen({
+        children: react_1.default.createElement("h1", null, "Hey mama")
+    });
+});
+it.todo("Should transition from one element to another correctly");
+//# sourceMappingURL=MainGrid.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MainGrid.test.js","sourceRoot":"","sources":["../../../src/components/MainGrid/MainGrid.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,0DAAmC;AAEnC,SAAS,YAAY,CAAC,KAA6C;IACjE,OAAO,IAAA,cAAM,EAAC,8BAAC,kBAAS,oBAAK,KAAK,EAAG,CAAC,CAAC;AACzC,CAAC;AAED,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACjC,YAAY,CAAC;QACX,QAAQ,EAAE,qDAAiB;KAC5B,CAAC,CAAC;AACP,CAAC,CAAC,CAAA;AAEF,EAAE,CAAC,IAAI,CAAC,yDAAyD,CAAC,CAAC"}

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MainGrid/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hamburger button that mutates according to it's state
+ **/
+export default function MutableHamburgerButton({ state, size, }: {
+    state?: "default" | "closed" | "arrow-up" | "arrow-down";
+    size: number;
+}): JSX.Element;

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.js

@@ -0,0 +1,18 @@
+"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 MutableHamburgerButton_module_scss_1 = __importDefault(require("./MutableHamburgerButton.module.scss"));
+/**
+ * A hamburger button that mutates according to it's state
+ **/
+function MutableHamburgerButton({ state = "default", size, }) {
+    return (react_1.default.createElement("div", { className: `${MutableHamburgerButton_module_scss_1.default.container} ${MutableHamburgerButton_module_scss_1.default[state]}`, style: { fontSize: `${size}px` } },
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null),
+        react_1.default.createElement("div", null)));
+}
+exports.default = MutableHamburgerButton;
+//# sourceMappingURL=MutableHamburgerButton.js.map

package/dist/components/MutableHamburgerButton/MutableHamburgerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MutableHamburgerButton.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,8GAA0D;AAE1D;;IAEI;AACJ,SAAwB,sBAAsB,CAAC,EAC7C,KAAK,GAAG,SAAS,EACjB,IAAI,GAIL;IACC,OAAO,CACL,uCACE,SAAS,EAAE,GAAG,4CAAM,CAAC,SAAS,IAAI,4CAAM,CAAC,KAAK,CAAC,EAAE,EACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE;QAEhC,0CAAO;QACP,0CAAO;QACP,0CAAO,CACH,CACP,CAAC;AACJ,CAAC;AAjBD,yCAiBC"}